import { Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Megaphone,
  ShieldCheck,
  Zap,
  BarChart3,
  Users,
  Sparkles,
  ArrowRight,
  CheckCircle2,
  MessageSquare,
  Phone,
  Volume2,
  Globe,
} from "lucide-react";

export function ThemeClassic() {
  return (
    <div className="min-h-dvh bg-background">
      <nav className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur-xl">
        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6">
          <div className="flex items-center gap-2">
            <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-primary to-accent" />
            <span className="text-sm font-semibold tracking-tight">VotersAlert</span>
          </div>
          <div className="flex items-center gap-3">
            <Button variant="ghost" size="sm" asChild>
              <Link to="/login">Sign in</Link>
            </Button>
            <Button size="sm" asChild>
              <Link to="/register">Get started</Link>
            </Button>
          </div>
        </div>
      </nav>

      <section className="relative overflow-hidden px-4 sm:px-6 pt-16 pb-24">
        <div className="absolute inset-0 bg-gradient-to-b from-primary/5 via-transparent to-transparent" />
        <div className="relative mx-auto max-w-5xl text-center">
          <Badge variant="secondary" className="mb-6 text-xs">
            <Sparkles className="mr-1 h-3 w-3" /> Now with AI-powered compliance
          </Badge>
          <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
            The campaign platform built for{" "}
            <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
              Nigerian politics
            </span>
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
            Create, launch, and optimize verified multi-channel political campaigns. Reach
            supporters by State, LGA, and Ward.
          </p>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
            <Button size="lg" className="gap-2" asChild>
              <Link to="/register">
                Start your campaign <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link to="/login">Sign in to dashboard</Link>
            </Button>
          </div>
          <div className="mt-16 grid grid-cols-2 gap-4 sm:grid-cols-4">
            {[
              { label: "Campaigns launched", value: "12,000+" },
              { label: "Messages delivered", value: "48M+" },
              { label: "States covered", value: "36+1" },
              { label: "Advertisers verified", value: "850+" },
            ].map((s) => (
              <div key={s.label} className="rounded-xl border bg-card/50 p-4 backdrop-blur-sm">
                <div className="text-2xl font-bold tracking-tight">{s.value}</div>
                <div className="mt-1 text-xs text-muted-foreground">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-t bg-muted/30 px-4 sm:px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold tracking-tight">Everything you need to win</h2>
            <p className="mt-3 text-muted-foreground max-w-xl mx-auto">
              A complete campaign operations platform with AI, compliance, and multi-channel
              delivery.
            </p>
          </div>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {[
              {
                icon: Megaphone,
                title: "Multi-Channel Campaigns",
                description: "WhatsApp, SMS, Voice, Facebook, and Google Ads from one workspace.",
              },
              {
                icon: Users,
                title: "Precision Targeting",
                description: "Target voters by State, LGA, Ward, gender, age, and language.",
              },
              {
                icon: Sparkles,
                title: "AI Content Studio",
                description:
                  "Generate compliant campaign copy in English, Hausa, Yoruba, Igbo, and Pidgin.",
              },
              {
                icon: ShieldCheck,
                title: "Built-in Compliance",
                description: "Automated INEC and NCC policy checks with risk scoring.",
              },
              {
                icon: BarChart3,
                title: "Real-time Analytics",
                description: "Track reach, engagement, conversions across every channel.",
              },
              {
                icon: Zap,
                title: "Smart Optimizations",
                description: "AI-driven suggestions for budget, timing, and content.",
              },
            ].map((f) => (
              <div
                key={f.title}
                className="rounded-xl border bg-card p-6 hover:shadow-lg transition-shadow"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                  <f.icon className="h-5 w-5 text-primary" />
                </div>
                <h3 className="mt-4 text-base font-semibold">{f.title}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{f.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="px-4 sm:px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-bold tracking-tight">Reach voters everywhere</h2>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            {[
              { icon: MessageSquare, name: "WhatsApp" },
              { icon: Phone, name: "SMS" },
              { icon: Volume2, name: "Voice" },
              { icon: Globe, name: "Social & Search" },
            ].map((c) => (
              <div
                key={c.name}
                className="flex flex-col items-center rounded-xl border bg-card p-6 text-center"
              >
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <c.icon className="h-6 w-6 text-primary" />
                </div>
                <div className="mt-3 font-semibold">{c.name}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-t bg-muted/30 px-4 sm:px-6 py-20">
        <div className="mx-auto max-w-4xl text-center">
          <h2 className="text-3xl font-bold tracking-tight">Trusted by verified campaigns</h2>
          <div className="mt-10 flex flex-col items-start gap-4 text-left mx-auto max-w-lg">
            {[
              "INEC advertiser verification",
              "Consent-based voter data only",
              "NCC-compliant messaging",
              "End-to-end audit trails",
              "Bank-grade security",
            ].map((i) => (
              <div key={i} className="flex items-center gap-3">
                <CheckCircle2 className="h-5 w-5 text-success shrink-0" />
                <span className="text-sm text-muted-foreground">{i}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <footer className="border-t px-4 sm:px-6 py-10">
        <div className="mx-auto max-w-6xl flex flex-col sm:flex-row items-center justify-between gap-4">
          <span className="text-sm font-semibold">VotersAlert</span>
          <span className="text-xs text-muted-foreground">
            &copy; {new Date().getFullYear()} VotersAlert
          </span>
        </div>
      </footer>
    </div>
  );
}