'use client'

import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { Target, Shield, Zap, Users, Globe, ArrowRight } from 'lucide-react'
import Link from 'next/link'

const stats = [
  { value: 'Verified', label: 'DNS-VERIFIED LISTINGS' },
  { value: 'Real data', label: 'NO SIMULATED INVENTORY' },
  { value: 'Operator-grade', label: 'WORKFLOWS' },
  { value: 'Secure', label: 'COOKIE AUTH + RATE LIMITS' },
]

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Background Atmosphere */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
        <div 
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
            backgroundSize: '160px 160px',
          }}
        />
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-accent/[0.02] rounded-full blur-[120px]" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-40 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-[1200px] mx-auto">
          {/* Hero */}
          <div className="text-center mb-20 sm:mb-28 animate-fade-in">
            <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block flex items-center justify-center gap-2">
               <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
               Mission Briefing
            </span>
            <h1 className="font-display text-[3.5rem] sm:text-[5rem] md:text-[6rem] leading-[0.9] tracking-[-0.04em] text-white mb-8">
              Built for hunters.
              <br />
              <span className="text-white/30">By hunters.</span>
            </h1>
            <p className="text-lg sm:text-xl text-white/50 max-w-2xl mx-auto font-light leading-relaxed">
              POUNCE exists for one reason: to give you the edge. 
              Track assets. See opportunities. Move first.
            </p>
          </div>

          {/* Stats Grid - Bento Style */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-white/10 border border-white/10 mb-32 animate-slide-up">
            {stats.map((stat) => (
              <div
                key={stat.label}
                className="bg-[#020202] p-8 sm:p-10 text-center group hover:bg-[#050505] transition-colors"
              >
                <div className="text-3xl sm:text-4xl font-display text-white mb-2 group-hover:text-accent transition-colors">
                  {stat.value}
                </div>
                <div className="text-[10px] font-mono uppercase tracking-widest text-white/30">{stat.label}</div>
              </div>
            ))}
          </div>

          {/* Mission */}
          <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center mb-32">
             <div className="animate-slide-up">
                <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Objective</span>
                <h2 className="font-display text-4xl sm:text-5xl text-white mb-8">Level the playing field.</h2>
                <div className="space-y-6 text-white/60 text-lg font-light leading-relaxed">
                   <p>
                      Domain intelligence shouldn't be locked behind enterprise paywalls or hidden in archaic CLI tools.
                   </p>
                   <p>
                      We built POUNCE to democratize access to high-value digital assets. Whether you're a sniper looking for a single drop or a whale managing a portfolio, our tools give you the same firepower.
                   </p>
                </div>
             </div>
             <div className="relative animate-scale-in delay-100">
                <div className="absolute -inset-4 bg-accent/5 blur-2xl" />
                <div className="relative border border-white/10 bg-[#050505] p-10">
                   <div className="absolute top-0 right-0 p-4">
                      <Globe className="w-12 h-12 text-white/10" />
                   </div>
                   <h3 className="font-display text-2xl text-white mb-6">Global Coverage</h3>
                   <ul className="space-y-4 font-mono text-sm text-white/50">
                      <li className="flex justify-between border-b border-white/5 pb-2">
                         <span>Registrars</span>
                         <span className="text-white">50+ Connected</span>
                      </li>
                      <li className="flex justify-between border-b border-white/5 pb-2">
                         <span>TLDs</span>
                         <span className="text-white">886 Supported</span>
                      </li>
                      <li className="flex justify-between border-b border-white/5 pb-2">
                         <span>Refresh Rate</span>
                         <span className="text-white">Live</span>
                      </li>
                      <li className="flex justify-between">
                         <span>Data Source</span>
                         <span className="text-white">WHOIS / RDAP / DNS</span>
                      </li>
                   </ul>
                </div>
             </div>
          </div>

          {/* Values */}
          <div className="mb-32">
            <h2 className="font-display text-3xl text-white text-center mb-16">Operational Code</h2>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {[
                { icon: Target, title: 'Precision', desc: 'Accurate data. No guesswork. Every check counts.' },
                { icon: Shield, title: 'Privacy', desc: 'Your strategy stays yours. We never share or sell data.' },
                { icon: Zap, title: 'Speed', desc: 'Fast intel. You move first.' },
                { icon: Users, title: 'Transparency', desc: 'Clear pricing. No surprises. Ever.' },
              ].map((value, i) => (
                <div
                  key={value.title}
                  className="p-8 border border-white/10 bg-[#050505] hover:border-accent/30 transition-all group"
                >
                  <value.icon className="w-8 h-8 text-white/20 group-hover:text-accent mb-6 transition-colors" />
                  <h3 className="font-display text-xl text-white mb-3">{value.title}</h3>
                  <p className="font-mono text-xs text-white/40 leading-relaxed">{value.desc}</p>
                </div>
              ))}
            </div>
          </div>

          {/* CTA */}
          <div className="text-center bg-[#050505] border border-white/10 p-12 sm:p-20 relative overflow-hidden">
            <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.05]" />
            <div className="relative z-10">
                <h2 className="font-display text-4xl sm:text-5xl text-white mb-6">Ready to deploy?</h2>
                <p className="text-white/50 mb-10 max-w-lg mx-auto font-mono text-sm">
                Join the elite circle of investors who stop guessing and start knowing.
                </p>
                <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
                <Link
                    href="/register"
                    className="px-8 py-4 bg-accent text-black text-xs font-bold uppercase tracking-[0.2em] hover:bg-white transition-all shadow-[0_0_20px_rgba(16,185,129,0.2)]"
                    style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
                >
                    Enter Terminal
                </Link>
                <Link
                    href="/contact"
                    className="px-8 py-4 border border-white/20 text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-all"
                >
                    Contact HQ
                </Link>
                </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}