/* global React */
// Brand mark — original stylization of overlapping gold + green window frames.
// Not a trace of any copyrighted logo; built from first principles with brand colors.
const BrandMark = ({ size = 34, variant = 'light' }) => {
  const uid = React.useId ? React.useId().replace(/:/g, '') : Math.random().toString(36).slice(2);
  const gold = `${uid}-gold`;
  const green = `${uid}-green`;
  const glass = variant === 'dark' ? '#17382D' : '#F7F5F2';
  return (
    <svg className="brand-mark" width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <defs>
        <linearGradient id={gold} x1="7" y1="5" x2="29" y2="43" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#E0B66E" />
          <stop offset="0.48" stopColor="#B88A3B" />
          <stop offset="1" stopColor="#7D561F" />
        </linearGradient>
        <linearGradient id={green} x1="18" y1="5" x2="42" y2="43" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#245945" />
          <stop offset="0.58" stopColor="#0F2B22" />
          <stop offset="1" stopColor="#071711" />
        </linearGradient>
        <filter id={`${uid}-shadow`} x="2" y="3" width="44" height="43" colorInterpolationFilters="sRGB">
          <feDropShadow dx="0" dy="2" stdDeviation="1.4" floodColor="#0F2B22" floodOpacity="0.18" />
        </filter>
      </defs>
      <g filter={`url(#${uid}-shadow)`}>
        <path d="M6 6h22v7H13v22h15v7H6V6Z" fill={`url(#${gold})`} />
        <path d="M20 6h22v36H20v-7h15V13H20V6Z" fill={`url(#${green})`} />
        <path d="M15 15h12v18H15V15Z" fill={`url(#${gold})`} />
        <path d="M21 15h12v18H21V15Z" fill={`url(#${green})`} />
        <path d="M18 18h4v5h-4v-5Zm0 8h4v4h-4v-4Zm8-8h4v5h-4v-5Zm0 8h4v4h-4v-4Z" fill={glass} opacity="0.96" />
        <path d="M24 14v20" stroke="#F7F5F2" strokeOpacity="0.88" strokeWidth="2" />
        <path d="M9 9h17M23 9h16M9 39h17M23 39h16" stroke="#F7F5F2" strokeOpacity="0.22" strokeWidth="1.2" strokeLinecap="round" />
      </g>
    </svg>
  );
};

const Logo = ({ variant = 'light', size = 34 }) => (
  <div className="logo-lockup">
    <span className="brand-mark-shell" style={{ width: size, height: size }}>
      <img src="assets/kozijnsuite-mark.svg" alt="" aria-hidden="true" />
    </span>
    <span className="brand-word" style={{ color: variant === 'dark' ? '#F7F5F2' : '#0F2B22' }}>
      Kozijn<span className="suite">Suite</span>
    </span>
  </div>
);

// Tiny inline icons (stroke-based, neutral set)
const Ic = {
  arrow: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  play: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="currentColor" {...p}><path d="M6 4.5v11l9-5.5-9-5.5z"/></svg>,
  check: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M4 10.5l3.5 3.5L16 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  chevron: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M7 5l6 5-6 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  chevronDown: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M5 7l5 6 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  dot: (p) => <svg viewBox="0 0 20 20" width="10" height="10" {...p}><circle cx="10" cy="10" r="4" fill="currentColor"/></svg>,
  dashboard: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><rect x="3" y="3" width="6" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><rect x="11" y="3" width="6" height="5" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><rect x="3" y="13" width="6" height="4" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><rect x="11" y="10" width="6" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.4"/></svg>,
  file: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M5 3h7l3 3v11a1 1 0 01-1 1H5a1 1 0 01-1-1V4a1 1 0 011-1z" stroke="currentColor" strokeWidth="1.4"/><path d="M12 3v4h3" stroke="currentColor" strokeWidth="1.4"/></svg>,
  folder: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M3 6a1 1 0 011-1h4l2 2h6a1 1 0 011 1v7a1 1 0 01-1 1H4a1 1 0 01-1-1V6z" stroke="currentColor" strokeWidth="1.4"/></svg>,
  cal: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><rect x="3" y="5" width="14" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M3 9h14M7 3v4M13 3v4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
  users: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><circle cx="7" cy="8" r="3" stroke="currentColor" strokeWidth="1.4"/><path d="M2 17c.7-2.8 2.8-4.5 5-4.5s4.3 1.7 5 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/><circle cx="14" cy="7" r="2.2" stroke="currentColor" strokeWidth="1.4"/><path d="M13 12.2c.3-.1.6-.2 1-.2 2 0 3.6 1.4 4.1 3.3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
  box: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M10 3l7 3.5v7L10 17 3 13.5v-7L10 3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M3 6.5l7 3.5 7-3.5M10 10v7" stroke="currentColor" strokeWidth="1.4"/></svg>,
  wrench: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M12 3a4 4 0 014 5l3 3-3 3-3-3a4 4 0 01-5-4 4 4 0 014-4zm-4 9l-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  bag: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M4 6h12l-1 11H5L4 6z" stroke="currentColor" strokeWidth="1.4"/><path d="M7 6V4.5a3 3 0 016 0V6" stroke="currentColor" strokeWidth="1.4"/></svg>,
  chart: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M3 15l5-5 3 3 6-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><path d="M13 6h4v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  shield: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M10 2l6 2v6c0 4-3 7-6 8-3-1-6-4-6-8V4l6-2z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>,
  star: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="currentColor" {...p}><path d="M10 2l2.5 5.5L18 8l-4.2 4 1 5.8L10 15l-4.8 2.8 1-5.8L2 8l5.5-.5L10 2z"/></svg>,
  search: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><circle cx="9" cy="9" r="5" stroke="currentColor" strokeWidth="1.5"/><path d="M13 13l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
  bell: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M5 14V9a5 5 0 0110 0v5l1 2H4l1-2z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M8.5 17a1.8 1.8 0 003 0" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
  plus: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  download: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M10 3v10m0 0l-4-4m4 4l4-4M4 17h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  mail: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><rect x="3" y="5" width="14" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M3 6l7 5 7-5" stroke="currentColor" strokeWidth="1.4"/></svg>,
  phone: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M5 3h3l1.5 4L7 9a8 8 0 004 4l2-2.5L17 12v3a2 2 0 01-2 2A12 12 0 013 5a2 2 0 012-2z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>,
  home: (p) => <svg viewBox="0 0 20 20" width="14" height="14" fill="none" {...p}><path d="M3 10l7-6 7 6v7a1 1 0 01-1 1h-3v-5h-6v5H4a1 1 0 01-1-1v-7z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>,
  menu: (p) => <svg viewBox="0 0 20 20" width="16" height="16" fill="none" {...p}><path d="M3 6h14M3 10h14M3 14h14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
  external: (p) => <svg viewBox="0 0 20 20" width="12" height="12" fill="none" {...p}><path d="M8 4H4v12h12v-4M12 4h4v4M10 10l6-6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

Object.assign(window, { BrandMark, Logo, Ic });
