"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="grid"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Work", id: "portfolio" },
              { name: "About", id: "about" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="UGC Portfolio"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitDualMedia
            background={{ variant: "gradient-bars" }}
            title="Scroll-Stopping UGC That Converts Sales"
            description="I create premium, authentic user-generated content that resonates with audiences and drives measurable results for luxury and lifestyle brands. From concept to delivery, every frame is crafted to perform."
            tag="PREMIUM UGC CREATOR"
            buttons={[
              { text: "View My Work", href: "#portfolio" },
              { text: "Let's Create", href: "#contact" },
            ]}
            mediaItems={[
              { imageSrc: "http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058833.jpg", imageAlt: "luxury fashion content creator" },
              { imageSrc: "http://img.b2bpic.net/free-photo/3d-tree-with-sunlight-background_23-2150698088.jpg", imageAlt: "product lifestyle photography luxury" }
            ]}
            mediaAnimation="slide-up"
            rating={5}
            ratingText="Trusted by 50+ Global Brands"
          />
        </div>

        <div id="about" data-section="about">
          <TextAbout
            useInvertedBackground={false}
            tag="THE CREATOR PROCESS"
            title="Crafting Stories That Drive Growth"
          />
        </div>

        <div id="portfolio" data-section="portfolio">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="split"
            gridVariant="bento-grid"
            useInvertedBackground={true}
            products={[
              { id: "1", name: "Fashion Editorial", price: "High Fashion", variant: "Campaign", imageSrc: "http://img.b2bpic.net/free-photo/asian-fashion-female-blogger-online-influencer-holding-shopping-bags-lots-clothes_7861-779.jpg" },
              { id: "2", name: "Skincare Routine", price: "Lifestyle UGC", variant: "Video", imageSrc: "http://img.b2bpic.net/free-photo/influencer-their-pet-creating-content-online-spaces-social-media_23-2151420251.jpg" },
              { id: "3", name: "Luxury Jewelry", price: "Product Shot", variant: "Commercial", imageSrc: "http://img.b2bpic.net/free-photo/golden-easter-eggs-by-easter-decorations_1303-30802.jpg" }
            ]}
            title="Recent Campaign Highlights"
            description="A curated collection of high-performing creative content designed to amplify brand voice."
          />
        </div>

        <div id="results" data-section="results">
          <MetricCardEleven
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "1.2M+", title: "Total Views", description: "Across social platforms", imageSrc: "http://img.b2bpic.net/free-photo/media-journalism-global-daily-news-content-concept_53876-123733.jpg" },
              { id: "m2", value: "8.5%", title: "Avg. Engagement", description: "Well above industry average", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blond-woman-teenage-girl-records-video-her-social-media-account-shows-makeup_1258-281939.jpg" },
              { id: "m3", value: "45+", title: "Happy Brands", description: "Long-term partnerships", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-blond-female-posing-near-artistic-black-chair_613910-8206.jpg" }
            ]}
            title="Proven Performance"
            description="Numbers speak louder than words—here is the impact I deliver."
          />
        </div>

        <div id="social" data-section="social">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={true}
            names={["Fashion Luxe", "Skin Glow", "Jewelry Co", "Creative Media", "Style Retail", "Beauty Start", "Global Agency"]}
            title="Trusted by Leading Brands"
            description="I collaborate with vision-driven brands across the globe."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTwo
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              { id: "1", name: "Sarah Miller", role: "Marketing Director", testimonial: "Exceptional creative quality and reliable delivery. Our conversion rates increased by 20% within weeks.", imageSrc: "http://img.b2bpic.net/free-photo/confident-successful-middle-aged-business-leader_1262-4872.jpg" },
              { id: "2", name: "James Chen", role: "CMO", testimonial: "The most professional UGC creator we've worked with. Understands our brand voice perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-smart-phone_23-2148794623.jpg" }
            ]}
            title="What Brands Are Saying"
            description="Don't take my word for it—hear from the partners I've helped succeed."
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitText
            useInvertedBackground={true}
            faqs={[
              { id: "f1", title: "What is your typical turnaround time?", content: "Most projects are completed within 7-10 business days of product receipt." },
              { id: "f2", title: "Do you offer ad usage rights?", content: "Yes, all packages include standard usage rights. Extended licensing is available for custom projects." }
            ]}
            sideTitle="Common Questions"
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Let's Collaborate"
            description="Ready to elevate your brand content? Send me a message and let's get started."
            inputs={[
              { name: "name", type: "text", placeholder: "Your Name" },
              { name: "email", type: "email", placeholder: "Your Email" }
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994378.jpg"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="UGC Portfolio"
            columns={[
              { title: "Navigation", items: [{ label: "Work", href: "#portfolio" }, { label: "About", href: "#about" }] },
              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
