'use client'

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

const values = [
  {
    icon: Target,
    title: 'Precision',
    description: 'Accurate data. No guesswork. Every check counts.',
  },
  {
    icon: Shield,
    title: 'Privacy',
    description: 'Your strategy stays yours. We never share or sell data.',
  },
  {
    icon: Zap,
    title: 'Speed',
    description: 'Real-time intel. You see it first.',
  },
  {
    icon: Users,
    title: 'Transparency',
    description: 'Clear pricing. No surprises. Ever.',
  },
]

const stats = [
  { value: '500K+', label: 'Domains Tracked' },
  { value: '99.9%', label: 'Uptime' },
  { value: '50ms', label: 'Response Time' },
  { value: '24/7', label: 'Always On' },
]

const team = [
  {
    name: 'Domain Intel',
    role: 'Core',
    description: 'WHOIS + RDAP queries. Accurate. Reliable. Always.',
  },
  {
    name: 'Price Tracking',
    role: 'Market',
    description: 'Real-time TLD pricing. Know what domains cost.',
  },
  {
    name: 'Instant Alerts',
    role: 'Notify',
    description: 'Domain drops? You know first. Email or webhook.',
  },
]

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-background relative flex flex-col">
      {/* Ambient glow */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-4xl mx-auto">
          {/* Hero */}
          <div className="text-center mb-16 sm:mb-20 animate-fade-in">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
              <Globe className="w-4 h-4 text-accent" />
              <span className="text-ui-sm text-foreground-muted">About pounce</span>
            </div>
            <h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-6">
              Built for hunters.
              <br />
              <span className="text-foreground-muted">By hunters.</span>
            </h1>
            <p className="text-body-lg text-foreground-muted max-w-2xl mx-auto">
              POUNCE exists for one reason: to give you the edge. 
              Track domains. See opportunities. Move first.
            </p>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-20 animate-slide-up">
            {stats.map((stat) => (
              <div
                key={stat.label}
                className="p-6 bg-background-secondary/50 border border-border rounded-xl text-center"
              >
                <p className="text-heading-md sm:text-heading-lg font-display text-accent mb-1">
                  {stat.value}
                </p>
                <p className="text-ui-sm text-foreground-muted">{stat.label}</p>
              </div>
            ))}
          </div>

          {/* Mission */}
          <section className="mb-20 animate-slide-up">
            <div className="p-8 sm:p-10 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl">
              <h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-4">
                The Mission
              </h2>
              <p className="text-body-lg text-foreground-muted leading-relaxed">
                Level the playing field. Domain intel shouldn&apos;t be locked behind enterprise 
                paywalls. With POUNCE, anyone can track domains, spot trends, and strike 
                when the iron&apos;s hot. Simple tools. Powerful results.
              </p>
            </div>
          </section>

          {/* Values */}
          <section className="mb-20">
            <h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-8 text-center">
              Our Code
            </h2>
            <div className="grid sm:grid-cols-2 gap-4">
              {values.map((value, i) => (
                <div
                  key={value.title}
                  className="p-6 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover transition-all duration-300 animate-slide-up"
                  style={{ animationDelay: `${i * 100}ms` }}
                >
                  <div className="w-10 h-10 bg-background-tertiary rounded-lg flex items-center justify-center mb-4">
                    <value.icon className="w-5 h-5 text-accent" />
                  </div>
                  <h3 className="text-body font-medium text-foreground mb-2">{value.title}</h3>
                  <p className="text-body-sm text-foreground-muted">{value.description}</p>
                </div>
              ))}
            </div>
          </section>

          {/* Features */}
          <section className="mb-20">
            <h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-8 text-center">
              What We Do
            </h2>
            <div className="space-y-4">
              {team.map((item, i) => (
                <div
                  key={item.name}
                  className="p-6 bg-background-secondary/30 border border-border rounded-xl flex flex-col sm:flex-row sm:items-center gap-4 animate-slide-up"
                  style={{ animationDelay: `${i * 100}ms` }}
                >
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-body font-medium text-foreground">{item.name}</h3>
                      <span className="text-ui-xs text-accent bg-accent-muted px-2 py-0.5 rounded-full">
                        {item.role}
                      </span>
                    </div>
                    <p className="text-body-sm text-foreground-muted">{item.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* CTA */}
          <section className="text-center animate-slide-up">
            <h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-4">
              Ready to hunt?
            </h2>
            <p className="text-body text-foreground-muted mb-8">
              Join the hunters who move first.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
              <Link
                href="/register"
                className="flex items-center gap-2 px-6 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
              >
                Start Hunting
                <ArrowRight className="w-4 h-4" />
              </Link>
              <Link
                href="/contact"
                className="flex items-center gap-2 px-6 py-3 bg-background-secondary border border-border text-foreground font-medium rounded-xl hover:border-border-hover transition-all"
              >
                Get in Touch
              </Link>
            </div>
          </section>
        </div>
      </main>

      <Footer />
    </div>
  )
}