// Wrapper Extinction Event — the three forces compressing AI wrappers

const VizAbsorption = () => (
  <svg viewBox="0 0 220 120" fill="none">
    {/* outer app layer */}
    <rect x="10" y="20" width="90" height="80" rx="8" stroke="rgba(255,255,255,0.55)" strokeWidth="1.2" />
    <rect x="22" y="36" width="50" height="4" rx="2" fill="rgba(255,255,255,0.75)" stroke="none" />
    <rect x="22" y="48" width="62" height="3" rx="1.5" fill="rgba(255,255,255,0.3)" stroke="none" />
    <rect x="22" y="58" width="40" height="3" rx="1.5" fill="rgba(255,255,255,0.3)" stroke="none" />
    {/* inner model eating the app */}
    <rect x="108" y="30" width="100" height="60" rx="6" fill="rgba(178,100,255,0.18)" stroke="rgba(178,100,255,0.6)" strokeWidth="1" />
    <rect x="120" y="44" width="54" height="4" rx="2" fill="rgba(178,100,255,0.8)" stroke="none" />
    <rect x="120" y="56" width="72" height="3" rx="1.5" fill="rgba(178,100,255,0.45)" stroke="none" />
    {/* arrow of absorption */}
    <path d="M 100 60 L 112 60" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeDasharray="3 3" />
    <polygon points="112,56 120,60 112,64" fill="rgba(255,255,255,0.6)" stroke="none" />
    <text x="10" y="115" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.4)">APP</text>
    <text x="208" y="115" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(178,100,255,0.8)" textAnchor="end">MODEL</text>
  </svg>
);

const VizAPITax = () => (
  <svg viewBox="0 0 220 120" fill="none" stroke="#fff" strokeWidth="1">
    <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" />
    ))}
    {/* cost curve goes up = bad */}
    <path d="M 20 96 Q 80 92 130 70 T 210 22" stroke="rgba(255,100,100,0.9)" strokeWidth="1.6" />
    <path d="M 20 96 Q 80 92 130 70 T 210 22 L 210 100 L 20 100 Z" fill="rgba(255,100,100,0.08)" stroke="none" />
    <circle cx="210" cy="22" r="3" fill="rgba(255,100,100,0.9)" stroke="none" />
    <text x="20" y="116" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.4)">GROWTH →</text>
    <text x="190" y="116" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,100,100,0.8)" textAnchor="end">API COST ↑</text>
  </svg>
);

const VizNoCompound = () => (
  <svg viewBox="0 0 220 120" fill="none">
    <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)" />
    {/* wrapper = flat */}
    <line x1="20" y1="72" x2="210" y2="72" stroke="rgba(255,255,255,0.35)" strokeWidth="1.2" strokeDasharray="4 4" />
    {/* owned = steps up */}
    <polyline points="20,84 55,84 55,66 95,66 95,50 140,50 140,32 210,32" stroke="rgba(96,128,255,0.9)" strokeWidth="1.6" />
    {[[55,66],[95,50],[140,32]].map(([cx,cy], i) => (
      <circle key={i} cx={cx} cy={cy} r="2.5" fill="rgba(96,128,255,0.9)" />
    ))}
    <text x="20" y="116" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.4)">TIME →</text>
    <text x="210" y="66" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.4)" textAnchor="end">WRAPPER</text>
    <text x="210" y="24" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(96,128,255,0.9)" textAnchor="end">OWNED</text>
  </svg>
);

const VizNoIncubation = () => (
  <svg viewBox="0 0 220 120" fill="none">
    {/* usage data flowing into void */}
    {[24, 42, 60, 78, 96].map((y, i) => (
      <g key={i}>
        <line x1="14" y1={y} x2="90" y2={y} stroke={`rgba(255,255,255,${0.15 + i * 0.07})`} strokeWidth="1" />
        <circle cx="14" cy={y} r="2" fill={`rgba(255,255,255,${0.2 + i * 0.08})`} />
        <line x1="90" y1={y} x2="120" y2={y} stroke="rgba(255,255,255,0.12)" strokeWidth="1" strokeDasharray="2 3" />
      </g>
    ))}
    {/* void/black hole */}
    <circle cx="148" cy="60" r="36" fill="rgba(0,0,0,0.6)" stroke="rgba(255,255,255,0.12)" strokeWidth="1" />
    <text x="148" y="56" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1" fill="rgba(255,255,255,0.25)" textAnchor="middle">USAGE</text>
    <text x="148" y="68" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1" fill="rgba(255,255,255,0.25)" textAnchor="middle">DATA</text>
    <text x="14" y="115" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.4)">SIGNAL</text>
    <text x="206" y="115" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.5" fill="rgba(255,255,255,0.25)" textAnchor="end">WASTED</text>
  </svg>
);

const ExtinctionCard = ({ num, title, body, viz }) => (
  <div className="problem-row">
    <div className="n">{num}</div>
    <div className="ttl">{title}</div>
    <div className="body">{body}</div>
    <div className="viz">{viz}</div>
  </div>
);

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>Enterprise AI has a <span className="gradient">data ownership</span> problem.</h2>
        <p className="lede">
          Today, companies face a hard choice: share proprietary data with frontier AI labs and lose
          their competitive advantage, or overspend on building inferior custom AI wrappers just to
          keep control of their data.
        </p>
      </div>

      <div className="problem-list">
        <ExtinctionCard
          num="01"
          title="Your data trains their product."
          body="Share proprietary data with a frontier AI lab, and that lab can use it to build products that compete with you. Your competitive advantage goes with it."
          viz={<VizAbsorption />}
        />
        <ExtinctionCard
          num="02"
          title="Costs grow with every use."
          body="Prompt wrappers rely on third-party models and pay per use. The more your team uses AI, the more you spend, and none of that spend builds something you own."
          viz={<VizAPITax />}
        />
        <ExtinctionCard
          num="03"
          title="Custom wrappers stay flat."
          body="Companies that keep control of their data often overspend on custom AI wrappers that perform worse than the big labs, and the AI doesn’t get better over time."
          viz={<VizNoCompound />}
        />
        <ExtinctionCard
          num="04"
          title="Expert knowledge is lost."
          body="Expert edits, edge cases, and workflow data are not retained. Your team keeps teaching the AI the same lessons, and none of it becomes a better model."
          viz={<VizNoIncubation />}
        />
      </div>

      <div className="extinction-punch">
        <div className="ep-step">
          <span className="ep-node"></span>
          <div className="ep-line">Stop sharing your data.</div>
        </div>
        <div className="ep-step">
          <span className="ep-node"></span>
          <div className="ep-line ep-dim">Stop renting intelligence.</div>
        </div>
        <div className="ep-step ep-step--final">
          <span className="ep-node ep-node--accent"></span>
          <div className="ep-line ep-accent">Own your AI.</div>
        </div>
      </div>
    </div>
  </section>
);

window.Problem = Problem;
