/* Original flat-vector illustrations — geometric, faceless, in-palette. */

const PALETTE = {
  ink: '#0B1B26',
  primary: '#0F2A3F',
  primary2: '#163A55',
  accent: '#C8553D',
  bg: '#FAF9F6',
  bg2: '#F3EFE6',
  hair: '#E5DFD0',
  muted: '#5A6B78',
};

/* Background "connected store nodes" pattern, used behind hero right column */
function NodeWeb({ width = 720, height = 540, opacity = 1 }) {
  const c = PALETTE;
  const nodes = [
    { x: 110, y: 90, r: 6 },
    { x: 240, y: 200, r: 10 },
    { x: 380, y: 110, r: 7 },
    { x: 520, y: 240, r: 9 },
    { x: 640, y: 130, r: 6 },
    { x: 180, y: 360, r: 7 },
    { x: 340, y: 430, r: 11 },
    { x: 480, y: 380, r: 7 },
    { x: 600, y: 460, r: 6 },
    { x: 70,  y: 240, r: 5 },
  ];
  const links = [
    [0,1],[1,2],[2,3],[3,4],[1,5],[5,6],[6,7],[7,8],[3,7],[2,4],[1,3],[5,1],[6,3],[0,2],[9,1],[9,5],[4,7],
  ];
  return (
    <svg width={width} height={height} viewBox="0 0 720 540" style={{ opacity }} aria-hidden="true">
      <defs>
        <radialGradient id="nodefade" cx="50%" cy="50%" r="60%">
          <stop offset="0%" stopColor={c.primary} stopOpacity="0.5"/>
          <stop offset="100%" stopColor={c.primary} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="720" height="540" fill="url(#nodefade)" opacity=".18"/>
      {links.map(([a,b], i) => (
        <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y}
              stroke={c.primary} strokeWidth="0.7" strokeDasharray="3 4" opacity=".5"/>
      ))}
      {nodes.map((n,i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r={n.r + 4} fill={c.primary} opacity=".06"/>
          <circle cx={n.x} cy={n.y} r={n.r} fill={c.bg} stroke={c.primary} strokeWidth="1.2"/>
          {i === 6 && <circle cx={n.x} cy={n.y} r={n.r - 3} fill={c.accent}/>}
        </g>
      ))}
    </svg>
  );
}

/* Problem 1: multiple browser windows fanned out */
function IllusWindows() {
  const c = PALETTE;
  return (
    <svg viewBox="0 0 220 160" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      {[0,1,2,3].map(i => {
        const tx = 18 + i * 18;
        const ty = 70 - i * 12;
        const rot = -8 + i * 4;
        return (
          <g key={i} transform={`translate(${tx} ${ty}) rotate(${rot})`}>
            <rect x="0" y="0" width="130" height="84" rx="6" fill={c.bg} stroke={c.primary} strokeWidth="1"/>
            <rect x="0" y="0" width="130" height="14" rx="6" fill={c.bg2}/>
            <rect x="0" y="8" width="130" height="6" fill={c.bg2}/>
            <circle cx="6" cy="7" r="1.6" fill={c.hair}/>
            <circle cx="11" cy="7" r="1.6" fill={c.hair}/>
            <circle cx="16" cy="7" r="1.6" fill={c.hair}/>
            <rect x="8" y="22" width="60" height="3" rx="1.5" fill={c.primary} opacity={i===3?1:.35}/>
            <rect x="8" y="30" width="100" height="2" rx="1" fill={c.muted} opacity=".4"/>
            <rect x="8" y="36" width="80" height="2" rx="1" fill={c.muted} opacity=".3"/>
            <rect x="8" y="46" width="40" height="22" rx="3" fill={i === 3 ? c.accent : c.bg2} opacity={i === 3 ? .85 : 1}/>
            <rect x="52" y="46" width="68" height="22" rx="3" fill={c.bg2}/>
            <rect x="8" y="72" width="60" height="2" rx="1" fill={c.muted} opacity=".25"/>
          </g>
        );
      })}
    </svg>
  );
}

