'use client'

import { useState, FormEvent } from 'react'
import { Check } from 'lucide-react'

export function Hero() {
  const [mode, setMode] = useState<'button' | 'input' | 'submitting' | 'success'>('button')
  const [email, setEmail] = useState('')

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    if (mode === 'submitting') return
    setMode('submitting')
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: JSON.stringify({
          access_key: '85d3252e-5890-450c-aa93-12dc89c7c9b5',
          subject: 'Greywall closed beta signup (hero)',
          from_name: 'Greywall waitlist',
          email,
          message: '(hero CTA signup)',
          botcheck: '',
        }),
      })
      const data = await res.json()
      if (data.success) {
        setMode('success')
        setEmail('')
      } else {
        setMode('input')
      }
    } catch {
      setMode('input')
    }
  }

  return (
    <section className="relative pt-24 sm:pt-32 pb-12 sm:pb-16 px-4 sm:px-6 overflow-hidden">
      {/* Subtle background gradient */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.05)_0%,transparent_50%)]" />
      {/* Grid pattern */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage:
            'linear-gradient(rgba(249,249,247,1) 1px, transparent 1px), linear-gradient(90deg, rgba(249,249,247,1) 1px, transparent 1px)',
          backgroundSize: '64px 64px',
        }}
      />

      <div className="relative mx-auto max-w-4xl text-center">
        <h1 className="font-serif text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight leading-[1.1] mb-6">
          <em className="italic text-primary">Greywall</em> your agent &amp; let it cook.
        </h1>
        <p className="text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto font-serif mb-6">
          Container-free sandboxing with real-time observability & dynamic controls, for Linux & MacOS.
        </p>
        <div className="inline-flex items-center gap-2 flex-wrap justify-center">
          <a href="https://github.com/GreyhavenHQ/greywall" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/github/stars/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614&logo=github&logoColor=white" alt="GitHub stars" className="h-5" />
          </a>
          <a href="https://github.com/GreyhavenHQ/greywall/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/github/license/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614" alt="License" className="h-5" />
          </a>
          <a href="https://github.com/GreyhavenHQ/greywall/releases" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/github/v/release/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614" alt="Latest release" className="h-5" />
          </a>
          <a href="https://github.com/GreyhavenHQ/greywall" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/github/go-mod/go-version/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614" alt="Go version" className="h-5" />
          </a>
          <a href="https://www.producthunt.com/products/greywall?launch=greywall" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/badge/Product%20Hunt-Greywall-D95E2A?style=flat&logo=producthunt&logoColor=white&labelColor=161614" alt="Product Hunt" className="h-5" />
          </a>
        </div>
        <div className="mt-8 flex flex-col items-center gap-2">
          {mode === 'button' && (
            <button
              onClick={() => setMode('input')}
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-colors cursor-pointer"
            >
              Join closed beta
              <span aria-hidden="true">&rarr;</span>
            </button>
          )}
          {(mode === 'input' || mode === 'submitting') && (
            <form onSubmit={onSubmit} className="flex items-center gap-2">
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@company.com"
                autoFocus
                className="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 focus:outline-none focus:border-primary/40 transition-colors w-56 sm:w-64"
              />
              <button
                type="submit"
                disabled={mode === 'submitting'}
                className="px-4 py-2.5 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {mode === 'submitting' ? '...' : 'Join'}
              </button>
            </form>
          )}
          {mode === 'success' && (
            <div className="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">
              <Check className="h-4 w-4" />
              You&apos;re on the list.
            </div>
          )}
          <p className="text-xs text-muted-foreground/60 font-serif">
            No spam. Just one email when it&apos;s ready.
          </p>
        </div>
      </div>
    </section>
  )
}