"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Globe, Target, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="medium"
      background="animatedAurora"
      cardStyle="gradient-subtle"
      primaryButtonStyle="flat"
      secondaryButtonStyle="outline"
      headingFontWeight={undefined}
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="WW2 History"
          button={{ text: "Explore", href: "#hero" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Understanding World War II"
          description="Explore the pivotal events, key figures, and lasting impact of the Second World War. A comprehensive educational journey through history's most significant conflict."
          kpis={[
            { value: "1939-1945", label: "Duration of the War" },
            { value: "70M+", label: "Total Casualties" },
            { value: "6", label: "Continents Affected" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487266615-27odfkpd.jpg"
          imageAlt="World War II soldiers in combat"
          imagePosition="right"
          buttons={[
            { text: "Start Learning", href: "#timeline" },
            { text: "Ask Questions", href: "#contact" }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Preserving and teaching the crucial lessons from" },
            { type: "text", content: "World War II" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "#timeline" }
          ]}
        />
      </div>
      
      <div id="timeline" data-section="timeline">
        <FeatureCardFourteen
          title="Major Events & Turning Points"
          description="Discover the pivotal moments that shaped the course of World War II and changed the world forever"
          features={[
            {
              id: "1",
              title: "Invasion of Poland",
              description: "September 1, 1939 - Germany's attack marks the official start of WWII in Europe",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487825940-nbhikrqd.jpg",
              imageAlt: "WWII invasion event"
            },
            {
              id: "2",
              title: "Attack on Pearl Harbor",
              description: "December 7, 1941 - The surprise attack that brought the United States into the war",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487827533-riaoyaph.jpg",
              imageAlt: "Pearl Harbor attack historical image"
            },
            {
              id: "3",
              title: "D-Day Normandy",
              description: "June 6, 1944 - The largest amphibious invasion, a turning point in the European theater",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487825940-nbhikrqd.jpg",
              imageAlt: "D-Day landing at Normandy"
            },
            {
              id: "4",
              title: "Germany's Surrender",
              description: "May 7-8, 1945 - Victory in Europe as Germany unconditionally surrenders",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487274091-76zrr6b2.jpg",
              imageAlt: "Berlin surrender in 1945"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Impact by the Numbers"
          description="Key statistics that demonstrate the scale and human cost of World War II"
          metrics={[
            { id: "1", icon: Users, title: "Military Deaths", value: "25M+" },
            { id: "2", icon: Globe, title: "Civilian Deaths", value: "45M+" },
            { id: "3", icon: TrendingUp, title: "Countries Involved", value: "50+" },
            { id: "4", icon: Target, title: "Years Duration", value: "6" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Questions About WW2"
          description="Get answers to frequently asked questions about the causes, events, and consequences of World War II"
          faqs={[
            {
              id: "1",
              title: "What caused World War II?",
              content: "WWII resulted from a combination of factors including the Treaty of Versailles, economic depression, rise of fascism, and territorial expansion by Axis powers. The unresolved issues from WWI, combined with aggressive expansionism by Germany, Italy, and Japan, created the conditions for global conflict."
            },
            {
              id: "2",
              title: "When did the United States enter the war?",
              content: "The United States entered WWII on December 8, 1941, the day after the attack on Pearl Harbor. However, the US had been providing aid to the Allies before this through Lend-Lease arrangements. American involvement proved crucial in turning the tide against the Axis powers."
            },
            {
              id: "3",
              title: "What was the Holocaust?",
              content: "The Holocaust was the systematic genocide of six million Jews by Nazi Germany and its collaborators between 1941-1945. It also targeted millions of other groups including Romani, disabled persons, political prisoners, and Slavic peoples. It remains one of history's greatest atrocities."
            },
            {
              id: "4",
              title: "How did the war end in Europe?",
              content: "The war in Europe ended with Germany's unconditional surrender on May 7-8, 1945, after Hitler's suicide. The Allies captured Berlin, and the Soviet Union pushed from the east while American and British forces advanced from the west, leading to the complete defeat of Nazi Germany."
            },
            {
              id: "5",
              title: "When did Japan surrender?",
              content: "Japan surrendered on August 15, 1945 (V-J Day), following the atomic bombings of Hiroshima and Nagasaki in August 1945 and the Soviet declaration of war. Japan formally signed the Instrument of Surrender on September 2, 1945."
            },
            {
              id: "6",
              title: "What were the Nuremberg Trials?",
              content: "The Nuremberg Trials were a series of military tribunals held after WWII to prosecute high-ranking Nazi officials and war criminals. They established important precedents for international law and the prosecution of crimes against humanity, ensuring accountability for atrocities committed during the war."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487828658-7eexw30m.jpg"
          imageAlt="Historical documentation and archives"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get Involved in Education"
          description="Have questions about WW2 or want to contribute to historical education? Reach out to us. We welcome inquiries from students, educators, and history enthusiasts."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email Address", required: true },
            { name: "institution", type: "text", placeholder: "School or Institution", required: false }
          ]}
          textarea={{
            name: "message",
            placeholder: "Your question or message about WW2 history...",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487830256-uakq8lu4.jpg"
          imageAlt="Educational classroom environment"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="WW2 History"
          copyrightText="© 2025 WW2 History Education. All rights reserved."
          columns={[
            {
              title: "Learning",
              items: [
                { label: "Timeline", href: "#timeline" },
                { label: "Key Events", href: "#timeline" },
                { label: "Statistics", href: "#metrics" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "FAQ", href: "#faq" },
                { label: "About", href: "#about" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "Subscribe", href: "#contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}