"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Building2, Heart, Paintbrush, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="large"
        background="floatingGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "About",          id: "about"},
        {
          name: "Services",          id: "features"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Harmony Hive"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Creating Harmony in Every Celebration"
      description="From intimate baby showers to signature community markets, Harmony Hive brings your vision to life with bespoke coordination and elegant design."
      buttons={[
        {
          text: "Plan Your Event",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/top-view-confetti-new-years-party_23-2148356074.jpg?_wi=1"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",          alt: "Joyful business woman with coffee cup"},
        {
          src: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",          alt: "casual smile street style background spring"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg",          alt: "Portrait of a beautiful business office in a business center"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg",          alt: "Portrait of smiling waitress"},
        {
          src: "http://img.b2bpic.net/free-photo/married-mixed-race-couple-expect-baby-buy-necessary-items-newborn-cheerful-pregnant-woman-holds-bodysuit-feeding-bottle-infant-looks-gladfully-husband-happy-expectations-concept_273609-39773.jpg",          alt: "Happy expectations concept"},
      ]}
      avatarText="Trusted by 50+ happy families"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Our Story"
      title="Crafting Memories with Precision"
      description="Harmony Hive was founded on the belief that every event deserves a unique, harmonious experience. We handle the details so you can enjoy the moment."
      subdescription="Specialists in private events, community markets, and our signature yearly Eid celebration."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/still-life-colorful-overloaded-bullet-journal_23-2150168664.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: Heart,
          title: "Private Parties",          description: "Engagements, baby showers, and birthdays designed uniquely."},
        {
          icon: Paintbrush,
          title: "Arts & Workshops",          description: "Community seminars and art gallery showcases."},
        {
          icon: Building2,
          title: "Community Markets",          description: "Large-scale markets and our annual Eid signature event."},
      ]}
      title="Events We Curate"
      description="Our expertise spans across diverse gatherings, tailored to perfection."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "2",          description: "Annual Eid Events"},
        {
          id: "m2",          value: "2+",          description: "Large Markets Hosted"},
        {
          id: "m3",          value: "50+",          description: "Tailored Events Managed"},
      ]}
      title="By The Numbers"
      description="We celebrate community and connection through excellence."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Harmony Hive turned our engagement into a dream. Every gold accent was placed perfectly and the flow was seamless."
      rating={5}
      author="Sarah Miller"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",          alt: "Sarah"},
        {
          src: "http://img.b2bpic.net/free-photo/parents-are-playing-with-their-little-daughter_8353-11292.jpg",          alt: "Happy client family"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-supports-her-little-daughter_8353-11293.jpg",          alt: "Satisfied client portrait"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-couple-gender-reveal-party_23-2150256604.jpg",          alt: "Gender reveal client"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-holding-book-close-up_23-2148396302.jpg",          alt: "Workshop attendee"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="split"
      useInvertedBackground={true}
      names={[
        "City Art Guild",        "Local Market Collective",        "Bloom Floral Design",        "Gold Standard Catering",        "Elite Venue Group",        "Skyline A/V",        "Community Leaders Org"]}
      title="Trusted Partners & Community"
      description="Working with the best vendors and local community leaders."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "What events do you plan?",          content: "We handle engagements, baby showers, community workshops, and large markets."},
        {
          id: "q2",          title: "How far in advance should I book?",          content: "Ideally 3-6 months for private events and 6-12 months for large market events."},
        {
          id: "q3",          title: "Do you customize packages?",          content: "Absolutely. Every package is tailored to your specific needs and vision."},
      ]}
      sideTitle="Questions?"
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      tag="Contact Us"
      useInvertedBackground={true}
      background={{ variant: "plain" }}
      title="Start Your Celebration"
      description="Tell us about your event vision, and we’ll reach out to schedule a planning session."
      buttonText="Submit"
      inputPlaceholder="Your Name, Phone, and Details"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Harmony Hive",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Services",              href: "#features"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Instagram",              href: "#"},
            {
              label: "Facebook",              href: "#"},
          ],
        },
      ]}
      bottomLeftText="© 2024 Harmony Hive. All rights reserved."
      bottomRightText="Privacy Policy"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}