const PORTALS = [
  {
    id: 'platform',
    num: '01',
    accent: 'blue',
    href: 'platform.html',
    title: 'Platform',
    headline: 'Wrapper → owned intelligence',
    desc: 'Six modules, one loop. Capture usage, train models, eval before deploy, route in production.',
    cta: 'Explore Platform',
  },
  {
    id: 'use-cases',
    num: '02',
    accent: 'purple',
    href: 'use-cases.html',
    title: 'Use Cases',
    headline: 'Hidden model moats',
    desc: 'Domain usage becomes owned behavior across legal, support, coding, healthcare, sales, and creator.',
    cta: 'View Use Cases',
  },
  {
    id: 'research',
    num: '03',
    accent: 'pink',
    href: 'research.html',
    title: 'Research',
    headline: 'Frontier institutions',
    desc: '500+ models, 1.2M+ public supply, and CMU Model Dev Initiative across the research graph.',
    cta: 'See Research',
  },
  {
    id: 'company',
    num: '04',
    accent: 'violet',
    href: 'company.html',
    title: 'Company',
    headline: 'Researchers & builders',
    desc: 'CMU, Stanford, Berkeley, YC — advisors, fellows, and long-term vision.',
    cta: 'Meet the Company',
  },
];

const TAU = Math.PI * 2;
const polar = (cx, cy, r, deg) => {
  const a = (deg * Math.PI) / 180;
  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
};

const PlatformViz = () => {
  const cx = 100, cy = 100, r = 62;
  const mods = ['Data', 'Model', 'Eval', 'Route', 'Runtime', 'Obs'];
  const nodes = mods.map((_, i) => polar(cx, cy, r, -90 + i * 60));
  const loop = nodes.map((p) => p.join(',')).join(' ') + ` ${nodes[0].join(',')}`;
  return (
    <svg className="hp-viz hp-viz--platform" viewBox="0 0 200 200" fill="none" aria-hidden="true">
      <circle cx={cx} cy={cy} r={r} stroke="rgba(96,128,255,0.14)" strokeWidth="1" strokeDasharray="3 5" />
      <circle cx={cx} cy={cy} r={22} stroke="rgba(96,128,255,0.22)" strokeWidth="1" />
      <circle cx={cx} cy={cy} r={6} fill="rgba(96,128,255,0.55)" />
      <polygon points={loop} stroke="rgba(150,170,255,0.28)" strokeWidth="1" fill="rgba(96,128,255,0.03)" />
      {nodes.map(([x, y], i) => (
        <g key={mods[i]}>
          <line x1={cx} y1={cy} x2={x} y2={y} stroke="rgba(96,128,255,0.1)" strokeWidth="1" />
          <circle cx={x} cy={y} r="5" fill="rgba(19,19,24,1)" stroke="rgba(96,128,255,0.55)" strokeWidth="1.2" />
          <circle cx={x} cy={y} r="2" fill="rgba(160,180,255,0.8)" className="hp-node-pulse" style={{ animationDelay: `${i * 0.35}s` }} />
        </g>
      ))}
      <circle r="3" fill="rgba(200,215,255,0.95)" className="hp-flow-dot">
        <animateMotion dur="8s" repeatCount="indefinite" path={`M ${nodes[0].join(' ')} L ${nodes.slice(1).map((p) => p.join(' ')).join(' L ')} Z`} />
      </circle>
    </svg>
  );
};

const UC_ICONS = {
  legal: (
    <g stroke="rgba(200,170,255,0.75)" strokeWidth="1" fill="none">
      <line x1="-7" y1="-4" x2="7" y2="-4" />
      <line x1="0" y1="-4" x2="0" y2="6" />
      <path d="M-6 6 Q-6 2 -3 2 Q0 2 0 6" />
      <path d="M6 6 Q6 2 3 2 Q0 2 0 6" />
    </g>
  ),
  support: (
    <g stroke="rgba(200,170,255,0.75)" strokeWidth="1" fill="none">
      <path d="M-7 -2 Q0 -10 7 -2" />
      <rect x="-8" y="0" width="5" height="6" rx="2" />
      <rect x="3" y="0" width="5" height="6" rx="2" />
      <line x1="-2" y1="4" x2="2" y2="4" />
    </g>
  ),
  code: (
    <g stroke="rgba(200,170,255,0.75)" strokeWidth="1.2" fill="none" strokeLinecap="round">
      <polyline points="-6,-2 -9,3 -6,8" />
      <polyline points="6,-2 9,3 6,8" />
      <line x1="2" y1="-3" x2="-1" y2="9" />
    </g>
  ),
  health: (
    <g fill="rgba(200,170,255,0.75)" stroke="none">
      <rect x="-2" y="-7" width="4" height="14" rx="1" />
      <rect x="-7" y="-2" width="14" height="4" rx="1" />
    </g>
  ),
  sales: (
    <g stroke="rgba(200,170,255,0.75)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <line x1="0" y1="7" x2="0" y2="-5" />
      <polyline points="-4,-1 0,-6 4,-1" />
    </g>
  ),
  creator: (
    <g stroke="rgba(200,170,255,0.75)" strokeWidth="1" fill="rgba(200,170,255,0.3)">
      <path d="M0 -7 L2 -1 L8 0 L2 1 L0 7 L-2 1 L-8 0 L-2 -1 Z" />
      <line x1="0" y1="7" x2="4" y2="11" stroke="rgba(200,170,255,0.55)" fill="none" />
    </g>
  ),
};