/* Problem 2: fragmented data being pulled together */
function IllusFragments() {
  const c = PALETTE;
  return (
    <svg viewBox="0 0 220 160" width="100%" height="100%" aria-hidden="true">
      {/* Outer fragments */}
      <g>
        <rect x="14" y="22" width="46" height="28" rx="4" fill={c.bg2} stroke={c.primary} strokeWidth="1"/>
        <rect x="20" y="30" width="20" height="2" fill={c.primary} opacity=".5"/>
        <rect x="20" y="36" width="32" height="2" fill={c.muted} opacity=".4"/>
        <rect x="20" y="42" width="14" height="2" fill={c.muted} opacity=".4"/>
      </g>
      <g>
        <rect x="160" y="18" width="46" height="28" rx="4" fill={c.bg2} stroke={c.primary} strokeWidth="1"/>
        <circle cx="172" cy="32" r="6" fill="none" stroke={c.accent} strokeWidth="1.5"/>
        <rect x="182" y="28" width="20" height="2" fill={c.primary} opacity=".5"/>
        <rect x="182" y="34" width="14" height="2" fill={c.muted} opacity=".4"/>
      </g>
      <g>
        <rect x="10" y="100" width="46" height="28" rx="4" fill={c.bg2} stroke={c.primary} strokeWidth="1"/>
        <rect x="16" y="108" width="34" height="3" fill={c.accent} opacity=".7"/>
        <rect x="16" y="115" width="22" height="2" fill={c.muted} opacity=".4"/>
        <rect x="16" y="120" width="28" height="2" fill={c.muted} opacity=".4"/>
      </g>
      <g>
        <rect x="166" y="108" width="40" height="28" rx="4" fill={c.bg2} stroke={c.primary} strokeWidth="1"/>
        <rect x="170" y="114" width="3" height="14" fill={c.primary} opacity=".4"/>
        <rect x="176" y="118" width="3" height="10" fill={c.primary} opacity=".55"/>
        <rect x="182" y="116" width="3" height="12" fill={c.primary} opacity=".7"/>
        <rect x="188" y="112" width="3" height="16" fill={c.accent}/>
        <rect x="194" y="120" width="3" height="8" fill={c.primary} opacity=".4"/>
      </g>

      {/* Lines converging to center */}
      {[
        [37, 50, 110, 78],
        [183, 46, 110, 78],
        [33, 100, 110, 88],
        [186, 108, 110, 88],
      ].map(([x1,y1,x2,y2], i) => (
        <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={c.primary} strokeWidth="0.8" strokeDasharray="2 3" opacity=".45"/>
      ))}

      {/* Center "Mise" hub */}
      <g>
        <rect x="86" y="62" width="48" height="40" rx="6" fill={c.primary}/>
        <rect x="92" y="72" width="36" height="2.5" rx="1" fill={c.bg} opacity=".9"/>
        <rect x="92" y="78" width="22" height="2.5" rx="1" fill={c.bg} opacity=".55"/>
        <rect x="92" y="84" width="30" height="2.5" rx="1" fill={c.accent}/>
        <rect x="92" y="90" width="18" height="2.5" rx="1" fill={c.bg} opacity=".55"/>
      </g>
    </svg>
  );
}

/* Problem 3: magnifying glass over checklist */
function IllusMagnify() {
  const c = PALETTE;
  return (
    <svg viewBox="0 0 220 160" width="100%" height="100%" aria-hidden="true">
      <rect x="36" y="20" width="120" height="124" rx="6" fill={c.bg2} stroke={c.primary} strokeWidth="1"/>
      {[0,1,2,3,4].map(i => (
        <g key={i} transform={`translate(48 ${36 + i * 22})`}>
          <rect width="11" height="11" rx="2.5" fill={i === 2 ? c.bg : c.primary} stroke={c.primary} strokeWidth="1"/>
          {i !== 2 && <path d="M2.4 5.6 L4.6 8 L9 3.2" stroke={c.bg} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>}
          <rect x="20" y="3" width="60" height="2.5" rx="1" fill={c.primary} opacity={i===2 ? 1 : .55}/>
          <rect x="20" y="8.5" width="84" height="2" rx="1" fill={c.muted} opacity=".4"/>
        </g>
      ))}
      {/* magnifier circle hovering over item index 2 */}
      <g transform="translate(118 64)">
        <circle r="36" fill={c.bg} stroke={c.primary} strokeWidth="2"/>
        <circle r="36" fill={c.accent} opacity=".08"/>
        {/* scaled-up checkbox/item under glass */}
        <g transform="translate(-22 -8)">
          <rect width="18" height="18" rx="3" fill={c.bg} stroke={c.accent} strokeWidth="1.6"/>
          <rect x="26" y="4" width="22" height="3" rx="1" fill={c.accent}/>
          <rect x="26" y="11" width="14" height="2.4" rx="1" fill={c.muted} opacity=".55"/>
        </g>
        <line x1="25.5" y1="25.5" x2="46" y2="46" stroke={c.primary} strokeWidth="4" strokeLinecap="round"/>
      </g>
    </svg>
  );
}

