"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
import { Sparkles, Zap, Users, Star } from "lucide-react";

export default function StarWarsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="plain"
      cardStyle="shadow-colored"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="STAR WARS"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Featured", id: "featured" },
            { name: "Community", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="STAR WARS"
          description="Join millions of fans exploring the galaxy's greatest saga. Discover exclusive content, connect with the community, and celebrate the Force."
          buttons={[
            { text: "Enter the Galaxy", href: "#featured" },
            { text: "Join Community", href: "#contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
          imageAlt="Star Wars galaxy scene"
          frameStyle="browser"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="The Star Wars Universe"
          description="Explore decades of epic storytelling across galaxies and timelines"
          tabs={[
            {
              id: "saga",
              label: "The Saga",
              description: "From Episode I through IX, experience the epic story of the Skywalker family and the eternal battle between light and dark sides of the Force. Nine films spanning generations of heroes and villains."
            },
            {
              id: "expanded",
              label: "Expanded Universe",
              description: "Venture into incredible stories beyond the main saga. Explore the Old Republic, the High Republic era, and countless tales of Jedi, Sith, and everything in between."
            },
            {
              id: "characters",
              label: "Iconic Characters",
              description: "Meet legendary heroes like Luke Skywalker, Princess Leia, Han Solo, and Darth Vader. Discover complex characters that define the Star Wars legacy and shape the destiny of galaxies."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508646892-drupy2w9.jpg"
          imageAlt="Star Wars universe"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured" data-section="featured">
        <ProductCardOne
          title="Featured Content"
          description="Discover the most essential Star Wars films, series, and stories that define the franchise"
          products={[
            {
              id: "1",
              name: "The Mandalorian",
              price: "Series",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508648349-opwl7orx.jpg",
              imageAlt: "The Mandalorian series"
            },
            {
              id: "2",
              name: "Andor",
              price: "Series",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508649592-o7da7dj7.jpg",
              imageAlt: "Andor star wars"
            },
            {
              id: "3",
              name: "The Acolyte",
              price: "Series",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg",
              imageAlt: "The Acolyte series"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Must Watch"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",
              value: "40+",
              title: "Years",
              description: "Of Star Wars storytelling and legacy",
              icon: Sparkles
            },
            {
              id: "2",
              value: "11",
              title: "Main Films",
              description: "Spanning the complete Skywalker saga",
              icon: Zap
            },
            {
              id: "3",
              value: "100M+",
              title: "Fans",
              description: "Worldwide united by the Force",
              icon: Users
            },
            {
              id: "4",
              value: "∞",
              title: "Stories",
              description: "In an ever-expanding galaxy far away",
              icon: Star
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          title="By the Numbers"
          description="The impact of Star Wars across generations"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Sarah",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508650951-kaj1cbih.jpg",
              imageAlt: "Sarah"
            },
            {
              id: "2",
              name: "Marcus",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508651819-t3cnqjfz.jpg",
              imageAlt: "Marcus"
            },
            {
              id: "3",
              name: "Elena",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508652759-z5co4qlg.jpg",
              imageAlt: "Elena"
            },
            {
              id: "4",
              name: "Alex",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508653705-qp2xy5s6.jpg",
              imageAlt: "Alex"
            }
          ]}
          cardTitle="Millions of fans across the galaxy trust this community for Star Wars knowledge and connection"
          cardTag="Fan Approved"
          useInvertedBackground="noInvert"
        />
        <div className="flex justify-center mt-8">
          <ButtonElasticEffect text="Join to us" href="#contact" />
        </div>
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about the Star Wars universe and this community"
          faqs={[
            {
              id: "1",
              title: "What is the best order to watch Star Wars?",
              content: "Start with Episode IV (A New Hope), then V and VI. For a complete experience, watch Episodes I-III before the original trilogy, or watch in release order. For newer content, add Episodes VII-IX afterward."
            },
            {
              id: "2",
              title: "Who are the main characters in Star Wars?",
              content: "The saga centers on the Skywalker family. Luke Skywalker, his sister Leia, their father Anakin/Darth Vader, and their descendants define the core story. Other key characters include Han Solo, Yoda, and Palpatine."
            },
            {
              id: "3",
              title: "What is the Force?",
              content: "The Force is a mystical energy field that connects all living things in the Star Wars universe. Those trained to use it become Jedi (light side) or Sith (dark side), giving them incredible powers."
            },
            {
              id: "4",
              title: "Where can I watch all Star Wars content?",
              content: "Star Wars films and series are primarily available on Disney+. This includes all nine main saga films, the anthology films, and the original and new series."
            },
            {
              id: "5",
              title: "How many Star Wars movies are there?",
              content: "The main saga consists of 9 films divided into three trilogies. Additionally, there are two anthology films (Rogue One and Solo), making 11 theatrical films total."
            },
            {
              id: "6",
              title: "What is the Star Wars Expanded Universe?",
              content: "The Expanded Universe (now called Legends) contains hundreds of books, comics, and games set in the Star Wars universe. Many stories explore periods before and after the main saga."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Join the Force"
          description="Subscribe to our newsletter for exclusive Star Wars news, community updates, and behind-the-scenes content delivered straight to your inbox."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us what Star Wars means to you...",
            rows: 4,
            required: false
          }}
          useInvertedBackground="noInvert"
          buttonText="Join Community"
        />
        <div className="flex justify-center mt-12">
          <img
            src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
            alt="Star Wars galaxy scene"
            className="w-full max-w-2xl rounded-lg shadow-lg"
          />
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="STAR WARS"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "About Universe", href: "about" },
                { label: "Featured", href: "featured" }
              ]
            },
            {
              items: [
                { label: "Community", href: "testimonials" },
                { label: "FAQ", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" },
                { label: "Sitemap", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}