"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="radialGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Luxe Studio"
          navItems={[
            { name: "Work", id: "featured-work" },
            { name: "Studio", id: "about" },
            { name: "Culture", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Let's Talk",            href: "contact"
          }}
          className="fixed top-6 left-0 right-0 z-50"
          buttonClassName="px-6 py-2"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="LUXE STUDIO"
          description="Bespoke creative direction for the world's most discerning brands."
          buttons={[
            { text: "View Our Work", href: "#featured-work" },
            { text: "Book a Consultation", href: "#contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-vector/gradient-golden-luxury-covers-collection_23-2149055014.jpg"
          imageAlt="Luxury creative studio workspace"
          frameStyle="card"
          logoLineHeight={1.05}
          className="min-h-screen pt-32"
          containerClassName="gap-12"
          descriptionClassName="text-lg md:text-3xl font-light tracking-wide"
          buttonContainerClassName="gap-4 flex flex-col md:flex-row"
          buttonClassName="px-8 py-3 rounded-full"
          buttonTextClassName="text-sm font-medium uppercase tracking-widest"
        />
      </div>

      <div id="featured-work" data-section="featured-work">
        <FeatureCardOne
          title="Featured Work"
          description="Curated campaigns that define luxury."
          tag="Portfolio"
          tagIcon={Sparkles}
          buttons={[
            { text: "Explore All Projects", href: "#" }
          ]}
          textboxLayout="split"
          features={[
            {
              title: "Heritage Campaign",              description: "A multi-sensory brand evolution for a century-old luxury house.",              imageSrc: "https://img.b2bpic.net/free-vector/elegant-business-card-template_79603-1141.jpg",              imageAlt: "Heritage luxury campaign design"
            },
            {
              title: "Timeless Collection",              description: "Visual identity and campaign strategy for an exclusive collection launch.",              imageSrc: "https://img.b2bpic.net/free-vector/realistic-elegant-business-card_23-2149263948.jpg",              imageAlt: "Timeless collection campaign"
            },
            {
              title: "Modern Elegance",              description: "Complete brand refresh reflecting contemporary luxury aesthetics.",              imageSrc: "https://img.b2bpic.net/free-vector/mandala-business-card-template_23-2148445853.jpg",              imageAlt: "Modern elegance brand design"
            },
            {
              title: "Signature Experience",              description: "Experiential design creating memorable brand moments.",              imageSrc: "https://img.b2bpic.net/free-vector/elegant-business-card-template_23-2148360278.jpg",              imageAlt: "Signature brand experience"
            }
          ]}
          gridVariant="asymmetric-60-wide-40-narrow"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          textBoxClassName="gap-6"
          textBoxDescriptionClassName="text-base leading-relaxed"
          textBoxButtonContainerClassName="gap-3"
          cardTitleClassName="text-lg font-medium"
          cardDescriptionClassName="text-sm leading-relaxed"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <TestimonialCardOne
          title="Trusted By"
          description="The world's most prestigious brands."
          testimonials={[
            {
              id: "1",              name: "Heritage Luxury",              role: "Global Brand",              company: "Fashion & Heritage",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg",              imageAlt: "Heritage luxury brand"
            },
            {
              id: "2",              name: "Timeless Beauty",              role: "Premium Beauty",              company: "Skincare & Wellness",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842743.jpg",              imageAlt: "Premium beauty brand"
            },
            {
              id: "3",              name: "Fine Jewelry",              role: "Luxury Jewelry",              company: "Precious Gems",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/elegant-vintage-letter-v-logo_1035-8795.jpg",              imageAlt: "Fine jewelry brand"
            },
            {
              id: "4",              name: "Prestige Motors",              role: "Automotive Luxury",              company: "High Performance",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/golden-logo-vintage-luxury-style_23-2147861434.jpg",              imageAlt: "Prestige automotive brand"
            },
            {
              id: "5",              name: "Exclusive Retreats",              role: "Hospitality",              company: "Luxury Travel",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/logo-with-vintage-luxury-style_23-2147840717.jpg",              imageAlt: "Exclusive hospitality brand"
            },
            {
              id: "6",              name: "Refined Living",              role: "Lifestyle",              company: "Premium Goods",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/golden-elegant-logo-template_1195-1.jpg",              imageAlt: "Refined lifestyle brand"
            },
            {
              id: "7",              name: "Iconic Timepieces",              role: "Watchmaking",              company: "Horological Excellence",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/golden-ornamental-logo-with-letter-v_1017-6165.jpg",              imageAlt: "Iconic timepiece brand"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          overlayClassName="backdrop-blur-md bg-black/40"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",              content: "We craft unforgettable brand experiences that elevate and transform."
            }
          ]}
          buttons={[
            { text: "Our Approach", href: "#" }
          ]}
          useInvertedBackground="noInvert"
          containerClassName="py-24 md:py-32"
          headingClassName="text-4xl md:text-6xl font-light leading-tight tracking-tight"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <MetricCardEleven
          title="What They Say"
          description="Insights from the leaders we've partnered with."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",              value: "\"Exceptional\"",              title: "Sarah Mitchell",              description: "Chief Creative Officer, Heritage Luxury",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg",              imageAlt: "Sarah Mitchell headshot"
            },
            {
              id: "2",              value: "\"Transformative\"",              title: "Michael Chen",              description: "Global Brand Director, Timeless Beauty",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",              imageAlt: "Michael Chen headshot"
            },
            {
              id: "3",              value: "\"Visionary\"",              title: "Elena Rodriguez",              description: "Founder & CEO, Fine Jewelry House",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg",              imageAlt: "Elena Rodriguez headshot"
            },
            {
              id: "4",              value: "\"Unparalleled\"",              title: "David Montgomery",              description: "Executive Chairman, Prestige Motors",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg",              imageAlt: "David Montgomery headshot"
            }
          ]}
          valueClassName="text-xl md:text-2xl font-light italic"
          cardTitleClassName="font-medium text-base"
          cardDescriptionClassName="text-sm"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Extraordinary"
          description="Tell us about your vision. We'll transform it into a luxury experience."
          inputs={[
            {
              name: "company",              type: "text",              placeholder: "Your Brand",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Contact Email",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Describe your project vision...",            rows: 5,
            required: true
          }}
          buttonText="Start Conversation"
          mediaPosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/front-view-woman-working-as-interior-designer_23-2150346511.jpg"
          imageAlt="Creative studio workspace"
          useInvertedBackground="noInvert"
          containerClassName="py-24 md:py-32"
          titleClassName="text-4xl md:text-5xl font-light leading-tight"
          descriptionClassName="text-lg opacity-80 leading-relaxed"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="LUXE STUDIO"
          logoLineHeight={1.05}
          className="relative z-50"
          logoClassName="text-2xl md:text-4xl font-light tracking-wider"
        />
      </div>
    </ThemeProvider>
  );
}