"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { BarChart3, BookOpen, Heart, Home, Share2, Target, Video, Youtube, Twitter, Linkedin, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="fluid"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Demographics Japan"
          navItems={[
            { name: "Problem", id: "problem" },
            { name: "Statistics", id: "statistics" },
            { name: "Solutions", id: "solutions" },
            { name: "FAQ", id: "faq" },
            { name: "Get Involved", id: "involved" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="少子高齢化"
          description="Understanding Japan's declining birthrate and aging population crisis—from the perspective of young people. Discover how we can all contribute to solving this challenge."
          buttons={[
            { text: "Explore the Problem", href: "#problem" },
            { text: "Learn Solutions", href: "#solutions" }
          ]}
          slides={[
            { imageSrc: "http://img.b2bpic.net/free-photo/cars-city-traffic-daylight_23-2149092083.jpg?_wi=1", imageAlt: "japan demographic society population statistics" },
            { imageSrc: "http://img.b2bpic.net/free-photo/retired-mature-people-sitting-home-smiling_482257-10973.jpg?_wi=1", imageAlt: "elderly care facility nursing home senior citizens" },
            { imageSrc: "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=1", imageAlt: "young people team group community collaboration" }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="problem" data-section="problem">
        <TextSplitAbout
          title="The Crisis We Face"
          description={[
            "Japan is experiencing one of the world's most severe demographic challenges. The number of elderly citizens continues to rise while the working-age population shrinks, straining healthcare, pensions, and social systems.",            "With fewer children being born and more people living longer, the balance that sustains society is shifting. Without intervention, this imbalance threatens economic growth, innovation, and quality of life for all generations.",            "This crisis is not inevitable—young people have the power to influence Japan's future through increased workforce participation, family planning choices, and community engagement."
          ]}
          buttons={[
            { text: "See the Data", href: "#statistics" }
          ]}
          useInvertedBackground={false}
          showBorder={true}
        />
      </div>

      <div id="statistics" data-section="statistics">
        <MetricCardFourteen
          title="Japan's demographic transformation demands urgent action. The data shows a clear trajectory that affects every citizen."
          tag="Key Facts"
          tagAnimation="entrance-slide"
          metrics={[
            { id: "1", value: "125M→100M", description: "Projected population decline by 2070. Japan's population is shrinking rapidly, reducing the tax base and workforce." },
            { id: "2", value: "38.7%", description: "Projected percentage of population aged 65+ by 2040. Nearly 40% of all citizens will be seniors in just 15 years." },
            { id: "3", value: "1.2", description: "Current fertility rate. Japan needs 2.1 children per woman to maintain population without immigration." },
            { id: "4", value: "Critically Insufficient", description: "Childcare facility capacity. Thousands of children remain on waiting lists for daycare, blocking parents from returning to work." }
          ]}
          metricsAnimation="entrance-slide"
          useInvertedBackground={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFive
          title="Proposed Solutions"
          description="Smart interventions that leverage young people's energy and innovation to address the demographic crisis."
          tag="Strategic Approaches"
          features={[
            {
              title: "Boost Youth Participation",              description: "Increase economic opportunities and job security for young workers, making Japan an attractive place to build families and careers.",              icon: Target,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=2", imageAlt: "young people team group community collaboration" },
                { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-construction-workers_23-2149366629.jpg?_wi=1", imageAlt: "vacant building housing renovation community center" }
              ]
            },
            {
              title: "Expand Childcare Facilities",              description: "Transform vacant houses and underutilized buildings into modern daycare centers, childcare facilities, and family support hubs.",              icon: Home,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-construction-workers_23-2149366629.jpg?_wi=2", imageAlt: "vacant building housing renovation community center" },
                { imageSrc: "http://img.b2bpic.net/free-photo/little-kids-playing-toys-learning-center_53876-139555.jpg?_wi=1", imageAlt: "children daycare kindergarten nursery childcare" }
              ]
            },
            {
              title: "Spread Awareness Online",              description: "Use YouTube and social media to educate young people about the crisis, inspire action, and showcase success stories and solutions.",              icon: Video,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-video-camera-filming-young-smiling-male-blogger_171337-5482.jpg?_wi=1", imageAlt: "video production camera youtube media content creation" },
                { imageSrc: "http://img.b2bpic.net/free-photo/cars-city-traffic-daylight_23-2149092083.jpg?_wi=2", imageAlt: "japan demographic society population statistics" }
              ]
            },
            {
              title: "Support Family Planning",              description: "Provide accessible resources, counseling, and financial incentives to help young couples navigate family formation decisions.",              icon: Heart,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=3", imageAlt: "young people team group community collaboration" },
                { imageSrc: "http://img.b2bpic.net/free-photo/little-kids-playing-toys-learning-center_53876-139555.jpg?_wi=2", imageAlt: "children daycare kindergarten nursery childcare" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="solutions" data-section="solutions">
        <FeatureCardTwentyFive
          title="Our Video Project Strategy"
          description="A comprehensive multimedia approach to engage young people and drive awareness about Japan's demographic challenges."
          tag="Content Plan"
          features={[
            {
              title: "Explain the Crisis",              description: "Clear, engaging videos that break down the causes of declining birthrates, aging population trends, and systemic impacts in simple terms.",              icon: BookOpen,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-video-camera-filming-young-smiling-male-blogger_171337-5482.jpg?_wi=2", imageAlt: "video production camera youtube media content creation" },
                { imageSrc: "http://img.b2bpic.net/free-photo/cars-city-traffic-daylight_23-2149092083.jpg?_wi=3", imageAlt: "japan demographic society population statistics" }
              ]
            },
            {
              title: "Present Data Visually",              description: "Use graphs, charts, animations, and infographics to make statistics compelling and easy to understand for younger audiences.",              icon: BarChart3,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/retired-mature-people-sitting-home-smiling_482257-10973.jpg?_wi=2", imageAlt: "elderly care facility nursing home senior citizens" },
                { imageSrc: "http://img.b2bpic.net/free-photo/cars-city-traffic-daylight_23-2149092083.jpg?_wi=4", imageAlt: "japan demographic society population statistics" }
              ]
            },
            {
              title: "Inspire Action",              description: "Feature success stories of young people making a difference, plus actionable steps viewers can take in their own communities.",              icon: Zap,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=4", imageAlt: "young people team group community collaboration" },
                { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-construction-workers_23-2149366629.jpg?_wi=3", imageAlt: "vacant building housing renovation community center" }
              ]
            },
            {
              title: "Call for Solutions",              description: "Engage viewers with a call to action—encouraging them to share ideas, volunteer, or participate in local initiatives addressing the crisis.",              icon: Share2,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-video-camera-filming-young-smiling-male-blogger_171337-5482.jpg?_wi=3", imageAlt: "video production camera youtube media content creation" },
                { imageSrc: "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=5", imageAlt: "young people team group community collaboration" }
              ]
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Get answers to common questions about Japan's demographic crisis and what you can do about it."
          tag="Help & Resources"
          faqs={[
            {
              id: "1",              title: "Why is Japan's population declining?",              content: "Several factors contribute: high childcare costs and limited facilities make it hard for parents to work, career uncertainty discourages early family formation, women face pressure to choose between career and motherhood, and cultural shifts mean fewer people prioritize having children. Economic pressures are a major driver."
            },
            {
              id: "2",              title: "How does an aging population affect the economy?",              content: "Fewer young workers must support more retirees, straining pension and healthcare systems. Consumer spending may decline, innovation could slow, and tax bases shrink. The dependency ratio becomes unsustainable, requiring structural reforms to social safety nets and workforce participation."
            },
            {
              id: "3",              title: "What role can young people play?",              content: "Young people can increase workforce participation, start families when they're ready, volunteer in community initiatives, advocate for policy changes, share awareness through social media, and consider migration within Japan to revitalize rural areas. Your choices and voices matter."
            },
            {
              id: "4",              title: "How can vacant buildings be repurposed?",              content: "Abandoned or underused properties can be renovated into daycare centers, community centers, co-working spaces, or affordable housing. This reduces infrastructure costs, creates jobs, and strengthens communities while addressing the childcare shortage and providing spaces for young people to gather."
            },
            {
              id: "5",              title: "What does successful policy look like?",              content: "Successful policies include: affordable, accessible childcare; paid parental leave; workplace flexibility; housing subsidies for young families; tax incentives for childbearing; improved work-life balance; and mental health support. Countries like France and South Korea offer models to study."
            },
            {
              id: "6",              title: "How can I get involved in raising awareness?",              content: "Start by sharing this information with friends and family, engage with social media content on this topic, volunteer with organizations addressing demographic challenges, attend community discussions, contact your representatives about policy reform, or create your own content to educate others."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/close-up-video-camera-filming-young-smiling-male-blogger_171337-5482.jpg?_wi=4"
          imageAlt="video production camera youtube media content creation"
          mediaAnimation="entrance-slide"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="entrance-slide"
        />
      </div>

      <div id="involved" data-section="involved">
        <ContactSplitForm
          title="Get Involved in the Solution"
          description="Join our movement to raise awareness about Japan's demographic challenges. Share your insights, join our video project, or help us reach more young people. Your voice and involvement can make a real difference."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "interest", type: "text", placeholder: "How would you like to help? (e.g., video production, research, awareness, community work)", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us your ideas, concerns, or how you'd like to contribute to addressing Japan's demographic crisis...",            rows: 5,
            required: false
          }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=6"
          imageAlt="young people team group community collaboration"
          mediaAnimation="entrance-slide"
          mediaPosition="left"
          buttonText="Join the Movement"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Demographics Japan"
          copyrightText="© 2025 | Raising Awareness About Japan's Demographic Future"
          socialLinks={[
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
