gadget/site/src/components/ProblemSection.tsx

export default function ProblemSection() {
  return (
    <section id="why" className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        {/* Section Header */}
        <div className="text-center mb-16">
          <span className="text-xs font-mono tracking-widest text-brand mb-3 block">
            ASSESSMENT
          </span>
          <h2 className="text-3xl md:text-4xl font-mono font-bold tracking-tight text-text-primary">
            The Platforms Are Failing
          </h2>
          <p className="mt-4 text-text-secondary max-w-2xl mx-auto">
            The tools you depend on to build software are breaking — and the
            companies behind them chose AI hype over platform reliability.
          </p>
        </div>

        {/* Problem Cards */}
        <div className="grid md:grid-cols-2 gap-6">
          {/* GitHub */}
          <div className="bg-bg-secondary border border-border-default rounded-lg p-6 border-l-2 border-l-brand">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-2 h-2 rounded-full bg-red-500 status-indicator" />
              <h3 className="font-mono text-lg font-bold text-text-primary">
                The Platform You Can't Trust
              </h3>
            </div>

            <p className="text-text-secondary leading-relaxed mb-4">
              GitHub's uptime has plummeted to <span className="text-brand font-mono font-bold">~90%</span>.
              A silent merge queue bug deleted committed code across 2,092 pull requests.
              CVE-2026-3854 let anyone execute arbitrary code on GitHub's servers via a
              standard <code className="font-mono text-xs bg-bg-tertiary px-1.5 py-0.5 rounded border border-border-default text-yellow-400">git push</code>.
            </p>

            <ul className="space-y-2 text-sm text-text-muted mb-5">
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>12-hour cascading failure, 5 separate outages (Feb 9)</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>Redis misconfiguration: 95% of Actions workflows delayed</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>Codespaces 90% auth failure across EU, Asia, AU</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>Elasticsearch collapse: global search and PRs down for hours</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>Ghostty, Zig, tldraw, curl — tier-one projects have fled</span>
              </li>
            </ul>

            <p className="text-xs font-mono text-text-muted italic">
              Your source code deserves better.
            </p>
          </div>

          {/* VS Code */}
          <div className="bg-bg-secondary border border-border-default rounded-lg p-6 border-l-2 border-l-brand">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-2 h-2 rounded-full bg-red-500 status-indicator" />
              <h3 className="font-mono text-lg font-bold text-text-primary">
                The IDE That Forgot Developers
              </h3>
            </div>

            <p className="text-text-secondary leading-relaxed mb-4">
              VS Code is leaking <span className="text-brand font-mono font-bold">40GB+</span> of RAM on
              idle. Microsoft forced <span className="font-mono text-xs bg-bg-tertiary px-1.5 py-0.5 rounded border border-border-default text-yellow-400">"Co-authored-by: Copilot"</span> into
              your commits — even for code you wrote yourself. RCE vulnerabilities
              hit 125 million extension installs.
            </p>

            <ul className="space-y-2 text-sm text-text-muted mb-5">
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>Copilot metadata hijack: forced AI attribution on human code</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>Language server leak: 40GB+ RAM on idle configurations</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>Claude Code extension: 23.2GB RAM out of the box</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>March 2026 marketplace update broke core extension abstractions</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-brand mt-1 font-mono text-xs">▸</span>
                <span>125M-install RCE: Live Server, Code Runner, and more</span>
              </li>
            </ul>

            <p className="text-xs font-mono text-text-muted italic">
              The IDE chose AI hype over your workflow.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}