import React from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import { Sparkles, Zap, Lock } from 'lucide-react';
import Header from 'scr/components/Header';
import Footer from 'scr/components/Footer';
import GlowText from 'scr/components/GlowText';
import NeonButton from 'scr/components/NeonButton';
import FactionCard from 'scr/components/FactionCard';
import FeatureCard from '@/components/FeatureCard';
import ShopSection from '@/components/ShopSection';
import ServerStatusWidget from '@/components/ServerStatusWidget';

function HomePage({ onOpenJoinModal }) {
  const features = [
    {
      image: 'https://horizons-cdn.hostinger.com/2eb65789-be60-4aab-be15-9046b9689cbc/27a95f2864742f84642f0a1808353576.jpg',
      title: 'Hub Central',
      description: 'O coração pulsante de Hexoria, onde jogadores se reúnem, comercializam e planejam suas próximas aventuras no universo.'
    },
    {
      image: 'https://horizons-cdn.hostinger.com/2eb65789-be60-4aab-be15-9046b9689cbc/d136af9b58af0eb9251c4ef7263dfe00.jpg',
      title: 'Vilas Ancestrais',
      description: 'Explore assentamentos antigos dos Alay, onde a harmonia com o Hexorium ainda ressoa nas estruturas preservadas.'
    },
    {
      image: 'https://horizons-cdn.hostinger.com/2eb65789-be60-4aab-be15-9046b9689cbc/1478b0a80a3f98e2904637aa61de1d45.jpg',
      title: 'Áreas Corrompidas',
      description: 'Territórios dominados pela corrupção Vex, onde o perigo e as recompensas lendárias aguardam os corajosos.'
    }
  ];
  
  return (
    <>
      <Helmet>
        <title>Hexoria Network - O Último Núcleo da Realidade</title>
        <meta name="description" content="Entre no universo cinematográfico de Hexoria, onde a energia ancestral Hexorium sustenta o equilíbrio entre luz e corrupção. Escolha seu destino entre ALLY e VEX." />
      </Helmet>
      
      <div className="min-h-screen noise-overlay">
        <Header onOpenJoinModal={onOpenJoinModal} />
        
        <section className="relative min-h-[100dvh] flex items-center justify-center overflow-hidden">
          <div 
            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
            style={{ 
              backgroundImage: 'url(https://horizons-cdn.hostinger.com/2eb65789-be60-4aab-be15-9046b9689cbc/3370423ebbd2d516172a24cff9b19435.jpg)'
            }}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/60 to-background" />
          
          <div className="relative z-10 container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-20">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
            >
              <h1 className="mb-6">
                <GlowText variant="gradient" className="text-5xl md:text-6xl lg:text-7xl font-extrabold">
                  Hexoria Network
                </GlowText>
              </h1>
              
              <motion.p
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.8, delay: 0.3 }}
                className="text-2xl md:text-3xl text-[hsl(var(--accent))] text-glow-cyan mb-4"
              >
                O Último Núcleo da Realidade
              </motion.p>
              
              <motion.p
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.8, delay: 0.5 }}
                className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-3xl mx-auto"
              >
                Bem-vindo a Hexoria
              </motion.p>
              
              <ServerStatusWidget />
              
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.7 }}
              >
                <NeonButton onClick={onOpenJoinModal} variant="primary">
                  Entrar no Servidor
                </NeonButton>
              </motion.div>
            </motion.div>
          </div>
        </section>
        
        <section id="story" className="py-24 atmospheric-depth">
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="max-w-4xl mx-auto text-center"
            >
              <div className="flex items-center justify-center gap-3 mb-6">
                <Sparkles className="w-8 h-8 text-[hsl(var(--primary))]" />
                <h2 className="text-[hsl(var(--primary))] text-glow-magenta">
                  A Origem
                </h2>
                <Sparkles className="w-8 h-8 text-[hsl(var(--primary))]" />
              </div>
              
              <p className="text-lg md:text-xl text-foreground/90 leading-relaxed mb-8">
                Hexoria é um universo Minecraft cinematográfico onde uma energia ancestral chamada <GlowText variant="cyan" className="font-semibold">Hexorium</GlowText> sustenta o equilíbrio entre luz e corrupção.
              </p>
              
              <p className="text-base md:text-lg text-muted-foreground leading-relaxed">
                Aqui, cada jogador possui um papel dentro da história. Cada escolha possui consequências.
              </p>
            </motion.div>
          </div>
        </section>
        
        <section className="py-24 bg-muted/30">
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="grid md:grid-cols-2 gap-12 items-center"
            >
              <div>
                <h2 className="text-[hsl(var(--accent))] text-glow-cyan mb-6">
                  A Era Alay
                </h2>
                <p className="text-lg text-foreground/90 leading-relaxed mb-6">
                  Os Alay foram a primeira raça a despertar em Hexoria. Eles viviam em harmonia com o Hexorium, usando sua energia para construir civilizações magníficas e proteger o equilíbrio natural do mundo.
                </p>
                <p className="text-base text-muted-foreground leading-relaxed">
                  Suas estruturas antigas ainda permanecem, guardando segredos e poder para aqueles dignos de descobri-los.
                </p>
              </div>
              
              <div className="relative h-80 rounded-2xl overflow-hidden border border-[hsl(var(--accent)/0.3)] neon-glow-cyan">
                <div className="absolute inset-0 bg-gradient-to-br from-[hsl(var(--accent)/0.2)] to-transparent" />
                <div className="absolute inset-0 flex items-center justify-center">
                  <Zap className="w-24 h-24 text-[hsl(var(--accent))]" strokeWidth={1} />
                </div>
              </div>
            </motion.div>
          </div>
        </section>
        
        <section className="py-24 atmospheric-depth">
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="grid md:grid-cols-2 gap-12 items-center"
            >
              <div className="order-2 md:order-1 relative h-80 rounded-2xl overflow-hidden border border-[hsl(var(--primary)/0.3)] neon-glow-magenta">
                <div className="absolute inset-0 bg-gradient-to-br from-[hsl(var(--primary)/0.2)] to-transparent" />
                <div className="absolute inset-0 flex items-center justify-center">
                  <Lock className="w-24 h-24 text-[hsl(var(--primary))]" strokeWidth={1} />
                </div>
              </div>
              
              <div className="order-1 md:order-2">
                <h2 className="text-[hsl(var(--primary))] text-glow-magenta mb-6">
                  A Corrupção
                </h2>
                <p className="text-lg text-foreground/90 leading-relaxed mb-6">
                  Mas a paz não durou para sempre. Uma força sombria começou a corromper o Hexorium, dando origem aos <GlowText variant="magenta" className="font-semibold">Vex</GlowText> — seres que buscam dominar a energia ancestral para seus próprios fins.
                </p>
                <p className="text-base text-muted-foreground leading-relaxed">
                  A guerra entre luz e escuridão está apenas começando, e o destino de Hexoria será decidido por aqueles que ousarem escolher um lado.
                </p>
              </div>
            </motion.div>
          </div>
        </section>
        
        <section id="factions" className="py-24 bg-muted/30">
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="text-center mb-16"
            >
              <h2 className="gradient-cyan-magenta mb-6">
                Escolha Seu Destino
              </h2>
              <p className="text-lg md:text-xl text-foreground/90 max-w-3xl mx-auto leading-relaxed">
                Escolha entre ALLY ou VEX, fortaleça seu clã e participe de guerras épicas que definirão o destino do mundo.
              </p>
            </motion.div>
            
            <div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
              <FactionCard
                faction="ally"
                title="ALLY"
                description="Os guardiões da luz, descendentes dos Alay, dedicados a proteger o Hexorium e restaurar o equilíbrio. Eles lutam pela harmonia e pela preservação do mundo."
                features={[
                  'Proteção e harmonia com o Hexorium',
                  'Habilidades de cura e suporte',
                  'Fortalezas defensivas impenetráveis',
                  'Aliança com criaturas ancestrais'
                ]}
                index={0}
              />
              
              <FactionCard
                faction="vex"
                title="VEX"
                description="Os mestres da corrupção, que abraçaram o lado sombrio do Hexorium. Eles buscam poder absoluto e dominação através da energia corrompida."
                features={[
                  'Domínio sobre a energia corrompida',
                  'Habilidades ofensivas devastadoras',
                  'Fortalezas sombrias e intimidadoras',
                  'Controle sobre criaturas corrompidas'
                ]}
                index={1}
              />
            </div>
          </div>
        </section>
        
        <section id="features" className="py-24 atmospheric-depth">
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="text-center mb-16"
            >
              <h2 className="text-[hsl(var(--accent))] text-glow-cyan mb-6">
                Explore Hexoria
              </h2>
              <p className="text-lg md:text-xl text-foreground/90 max-w-3xl mx-auto leading-relaxed">
                Explore ruínas antigas, fortalezas colossais, dungeons, eventos globais e sistemas exclusivos criados para entregar uma experiência única.
              </p>
            </motion.div>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {features.map((feature, index) => (
                <FeatureCard
                  key={index}
                  image={feature.image}
                  title={feature.title}
                  description={feature.description}
                  index={index}
                />
              ))}
            </div>
          </div>
        </section>
        
        <section className="py-24 bg-muted/30">
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="text-center"
            >
              <h2 className="gradient-magenta-cyan mb-6">
                Relíquias Lendárias
              </h2>
              <p className="text-lg md:text-xl text-foreground/90 max-w-3xl mx-auto leading-relaxed mb-8">
                Os primeiros Despertados carregarão relíquias lendárias que nunca mais poderão ser obtidas.
              </p>
              <p className="text-base text-muted-foreground max-w-2xl mx-auto">
                Itens únicos, habilidades exclusivas e títulos permanentes aguardam aqueles que forem pioneiros nesta jornada épica.
              </p>
            </motion.div>
          </div>
        </section>

        <ShopSection />
        
        <section id="join" className="py-32 atmospheric-depth relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[hsl(var(--primary)/0.05)] to-transparent" />
          
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="text-center"
            >
              <h2 className="gradient-cyan-magenta mb-8">
                O Núcleo Desperta
              </h2>
              
              <p className="text-xl md:text-2xl text-foreground/90 mb-6 max-w-3xl mx-auto leading-relaxed">
                Mais que um servidor, <GlowText variant="magenta" className="font-bold">HEXORIA</GlowText> é um universo vivo.
              </p>
              
              <p className="text-lg text-muted-foreground mb-12 max-w-2xl mx-auto">
                A guerra está próxima. Escolha seu lado. Forje seu destino.
              </p>
              
              <NeonButton onClick={onOpenJoinModal} variant="primary" className="text-xl px-12 py-6">
                Entrar no Servidor
              </NeonButton>
            </motion.div>
          </div>
        </section>
        
        <Footer />
      </div>
    </>
  );
}

export default HomePage;