app/page.tsx

"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Flame, Heart, Users, Globe, ArrowRight, Sparkles, Shield, Zap, TrendingUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import ParticleBackground from "@/components/particle-background"
import FlameAnimation from "@/components/flame-animation"
import SoundEffects from "@/components/sound-effects"
import MostarAIAssistant from "@/components/ai-assistant"

const HomePage = () => {
  const [mounted, setMounted] = useState(false)
  const [activeSection, setActiveSection] = useState("hero")

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

  if (!mounted) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-orange-50 to-red-50 flex items-center justify-center">
        <div className="text-center">
          <Flame className="w-16 h-16 text-orange-500 animate-pulse mx-auto mb-4" />
          <p className="text-gray-600">Loading FlameBorn Ubuntu...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-red-50 to-pink-50 relative overflow-hidden">
      <ParticleBackground />
      <SoundEffects />

      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <div className="mb-8">
            <FlameAnimation />
          </div>

          <Badge variant="outline" className="mb-6 bg-white/80 backdrop-blur-sm border-orange-200">
            <Sparkles className="w-4 h-4 mr-2" />
            Ubuntu-Powered Healthcare Tokenization
          </Badge>

          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight">
            <span className="bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">FlameBorn</span>
            <br />
            <span className="text-3xl md:text-4xl lg:text-5xl text-gray-700">I am because we are</span>
          </h1>

          <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-4xl mx-auto leading-relaxed">
            Bridging traditional African Ubuntu philosophy with modern healthcare tokenization. Every birth registered,
            every healer verified, every community connected through the power of blockchain.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
            <Button asChild size="lg" className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3">
              <Link href="/launch">
                <Flame className="w-5 h-5 mr-2" />
                Launch App
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
              <Link href="/manifesto">
                <Heart className="w-5 h-5 mr-2" />
                Read Manifesto
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
              <Link href="/analytics">
                <TrendingUp className="w-5 h-5 mr-2" />
                View Analytics
              </Link>
            </Button>
          </div>

          {/* Key Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
              <div className="text-2xl font-bold text-orange-600">1,247</div>
              <div className="text-sm text-gray-600">Healthcare Workers</div>
            </div>
            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
              <div className="text-2xl font-bold text-red-600">523</div>
              <div className="text-sm text-gray-600">Births Verified</div>
            </div>
            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
              <div className="text-2xl font-bold text-blue-600">$125K</div>
              <div className="text-sm text-gray-600">Donations Distributed</div>
            </div>
            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
              <div className="text-2xl font-bold text-green-600">94%</div>
              <div className="text-sm text-gray-600">Impact Score</div>
            </div>
          </div>
        </div>
      </section>

      {/* Ubuntu Philosophy Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ubuntu: The Heart of FlameBorn</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              "Umuntu ngumuntu ngabantu" - A person is a person through other persons. This ancient African wisdom
              guides our approach to healthcare tokenization.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="border-orange-200 bg-white/80 backdrop-blur-sm">
              <CardHeader>
                <Heart className="w-12 h-12 text-red-500 mb-4" />
                <CardTitle>Interconnectedness</CardTitle>
                <CardDescription>
                  Every token represents our shared humanity and collective responsibility for health
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  In Ubuntu philosophy, individual wellness is inseparable from community health. Our tokens create
                  digital bonds that strengthen real-world healing networks.
                </p>
              </CardContent>
            </Card>

            <Card className="border-orange-200 bg-white/80 backdrop-blur-sm">
              <CardHeader>
                <Users className="w-12 h-12 text-blue-500 mb-4" />
                <CardTitle>Collective Prosperity</CardTitle>
                <CardDescription>
                  When one thrives, we all thrive - tokenomics designed for shared abundance
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Our distribution model ensures that healthcare workers, communities, and supporters all benefit from
                  the network's growth and success.
                </p>
              </CardContent>
            </Card>

            <Card className="border-orange-200 bg-white/80 backdrop-blur-sm">
              <CardHeader>
                <Globe className="w-12 h-12 text-green-500 mb-4" />
                <CardTitle>Cultural Bridge</CardTitle>
                <CardDescription>Honoring traditional wisdom while embracing technological innovation</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  We bridge ancient African healing traditions with modern blockchain technology, creating a culturally
                  respectful path to global healthcare equity.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">How FlameBorn Works</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              A simple, powerful system that rewards healthcare impact and builds community wealth
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="bg-orange-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <Shield className="w-8 h-8 text-orange-600" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Register</h3>
              <p className="text-gray-600">Healthcare workers verify their credentials and join the Ubuntu network</p>
            </div>

            <div className="text-center">
              <div className="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <Zap className="w-8 h-8 text-blue-600" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Serve</h3>
              <p className="text-gray-600">Provide healthcare services and register births in their communities</p>
            </div>

            <div className="text-center">
              <div className="bg-green-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <Flame className="w-8 h-8 text-green-600" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Earn</h3>
              <p className="text-gray-600">Receive FLAME tokens for verified healthcare impact and community service</p>
            </div>

            <div className="text-center">
              <div className="bg-purple-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <Heart className="w-8 h-8 text-purple-600" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Grow</h3>
              <p className="text-gray-600">
                Build wealth together as the network creates lasting healthcare infrastructure
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* AI Assistant Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Meet Mostar, Your Ubuntu AI Guide</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Ask questions about FlameBorn, Ubuntu philosophy, African wisdom, or healthcare tokenization. Mostar
              embodies the spirit of "I am because we are."
            </p>
          </div>

          <div className="flex justify-center">
            <MostarAIAssistant />
          </div>
        </div>
      </section>

      {/* Call to Action Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Join the Ubuntu Healthcare Revolution</h2>
          <p className="text-xl text-gray-600 mb-8">
            Together, we can create a world where every birth is celebrated, every healer is supported, and every
            community thrives.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Button
              asChild
              size="lg"
              className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white px-8 py-3"
            >
              <Link href="/register/healer">
                <Shield className="w-5 h-5 mr-2" />
                Become a Healer
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
              <Link href="/register/guardian">
                <Users className="w-5 h-5 mr-2" />
                Join as Guardian
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
              <Link href="/community-pulse">
                <Globe className="w-5 h-5 mr-2" />
                Explore Community
                <ArrowRight className="w-4 h-4 ml-2" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Flame className="w-8 h-8 text-orange-500" />
                <span className="text-xl font-bold">FlameBorn</span>
              </div>
              <p className="text-gray-400">Ubuntu-powered healthcare tokenization for a connected world.</p>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-4">Platform</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <Link href="/launch" className="hover:text-white">
                    Launch App
                  </Link>
                </li>
                <li>
                  <Link href="/analytics" className="hover:text-white">
                    Analytics
                  </Link>
                </li>
                <li>
                  <Link href="/token-system" className="hover:text-white">
                    Token System
                  </Link>
                </li>
                <li>
                  <Link href="/smart-contracts" className="hover:text-white">
                    Smart Contracts
                  </Link>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-4">Community</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <Link href="/guardians-sanctuary" className="hover:text-white">
                    Guardians Sanctuary
                  </Link>
                </li>
                <li>
                  <Link href="/flameborn-journey" className="hover:text-white">
                    FlameBorn Journey
                  </Link>
                </li>
                <li>
                  <Link href="/community-pulse" className="hover:text-white">
                    Community Pulse
                  </Link>
                </li>
                <li>
                  <Link href="/healers" className="hover:text-white">
                    Find Healers
                  </Link>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-4">Learn</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <Link href="/manifesto" className="hover:text-white">
                    Manifesto
                  </Link>
                </li>
                <li>
                  <Link href="/learn-earn" className="hover:text-white">
                    Learn & Earn
                  </Link>
                </li>
                <li>
                  <Link href="/legal" className="hover:text-white">
                    Legal
                  </Link>
                </li>
                <li>
                  <Link href="/test-proverbs" className="hover:text-white">
                    Ubuntu Wisdom
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2024 FlameBorn. Built with Ubuntu philosophy. "I am because we are."</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default HomePage