"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="UNBRKABLE"
          navItems={[
            { name: "About", id: "about" },
            { name: "Product", id: "product" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "JOIN WAITLIST", href: "#email-capture" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          tag="PRE-ORDER COMING SOON"
          tagAnimation="slide-up"
          title="UNBRKABLE"
          description="Countdown to launch"
          background={{ variant: "sparkles-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7wU63U5Z6xUyQgGM5ThlIUPo/uploaded-1772520151997-tdn3qcwt.png",              imageAlt: "UNBRKABLE Hero"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/water-drop-body-water_417767-87.jpg",              imageAlt: "dark cinematic luxury premium background"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093336.jpg",              imageAlt: "glass molten preview product teaser"},
            {
              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=1",              imageAlt: "product coming soon glass display"},
            {
              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=2",              imageAlt: "product coming soon glass display"},
          ]}
          buttonAnimation="slide-up"
          buttons={[{ text: "BE THE FIRST TO KNOW", href: "#email-capture" }]}
          className="min-h-screen flex items-center justify-center"
          containerClassName="max-w-4xl mx-auto px-6"
          titleClassName="text-6xl md:text-8xl font-bold tracking-wide mb-8 drop-shadow-lg"
          descriptionClassName="hidden"
          tagClassName="text-sm md:text-base font-semibold tracking-widest uppercase mb-6 text-accent"
        />
      </div>

      <div id="teaser" data-section="teaser">
        <ProductCardThree
          title="COMING SOON"
          description="Discover what's next"
          tag="PRODUCT TEASER"
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="four-items-2x2-equal-grid"
          products={[
            {
              id: "1",              name: "UNBRKABLE PRO",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=3",              imageAlt: "UNBRKABLE PRO"},
            {
              id: "2",              name: "UNBRKABLE LITE",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=4",              imageAlt: "UNBRKABLE LITE"},
            {
              id: "3",              name: "UNBRKABLE ELITE",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=5",              imageAlt: "UNBRKABLE ELITE"},
            {
              id: "4",              name: "UNBRKABLE MAX",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=6",              imageAlt: "UNBRKABLE MAX"},
          ]}
          containerClassName="py-20 px-6"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4 tracking-wide"
          textBoxDescriptionClassName="text-lg text-accent/75 mb-12 max-w-2xl"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="FOLLOW THE MOVEMENT"
          description="Stay connected with UNBRKABLE updates and exclusive previews"
          tag="INSTAGRAM"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["UNBRKABLE", "PREMIUM", "EXCLUSIVE", "LAUNCH", "MARCH 2026"]}
          speed={40}
          showCard={true}
          containerClassName="py-16 px-6"
          textBoxTitleClassName="text-3xl md:text-4xl font-bold mb-4 tracking-wide"
          textBoxDescriptionClassName="text-base text-accent/75 mb-8"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="UNBRKABLE"
          copyrightText="© 2025 UNBRKABLE. All rights reserved."
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com/unbrkable",              ariaLabel: "Instagram"},
          ]}
          containerClassName="py-12 px-6"
          cardClassName="max-w-4xl mx-auto backdrop-blur-md bg-white/10 rounded-2xl border border-white/20"
          logoClassName="text-2xl font-bold tracking-widest text-accent mb-6"
          copyrightTextClassName="text-sm text-accent/60"
        />
      </div>
    </ThemeProvider>
  );
}
