"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Calendar, Music, ShieldCheck, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeLargeTitles"
        background="fluid"
        cardStyle="outline"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "features" },
        { name: "Reviews", id: "testimonials" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="PartyFind"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Unforgettable Parties, Simplified."
      description="Discover the best party venues, caterers, and entertainers in your neighborhood. Book everything you need for your perfect event in minutes."
      buttons={[{ text: "Start Planning", href: "#features" }]}
      imageSrc="http://img.b2bpic.net/free-photo/new-year-composition-with-party-letters_23-2147724131.jpg"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/colorful-bunting-flags-with-bright-background_9975-24665.jpg", alt: "User avatar 1" },
        { src: "http://img.b2bpic.net/free-photo/baking-powder-wooden-background-generative-ai_169016-29724.jpg", alt: "User avatar 2" },
        { src: "http://img.b2bpic.net/free-photo/baking-powder-wooden-background-generative-ai_169016-29850.jpg", alt: "User avatar 3" },
        { src: "http://img.b2bpic.net/free-photo/celebration-background-with-champagne-confetti_23-2152031243.jpg", alt: "User avatar 4" },
        { src: "http://img.b2bpic.net/free-photo/birthday-concept-with-friends-happy-see-each-other_23-2147716806.jpg", alt: "User avatar 5" },
      ]}
      avatarText="Join 5,000+ satisfied hosts"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="About Us"
      title="We Make Events Easy"
      description="PartyFind connects local event hosts with trusted professionals, ensuring every celebration is stress-free and memorable."
      subdescription="Our platform verifies every service provider to guarantee quality for your special day."
      icon={Users}
      imageSrc="http://img.b2bpic.net/free-photo/cheerful-friends-sitting-table-applauding_23-2147668908.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Seamless Booking",          description: "Manage your entire schedule from our centralized platform.",          icon: Calendar,
          mediaItems: [
            { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-party-decorations-with-laptop_23-2149426566.jpg" },
            { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-party-decorations-laptop_23-2149426574.jpg" },
          ]
        },
        {
          title: "Trusted Vendors",          description: "Verified caterers, photographers, and equipment rentals.",          icon: ShieldCheck,
          mediaItems: [
            { imageSrc: "http://img.b2bpic.net/free-photo/celebration-wedding-luxury-service-decoration_1203-4937.jpg" },
            { imageSrc: "http://img.b2bpic.net/free-photo/wineglasses-stand-table-before-restaurant_8353-9656.jpg" },
          ]
        },
        {
          title: "Entertainment Hub",          description: "Find the best DJs, live bands, and performers.",          icon: Music,
          mediaItems: [
            { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-musicians-concert_23-2149162975.jpg" },
            { imageSrc: "http://img.b2bpic.net/free-photo/musician-playing-electronic-music-live-performance-nightclub-dj-headphones-mixing-sound-controller-panel-stage-while-crowd-partying-discotheque-club_482257-67146.jpg" },
          ]
        },
      ]}
      title="Comprehensive Event Solutions"
      description="From local venues to top-rated entertainers, we provide everything needed for success."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "5,000+",          title: "Events Organized",          description: "Successfully completed parties.",          imageSrc: "http://img.b2bpic.net/free-photo/group-friends-dancing_1098-13220.jpg"
        },
        {
          id: "m2",          value: "200+",          title: "Local Vendors",          description: "Verified partners near you.",          imageSrc: "http://img.b2bpic.net/free-photo/new-year-2019-shaped-candles-confetti-stack_23-2147992647.jpg"
        },
        {
          id: "m3",          value: "4.9/5",          title: "Avg. Rating",          description: "Loved by the community.",          imageSrc: "http://img.b2bpic.net/free-photo/2019-candles-multicolored-confetti_23-2147992618.jpg"
        },
      ]}
      title="Local Impact"
      description="Helping our community celebrate life's moments."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "p1", brand: "Standard", name: "Birthday Party Basic", price: "$199", rating: 4.5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/wine-s-glass-hanging-bar_1339-7048.jpg" },
        { id: "p2", brand: "Standard", name: "Wedding Reception Kit", price: "$899", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/engagement-event-table-with-tulle-tablecloth-flowers_114579-2084.jpg" },
        { id: "p3", brand: "Standard", name: "Corporate Gala Bundle", price: "$1200", rating: 4.8, reviewCount: "50", imageSrc: "http://img.b2bpic.net/free-photo/wedding-table-arrangement-with-bouquets_23-2149436396.jpg" },
        { id: "p4", brand: "Standard", name: "Graduation Bash", price: "$299", rating: 4.7, reviewCount: "200", imageSrc: "http://img.b2bpic.net/free-photo/glass-tower-full-champaigne-mosaic-background_8353-10398.jpg" },
        { id: "p5", brand: "Standard", name: "Anniversary Dinner Setup", price: "$350", rating: 4.9, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/close-up-fairy-glowing-light-dark-background_23-2148055634.jpg" },
        { id: "p6", brand: "Standard", name: "Holiday Event Decor", price: "$450", rating: 4.6, reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/decorated-wedding-celebration-table-with-guests-seats-outdoors-gardens-with-mountain-view_8353-10887.jpg" },
      ]}
      title="Popular Party Packages"
      description="Pre-configured bundles for effortless planning."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      testimonials={[
        { id: "1", name: "Alice T.", role: "Organizer", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg" },
        { id: "2", name: "Robert M.", role: "Host", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-interacting-while-using-digital-tablet_1170-831.jpg" },
        { id: "3", name: "Sarah J.", role: "Mom", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2579.jpg" },
        { id: "4", name: "David L.", role: "Manager", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg" },
        { id: "5", name: "Karen B.", role: "Organizer", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-couple-date-night_23-2149131750.jpg" },
      ]}
      title="Voices of the Party"
      description="What our customers are saying."
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Microsoft", "Google", "Airbnb", "Spotify", "Netflix", "Adobe", "Intel"]}
      title="Trusted Partners"
      description="We work with top-tier industry brands."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "How do I book?", content: "Simply choose a package and follow the booking flow." },
        { id: "f2", title: "Are vendors verified?", content: "Yes, all our partners undergo a strict background check." },
        { id: "f3", title: "Can I cancel?", content: "Cancellations are accepted up to 48 hours before the event." },
      ]}
      title="Common Questions"
      description="Need more help? Here are some answers."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{ variant: "gradient-bars" }}
      text="Ready to host your next amazing event? Get in touch with our expert planning team today and let's bring your vision to life."
      buttons={[{ text: "Contact Support", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/abstract-texture-with-lights_1017-5789.jpg"
      logoText="PartyFind"
      columns={[
        {
          title: "Services",          items: [
            { label: "Venues", href: "#" },
            { label: "Entertainment", href: "#" },
          ],
        },
        {
          title: "Company",          items: [
            { label: "About Us", href: "#" },
            { label: "Careers", href: "#" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
