"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="noise"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="Star Wars Fan Club"
          navItems={[
            { name: 'Home', id: '/' },
            { name: 'About', id: '/#about' },
            { name: 'Features', id: '/#features' },
            { name: 'Showcase', id: '/#product' },
            { name: 'News', id: '/blog' },
            { name: 'Shop', id: '/shop' },
            { name: 'Team', id: '/#team' },
            { name: 'Contact', id: '/#contact' }
          ]}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroLogoBillboard 
          logoText="Star Wars"
          description="Join the ultimate fan club for all things Star Wars. Explore the galaxy, connect with fellow enthusiasts, and celebrate your passion for a saga that spans generations."
          buttons={[
            { text: 'Join the Club', href: '#contact' },
            { text: 'Explore the Galaxy', href: '#features' }
          ]}
          background={{ variant: 'sparkles-gradient' }}
          imageSrc="https://img.b2bpic.net/free-vector/modern-composition-with-two-crossed-light-swords_23-2147926469.jpg"
          imageAlt="Lightsaber igniting in space"
          mediaAnimation="blur-reveal"
          frameStyle="card"
          ariaLabel="Hero section for Star Wars Fan Club"
        />
      </div>
      <div id="about" data-section="about">
        <MediaAbout 
          title="Unite the Fandom"
          description="From the original trilogy to the latest series, our club is a gathering place for every Star Wars enthusiast. Share theories, debate iconic moments, and immerse yourself in a community that understands the Force."
          tag="About Our Club"
          buttons={[{ text: 'Our Mission', href: '#' }]}
          imageSrc="https://img.b2bpic.net/free-photo/fencing_654080-2262.jpg"
          imageAlt="Group of Star Wars fans at a convention"
          useInvertedBackground={false}
          mediaClassName="object-cover object-center aspect-video rounded-theme-capped"
          textBoxClassName="w-content-width md:w-45 p-6 rounded-theme-capped bg-card/80 backdrop-blur-sm shadow-lg"
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardNine 
          features={[
            {
              id: 1,
              title: 'Deep Dive Lore',
              description: 'Explore detailed analyses of characters, planets, and events from every corner of the Star Wars universe. Expand your knowledge beyond what you thought possible.',
              phoneOne: { imageSrc: 'https://img.b2bpic.net/free-photo/futuristic-ninja-digital-art_23-2151234812.jpg', imageAlt: 'Darth Vader Helmet' },
              phoneTwo: { imageSrc: 'https://img.b2bpic.net/free-photo/control-table-spacecraft_23-2151828271.jpg', imageAlt: 'X-Wing Cockpit View' }
            },
            {
              id: 2,
              title: 'Interactive Fan Content',
              description: 'Engage with polls, quizzes, and discussion forums. Share your fan theories, art, and creations with a vibrant, welcoming community.',
              phoneOne: { imageSrc: 'https://img.b2bpic.net/free-photo/cyberpunk-warrior-portrait_23-2150712494.jpg', imageAlt: 'Stormtrooper Mask' },
              phoneTwo: { imageSrc: 'https://img.b2bpic.net/free-photo/control-table-spacecraft_23-2151828240.jpg', imageAlt: 'Millennium Falcon Interior' }
            }
          ]}
          showStepNumbers={true}
          title="Unlock the Force Within"
          description="Discover the myriad ways to deepen your connection to the Star Wars saga."
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          phoneFrameClassName="bg-card/90 subtle-shadow"
          featureTitleClassName="text-foreground"
          featureDescriptionClassName="text-foreground/80"
        />
      </div>
      <div id="product" data-section="product">
        <ProductCardOne 
          products={[
            { id: '1', name: 'Custom Lightsaber Replica', price: '$299.99', imageSrc: 'https://img.b2bpic.net/free-photo/technological-exploration-settlement_23-2151768695.jpg', imageAlt: 'Custom lightsaber replica' },
            { id: '2', name: 'Galactic Map Poster', price: '$24.99', imageSrc: 'https://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648333.jpg', imageAlt: 'Detailed galactic map poster' },
            { id: '3', name: 'Limited Edition Stormtrooper Helmet', price: '$499.00', imageSrc: 'https://img.b2bpic.net/free-photo/studio-portrait-redhead-female-biathlon-champion-holds-gun-grey-background_613910-1588.jpg', imageAlt: 'Limited Edition Stormtrooper Helmet' },
            { id: '4', name: 'Rare Action Figure Set', price: '$150.00', imageSrc: 'https://img.b2bpic.net/free-photo/exploration-settlements-different-planets_23-2151768654.jpg', imageAlt: 'Rare Star Wars action figure set' }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          title="Showcase Your Collection"
          description="Discover unique Star Wars merchandise and fan creations shared by our members."
          textboxLayout="default"
          useInvertedBackground={false}
          cardClassName="bg-card/90 subtle-shadow"
        />
      </div>
      <div id="blog" data-section="blog">
        <BlogCardThree 
          blogs={[
            { id: '1', category: 'Lore & Analysis', title: 'The Unseen Depths of the Dark Side', excerpt: 'A philosophical dive into the origins and temptations of the Sith.', imageSrc: 'https://img.b2bpic.net/free-vector/futuristic-infographics-concept_23-2148444702.jpg', imageAlt: 'Lightsaber schematic hologram', authorName: 'Kylo Ren', date: 'DEC 17, 2023', authorAvatar: '/placeholders/avatar.png' },
            { id: '2', category: 'Fandom News', title: 'Upcoming Star Wars Games and Series Revealed!', excerpt: "Get the latest updates on what's coming to the galaxy.", imageSrc: 'https://img.b2bpic.net/free-photo/technological-exploration-settlement_23-2151768616.jpg', imageAlt: 'Star Wars planets collage', authorName: 'Ahsoka Tano', date: 'MAY 4, 2024', authorAvatar: '/placeholders/avatar.png' },
            { id: '3', category: 'Technology & Sci-Fi', title: "The Droids You're Looking For: A Deep Dive", excerpt: 'Exploring the history and evolution of droids in Star Wars.', imageSrc: 'https://img.b2bpic.net/free-photo/futuristic-christmas-celebration-concept_23-2150979882.jpg', imageAlt: 'Droid interacting with human hand', authorName: 'C-3PO', date: 'NOV 22, 2023', authorAvatar: '/placeholders/avatar.png' }
          ]}
          carouselMode="auto"
          animationType="slide-up"
          title="Latest Transmissions"
          description="Stay up-to-date with all the happenings across the Star Wars galaxy."
          textboxLayout="default"
          useInvertedBackground={false}
          cardClassName="bg-card/90 subtle-shadow"
        />
      </div>
      <div id="team" data-section="team">
        <TeamCardOne 
          members={[
            { id: '1', name: 'Anya Solo', role: 'Jedi Master', imageSrc: 'https://img.b2bpic.net/free-photo/rendering-wizard-controlling-magic_23-2150608380.jpg', imageAlt: 'Portrait of a Jedi Master' },
            { id: '2', name: 'Jaxson Fett', role: 'Rebel Pilot', imageSrc: 'https://img.b2bpic.net/free-photo/blond-pilot-angry-expression_1194-1880.jpg', imageAlt: 'Portrait of a Rebel Pilot' },
            { id: '3', name: 'Dax Sidious', role: 'Sith Lord', imageSrc: 'https://img.b2bpic.net/free-photo/cyberpunk-warrior-urban-scenery_23-2150712528.jpg', imageAlt: 'Portrait of a Sith Lord' },
            { id: '4', name: 'Kira Wren', role: 'Chief Engineer', imageSrc: 'https://img.b2bpic.net/free-photo/portrait-cosmonaut-navigating-orbital-trajectory-futuristic-starship_482257-130548.jpg', imageAlt: 'Portrait of a Starship Engineer' }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="depth-3d"
          title="Meet Our Galactic Crew"
          description="The dedicated team behind your Star Wars Fan Club experience."
          textboxLayout="default"
          useInvertedBackground={false}
          cardClassName="bg-card/90 subtle-shadow"
          overlayClassName="bg-background/90"
        />
      </div>
      <div id="faq" data-section="faq">
        <FaqSplitText 
          faqs={[
            { id: '1', title: 'How do I join the Star Wars Fan Club?', content: "You can join by clicking the 'Join the Club' button in the hero section or navigating to our contact section." },
            { id: '2', title: 'Is there a membership fee?', content: 'Membership is free! We believe the Force should be accessible to all. Premium features or merchandise may have associated costs.' },
            { id: '3', title: 'How can I contribute to the community?', content: 'Members can submit fan art, theories, and articles. Participate in forums and events to share your passion.' },
            { id: '4', title: 'What kind of events does the club host?', content: 'We host virtual meetups, watch parties, cosplay contests, and discussions about new Star Wars content.' }
          ]}
          sideTitle="Frequently Asked Galactic Questions"
          sideDescription="Find answers to common inquiries about our Star Wars Fan Club. If you can't find what you're looking for, feel free to contact us."
          faqsAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactText 
          text="Ready to embark on your Star Wars journey with us? Join the ranks of fellow fans and become part of our galactic community today!"
          animationType="entrance-slide"
          buttons={[{ text: 'Join the Rebellion', href: '#' }]}
          background={{ variant: 'radial-gradient' }}
          useInvertedBackground={false}
          contentClassName="max-w-mediumSmall text-center"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis 
          columns={[
            { items: [{ label: 'About Us', href: '#about' }, { label: 'Features', href: '#features' }, { label: 'News', href: '/blog' }] },
            { items: [{ label: 'Community', href: '#product' }, { label: 'Team', href: '#team' }, { label: 'FAQ', href: '#faq' }] },
            { items: [{ label: 'Contact', href: '#contact' }, { label: 'Privacy Policy', href: '#' }, { label: 'Terms of Service', href: '#' }] }
          ]}
          logoText="Star Wars Fan Club"
          containerClassName="bg-background-accent text-foreground"
        />
      </div>
    </ThemeProvider>
  );
}
