export default function GadgetSection() {
  return (
    <section id="gadget" 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">
            PRODUCT
          </span>
          <h2 className="text-3xl md:text-4xl font-mono font-bold tracking-tight text-text-primary">
            Gadget: AI Where You Work
          </h2>
          <p className="mt-4 text-text-secondary max-w-2xl mx-auto">
            An agentic sidebar for your browser and a personal knowledge engine.
            Gadget understands context, performs actions, and keeps your information
            connected and actionable.
          </p>
        </div>

        {/* Two Sub-Sections */}
        <div className="grid md:grid-cols-2 gap-6 mb-8">
          {/* Browser Extension */}
          <div className="bg-bg-secondary border border-border-default rounded-lg p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-8 h-8 rounded bg-bg-tertiary border border-border-default flex items-center justify-center">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <rect x="1" y="3" width="14" height="10" rx="1.5" stroke="#c20600" strokeWidth="1.5" />
                  <path d="M1 6h14" stroke="#c20600" strokeWidth="1" />
                  <circle cx="3" cy="4.5" r="0.5" fill="#c20600" />
                  <circle cx="5" cy="4.5" r="0.5" fill="#c20600" />
                </svg>
              </div>
              <h3 className="font-mono text-base font-bold tracking-wide text-text-primary">
                BROWSER EXTENSION
              </h3>
            </div>

            <p className="text-sm text-text-secondary leading-relaxed mb-4">
              An agentic sidebar integrated into your browsing. Gadget understands
              the page you're on and can perform actions on your behalf — research,
              form-filling, summarization, and more. It's AI that works where you
              already are.
            </p>

            <div className="space-y-2 text-sm text-text-muted">
              <div className="flex items-center gap-2">
                <span className="text-brand font-mono text-xs">▸</span>
                <span>Context-aware: understands the page you're on</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand font-mono text-xs">▸</span>
                <span>Agentic: performs actions on your behalf</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand font-mono text-xs">▸</span>
                <span>Works in Chrome, Firefox, and Edge</span>
              </div>
            </div>

            {/* Installation Instructions */}
            <div className="mt-5 pt-4 border-t border-border-default">
              <h4 className="font-mono text-xs font-bold tracking-wide text-text-muted mb-3">
                INSTALLATION
              </h4>
              <div className="space-y-3 text-xs text-text-muted font-mono">
                <div>
                  <span className="text-text-secondary">Chrome / Chromium:</span>
                  <p className="mt-1">Settings → Extensions → Enable Developer Mode → Load Unpacked → Select extension directory</p>
                </div>
                <div>
                  <span className="text-text-secondary">Firefox:</span>
                  <p className="mt-1">about:debugging → This Firefox → Load Temporary Add-on → Select manifest.json from extension directory</p>
                </div>
                <div>
                  <span className="text-text-secondary">Microsoft Edge:</span>
                  <p className="mt-1">edge://extensions → Enable Developer Mode → Load Unpacked → Select extension directory</p>
                </div>
              </div>
            </div>
          </div>

          {/* Web App */}
          <div className="bg-bg-secondary border border-border-default rounded-lg p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-8 h-8 rounded bg-bg-tertiary border border-border-default flex items-center justify-center">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M2 4h12M2 8h8M2 12h10" stroke="#c20600" strokeWidth="1.5" strokeLinecap="round" />
                  <circle cx="14" cy="9" r="2" stroke="#c20600" strokeWidth="1.5" />
                </svg>
              </div>
              <h3 className="font-mono text-base font-bold tracking-wide text-text-primary">
                WEB APP
              </h3>
            </div>

            <p className="text-sm text-text-secondary leading-relaxed mb-4">
              Your personal knowledge engine. Chat with your information, meetings,
              documents, and notes. Persistent, searchable, and actionable. Gadget
              connects what you know to what you need.
            </p>

            <div className="space-y-2 text-sm text-text-muted">
              <div className="flex items-center gap-2">
                <span className="text-brand font-mono text-xs">▸</span>
                <span>Chat with your documents and meetings</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand font-mono text-xs">▸</span>
                <span>Persistent, searchable knowledge base</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand font-mono text-xs">▸</span>
                <span>Actions, not just answers</span>
              </div>
            </div>

            {/* "Built with Gadget Code" badge */}
            <div className="mt-6 pt-4 border-t border-border-default">
              <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-bg-tertiary border border-border-default rounded">
                <div className="w-1.5 h-1.5 rounded-full bg-green-glow animate-pulse-glow" />
                <span className="text-xs font-mono tracking-wide text-text-muted">
                  BUILT WITH GADGET CODE
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
