"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
import ProductCardThree from "@/components/sections/product/ProductCardThree";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "#hero" },
              { name: "Meet Bill", id: "#bio" },
              { name: "Gallery", id: "#gallery" },
              { name: "Donate", id: "#donate" }
            ]}
            button={{
              text: "Volunteer",              href: "#signup"
            }}
            brandName="Bill Chuan for Milpitas City Council 2026"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroCarouselLogo
            logoText="Bill Will — For Milpitas."
            description="Bill Will listen. Bill Will lead. Bill Will deliver for every resident of Milpitas."
            slides={[
              { imageSrc: "https://via.placeholder.com/1920x1080/0A1F3B/FFFFFF?text=Bill+Chuan+for+Milpitas", imageAlt: "Bill Chuan for Milpitas City Council" }
            ]}
            showDimOverlay={true}
            useInvertedBackground={false}
            className="min-h-[calc(100vh-var(--height-navbar-mobile))] md:min-h-[calc(100vh-var(--height-navbar-desktop))]"
          />
        </div>

        <div id="bio" data-section="bio">
          <MediaAbout
            title="Meet Bill Chuan"
            description="Bill Chuan is a familiar face in Milpitas — a community member, a neighbor, and a dedicated public servant. After running in 2024, and with the continued encouragement of his family, his wife, and the people of Milpitas, Bill is back and more determined than ever. He believes in transparent leadership, inclusive growth, and real results for every neighborhood."
            imageSrc="https://via.placeholder.com/800x600/F5F5DC/333333?text=Bill+Chuan+Bio+Photo"
            imageAlt="Bill Chuan, community member"
            mediaPosition="right"
            useInvertedBackground={false}
          />
        </div>

        <div id="gallery" data-section="gallery">
          <ProductCardThree
            title="Bill in the Community"
            description="See Bill engaging with residents and working for Milpitas."
            gridVariant="bento-grid"
            animationType="slide-up"
            products={[
              { id: '1', name: 'Community Event', price: '', imageSrc: 'https://via.placeholder.com/600x400/FFD700/0A1F3B?text=Bill+Engaging+1' },
              { id: '2', name: 'Meeting Neighbors', price: '', imageSrc: 'https://via.placeholder.com/600x400/0A1F3B/FFD700?text=Bill+Engaging+2' },
              { id: '3', name: 'Public Engagement', price: '', imageSrc: 'https://via.placeholder.com/600x400/FFFFFF/0A1F3B?text=Bill+Engaging+3' },
              { id: '4', name: 'Listening to Residents', price: '', imageSrc: 'https://via.placeholder.com/600x400/0A1F3B/FFFFFF?text=Bill+Engaging+4' }
            ]}
            useInvertedBackground={true}
          />
        </div>

        <div id="donate" data-section="donate">
          <MediaAbout
            title="Bill Will fight for Milpitas — will you fight for Bill?"
            description="Your support fuels this campaign. Every dollar helps Bill reach more neighbors, share his vision, and bring honest leadership to City Hall."
            buttons={[
              {
                text: "Donate Now",                href: "https://donate.stripe.com/28E9AT6u43dz6ccgUn7kc00"
              },
            ]}
            imageSrc="https://via.placeholder.com/800x600/0A1F3B/FFFFFF?text=Fight+for+Bill"
            imageAlt="Bill Chuan campaign donation"
            useInvertedBackground={false}
          />
        </div>

        <div id="signup" data-section="signup">
          <ContactSplitForm
            title="Join the Campaign"
            description="Volunteer your time and make a difference. Sign up below to get involved!"
            imageSrc="https://via.placeholder.com/800x600/FFD700/0A1F3B?text=Volunteer+for+Bill"
            imageAlt="Volunteers working on Bill Chuan campaign"
            mediaPosition="right"
            inputs={[
              { name: "firstName", type: "text", placeholder: "First Name", required: true },
              { name: "lastName", type: "text", placeholder: "Last Name", required: true },
              { name: "email", type: "email", placeholder: "Email", required: true },
              { name: "phone", type: "tel", placeholder: "Phone Number", required: false },
            ]}
            textarea={{
              name: "message",              placeholder: "Message (optional)",              rows: 4,
              required: false,
            }}
            buttonText="Volunteer"
            onSubmit={(data) => console.log(data)}
            useInvertedBackground={true}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoText="© 2026 Bill Chuan for Milpitas City Council 2026, FPPC #1488016. Join the Conversation [Social Icons Placeholder]"
            columns={[
              {
                items: [
                  { label: "Terms & Conditions", href: "#" },
                  { label: "Privacy Policy", href: "#" },
                  { label: "Accessibility Statement", href: "#" },
                ],
              },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
