'use client'

import { Gavel, Coins, Building2, Puzzle } from 'lucide-react'
import { BetaSignup } from './beta-signup'

const plugins = [
  {
    icon: Puzzle,
    title: 'Custom policy plugins',
    desc: 'Heuristics as code. Allow or deny on whatever context you care about.',
  },
  {
    icon: Gavel,
    title: 'Model Council',
    desc: 'A panel of models votes on ambiguous requests. Guardrails without the friction.',
  },
  {
    icon: Coins,
    title: 'Token-saving MITM',
    desc: 'Cache, redact, and rewrite LLM traffic. Smaller bills.',
  },
  {
    icon: Building2,
    title: 'Enterprise controls',
    desc: 'SSO, audit trails, team rulesets, managed deployments.',
  },
]

export function Waitlist() {
  return (
    <section id="waitlist" className="py-24 px-4 sm:px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="max-w-2xl mb-10">
          <span className="text-serif text-[12px] font-bold uppercase tracking-[0.22em] text-primary mb-4 block">
            Plugin SDK &middot; Beta
          </span>
          <h2 className="title-serif text-[36px] md:text-[48px] leading-none mb-4">
            Extend Greyproxy.
          </h2>
          <p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground">
            We&apos;re building a plugin layer on top of GreyProxy for teams that need custom policy logic and shared operational controls.
          </p>
        </div>

        {/* Plugin cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
          {plugins.map((p) => (
            <div
              key={p.title}
              className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30"
            >
              <div className="flex items-center gap-3 mb-3">
                <p.icon className="h-5 w-5 text-foreground" />
                <h3 className="font-sans font-semibold text-sm">{p.title}</h3>
              </div>
              <p className="text-sm text-muted-foreground font-serif leading-relaxed">
                {p.desc}
              </p>
            </div>
          ))}
        </div>

        {/* Freedom guarantee */}
        <div className="mb-12 p-5 rounded-lg border border-primary/15 bg-primary/[0.03]">
          <p className="text-sm text-muted-foreground font-serif leading-relaxed">
            <span className="text-primary font-medium">Core stays free and open source.</span>{' '}
            Sandbox, GreyProxy, and the dashboard stay Apache 2.0. Team controls and plugins sit on top of that base.
          </p>
        </div>

        {/* Waitlist CTA */}
        <BetaSignup
          subject="Greywall enterprise / plugin SDK waitlist"
          message="(waitlist section signup)"
          buttonClassName="px-5 py-2.5 font-sans text-sm font-medium md:text-sm"
          inputClassName="w-56 rounded-md border border-border/40 bg-background/40 px-4 py-2.5 text-sm font-sans text-foreground placeholder:text-muted-foreground/60 transition-colors focus:border-primary/40 focus:outline-none sm:w-64"
          submitClassName="px-4 py-2.5 font-sans text-sm font-medium md:text-sm"
          helperTextClassName="text-xs text-muted-foreground/60 font-serif"
          successClassName="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-primary/20 bg-primary/[0.05] font-sans text-sm text-primary font-medium"
          errorClassName="text-xs text-red-400/80 font-sans text-center"
          wrapperClassName="flex flex-col items-center gap-2"
        />
      </div>
    </section>
  )
}