"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, Camera, Award, CheckCircle, Star, Heart } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="large"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="GULI"
          navItems={[
            { name: "About", id: "about" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Services", id: "services" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Work With Me", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="GULI"
          description="Elevated Beauty & Lifestyle UGC Creator. Helping aesthetic-forward brands tell their story through calm, intentional, and high-conversion visual storytelling."
          background={{ variant: "plain" }}
          kpis={[
            { value: "500K+", label: "Total Views" },
            { value: "4.8%", label: "Avg. Engagement" },
            { value: "98%", label: "Client Satisfaction" }
          ]}
          enableKpiAnimation={true}
          tag="UGC Creator"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[{ text: "Work With Me", href: "#contact" }]}
          buttonAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-enjoying-blue-matcha-home_23-2150687577.jpg"
          imageAlt="Guli, UGC Creator"
          mediaAnimation="blur-reveal"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="The Vision Behind the Lens"
          description="I'm passionate about creating content that feels authentic yet intentional. Specializing in the Clean Girl aesthetic, I craft scroll-stopping moments that showcase skin textures, morning routines, and premium lifestyle vibes. My work focuses on creating genuine connections between brands and audiences through visual storytelling that's both beautiful and purposeful. Every frame tells a story of intentionality and elegance."
          tag="About Me"
          tagIcon={Camera}
          tagAnimation="blur-reveal"
          buttons={[{ text: "View My Work", href: "#portfolio" }]}
          buttonAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/front-view-young-female-sitting-inside-room-with-easel-paints-white-desk-art-draw-picture-painting-artist-painter-color_140725-103558.jpg"
          imageAlt="Guli Creative Studio"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <FeatureCardTwentySeven
          title="Portfolio Showcase"
          description="A curated selection of recent work across beauty, skincare, and lifestyle brands. Each project demonstrates the Clean Girl aesthetic through intentional composition and authentic storytelling."
          tag="Featured Work"
          tagIcon={Award}
          tagAnimation="blur-reveal"
          features={[
            {
              id: "texture",              title: "Texture Close-up",              descriptions: [
                "Macro photography showcasing product textures and skin details. High-definition close-ups that highlight product quality and benefits.",                "Perfect for skincare brands and premium beauty products."
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-texture-cream_23-2149409578.jpg",              imageAlt: "Texture Close-up"
            },
            {
              id: "transition",              title: "Skincare Transition",              descriptions: [
                "Seamless transition videos showcasing skincare routines and product applications.",                "Engaging content that demonstrates product benefits through smooth, intentional movement."
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-photos-ceramic-kitchenware_23-2149060842.jpg",              imageAlt: "Skincare Transition"
            },
            {
              id: "unboxing",              title: "Aesthetic Unboxing",              descriptions: [
                "Premium unboxing experiences that elevate your product presentation.",                "Thoughtfully composed shots that create anticipation and showcase packaging elegance."
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/gift-box-with-wrapping-paper-table_23-2147992483.jpg",              imageAlt: "Aesthetic Unboxing"
            },
            {
              id: "testimonial",              title: "Natural Testimonial",              descriptions: [
                "Authentic customer testimonials that build trust and credibility.",                "Real reactions and genuine experiences with your products in natural settings."
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/online-presentation-young-woman-representing-new-facial-cream-looking-involved_259150-60050.jpg",              imageAlt: "Natural Testimonial"
            },
            {
              id: "flatlay",              title: "Product Flatlay",              descriptions: [
                "Minimalist flatlay compositions that showcase multiple products beautifully.",                "Perfect for social media campaigns and website imagery."
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-tropical-leaves-with-beauty-tools-cosmetics_23-2148179539.jpg",              imageAlt: "Product Flatlay"
            },
            {
              id: "lifestyle",              title: "Lifestyle Vlog",              descriptions: [
                "Integrated product storytelling within daily lifestyle content.",                "Shows products in authentic contexts that resonate with your target audience."
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blond-woman-girl-shows-blushes-beauty-products-recording-video-digital_1258-254988.jpg",              imageAlt: "Lifestyle Vlog"
            }
          ]}
          gridVariant="bento-grid"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySeven
          title="Services"
          description="Comprehensive UGC creation services tailored for premium brands seeking authentic, high-conversion content."
          tag="What I Offer"
          tagIcon={CheckCircle}
          tagAnimation="blur-reveal"
          features={[
            {
              id: "videos",              title: "High-Aesthetic Videos",              descriptions: [
                "Professional Reels and TikToks with seamless transitions and intentional pacing.",                "Scroll-stopping content optimized for social media algorithms that drives engagement and conversions."
              ]
            },
            {
              id: "photography",              title: "Product Photography",              descriptions: [
                "High-resolution website and ad imagery that showcases your products beautifully.",                "Professional lighting and composition that elevates your brand's visual presence."
              ]
            },
            {
              id: "storytelling",              title: "Organic Storytelling",              descriptions: [
                "Authentic unboxings and community-focused content that builds genuine trust.",                "Narrative-driven videos that connect emotionally with your audience."
              ]
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="value-proposition" data-section="value-proposition">
        <MetricCardEleven
          title="Why Work With Me"
          description="What sets my approach apart—niche authority, intentional production, and the Clean Standard that premium brands trust."
          tag="Our Advantage"
          tagIcon={Star}
          tagAnimation="blur-reveal"
          metrics={[
            {
              id: "authority",              value: "Niche",              title: "Authority",              description: "Deep expertise in the Clean Girl aesthetic and minimalist lifestyle space. Your content will resonate authentically with your target market.",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-enjoying-blue-matcha-home_23-2150687577.jpg",              imageAlt: "Niche Authority",              videoSrc: ""
            },
            {
              id: "production",              value: "Intentional",              title: "Production",              description: "Every frame, transition, and moment is carefully curated. No rushed content—just thoughtful creativity that elevates your brand.",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-enjoying-blue-matcha-home_23-2150687577.jpg",              imageAlt: "Intentional Production",              videoSrc: ""
            },
            {
              id: "standard",              value: "Clean",              title: "Standard",              description: "Commitment to the Clean Standard—premium, minimal, intentional. Content designed specifically for luxury and lifestyle brands.",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-enjoying-blue-matcha-home_23-2150687577.jpg",              imageAlt: "Clean Standard",              videoSrc: ""
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Brands Say"
          description="Client testimonials from luxury and beauty brands who've partnered with me to elevate their content."
          tag="Client Love"
          tagIcon={Heart}
          tagAnimation="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Sarah Martinez",              handle: "@luminbrand",              testimonial: "Guli transformed our product launch with stunning UGC content. Her understanding of the Clean Girl aesthetic was exactly what we needed. Conversion rates exceeded our expectations.",              imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",              imageAlt: "Sarah Martinez",              icon: Star
            },
            {
              id: "2",              name: "Jessica Chen",              handle: "@elevateskincorp",              testimonial: "Working with Guli was seamless. The content she created felt authentic yet polished—perfectly aligned with our brand vision. Highly recommend for any premium beauty brand.",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-young-woman-dress-room_23-2148068394.jpg",              imageAlt: "Jessica Chen",              icon: Star
            },
            {
              id: "3",              name: "Elena Rodriguez",              handle: "@minimalistbeautyco",              testimonial: "Guli's attention to detail is unmatched. Every frame tells a story. Our customers commented on how the content felt intentional and premium—exactly the reflection of our brand we wanted.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-wearing-formal-suit_23-2148937763.jpg",              imageAlt: "Elena Rodriguez",              icon: Star
            },
            {
              id: "4",              name: "Amanda Thompson",              handle: "@luxelifestyle",              testimonial: "The UGC Guli created drove significant engagement and sales. She truly understands the minimalist lifestyle market and knows how to create content that converts. A true professional.",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "Amanda Thompson",              icon: Star
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          speed={40}
          topMarqueeDirection="left"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Beautiful"
          description="Ready to elevate your brand with intentional, high-conversion UGC content? Get in touch to discuss your project."
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-enjoying-blue-matcha-home_23-2150687577.jpg"
          imageAlt="Contact Guli"
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name" },
            { name: "email", type: "email", placeholder: "Your Email" },
            { name: "brand", type: "text", placeholder: "Brand Name" }
          ]}
          textarea={{ name: "message", placeholder: "Tell me about your project and vision...", rows: 4 }}
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "#" },
                { label: "About", href: "#about" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Services", href: "#services" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "TikTok", href: "https://tiktok.com" },
                { label: "Email", href: "mailto:guli.ugc@gmail.com" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2024 Guli UGC. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