const UC_GRID = [
  ['legal', 'support', 'code'],
  ['health', 'sales', 'creator'],
];
const UC_COLS = [42, 100, 158];
const UC_ROWS = [50, 138];

const UseCasesViz = () => (
  <svg className="hp-viz hp-viz--usecases" viewBox="0 0 200 200" fill="none" aria-hidden="true">
    {UC_GRID.map((row, ri) =>
      row.map((id, ci) => (
        <g key={id} transform={`translate(${UC_COLS[ci]}, ${UC_ROWS[ri]})`}>
          <circle r="30" fill="rgba(19,19,24,0.85)" stroke="rgba(178,100,255,0.22)" strokeWidth="1" />
          <g transform="scale(2.4)">{UC_ICONS[id]}</g>
        </g>
      ))
    )}
  </svg>
);

const AcademicBuilding = ({ x, y, scale, opacity }) => {
  const mg = 'rgba(255, 70, 190, 0.82)';
  const mgFill = 'rgba(255, 70, 190, 0.1)';
  const wins = [
    [-22, 6], [-22, 14], [-14, 6], [-14, 14],
    [14, 6], [14, 14], [22, 6], [22, 14],
  ];

  return (
    <g transform={`translate(${x}, ${y}) scale(${scale})`} opacity={opacity} stroke={mg} strokeWidth="1.1" fill={mgFill}>
      <rect x="-34" y="30" width="68" height="4" rx="0.5" />
      <rect x="-32" y="4" width="64" height="26" fill="rgba(255,70,190,0.06)" />
      <path d="M -34 4 L 0 -20 L 34 4 Z" fill="rgba(255,70,190,0.08)" />
      <path d="M -11 4 L 0 -11 L 11 4 Z" fill="rgba(255,70,190,0.12)" />
      <line x1="0" y1="-20" x2="0" y2="-30" strokeWidth="1" />
      <path d="M 0 -30 L 9 -27 L 9 -23 L 0 -26 Z" fill="rgba(255,70,190,0.2)" stroke={mg} />
      <circle cx="0" cy="0" r="5.5" fill="rgba(10,10,14,0.7)" stroke={mg} />
      <line x1="0" y1="0" x2="3" y2="0" strokeWidth="0.9" />
      <line x1="0" y1="0" x2="0" y2="-3.5" strokeWidth="0.9" />
      <rect x="-4.5" y="22" width="9" height="8" fill="rgba(255,70,190,0.14)" />
      {wins.map(([wx, wy], i) => (
        <rect key={i} x={wx} y={wy} width="6" height="6" rx="0.5" fill="rgba(255,70,190,0.05)" />
      ))}
    </g>
  );
};

const ResearchViz = () => (
  <svg className="hp-viz hp-viz--research" viewBox="0 0 200 200" fill="none" aria-hidden="true">
    <g transform="translate(100, 145) scale(1.28) translate(-100, -145)">
      <AcademicBuilding x={48} y={128} scale={0.78} opacity={0.72} />
      <AcademicBuilding x={100} y={118} scale={1.05} opacity={1} />
      <AcademicBuilding x={152} y={128} scale={0.78} opacity={0.72} />
      <line x1="18" y1="168" x2="182" y2="168" stroke="rgba(255,70,190,0.22)" strokeWidth="0.8" />
    </g>
  </svg>
);

const FloatPanel = ({ x, y, w, h, children }) => {
  const v = 'rgba(165, 130, 255, 0.8)';
  const vDim = 'rgba(165, 130, 255, 0.35)';
  return (
    <g stroke={v} strokeWidth="1.3" fill="rgba(165,130,255,0.05)">
      <rect x={x} y={y} width={w} height={h} rx="4" />
      <circle cx={x + 8} cy={y + 9} r="1.8" fill="rgba(165,130,255,0.35)" stroke="none" />
      <circle cx={x + 15} cy={y + 9} r="1.8" fill="rgba(165,130,255,0.25)" stroke="none" />
      <circle cx={x + 22} cy={y + 9} r="1.8" fill="rgba(165,130,255,0.2)" stroke="none" />
      <line x1={x + 4} y1={y + 16} x2={x + w - 4} y2={y + 16} stroke={vDim} strokeWidth="1" />
      {children}
    </g>
  );
};

