'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.
        </p>

        {/* Demo video */}
        <div className="mx-auto max-w-4xl mb-10">
          <div className="rounded-lg border border-border/40 overflow-hidden glow-orange">
            <video
              autoPlay
              loop
              muted
              playsInline
              controls
              className="w-full h-auto"
            >
              <source src="/videos/demo.mp4" type="video/mp4" />
            </video>
          </div>
        </div>

        {/* 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>
      </div>
    </section>
  )
}