// Problem — typographic list with original per-row visualizations.
// Visualizations are deliberately minimal & monochrome — they read as product
// dashboard glyphs, not pitch-deck illustrations.

const VizReplicate = () => (
  <svg viewBox="0 0 220 120" fill="none" stroke="#fff" strokeWidth="1.2">
    {/* base card — your prompt */}
    <rect x="14" y="22" width="96" height="78" rx="8" stroke="rgba(255,255,255,0.85)" />
    <rect x="28" y="38" width="52" height="4" rx="2" fill="rgba(255,255,255,0.85)" stroke="none" />
    <rect x="28" y="50" width="68" height="3" rx="1.5" fill="rgba(255,255,255,0.4)" stroke="none" />
    <rect x="28" y="60" width="44" height="3" rx="1.5" fill="rgba(255,255,255,0.4)" stroke="none" />
    <rect x="28" y="70" width="60" height="3" rx="1.5" fill="rgba(255,255,255,0.4)" stroke="none" />
    {/* clone — dashed, shifted */}
    <rect x="120" y="14" width="96" height="78" rx="8" stroke="rgba(255,255,255,0.5)" strokeDasharray="3 4" />
    <rect x="134" y="30" width="52" height="4" rx="2" fill="rgba(255,255,255,0.45)" stroke="none" />
    <rect x="134" y="42" width="68" height="3" rx="1.5" fill="rgba(255,255,255,0.25)" stroke="none" />
    <rect x="134" y="52" width="44" height="3" rx="1.5" fill="rgba(255,255,255,0.25)" stroke="none" />
    <rect x="134" y="62" width="60" height="3" rx="1.5" fill="rgba(255,255,255,0.25)" stroke="none" />
    {/* copy arrow */}
    <path d="M 110 60 L 124 52" stroke="rgba(255,255,255,0.6)" strokeWidth="1" strokeDasharray="2 3" />
    <polygon points="124,52 118,52 121,57" fill="rgba(255,255,255,0.7)" stroke="none" />
    {/* corner label */}
    <text x="14" y="116" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.5)">PROMPT  →  COPY</text>
  </svg>
);

const VizCost = () => (
  <svg viewBox="0 0 220 120" fill="none" stroke="#fff" strokeWidth="1">
    {/* grid */}
    <line x1="20" y1="20" x2="20" y2="100" stroke="rgba(255,255,255,0.2)" />
    <line x1="20" y1="100" x2="210" y2="100" stroke="rgba(255,255,255,0.2)" />
    {[40, 60, 80].map(y => (
      <line key={y} x1="20" y1={y} x2="210" y2={y} stroke="rgba(255,255,255,0.06)" strokeDasharray="2 4" />
    ))}
    {/* growth curve — exponential-ish */}
    <path d="M 20 96 Q 80 92 130 70 T 210 22" stroke="#fff" strokeWidth="1.6" />
    {/* area fill */}
    <path d="M 20 96 Q 80 92 130 70 T 210 22 L 210 100 L 20 100 Z" fill="url(#costGrad)" opacity="0.18" stroke="none" />
    <defs>
      <linearGradient id="costGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#fff" stopOpacity="1" />
        <stop offset="100%" stopColor="#fff" stopOpacity="0" />
      </linearGradient>
    </defs>
    {/* end marker */}
    <circle cx="210" cy="22" r="3" fill="#fff" stroke="none" />
    {/* axis labels */}
    <text x="20" y="116" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.5)">USERS  →</text>
    <text x="186" y="116" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.7)" textAnchor="end">$ COST</text>
  </svg>
);

const VizCompounding = () => (
  <svg viewBox="0 0 220 120" fill="none">
    {/* axes */}
    <line x1="20" y1="100" x2="210" y2="100" stroke="rgba(255,255,255,0.2)" />
    <line x1="20" y1="20" x2="20" y2="100" stroke="rgba(255,255,255,0.2)" />
    {/* flat dashed — wrapper */}
    <line x1="20" y1="70" x2="210" y2="70" stroke="rgba(255,255,255,0.4)" strokeWidth="1.2" strokeDasharray="4 4" />
    {/* stepped ascending — owned */}
    <polyline
      points="20,82 60,82 60,64 110,64 110,46 160,46 160,28 210,28"
      stroke="#fff" strokeWidth="1.6" />
    {/* step dots */}
    {[[60,64],[110,46],[160,28],[210,28]].map(([cx,cy], i) => (
      <circle key={i} cx={cx} cy={cy} r="2.5" fill="#fff" />
    ))}
    {/* labels */}
    <text x="20" y="116" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.5)">VERSIONS  →</text>
    <text x="186" y="64" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.45)" textAnchor="end">WRAPPER</text>
    <text x="210" y="20" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.85)" textAnchor="end">OWNED</text>
  </svg>
);

const Problem = () => (
  <section className="section" id="problem" data-screen-label="02 Problem">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 01 — The problem</span>
        <h2>A prompt is not a moat.</h2>
        <p className="lede">
          Most AI products run on borrowed weights. Behavior lives in a text file
          anyone can re&#8209;write &mdash; and the meter never stops.
        </p>
      </div>

      <div className="problem-list">
        <div className="problem-row">
          <div className="n">01</div>
          <div className="ttl">Replicable overnight.</div>
          <div className="body">
            Prompts can be copied in a single screenshot. Whatever you build on top of
            a frontier API can be undone the next time that API updates.
          </div>
          <div className="viz"><VizReplicate /></div>
        </div>
        <div className="problem-row">
          <div className="n">02</div>
          <div className="ttl">Margin&#8209;negative at scale.</div>
          <div className="body">
            Token costs grow linearly with usage. The more your product wins, the less
            you earn per request &mdash; unit economics get worse, not better.
          </div>
          <div className="viz"><VizCost /></div>
        </div>
        <div className="problem-row">
          <div className="n">03</div>
          <div className="ttl">No compounding.</div>
          <div className="body">
            Every interaction is training data you can&apos;t capture. Wrappers stay frozen;
            fine&#8209;tuned models improve every release.
          </div>
          <div className="viz"><VizCompounding /></div>
        </div>
      </div>
    </div>
  </section>
);

window.Problem = Problem;