import { Link } from 'react-router-dom';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ArrowRight, Zap, Shield, Globe, Sparkles } from 'lucide-react';

const HERO_IMG = 'https://mgx-backend-cdn.metadl.com/generate/images/1093861/2026-04-06/32fa9e88-3df0-427c-94dd-b5987159a815.png';
const CROSSCHAIN_IMG = 'https://mgx-backend-cdn.metadl.com/generate/images/1093861/2026-04-06/312d7782-77b3-428e-9261-701074b481ce.png';
const SECURITY_IMG = 'https://mgx-backend-cdn.metadl.com/generate/images/1093861/2026-04-06/63a50989-2349-4e82-ab3b-db5363ebe9f5.png';

const features = [
  {
    icon: Globe,
    title: 'Cross-Chain Freedom',
    description:
      'Seamlessly move assets between Ethereum, Solana, Tron, and Hyperliquid. No bridges, no headaches — just smooth sailing across chains.',
    image: CROSSCHAIN_IMG,
  },
  {
    icon: Shield,
    title: 'Fort Knox Security',
    description:
      'Your keys, your crypto. Military-grade encryption keeps your assets safer than a treasure chest buried on a desert island.',
    image: SECURITY_IMG,
  },
  {
    icon: Zap,
    title: 'Lightning Fast',
    description:
      'Transactions that move faster than a kite in a hurricane. Sub-second confirmations across all supported chains.',
    image: null,
  },
  {
    icon: Sparkles,
    title: 'Beautiful & Simple',
    description:
      'A wallet so clean and intuitive, even your grandma could swap tokens on it. (Hi grandma! 👋)',
    image: null,
  },
];

const chains = [
  { name: 'Ethereum', symbol: 'ETH', color: 'bg-[#627EEA]/10 text-[#627EEA]' },
  { name: 'Solana', symbol: 'SOL', color: 'bg-[#9945FF]/10 text-[#9945FF]' },
  { name: 'Tron', symbol: 'TRX', color: 'bg-[#FF0013]/10 text-[#FF0013]' },
  { name: 'Hyperliquid', symbol: 'HYPE', color: 'bg-[#50E3C2]/10 text-[#50E3C2]' },
  { name: 'More Soon', symbol: '...', color: 'bg-primary/10 text-primary' },
];

