// Why Now — original visualizations.
// 60× → cost-vs-quality scatter showing the gap.
// $100B+ → growth chart 2024 → 2028 → 2032.

const VizCostQuality = () => (
  <svg viewBox="0 0 380 200" fill="none" preserveAspectRatio="xMidYMid meet">
    {/* axes */}
    <line x1="36" y1="20" x2="36" y2="166" stroke="rgba(255,255,255,0.25)" />
    <line x1="36" y1="166" x2="360" y2="166" stroke="rgba(255,255,255,0.25)" />
    {/* grid */}
    {[40, 80, 120].map(y => (
      <line key={y} x1="36" y1={y} x2="360" y2={y} stroke="rgba(255,255,255,0.05)" strokeDasharray="2 4" />
    ))}
    {/* y-axis ticks */}
    <text x="30" y="28" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.5)" textAnchor="end">$$$</text>
    <text x="30" y="170" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.5)" textAnchor="end">$</text>
    {/* x-axis labels */}
    <text x="36" y="184" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.5)">LOW QUALITY</text>
    <text x="360" y="184" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.5)" textAnchor="end">HIGH QUALITY</text>
    {/* gap line — visualize the 60× delta */}
    <line x1="290" y1="40" x2="290" y2="146" stroke="rgba(178,100,255,0.5)" strokeWidth="1" strokeDasharray="2 3" />
    <text x="298" y="92" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="0.1em" fill="rgba(255,255,255,0.9)">60×</text>
    <text x="298" y="106" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="0.16em" fill="rgba(255,255,255,0.6)">CHEAPER</text>
    {/* frontier dot — high cost / high quality */}
    <circle cx="290" cy="40" r="14" fill="rgba(255,255,255,0.12)" />
    <circle cx="290" cy="40" r="6" fill="#fff" />
    <text x="270" y="34" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="0.12em" fill="rgba(255,255,255,0.7)" textAnchor="end">FRONTIER</text>
    {/* owned dot — low cost / high quality (parity), gradient highlight */}
    <defs>
      <radialGradient id="ownedDot" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0%" stopColor="#ff6fbf" stopOpacity="1" />
        <stop offset="50%" stopColor="#b264ff" stopOpacity="0.9" />
        <stop offset="100%" stopColor="#6080ff" stopOpacity="0.85" />
      </radialGradient>
    </defs>
    <circle cx="270" cy="146" r="20" fill="url(#ownedDot)" opacity="0.25" />
    <circle cx="270" cy="146" r="7" fill="url(#ownedDot)" />
    <text x="266" y="166" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="0.12em" fill="#fff" textAnchor="end">OWNED</text>
    {/* trend hint — clusters of small dots showing where most wrapper models live */}
    {[[80,60],[100,80],[130,100],[160,90],[180,70],[210,55],[230,75]].map(([x,y], i) => (
      <circle key={i} cx={x} cy={y} r="2" fill="rgba(255,255,255,0.18)" />
    ))}
  </svg>
);

const VizGrowth = () => {
  const years = [
    { x: '2024', v: 10,  h: 18 },
    { x: '2028', v: 45,  h: 70 },
    { x: '2032', v: 100, h: 130 },
  ];
  return (
    <svg viewBox="0 0 380 200" fill="none" preserveAspectRatio="xMidYMid meet">
      {/* baseline */}
      <line x1="36" y1="166" x2="360" y2="166" stroke="rgba(255,255,255,0.25)" />
      {/* dashed midline */}
      <line x1="36" y1="100" x2="360" y2="100" stroke="rgba(255,255,255,0.06)" strokeDasharray="2 4" />
      {/* projection arc */}
      <path d="M 84 148 Q 200 110 318 36" stroke="rgba(178,100,255,0.6)" strokeWidth="1" strokeDasharray="3 4" fill="none" />
      {/* bars */}
      {years.map((y, i) => {
        const cx = 84 + i * 117;
        const top = 166 - y.h;
        return (
          <g key={i}>
            <rect x={cx - 28} y={top} width="56" height={y.h} rx="3"
              fill={i === 2 ? 'url(#growthGrad)' : 'rgba(255,255,255,0.18)'}
              stroke={i === 2 ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,255,0.18)'}
              strokeWidth="1" />
            <text x={cx} y={top - 8} fontFamily="JetBrains Mono, monospace" fontSize="11" fontWeight="600" letterSpacing="0.05em" fill={i === 2 ? '#fff' : 'rgba(255,255,255,0.6)'} textAnchor="middle">${y.v}B{i === 2 ? '+' : ''}</text>
            <text x={cx} y={184} fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="0.18em" fill="rgba(255,255,255,0.5)" textAnchor="middle">{y.x}</text>
          </g>
        );
      })}
      <defs>
        <linearGradient id="growthGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.95" />
          <stop offset="100%" stopColor="#fff" stopOpacity="0.4" />
        </linearGradient>
      </defs>
      {/* CAGR annotation */}
      <text x="200" y="64" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="0.16em" fill="rgba(178,100,255,0.9)" textAnchor="middle">21.6% CAGR</text>
    </svg>
  );
};

const WhyNow = () => (
  <section className="section" id="why" data-screen-label="03 Why now">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 02 — Why now</span>
        <h2>The economics have flipped.</h2>
        <p className="lede">
          Small, owned models now match frontier quality on vertical tasks &mdash; for a
          fraction of the per&#8209;request bill. The architecture has to follow.
        </p>
      </div>

      <div className="stat-block">
        <div className="stat">
          <div className="stat-num">60<span className="small">×</span></div>
          <div className="stat-label">
            Cheaper per request, at parity quality on specialized workflows.
          </div>
          <div className="stat-viz"><VizCostQuality /></div>
          <div className="stat-meta">COST × QUALITY · 2025 BENCHMARK</div>
        </div>
        <div className="stat">
          <div className="stat-num">$100B<span className="small">+</span></div>
          <div className="stat-label">
            Vertical AI market by 2032 &mdash; 10× larger than legacy SaaS.
          </div>
          <div className="stat-viz"><VizGrowth /></div>
          <div className="stat-meta">BESSEMER · 21.6% CAGR</div>
        </div>
      </div>
    </div>
  </section>
);

window.WhyNow = WhyNow;
