export default function BuiltWithSection() {
  return (
    <section id="built-with" className="py-20 px-6">
      <div className="max-w-4xl mx-auto">
        {/* Section Header */}
        <div className="text-center mb-12">
          <span className="text-xs font-mono tracking-widest text-brand mb-3 block">
            CREDIBILITY
          </span>
          <h2 className="text-3xl md:text-4xl font-mono font-bold tracking-tight text-text-primary">
            We Ship Our Own Dogfood
          </h2>
        </div>

        {/* Narrative */}
        <div className="bg-bg-secondary border border-border-default rounded-lg p-8">
          {/* Status bar accent */}
          <div className="flex items-center gap-2 mb-6 pb-4 border-b border-border-default">
            <div className="w-1.5 h-1.5 rounded-full bg-green-glow status-indicator" />
            <span className="text-xs font-mono tracking-widest text-green-glow/80">
              PRODUCTION VERIFIED
            </span>
          </div>

          <p className="text-text-secondary leading-relaxed mb-4">
            Gadget — the browser extension and web app — was built using Gadget Code.
            Every feature, every line, every agent-assisted commit. The AI agent
            participated in development across all five workspace modes: Inspect,
            Station, Update, Agent, and Agent+.
          </p>

          <p className="text-text-secondary leading-relaxed mb-4">
            This isn't a demo project or a proof-of-concept. It's a production
            platform that ships production software. The same guardrails, observability,
            and agent-first architecture that we're offering to you are what we use
            every day to build our own products.
          </p>

          <p className="text-text-muted leading-relaxed text-sm italic">
            We don't ship anything we wouldn't use ourselves. Gadget Code built Gadget.
            Gadget proves Gadget Code works.
          </p>

          {/* Visual data strip */}
          <div className="mt-6 pt-4 border-t border-border-default flex flex-wrap gap-6">
            <div className="flex items-center gap-2">
              <span className="font-mono text-lg text-brand font-bold">5</span>
              <span className="text-xs font-mono text-text-muted tracking-wide">WORKSPACE MODES</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="font-mono text-lg text-brand font-bold">100%</span>
              <span className="text-xs font-mono text-text-muted tracking-wide">AGENT PARTICIPATION</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="font-mono text-lg text-brand font-bold">0</span>
              <span className="text-xs font-mono text-text-muted tracking-wide">THIRD-PARTY TRUST REQ</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
