"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { CalendarDays, Heart, Leaf, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="noiseDiagonalGradient"
        cardStyle="inset"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Community",
          id: "features",
        },
        {
          name: "Planner",
          id: "product",
        },
        {
          name: "Support",
          id: "contact",
        },
      ]}
      brandName="Lumina"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background="gradient-bars"
      title="Empowering Your Feminine Growth"
      description="The ultimate space for productivity, wellness, and self-development tailored for you."
      tag="Welcome to Lumina"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/breakfast-with-croissant-tea-cup_23-2148103419.jpg",
          imageAlt: "cozy aesthetic workspace pastel pink",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/person-holding-white-smartphone-screen-mockup_9975-133800.jpg",
          imageAlt: "minimalist mobile app interface design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-coffee-cup_23-2148166683.jpg",
          imageAlt: "Office desktop with a coffee cup",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-coffee-cup-cookies_23-2148166793.jpg",
          imageAlt: "Office desktop with a coffee cup and cookies",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/plate-breakfast-waffle-with-banana-topping-white-bed-diary-phone_53876-65288.jpg",
          imageAlt: "Plate of breakfast waffle with banana topping on a white bed next to a diary and a phone",
        },
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Join 50,000+ girls"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="Our Philosophy"
      title="Designed for Your Daily Flow"
      description="Lumina balances your productivity needs with holistic wellness, helping you achieve goals without burning out."
      subdescription="Every feature is crafted to support your mental clarity, lifestyle habits, and personal evolution."
      imageSrc="http://img.b2bpic.net/free-photo/composition-beautiful-mother-s-day-elements_23-2148888528.jpg"
      mediaAnimation="blur-reveal"
      imageAlt="feminine wellness lifestyle illustration"
      icon={Leaf}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBorderGlow
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Sparkles,
          title: "Wellness Hub",
          description: "Personalized skincare and fitness routines for every body.",
        },
        {
          icon: Heart,
          title: "Community Love",
          description: "Connect, share, and grow in a safe and supportive space.",
        },
        {
          icon: CalendarDays,
          title: "Smart Planner",
          description: "Organize your life based on your energy and priorities.",
        },
      ]}
      title="Everything You Need to Bloom"
      description="A comprehensive suite of tools built for your unique lifestyle."
    />
  </div>

  <div id="product" data-section="product">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          brand: "Lumina",
          name: "Self-Care Planner",
          price: "$12",
          rating: 5,
          reviewCount: "1.2k",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-blank-white-screen-light-glow_9975-134406.jpg",
          imageAlt: "minimalist mobile app interface design",
        },
        {
          id: "2",
          brand: "Lumina",
          name: "Growth Journal",
          price: "$15",
          rating: 5,
          reviewCount: "890",
          imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-flower-shape-soap-candle-smartphone-decorated-with-petals_23-2147971463.jpg",
          imageAlt: "social media feed interface aesthetic",
        },
        {
          id: "3",
          brand: "Lumina",
          name: "Wellness Routine Kit",
          price: "$20",
          rating: 5,
          reviewCount: "2.1k",
          imageSrc: "http://img.b2bpic.net/free-photo/women-enjoying-mental-health_23-2151904408.jpg",
          imageAlt: "feminine wellness lifestyle illustration",
        },
        {
          id: "4",
          brand: "Lumina",
          name: "Productivity Guide",
          price: "$9",
          rating: 5,
          reviewCount: "560",
          imageSrc: "http://img.b2bpic.net/free-photo/alarm-clock-coffee-cup-spiral-notepad-eyeglasses-laptop-with-makeup-brush-lipstick-colored-backdrop_23-2148178661.jpg",
          imageAlt: "cozy aesthetic workspace pastel pink",
        },
        {
          id: "5",
          brand: "Lumina",
          name: "Fitness Calendar",
          price: "$10",
          rating: 5,
          reviewCount: "720",
          imageSrc: "http://img.b2bpic.net/free-photo/vertical-banners-sales_23-2150629843.jpg",
          imageAlt: "minimalist mobile app interface design",
        },
        {
          id: "6",
          brand: "Lumina",
          name: "Mindfulness Workbook",
          price: "$14",
          rating: 5,
          reviewCount: "1.5k",
          imageSrc: "http://img.b2bpic.net/free-photo/white-flower-scrub-dried-pod-around-smartphone-against-pink-background_23-2147971439.jpg",
          imageAlt: "social media feed interface aesthetic",
        },
      ]}
      title="Your Daily Essentials"
      description="Premium guides and trackers to enhance your self-development journey."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "50k+",
          title: "Active Members",
          description: "Girls growing together",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-flowers-coffee-flat-lay_23-2148469830.jpg",
          imageAlt: "cozy aesthetic workspace pastel pink",
        },
        {
          id: "m2",
          value: "1M+",
          title: "Goals Met",
          description: "Dreams turning into reality",
          imageSrc: "http://img.b2bpic.net/free-vector/mobile-app-concept_52683-5724.jpg",
          imageAlt: "minimalist mobile app interface design",
        },
        {
          id: "m3",
          value: "200k",
          title: "Wellness Tasks",
          description: "Steps towards self-care",
          imageSrc: "http://img.b2bpic.net/free-vector/meditation-app-screens-collection_23-2148628455.jpg",
          imageAlt: "social media feed interface aesthetic",
        },
      ]}
      title="Community Milestones"
      description="Celebrating every step of our collective progress."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Sarah",
          role: "Student",
          company: "Lumina User",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-emotional-girl-business-style-clothes-plain-white-background-office-audience_78826-2259.jpg",
          imageAlt: "young woman smiling professional portrait",
        },
        {
          id: "t2",
          name: "Layla",
          role: "Creative",
          company: "Lumina User",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-female-trendy-summer-pink-overalls-sexy-carefree-woman-posing-near-blue-wall-studio-with-two-horns-positive-model-having-fun-going-crazy-shows-peace-sign_158538-25175.jpg",
          imageAlt: "young woman smiling professional portrait",
        },
        {
          id: "t3",
          name: "Nora",
          role: "Entrepreneur",
          company: "Lumina User",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
          imageAlt: "young woman smiling professional portrait",
        },
        {
          id: "t4",
          name: "Hana",
          role: "Professional",
          company: "Lumina User",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg",
          imageAlt: "young woman smiling professional portrait",
        },
        {
          id: "t5",
          name: "Fatima",
          role: "Writer",
          company: "Lumina User",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-smiling-sitting-floor-white-wall_176420-8541.jpg",
          imageAlt: "young woman smiling professional portrait",
        },
      ]}
      title="Words from Our Community"
      description="Hear how Lumina has transformed daily lives."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Is it free to join?",
          content: "Yes, basic community access is free for everyone.",
        },
        {
          id: "f2",
          title: "Can I customize the planner?",
          content: "Absolutely! The planner is designed to adapt to your energy levels.",
        },
        {
          id: "f3",
          title: "Is dark mode available?",
          content: "Yes, we support a cozy dark mode for late-night scrolling.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Answers to your questions about Lumina."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background="rotated-rays-static"
      title="Start Your Bloom Today"
      description="Sign up for early access to Lumina and be part of our growing community."
      buttonText="Join Now"
      tag="Get Started"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Lumina"
      columns={[
        {
          title: "Platform",
          items: [
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Community",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#",
            },
            {
              label: "Privacy",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