/* Architectural diagram for differentiation section */
function ArchDiagram() {
  const c = PALETTE;
  const sources = ['POS', 'Scheduling', 'Food Safety', 'Brand Manual'];
  const outputs = [
    { label: 'Slack alerts', y: 60 },
    { label: 'Daily Brief', y: 100 },
    { label: 'Q&A', y: 140 },
  ];
  return (
    <svg viewBox="0 0 540 400" width="100%" height="100%" aria-hidden="true">
      {/* Source boxes (bottom row) */}
      {sources.map((s, i) => (
        <g key={s} transform={`translate(${30 + i * 122} 320)`}>
          <rect width="100" height="56" rx="8" fill={c.bg} stroke={c.primary} strokeWidth="1"/>
          <text x="50" y="26" textAnchor="middle" fontFamily="'Source Serif 4', serif" fontSize="13" fill={c.primary} fontWeight="500">{s}</text>
          <text x="50" y="42" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="9" fill={c.muted}>SOURCE</text>
        </g>
      ))}
      {/* Arrows up */}
      {sources.map((_, i) => {
        const x = 80 + i * 122;
        return (
          <g key={i}>
            <line x1={x} y1={320} x2={x} y2={232} stroke={c.primary} strokeWidth="1" strokeDasharray="3 3" opacity=".5"/>
            <polygon points={`${x-3},234 ${x+3},234 ${x},228`} fill={c.primary} opacity=".7"/>
          </g>
        );
      })}

      {/* Mise central layer */}
      <g>
        <rect x="22" y="170" width="498" height="60" rx="12" fill={c.primary}/>
        <text x="271" y="200" textAnchor="middle" fontFamily="'Source Serif 4', serif" fontSize="22" fill={c.bg} fontWeight="500" letterSpacing="-0.01em">Mise — operations layer</text>
        <text x="271" y="220" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={c.bg} opacity=".7" letterSpacing="0.06em">REASONING · CITATIONS · MEMORY</text>
        <circle cx="42" cy="200" r="3" fill={c.accent}/>
        <circle cx="500" cy="200" r="3" fill={c.accent}/>
      </g>

      {/* Output arrows */}
      {outputs.map((o, i) => {
        const yStart = 170;
        const yMid = 170 - (i+1) * 28;
        return (
          <g key={o.label}>
            <line x1="271" y1={yStart} x2="271" y2={yMid + 8} stroke={c.accent} strokeWidth="1" opacity=".5"/>
            <line x1="271" y1={yMid + 8} x2={400} y2={yMid + 8} stroke={c.accent} strokeWidth="1" opacity=".5"/>
            <polygon points={`397,${yMid+5} 403,${yMid+8} 397,${yMid+11}`} fill={c.accent}/>
            <text x="265" y={yMid + 4} textAnchor="end" fontFamily="Inter, sans-serif" fontSize="11" fill={c.muted}>{o.label}</text>
          </g>
        );
      })}

      {/* Above-store leader recipient */}
      <g transform="translate(410 70)">
        <rect width="110" height="60" rx="8" fill={c.bg2} stroke={c.primary} strokeWidth="1"/>
        <circle cx="22" cy="30" r="10" fill={c.primary} opacity=".15"/>
        <circle cx="22" cy="26" r="4" fill="none" stroke={c.primary} strokeWidth="1.5"/>
        <path d="M14 38 Q22 32 30 38" fill="none" stroke={c.primary} strokeWidth="1.5"/>
        <text x="40" y="26" fontFamily="'Source Serif 4', serif" fontSize="12" fill={c.primary} fontWeight="500">Above-store</text>
        <text x="40" y="40" fontFamily="'Source Serif 4', serif" fontSize="12" fill={c.primary} fontWeight="500">leader</text>
      </g>

      {/* Top label */}
      <text x="271" y="30" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={c.muted} letterSpacing="0.1em">SYSTEM ARCHITECTURE</text>
      <line x1="22" y1="46" x2="520" y2="46" stroke={c.hair}/>
    </svg>
  );
}