const Index = () => {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      {/* Hero Section */}
      <section className="relative pt-16 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img
            src={HERO_IMG}
            alt="Kite flying over turquoise ocean"
            className="w-full h-full object-cover opacity-30"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/60 via-background/80 to-background" />
        </div>

        <div className="relative z-10 container mx-auto px-6 pt-20 pb-28 md:pt-32 md:pb-40 text-center">
          <Badge
            variant="secondary"
            className="mb-6 px-4 py-1.5 text-sm font-medium bg-accent text-accent-foreground border-0"
          >
            🪁 Coming Soon — Q2 2026
          </Badge>

          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight mb-6 max-w-4xl mx-auto">
            Let Your Crypto{' '}
            <span className="text-primary relative">
              Fly Free
              <svg
                className="absolute -bottom-2 left-0 w-full"
                viewBox="0 0 200 8"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 5.5C40 1.5 80 1.5 100 3.5C120 5.5 160 5.5 199 2"
                  stroke="hsl(var(--primary))"
                  strokeWidth="2"
                  strokeLinecap="round"
                  className="opacity-60"
                />
              </svg>
            </span>
          </h1>

          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 font-sans">
            From the founders of <span className="font-semibold text-foreground">Leap Wallet</span> — the first wallet that soars across Ethereum, Solana, Tron, and Hyperliquid like a kite
            on a summer breeze. One wallet. All chains. Zero friction.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link to="/waitlist">
              <Button
                size="lg"
                className="rounded-full px-8 text-base bg-primary text-primary-foreground hover:bg-primary/90 shadow-md"
              >
                Join the Waitlist <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
            <a href="#features">
              <Button
                variant="outline"
                size="lg"
                className="rounded-full px-8 text-base border-border text-foreground hover:bg-secondary"
              >
                Learn More
              </Button>
            </a>
          </div>

          {/* Chain badges */}
          <div className="mt-12 flex items-center justify-center gap-3 flex-wrap">
            {chains.map((chain) => (
              <div
                key={chain.name}
                className={`px-4 py-2 rounded-full text-sm font-medium ${chain.color} backdrop-blur-sm`}
              >
                {chain.symbol} · {chain.name}
              </div>
            ))}
          </div>
        </div>

        {/* Decorative kite string */}
        <div className="absolute top-32 right-[15%] hidden lg:block animate-drift">
          <div className="text-6xl">🪁</div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 md:py-28 bg-background">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <Badge
              variant="secondary"
              className="mb-4 px-3 py-1 text-xs bg-accent text-accent-foreground border-0"
            >
              Why Kite?
            </Badge>
            <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
              Built Different. <span className="text-primary">Built Better.</span>
            </h2>
            <p className="text-muted-foreground max-w-xl mx-auto font-sans">
              From the team behind Leap Wallet — we're not just another wallet, we're the wind beneath your
              portfolio's wings.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {features.map((feature) => (
              <Card
                key={feature.title}
                className="group border border-border bg-card hover:shadow-lg transition-all duration-300 overflow-hidden"
              >
                {feature.image && (
                  <div className="h-48 overflow-hidden">
                    <img
                      src={feature.image}
                      alt={feature.title}
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                  </div>
                )}
                <CardContent className="p-6">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
                      <feature.icon className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-foreground mb-2 font-serif">
                        {feature.title}
                      </h3>
                      <p className="text-muted-foreground text-sm font-sans leading-relaxed">
                        {feature.description}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 md:py-28 bg-secondary/30">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
              How It <span className="text-primary">Works</span>
            </h2>
            <p className="text-muted-foreground max-w-xl mx-auto font-sans">
              Three steps to cross-chain freedom. Easy as a day at the beach. 🏖️
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {[
              {
                step: '01',
                title: 'Create Your Wallet',
                desc: 'Set up in seconds. One seed phrase rules them all — Ethereum, Solana, Tron, Hyperliquid, and every chain we add next.',
                emoji: '🌊',
              },
              {
                step: '02',
                title: 'Add Your Assets',
                desc: 'Import tokens, NFTs, and DeFi positions from any supported chain. We fetch everything automagically.',
                emoji: '🐚',
              },
              {
                step: '03',
                title: 'Fly Cross-Chain',
                desc: 'Swap, send, and bridge assets between chains with a single tap. No extra apps needed.',
                emoji: '🪁',
              },
            ].map((item) => (
              <div key={item.step} className="text-center group">
                <div className="w-16 h-16 rounded-2xl bg-card border border-border shadow-sm mx-auto mb-5 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">
                  {item.emoji}
                </div>
                <div className="text-xs font-bold text-primary mb-2 font-sans tracking-widest uppercase">
                  Step {item.step}
                </div>
                <h3 className="text-lg font-bold text-foreground mb-2 font-serif">
                  {item.title}
                </h3>
                <p className="text-sm text-muted-foreground font-sans leading-relaxed">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 md:py-28 bg-background">
        <div className="container mx-auto px-6">
          <Card className="bg-primary text-primary-foreground border-0 overflow-hidden relative">
            <CardContent className="p-10 md:p-16 text-center relative z-10">
              <h2 className="text-3xl md:text-5xl font-bold mb-4 font-serif">
                Ready to Catch the Wind?
              </h2>
              <p className="text-primary-foreground/80 max-w-lg mx-auto mb-8 font-sans text-lg">
                Built by the Leap Wallet team. Join thousands of early birds on the waitlist. Be the first to
                fly when Kite Wallet launches.
              </p>
              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                <Link to="/waitlist">
                  <Button
                    size="lg"
                    className="rounded-full px-8 bg-background text-foreground hover:bg-background/90 shadow-md"
                  >
                    Join Waitlist 🪁
                  </Button>
                </Link>
              </div>
              <p className="mt-6 text-xs text-primary-foreground/60 font-sans">
                No spam, just launch updates and early access perks.
              </p>
            </CardContent>
            {/* Decorative circles */}
            <div className="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-white/5" />
            <div className="absolute -bottom-16 -left-16 w-48 h-48 rounded-full bg-white/5" />
          </Card>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default Index;