"use client"

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { BookOpen, Heart, Sparkles, Star } from 'lucide-react';

export default function PatrioticPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="United States"
          navItems={[
            { name: "Heritage", id: "about" },
            { name: "Values", id: "feature" },
            { name: "Achievements", id: "metric" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Join the Movement",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          title="Land of the Free, Home of the Brave"
          description="Celebrate the enduring spirit of American freedom, liberty, and the pursuit of happiness. United we stand as one nation with a vision of hope, equality, and opportunity for all."
          tag="American Pride"
          tagIcon={Heart}
          background={{ variant: "sparkles-gradient" }}
          inputPlaceholder="Enter your email to join"
          buttonText="Embrace Freedom"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="American Heritage"
          description={[
            "From the halls of independence to the frontiers of innovation, America stands as a beacon of freedom and opportunity. Our nation was founded on timeless principles of liberty, democracy, and human dignity.",            "Today, we honor the legacy of those who fought for our freedoms while building a brighter future for generations to come. The American spirit thrives through courage, resilience, and unwavering belief in the power of the people.",            "Together, we celebrate our diverse heritage, shared values, and the promise of a nation where all voices matter and dreams become reality."
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Learn Our History",              href: "feature"
            }
          ]}
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardNineteen
          title="Core American Values"
          description="The foundation of our nation rests on principles that have guided us through triumph and challenge. These enduring values continue to inspire millions around the world."
          tag="Our Principles"
          tagIcon={Sparkles}
          features={[
            {
              id: 1,
              tag: "Liberty",              title: "Freedom of Thought",              subtitle: "The cornerstone of democracy and human dignity",              description: "From the moment our nation was founded, freedom of thought, speech, and conscience have been sacred. These liberties allow individuals to pursue their dreams, express their convictions, and contribute their unique talents to society.",              imageSrc: "https://img.b2bpic.net/free-photo/united-states-national-flag-flying-sky_649448-4328.jpg"
            },
            {
              id: 2,
              tag: "Equality",              title: "Opportunity for All",              subtitle: "Equal rights and justice for every citizen",              description: "The American dream promises that anyone can achieve success through hard work and determination, regardless of their background or circumstances. We are committed to creating pathways to opportunity for all people.",              imageSrc: "https://img.b2bpic.net/free-photo/people-posing-together-registration-day_23-2149096744.jpg"
            },
            {
              id: 3,
              tag: "Unity",              title: "Strength in Diversity",              subtitle: "E pluribus unum - out of many, one",              description: "America's greatest strength lies in its diversity. From sea to shining sea, our nation is enriched by people of different backgrounds, beliefs, and cultures united by common ideals and shared purpose.",              imageSrc: "https://img.b2bpic.net/free-vector/american-flag-with-shiny-style_23-2147819280.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardFourteen
          title="The American Achievement - A legacy of progress, innovation, and excellence that continues to shape the world and inspire millions to reach for greatness."
          tag="American Excellence"
          metrics={[
            {
              id: "1",              value: "250+",              description: "Years of continuous democracy and constitutional governance leading the world"
            },
            {
              id: "2",              value: "330M+",              description: "Citizens united across all states, proud to call America home"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardOne
          title="Voices of America"
          description="Hear from patriots across our great nation who share their pride, passion, and vision for America's future."
          tag="Patriotic Stories"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              name: "Colonel James Mitchell",              role: "Military Officer",              company: "U.S. Armed Forces",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/old-american-officer-with-flag_651396-1677.jpg"
            },
            {
              id: "2",              name: "Sarah Washington",              role: "Community Leader",              company: "American Citizens Alliance",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/shallow-focus-shot-american-soldier-kissing-his-loving-wife-while-wrapped-american-flag_181624-35447.jpg"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Understanding America"
          description="Learn more about what makes America great and how our nation continues to thrive."
          tag="Knowledge"
          tagIcon={BookOpen}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What are the founding principles of America?",              content: "America was founded on principles of liberty, equality, and democracy. The Declaration of Independence and Constitution establish the framework for a government of the people, by the people, and for the people. These documents protect individual freedoms and ensure representative government."
            },
            {
              id: "2",              title: "How does the American system of government work?",              content: "The U.S. government is divided into three branches: the executive (President), legislative (Congress), and judicial (Supreme Court). This separation of powers ensures checks and balances to prevent any single branch from becoming too powerful."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Stand with us in celebrating American greatness. Join millions of patriots united in pride, purpose, and patriotism. Together, we build a brighter future for generations to come."
          animationType="background-highlight"
          buttons={[
            {
              text: "Get Involved",              href: "https://www.america.gov"
            },
            {
              text: "Share Your Story",              href: "contact"
            }
          ]}
          background={{ variant: "downward-rays-animated" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="USA"
          leftLink={{
            text: "Privacy & Rights",            href: "/privacy"
          }}
          rightLink={{
            text: "Democratic Values",            href: "/values"
          }}
        />
      </div>
    </ThemeProvider>
  );
}