export default function GetStartedSection() {
  return (
    <section id="get-started" 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">
            ACCESS
          </span>
          <h2 className="text-3xl md:text-4xl font-mono font-bold tracking-tight text-text-primary">
            Get Started
          </h2>
        </div>

        {/* Two Columns */}
        <div className="grid md:grid-cols-2 gap-6">
          {/* Gadget Code (Free) */}
          <div className="bg-bg-secondary border border-border-default rounded-lg p-6">
            {/* Status header */}
            <div className="flex items-center gap-2 mb-4">
              <div className="w-1.5 h-1.5 rounded-full bg-green-glow animate-pulse-glow" />
              <span className="text-xs font-mono tracking-widest text-green-glow/80">
                FREE & OPEN SOURCE
              </span>
            </div>

            <h3 className="text-2xl font-mono font-bold text-text-primary mb-2">
              Gadget Code
            </h3>

            <p className="text-text-secondary text-sm mb-1">
              Apache 2.0 License
            </p>
            <p className="text-text-muted text-xs mb-6">
              No account. No payment. No telemetry. No vendor lock-in.
            </p>

            {/* Requirements */}
            <div className="mb-6 text-xs text-text-muted font-mono space-y-1">
              <div className="flex items-center gap-2">
                <span className="text-brand">▸</span>
                <span>Self-hosted on your server</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand">▸</span>
                <span>MongoDB + Redis + Node.js 22+</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand">▸</span>
                <span>Deploy in minutes</span>
              </div>
            </div>

            {/* CTAs */}
            <a
              href="https://git.g4dge7.com"
              target="_blank"
              rel="noopener noreferrer"
              className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-brand bg-brand hover:bg-brand-light text-white rounded transition-all mb-3"
            >
              GET THE SOURCE CODE
            </a>
            <a
              href="https://g4dge7.com/docs/install/"
              className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-border-default hover:border-border-highlight text-text-secondary hover:text-text-primary rounded transition-all"
            >
              INSTALLATION GUIDE
            </a>
          </div>

          {/* Gadget (Subscription) */}
          <div className="bg-bg-secondary border border-border-default rounded-lg p-6 relative overflow-hidden">
            {/* Animated accent line */}
            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand to-transparent animate-pulse-glow" />

            {/* Status header */}
            <div className="flex items-center gap-2 mb-4">
              <div className="w-1.5 h-1.5 rounded-full bg-cyan-glow animate-pulse-glow" />
              <span className="text-xs font-mono tracking-widest text-cyan-glow/80">
                SUBSCRIPTION
              </span>
            </div>

            <h3 className="text-2xl font-mono font-bold text-text-primary mb-2">
              Gadget
            </h3>

            <p className="text-text-secondary text-sm mb-1">
              AI in Your Browser
            </p>
            <p className="text-text-muted text-xs mb-6">
              Subscription-based. Cancel anytime. Pay-as-you-go metered use also available.
            </p>

            {/* Features */}
            <div className="mb-6 text-xs text-text-muted font-mono space-y-1">
              <div className="flex items-center gap-2">
                <span className="text-brand">▸</span>
                <span>Agentic browser sidebar</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand">▸</span>
                <span>Personal knowledge engine web app</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-brand">▸</span>
                <span>Chrome, Firefox, and Edge support</span>
              </div>
            </div>

            {/* CTAs */}
            <a
              href="#subscribe"
              className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-cyan-glow/50 bg-cyan-glow/10 hover:bg-cyan-glow/20 text-cyan-glow rounded transition-all mb-3"
            >
              SUBSCRIBE NOW
            </a>
            <a
              href="#gadget"
              className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-border-default hover:border-border-highlight text-text-secondary hover:text-text-primary rounded transition-all"
            >
              LEARN MORE
            </a>

            {/* "Built with" badge */}
            <div className="mt-4 flex items-center justify-center gap-2">
              <div className="w-1 h-1 rounded-full bg-green-glow" />
              <span className="text-xs font-mono text-text-muted tracking-wide">
                BUILT WITH GADGET CODE
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
