"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Award, Sun, Waves, Wind } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="grid"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="OBDLO"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "Archive", id: "archive" },
            { name: "Journal", id: "journal" },
            { name: "Club", id: "club" }
          ]}
          button={{ text: "Cart", href: "#" }}
          animateOnLoad={true}
          className="sticky top-4 z-50 mx-4 backdrop-blur-md bg-white/95"
          navItemClassName="text-xs tracking-widest uppercase font-medium text-foreground hover:text-accent transition-colors"
          buttonClassName="px-6 py-2 text-xs tracking-widest uppercase border border-foreground text-foreground hover:bg-foreground hover:text-background transition-all"
          buttonTextClassName="font-medium"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="Not Made for Everyone."
          description="A 1/1 Eyewear Atelier. California."
          tag="Exclusive Drop"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Enter the Archive", href: "#products" },
            { text: "Explore the Drop", href: "#featured" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/gazebo-surrounded-by-palm-trees-water-sunset_181624-57249.jpg"
          imageAlt="California coastal golden hour landscape"
          mediaAnimation="slide-up"
          background={{ variant: "plain" }}
          testimonials={[
            {
              name: "Artisan Crafted",              handle: "1/1 Design",              testimonial: "Every frame is a unique architectural expression of coastal clarity.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-58746.jpg"
            }
          ]}
          testimonialRotationInterval={5000}
          useInvertedBackground={false}
          className="w-full"
          containerClassName="py-0"
          mediaWrapperClassName="aspect-video md:aspect-auto md:h-screen"
          buttonClassName="px-8 py-3 text-xs tracking-widest uppercase border border-foreground hover:bg-foreground hover:text-background transition-all"
        />
      </div>

      <div id="featured" data-section="featured">
        <ProductCardFour
          title="The Current Drop"
          description="Hand-selected pieces from our latest collection, each a singular expression of craft."
          tag="Limited"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          uniformGridCustomHeightClasses="min-h-80 md:min-h-96"
          products={[
            {
              id: "1",              name: "Eclipse Motion Pro",              price: "$680",              variant: "Matte Black · Limited",              imageSrc: "http://img.b2bpic.net/free-photo/levitating-product-display-with-eyeglasses_23-2149670635.jpg",              imageAlt: "Eclipse Motion Pro matte black frames"
            },
            {
              id: "2",              name: "Coastal Clarity Lens",              price: "$720",              variant: "Sand Gold · Signature",              imageSrc: "http://img.b2bpic.net/free-photo/colored-transparent-sunglasses-still-life_23-2150165930.jpg",              imageAlt: "Coastal Clarity Lens in sand gold"
            }
          ]}
          className="py-20 md:py-32"
          containerClassName="max-w-7xl mx-auto px-4"
          titleClassName="text-4xl md:text-5xl font-medium mb-6"
          descriptionClassName="text-foreground/60 text-lg mb-12 max-w-2xl"
          cardClassName="group relative overflow-hidden bg-card border border-accent/30 hover:border-accent transition-all"
        />
      </div>

      <div id="manifesto" data-section="manifesto">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "We believe eyewear is a form of " },
            { type: "text", content: "architectural art" },
            { type: "text", content: ". Each frame is constructed with intention, not mass production. Our 1/1 philosophy means every piece exists as a singular statement—a conversation between light, geometry, and the human eye." }
          ]}
          buttons={[
            { text: "Read the Full Story", href: "#journal" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          className="py-24 md:py-40 px-4"
          containerClassName="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center"
          headingClassName="text-3xl md:text-4xl font-medium leading-tight text-foreground tracking-tight"
          buttonClassName="mt-12 px-8 py-3 text-xs tracking-widest uppercase border border-foreground hover:bg-foreground hover:text-background transition-all"
        />
      </div>

      <div id="stories" data-section="stories">
        <FeatureBorderGlow
          title="California Stories"
          description="Inspired by the rhythms of the Pacific Coast, each collection captures a moment of golden light and coastal clarity."
          tag="Editorial"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              icon: Sun,
              title: "Golden Hour",              description: "Frames inspired by the precise angle of late afternoon light hitting the California coastline. Pure geometry meets natural luminance."
            },
            {
              icon: Waves,
              title: "Tidal Geometry",              description: "Forms drawn from coastal rock formations and water's edge. Each line and curve reflects the mathematical beauty of Pacific patterns."
            },
            {
              icon: Wind,
              title: "Salt Air Clarity",              description: "Minimal, refined silhouettes that cut through the mist. Designed for those who see clearly and speak with intent."
            }
          ]}
          className="py-24 md:py-40 px-4"
          containerClassName="max-w-7xl mx-auto"
        />
      </div>

      <div id="club" data-section="club">
        <ContactSplit
          tag="Exclusive Access"
          title="The Club is Invitation Only."
          description="Join OBDLO Club members for early access to drops, private viewings, and limited releases. We hand-select every member."
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          mediaPosition="right"
          imageSrc="http://img.b2bpic.net/free-photo/golden-sunset-sea-sandy-beach-peaceful-evening-by-shore_169016-69696.jpg"
          imageAlt="California coastal golden hour"
          mediaAnimation="slide-up"
          inputPlaceholder="your@email.com"
          buttonText="Request Access"
          termsText="We respect your inbox. Unsubscribe anytime."
          className="py-24 md:py-40 px-4"
          containerClassName="max-w-7xl mx-auto"
          contentClassName="grid md:grid-cols-2 gap-16 items-center"
          tagClassName="text-xs tracking-widest uppercase text-accent mb-4"
          titleClassName="text-3xl md:text-4xl font-medium mb-6 leading-tight"
          descriptionClassName="text-foreground/60 text-lg mb-12 max-w-md"
          inputClassName="w-full px-6 py-4 bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-accent transition-colors"
          buttonClassName="w-full px-6 py-4 bg-foreground text-background font-medium text-xs tracking-widest uppercase hover:opacity-80 transition-opacity"
          termsClassName="text-xs text-foreground/50 mt-4"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="The Full Collection"
          description="Every frame is a 1/1 design. No repeats. No compromise. Pure architectural craft."
          tag="Archive"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          uniformGridCustomHeightClasses="min-h-96 md:min-h-full"
          products={[
            {
              id: "1",              name: "Architect's Vision",              price: "$650",              variant: "Ebony · Polished",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-optical-sunglasses-grey-desk-with-silver-chains-isolated-sight-vision-eyes_140725-18288.jpg",              imageAlt: "Architect's Vision eyeglasses"
            },
            {
              id: "2",              name: "Desert Mirage",              price: "$680",              variant: "Sand Gold · Matte",              imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-fashion-model-trendy-sunglasses-bodywear-leather-jacket-posing-grey-background-caucasian-woman-having-plump-lips-dark-wavy-hair-professional-makeup_7502-9239.jpg",              imageAlt: "Desert Mirage sunglasses"
            },
            {
              id: "3",              name: "Minimalist Lens",              price: "$620",              variant: "Charcoal · Refined",              imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg",              imageAlt: "Minimalist Lens frames"
            },
            {
              id: "4",              name: "Coastal Guard",              price: "$700",              variant: "Titanium · Signature",              imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-grey-jacket-white-shirt-sunglasses-with-red-lipstick-is-touching-hair-posing-near-her-house-beautiful-lady-grey-oversize-jacket-pants-walks-outside_291650-2564.jpg",              imageAlt: "Coastal Guard premium sunglasses"
            },
            {
              id: "5",              name: "Retro Archive",              price: "$640",              variant: "Vintage Brown · Classic",              imageSrc: "http://img.b2bpic.net/free-photo/eyeglasses-book-vase-tulips-table_140725-10928.jpg",              imageAlt: "Retro Archive eyeglasses"
            },
            {
              id: "6",              name: "Modern Silence",              price: "$690",              variant: "Matte Black · Contemporary",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-wearing-black-turtleneck-fanny-pack_250224-360.jpg",              imageAlt: "Modern Silence frames"
            }
          ]}
          className="py-24 md:py-40 px-4"
          containerClassName="max-w-7xl mx-auto"
          titleClassName="text-4xl md:text-5xl font-medium mb-6"
          descriptionClassName="text-foreground/60 text-lg mb-16 max-w-2xl"
          cardClassName="group relative overflow-hidden bg-card border border-accent/20 hover:border-accent/50 transition-all duration-300"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="OBDLO™"
          copyrightText="© 2025 OBDLO. The Art of Coastal Clarity."
          columns={[
            {
              title: "Shop",              items: [
                { label: "Current Drop", href: "#featured" },
                { label: "Full Collection", href: "#products" },
                { label: "Limited Access", href: "#" }
              ]
            },
            {
              title: "Explore",              items: [
                { label: "Archive", href: "#" },
                { label: "Journal", href: "#" },
                { label: "The Club", href: "#club" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Email", href: "mailto:hello@obdlo.com" },
                { label: "Privacy", href: "#" }
              ]
            }
          ]}
          className="bg-foreground text-background py-20 px-4"
          containerClassName="max-w-7xl mx-auto"
          logoTextClassName="text-xl font-medium tracking-widest mb-12"
          columnsClassName="grid grid-cols-3 gap-12 mb-16"
          columnTitleClassName="text-sm font-medium tracking-widest uppercase mb-6"
          columnItemClassName="text-sm text-background/70 hover:text-background transition-colors mb-3"
          copyrightTextClassName="text-xs text-background/50 tracking-wide"
        />
      </div>
    </ThemeProvider>
  );
}