const CompanyViz = () => {
  const v = 'rgba(210, 195, 255, 0.9)';
  const vFill = 'rgba(165, 130, 255, 0.2)';

  return (
    <svg className="hp-viz hp-viz--company" viewBox="0 0 200 200" fill="none" aria-hidden="true">
      {/* Left panel — pie chart & data */}
      <FloatPanel x={8} y={22} w={60} h={50}>
        <circle cx={36} cy={44} r={12} fill="none" stroke={v} strokeWidth="1.3" />
        <path d="M 36 44 L 36 32 A 12 12 0 0 1 46 48 Z" fill={vFill} stroke={v} strokeWidth="1.1" />
        <line x1={16} y1={58} x2={44} y2={58} stroke={v} strokeWidth="1.3" opacity="0.5" />
        <line x1={16} y1={64} x2={52} y2={64} stroke={v} strokeWidth="1.3" opacity="0.38" />
        <line x1={16} y1={70} x2={40} y2={70} stroke={v} strokeWidth="1.3" opacity="0.3" />
      </FloatPanel>

      {/* Right panel — text lines */}
      <FloatPanel x={132} y={26} w={60} h={46}>
        <line x1={140} y1={50} x2={184} y2={50} stroke={v} strokeWidth="1.3" opacity="0.5" />
        <line x1={140} y1={56} x2={178} y2={56} stroke={v} strokeWidth="1.3" opacity="0.38" />
        <line x1={140} y1={62} x2={170} y2={62} stroke={v} strokeWidth="1.3" opacity="0.3" />
        <line x1={140} y1={68} x2={176} y2={68} stroke={v} strokeWidth="1.3" opacity="0.25" />
      </FloatPanel>

      {/* Decorative accents */}
      <rect x={124} y={14} width="8" height="8" fill={vFill} stroke={v} strokeWidth="1.1" transform="rotate(14 128 18)" />
      <rect x={138} y={18} width="5" height="5" fill={vFill} stroke={v} strokeWidth="1.1" />
      <path d="M 180 78 L 182 82 L 186 82 L 183 85 L 184 89 L 180 87 L 176 89 L 177 85 L 174 82 L 178 82 Z" fill={vFill} stroke={v} strokeWidth="0.9" />

      {/* Laptop + researcher — enlarged, no arm lines to panels */}
      <g transform="translate(100, 148) scale(1.22) translate(-100, -148)">
        <g stroke={v} strokeWidth="1.4" fill="rgba(19,19,24,0.65)">
          <path d="M 68 162 L 132 162 L 128 178 L 72 178 Z" />
          <path d="M 74 162 L 126 162 L 122 150 L 78 150 Z" fill="rgba(165,130,255,0.1)" />
          <circle cx="100" cy="156" r="6" fill={vFill} stroke={v} />
        </g>
        <g stroke={v} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M 86 108 Q 80 96 86 88 Q 92 80 100 86 Q 108 80 114 88 Q 120 96 114 108" fill="none" />
          <path d="M 88 90 Q 93 86 97 90 M 103 90 Q 107 86 112 90" fill="none" strokeWidth="1.1" opacity="0.55" />
          <ellipse cx="100" cy="106" rx="12" ry="13" fill="rgba(19,19,24,0.55)" />
          <path d="M 94 108 Q 97 112 100 108 Q 103 112 106 108" fill="none" strokeWidth="1" opacity="0.4" />
          <line x1="100" y1="119" x2="100" y2="130" />
          <path d="M 84 130 L 74 162 L 86 162 L 90 142 Z" fill={vFill} stroke={v} />
          <path d="M 116 130 L 126 162 L 114 162 L 110 142 Z" fill={vFill} stroke={v} />
          <path d="M 90 130 L 100 142 L 110 130 L 110 162 L 90 162 Z" fill={vFill} stroke={v} />
        </g>
      </g>
    </svg>
  );
};

const VIZ = {
  platform: PlatformViz,
  'use-cases': UseCasesViz,
  research: ResearchViz,
  company: CompanyViz,
};

const PortalCard = ({ p }) => {
  const Viz = VIZ[p.id];

  return (
    <a
      href={p.href}
      className={`home-portal-card home-portal-card--${p.accent}`}
    >
      <div className="home-portal-card-shine" aria-hidden="true" />
      <div className="home-portal-card-viz">
        <Viz />
      </div>
      <div className="home-portal-card-body">
        <div className="home-portal-card-top">
          <span className="home-portal-num">{p.num}</span>
          <span className="home-portal-label">{p.title}</span>
        </div>
        <h3 className="home-portal-headline">{p.headline}</h3>
        <p className="home-portal-desc">{p.desc}</p>
        <span className="home-portal-cta">
          {p.cta} <span className="arrow">→</span>
        </span>
      </div>
    </a>
  );
};

const HomePortal = () => (
  <section className="home-portal" id="explore" data-screen-label="Explore">
    <div className="home-portal-bg" aria-hidden="true" />
    <div className="wrap">
      <div className="home-portal-head">
        <span className="label">/ Explore Model OS</span>
        <h2>Four paths into the <span className="gradient">ecosystem</span>.</h2>
        <p className="lede">Start with the platform — then explore verticals, research supply, and the team.</p>
      </div>

      <div className="home-portal-grid">
        {PORTALS.map((p) => (
          <PortalCard key={p.id} p={p} />
        ))}
      </div>
    </div>
  </section>
);

window.HomePortal = HomePortal;