import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Shield, Zap, Eye, Users, ArrowRight, DollarSign, TrendingUp, Lock } from "lucide-react";

const features = [
  {
    icon: Zap,
    title: "Lowest Fees in the Industry",
    description: "Just 2.9% + $0.30 per transaction. No hidden platform fees. Every dollar goes further.",
  },
  {
    icon: Eye,
    title: "Total Transparency",
    description: "Real-time dashboards, instant receipts, and full FEC-compliant reporting. No black boxes.",
  },
  {
    icon: Lock,
    title: "Your Data Stays Yours",
    description: "We never sell donor data. Period. Privacy-first architecture with end-to-end encryption.",
  },
  {
    icon: Users,
    title: "Built for Liberty",
    description: "Purpose-built for local parties, independent candidates, and freedom-oriented non-profits.",
  },
];

const stats = [
  { label: "Raised", value: "$12.4M+", icon: DollarSign },
  { label: "Organizations", value: "840+", icon: Users },
  { label: "Avg Growth", value: "34%", icon: TrendingUp },
];

const Index = () => {
  return (
    <div className="min-h-screen">
      {/* Hero */}
      <section className="relative bg-secondary overflow-hidden">
        <div className="absolute inset-0 opacity-5">
          <div className="absolute top-20 left-10 w-72 h-72 rounded-full bg-gold blur-[120px]" />
          <div className="absolute bottom-10 right-10 w-96 h-96 rounded-full bg-gold blur-[150px]" />
        </div>
        <div className="container relative py-20 md:py-32">
          <div className="max-w-3xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-navy-light text-gold text-xs font-medium mb-6 animate-fade-in">
              <Shield className="h-3 w-3" />
              Freedom-First Fundraising
            </div>
            <h1 className="font-display text-4xl md:text-6xl lg:text-7xl font-bold text-secondary-foreground mb-6 animate-fade-in" style={{ animationDelay: "0.1s" }}>
              Fund the Future of{" "}
              <span className="text-gold-gradient">Freedom</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl mx-auto animate-fade-in" style={{ animationDelay: "0.2s" }}>
              The modern fundraising platform for candidates, parties, and non-profits who believe in transparency, low fees, and keeping donor data private.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in" style={{ animationDelay: "0.3s" }}>
              <Link to="/donate">
                <Button variant="gold" size="lg" className="text-base px-8">
                  Start Giving <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
              <Link to="/directory">
                <Button variant="gold-outline" size="lg" className="text-base px-8">
                  Browse Causes
                </Button>
              </Link>
            </div>
          </div>

          {/* Stats bar */}
          <div className="mt-16 md:mt-24 grid grid-cols-3 gap-4 max-w-xl mx-auto animate-fade-in" style={{ animationDelay: "0.4s" }}>
            {stats.map((stat) => (
              <div key={stat.label} className="text-center">
                <div className="flex items-center justify-center mb-1">
                  <stat.icon className="h-4 w-4 text-gold mr-1" />
                  <span className="font-display text-2xl md:text-3xl font-bold text-secondary-foreground">{stat.value}</span>
                </div>
                <span className="text-xs text-muted-foreground">{stat.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-20 md:py-28">
        <div className="container">
          <div className="text-center mb-14">
            <h2 className="font-display text-3xl md:text-4xl font-bold mb-4">
              Why <span className="text-gold">GiveGold</span>?
            </h2>
            <p className="text-muted-foreground max-w-lg mx-auto">
              No corporate bloat. No data harvesting. Just a clean, fast way to fund what matters.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {features.map((feature, i) => (
              <Card key={feature.title} className="border-border/50 hover:border-gold/30 transition-colors group animate-fade-in" style={{ animationDelay: `${i * 0.1}s` }}>
                <CardContent className="p-6">
                  <div className="h-10 w-10 rounded-lg gold-gradient flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <feature.icon className="h-5 w-5 text-secondary" />
                  </div>
                  <h3 className="font-display font-semibold text-lg mb-2">{feature.title}</h3>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-secondary">
        <div className="container text-center">
          <h2 className="font-display text-3xl md:text-4xl font-bold text-secondary-foreground mb-4">
            Ready to raise with integrity?
          </h2>
          <p className="text-muted-foreground mb-8 max-w-md mx-auto">
            Join hundreds of organizations already using GiveGold to fund freedom.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link to="/donate">
              <Button variant="gold" size="lg" className="px-10">
                Make a Donation
              </Button>
            </Link>
            <Link to="/dashboard">
              <Button variant="gold-outline" size="lg" className="px-10">
                Organization Portal
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Index;