components/home-hero.tsx

"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Flame, Shield, Users, Activity, ArrowRight, Zap } from "lucide-react"
import Link from "next/link"
import { useMobile } from "@/hooks/use-mobile"
import { FlameAnimation } from "@/components/flame-animation"
import { TypedIntroText } from "@/components/typed-intro-text"

export function HomeHero() {
  const [mounted, setMounted] = useState(false)
  const isMobile = useMobile()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-pulse text-orange-500">
          <Flame className="h-12 w-12" />
        </div>
      </div>
    )
  }

  return (
    <section className="relative min-h-screen flex items-center justify-center px-4 py-20">
      <div className="absolute inset-0 bg-gradient-to-br from-orange-900/20 via-red-900/10 to-black/50" />

      <div className="relative z-10 container mx-auto max-w-6xl">
        <div className="text-center space-y-8">
          {/* Flame Animation */}
          <div className="flex justify-center mb-8">
            <FlameAnimation />
          </div>

          {/* Main Title */}
          <div className="space-y-4">
            <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 px-4 py-2">
              <Zap className="h-4 w-4 mr-2" />
              Genesis Testnet Live
            </Badge>

            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white leading-tight">
              <span className="bg-gradient-to-r from-orange-400 to-red-500 bg-clip-text text-transparent">
                FlameBorn
              </span>
              <br />
              <span className="text-2xl md:text-3xl lg:text-4xl text-gray-300">Africa's Health Restoration Engine</span>
            </h1>

            <div className="max-w-3xl mx-auto">
              <TypedIntroText />
            </div>
          </div>

          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            <Card className="bg-white/5 backdrop-blur-sm border-orange-500/20">
              <CardContent className="p-6 text-center">
                <Shield className="h-8 w-8 text-orange-500 mx-auto mb-3" />
                <div className="text-2xl font-bold text-white">2</div>
                <div className="text-gray-400">Active Validators</div>
              </CardContent>
            </Card>

            <Card className="bg-white/5 backdrop-blur-sm border-orange-500/20">
              <CardContent className="p-6 text-center">
                <Users className="h-8 w-8 text-orange-500 mx-auto mb-3" />
                <div className="text-2xl font-bold text-white">1M+</div>
                <div className="text-gray-400">Max Token Supply</div>
              </CardContent>
            </Card>

            <Card className="bg-white/5 backdrop-blur-sm border-orange-500/20">
              <CardContent className="p-6 text-center">
                <Activity className="h-8 w-8 text-orange-500 mx-auto mb-3" />
                <div className="text-2xl font-bold text-white">Live</div>
                <div className="text-gray-400">Testnet Status</div>
              </CardContent>
            </Card>
          </div>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link href="/testnet">
              <Button size="lg" className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 text-lg">
                <Flame className="h-5 w-5 mr-2" />
                Enter Testnet
                <ArrowRight className="h-5 w-5 ml-2" />
              </Button>
            </Link>

            <Link href="/healers">
              <Button
                variant="outline"
                size="lg"
                className="border-orange-500 text-orange-400 hover:bg-orange-500/20 px-8 py-4 text-lg bg-transparent"
              >
                <Shield className="h-5 w-5 mr-2" />
                Become Validator
              </Button>
            </Link>
          </div>

          {/* Network Status */}
          <div className="pt-8">
            <div className="flex items-center justify-center space-x-2 text-sm text-gray-400">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <span>Connected to Celo Alfajores Testnet</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}