/* Geometric portrait — abstract, no face */
function PortraitGeo() {
  const c = PALETTE;
  return (
    <svg viewBox="0 0 200 200" width="100%" height="100%" aria-hidden="true">
      <rect width="200" height="200" rx="14" fill={c.bg2}/>
      {/* Shoulders */}
      <path d="M20 200 Q20 150 60 140 L140 140 Q180 150 180 200 Z" fill={c.primary}/>
      {/* Head — rounded square */}
      <rect x="64" y="48" width="72" height="86" rx="34" fill={c.accent}/>
      {/* Geometric "hair" overlay */}
      <path d="M64 64 Q64 40 100 40 Q136 40 136 64 L136 80 L64 80 Z" fill={c.primary}/>
      {/* No facial features — just an offset highlight rectangle */}
      <rect x="76" y="92" width="48" height="6" rx="3" fill={c.bg} opacity=".18"/>
      {/* Decorative dot */}
      <circle cx="170" cy="36" r="6" fill={c.accent}/>
      <circle cx="32" cy="178" r="4" fill={c.primary}/>
    </svg>
  );
}

/* Final-CTA background pattern — concentric arcs / store rings */
function CtaPattern() {
  const c = PALETTE;
  return (
    <svg viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" aria-hidden="true">
      <defs>
        <pattern id="dots" width="32" height="32" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1" fill={c.bg}/>
        </pattern>
      </defs>
      <rect width="1200" height="400" fill="url(#dots)" opacity=".4"/>
      {[0,1,2,3,4].map(i => (
        <circle key={i} cx="1100" cy="200" r={70 + i*60} fill="none" stroke={c.bg} strokeWidth="1" opacity={0.25 - i*0.04}/>
      ))}
      {[0,1,2,3].map(i => (
        <circle key={`l${i}`} cx="100" cy="200" r={50 + i*50} fill="none" stroke={c.accent} strokeWidth="1" opacity={0.3 - i*0.06}/>
      ))}
    </svg>
  );
}

/* Brand & integration logo placeholders — abstract marks */
function BrandMark({ kind, label }) {
  const c = PALETTE;
  const w = 28, h = 28;
  let mark = null;
  switch (kind) {
    case 'square':   mark = <rect x="3" y="3" width="22" height="22" rx="5" fill={c.primary}/>; break;
    case 'circle':   mark = <circle cx="14" cy="14" r="11" fill={c.primary}/>; break;
    case 'tri':      mark = <polygon points="14,3 25,24 3,24" fill={c.primary}/>; break;
    case 'flame':    mark = <path d="M14 3 Q22 10 22 18 A8 8 0 0 1 6 18 Q6 10 14 3 Z" fill={c.primary}/>; break;
    case 'leaf':     mark = <path d="M5 22 Q5 6 22 6 Q22 22 5 22 Z" fill={c.primary}/>; break;
    case 'split':    mark = <g><rect x="3" y="3" width="9" height="22" rx="2" fill={c.primary}/><rect x="16" y="3" width="9" height="22" rx="2" fill={c.accent}/></g>; break;
    case 'hex':      mark = <polygon points="14,3 24,9 24,19 14,25 4,19 4,9" fill={c.primary}/>; break;
    case 'rings':    mark = <g><circle cx="11" cy="14" r="7" fill="none" stroke={c.primary} strokeWidth="2"/><circle cx="18" cy="14" r="7" fill="none" stroke={c.accent} strokeWidth="2"/></g>; break;
    default:         mark = <rect x="3" y="3" width="22" height="22" rx="3" fill={c.primary}/>;
  }
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <svg width={w} height={h} viewBox="0 0 28 28" aria-hidden="true">{mark}</svg>
      <span>{label}</span>
    </span>
  );
}

window.Illus = { NodeWeb, IllusWindows, IllusFragments, IllusMagnify, ArchDiagram, PortraitGeo, CtaPattern, BrandMark };