"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Gamepad2, Users, Globe, Zap, Shield, Cpu } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="medium"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "home" },
            { name: "Infrastructure", id: "infrastructure" },
            { name: "Community", id: "comment-section" },
            { name: "Discord", id: "https://discord.gg/az10" },
            { name: "Server Info", id: "quick-info" }
          ]}
          button={{ text: "Join Server", href: "quick-info" }}
          brandName="AZ10"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="AZ10 MINECRAFT SERVER"
          description="Experience the ultimate global Bedrock multiplayer survival server with advanced infrastructure, custom features, and a thriving community. Join thousands of players building, exploring, and competing together."
          tag="Global Bedrock Server"
          tagIcon={Gamepad2}
          tagAnimation="slide-up"
          buttons={[
            { text: "Join Now", href: "quick-info" },
            { text: "Learn More", href: "features" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "noiseDiagonalGradient" }}
          carouselItems={[
            {
              id: "carousel-1",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/a-dramatic-minecraft-server-landscape-fe-1772493592244-fe7c895b.png?_wi=1",              imageAlt: "AZ10 Server Overview"
            },
            {
              id: "carousel-2",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/a-magnificent-minecraft-player-base-with-1772493592402-79357c7d.png?_wi=1",              imageAlt: "Player Base Architecture"
            },
            {
              id: "carousel-3",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/a-spectacular-minecraft-farming-or-indus-1772493592761-7c195518.png?_wi=1",              imageAlt: "Infrastructure Complex"
            },
            {
              id: "carousel-4",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/a-dramatic-minecraft-server-landscape-fe-1772493592244-fe7c895b.png?_wi=2",              imageAlt: "Multiplayer World"
            },
            {
              id: "carousel-5",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/a-magnificent-minecraft-player-base-with-1772493592402-79357c7d.png?_wi=2",              imageAlt: "Community Builds"
            },
            {
              id: "carousel-6",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/a-spectacular-minecraft-farming-or-indus-1772493592761-7c195518.png?_wi=2",              imageAlt: "Advanced Farms"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={5000}
        />
      </div>

      <div id="introduction" data-section="introduction">
        <AboutMetric
          title="Welcome to AZ10 - The Premier Global Bedrock Multiplayer Survival Experience. Advanced infrastructure powers seamless gameplay across all devices and regions."
          useInvertedBackground={true}
          metrics={[
            { icon: Users, label: "Active Players", value: "5,000+" },
            { icon: Globe, label: "Server Regions", value: "Global" },
            { icon: Zap, label: "Uptime", value: "99.9%" },
            { icon: Shield, label: "Anti-Grief", value: "Advanced" }
          ]}
          metricsAnimation="slide-up"
        />
      </div>

      <div id="quick-info" data-section="quick-info">
        <ContactSplitForm
          title="Quick Server Access"
          description="Connect to AZ10 Minecraft Server using the information below. Click to copy the server IP or join through the official buttons."
          inputs={[
            { name: "serverip", type: "text", placeholder: "Server IP: play.az10.network", required: false },
            { name: "port", type: "text", placeholder: "Port: 19132", required: false }
          ]}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/a-dramatic-minecraft-server-landscape-fe-1772493592244-fe7c895b.png?_wi=3"
          mediaPosition="right"
          buttonText="Copy Server Details"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="base-showcase-one" data-section="base-showcase-one">
        <FeatureCardSixteen
          negativeCard={{ items: ["Limited building tools", "Performance issues on large builds", "No custom terrain tools"] }}
          positiveCard={{ items: ["Unlimited creative freedom", "Optimized performance", "Advanced terrain sculpting available"] }}
          animationType="slide-up"
          title="Breathtaking Base Architecture"
          description="Explore the most impressive player-built structures on AZ10. These architectural masterpieces showcase the creative potential and building expertise of our community."
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="base-showcase-two" data-section="base-showcase-two">
        <FeatureCardSixteen
          negativeCard={{ items: ["Manual farming only", "No automation systems", "Low resource rates"] }}
          positiveCard={{ items: ["Full automation support", "Advanced redstone systems", "Optimized resource generation"] }}
          animationType="slide-up"
          title="Advanced Farm Systems"
          description="Efficient farming and resource generation infrastructure built by experienced players. Automated systems maximize productivity while maintaining beautiful design."
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="infrastructure" data-section="infrastructure">
        <ProductCardFour
          title="Server Infrastructure"
          description="Comprehensive server systems and features that make AZ10 the most reliable multiplayer survival experience."
          tag="Advanced Features"
          tagIcon={Cpu}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground={false}
          products={[
            { id: "spawn", name: "Global Spawn Hub", price: "Always Active", variant: "Central meeting point", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-or-logo-representing-a-sp-1772493592608-d8deeee0.png", imageAlt: "Spawn Hub" },
            { id: "protection", name: "Anti-Grief Protection", price: "Everywhere", variant: "Advanced claim system", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-server-prote-1772493591065-f45a3a80.png", imageAlt: "Protection System" },
            { id: "performance", name: "High Performance", price: "Optimized", variant: "Low-lag gameplay", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-server-perfo-1772493591901-f6cc42c5.png", imageAlt: "Performance" },
            { id: "storage", name: "Cloud Backup", price: "Automatic", variant: "Daily world saves", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-data-storage-1772493591464-68a617a9.png", imageAlt: "Storage & Backup" },
            { id: "bedrock", name: "Bedrock Compatible", price: "All Platforms", variant: "Mobile, console, PC", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-bedrock-edition-icon-or-symbol-1772493591661-d364471d.png", imageAlt: "Bedrock Edition" },
            { id: "multiplayer", name: "Seamless Multiplayer", price: "Unlimited Players", variant: "Cross-platform gaming", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-multiplayer--1772493591944-116dff24.png", imageAlt: "Multiplayer" },
            { id: "plugins", name: "Custom Plugins", price: "Enhanced Gameplay", variant: "Unique features", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-server-plugi-1772493591816-1d6b947a.png", imageAlt: "Plugins" },
            { id: "economy", name: "Player Economy", price: "Trading System", variant: "Buy and sell items", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-server-econo-1772493591642-dd983316.png", imageAlt: "Economy" },
            { id: "events", name: "Community Events", price: "Weekly Contests", variant: "Rewards & prizes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-server-event-1772493591751-67c3481f.png", imageAlt: "Events" },
            { id: "support", name: "24/7 Support", price: "Always Available", variant: "Dedicated team", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-customer-sup-1772493591439-89de8829.png", imageAlt: "Support" },
            { id: "pvp", name: "PvP Arenas", price: "Competitive Play", variant: "Custom battle zones", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-pvp-or-compe-1772493592081-d9b3e14c.png", imageAlt: "PvP" },
            { id: "survival", name: "Survival Mode", price: "Pure Gameplay", variant: "Classic experience", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-survival-gam-1772493591850-856011b7.png", imageAlt: "Survival" },
            { id: "creative", name: "Creative Zones", price: "Unlimited Building", variant: "No restrictions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-creative-mod-1772493592455-53a38b5a.png", imageAlt: "Creative" },
            { id: "world", name: "Expanding Worlds", price: "Infinite Growth", variant: "Custom maps", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-world-genera-1772493591492-c6336421.png", imageAlt: "World Generation" },
            { id: "community", name: "Active Community", price: "Join 5000+ Players", variant: "Discord integration", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU5333EGvPBhlewHZJeqmcFZu/minecraft-icon-representing-community-or-1772493592942-f855179d.png", imageAlt: "Community" }
          ]}
        />
      </div>

      <div id="comment-section" data-section="comment-section" style={{ width: "100%", padding: "3rem 0", display: "flex", justifyContent: "center", alignItems: "center", minHeight: "400px", background: "var(--card)", borderRadius: "1rem", margin: "2rem 0" }}>
        <p style={{ color: "var(--foreground)", textAlign: "center" }}>Community comments and discussions will appear here. Configure Giscus with your GitHub repository to enable comments.</p>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="AZ10"
          columns={[
            {
              items: [
                { label: "Home", href: "home" },
                { label: "Infrastructure", href: "infrastructure" },
                { label: "Bases", href: "base-showcase-one" }
              ]
            },
            {
              items: [
                { label: "Discord Server", href: "https://discord.gg/az10" },
                { label: "Store", href: "https://az10.shop" },
                { label: "Rules", href: "#" }
              ]
            },
            {
              items: [
                { label: "Support", href: "#" },
                { label: "Status", href: "#" },
                { label: "Whitelist", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "quick-info" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com/az10server" },
                { label: "YouTube", href: "https://youtube.com/@az10" },
                { label: "Instagram", href: "https://instagram.com/az10server" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
