'use client'

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

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

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

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

  return (
    <section id="getting-started" className="py-24 px-4 sm:px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl text-center">
        <div className="flex items-center justify-center gap-2 mb-4">
          <Download className="h-4 w-4 text-primary" />
          <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
            Getting started
          </span>
        </div>
        <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
          Install in one command
        </h2>
        <p className="text-muted-foreground font-serif text-lg leading-relaxed mb-10">
          Wrap any agent and it runs sandboxed.
        </p>

        <div className="w-full">
          <div className="code-block glow-orange px-4 sm:px-5 py-3.5 flex items-center gap-3">
            <div className="overflow-x-auto min-w-0 flex-1 scrollbar-hide">
              <code className="font-mono text-xs sm:text-sm text-greyhaven-offwhite whitespace-nowrap">
                <span className="text-muted-foreground">$ </span>
                {installCmd}
              </code>
            </div>
            <button
              onClick={copy}
              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>
  )
}