"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Award, Heart, Smile } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="grid"
        cardStyle="layered-gradient"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "About", id: "#about" },
        { name: "Services", id: "#services" },
        { name: "Testimonials", id: "#testimonials" },
        { name: "Contact", id: "#contact" },
      ]}
      brandName="The Smile House"
      button={{
        text: "Book Consultation", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "sparkles-gradient" }}
      title="Dentistry, Reimagined Around You"
      description="Comfort-first dental care in Matunga located at Meckoni Residency, 103, Bhandarkar Rd, Matunga East. Hours: Mon-Sat 9am-8pm. Call us at 085911 16511."
      tag="Luxury Wellness Dentistry"
      buttons={[
        { text: "Book Your Calm Consultation", href: "#contact" },
      ]}
      mediaItems={[
        { imageSrc: "https://lh3.googleusercontent.com/p/AF1QipNlqjK_jF9uB79fL6Ue6_2Z15-v4X_tC1G22U0=w800-h600?_wi=1", imageAlt: "modern comfortable dental clinic lobby" },
        { imageSrc: "https://lh3.googleusercontent.com/p/AF1QipP_b-6s4yG9Mv8iZ7-3H1G-yH8L_W2zJ4k9f3P=w800-h600?_wi=1", imageAlt: "patient smiling in modern dental chair" },
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Top-rated comfort in Matunga"
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Welcome to The Smile House"
      description={[
        "At The Smile House, we believe your dental experience should be as rejuvenating as a spa session. Dr. Nidhi and our team focus on transparency and empathy, ensuring every step of your care is explained and managed with patience.",        "Located in Meckoni Residency, 103, Bhandarkar Rd, above Blue Stone, Matunga East, Mumbai, Maharashtra 400019.",        "LGBTQ+ friendly and proud to be a women-owned business. Call us at 085911 16511 or visit us Mon-Sat, 9 am - 8 pm."
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      features={[
        { title: "Clinic Hours", description: "Mon-Sat: 9 am - 8 pm", imageSrc: "https://lh3.googleusercontent.com/p/AF1QipPk0TzG7zN-7O_xY3S8wLz9h9XyH1v1Y5z1p4z1=w800-h600", imageAlt: "clinic reception desk" },
        { title: "Phone", description: "085911 16511", imageSrc: "https://lh3.googleusercontent.com/p/AF1QipN9s-2n-0z0kP_b9sY_Qz8_z1hP_z4W9H7L_j5J=w800-h600", imageAlt: "modern treatment room equipment" },
        { title: "Location", description: "Meckoni Residency, 103, Bhandarkar Rd, Matunga East", imageSrc: "https://lh3.googleusercontent.com/p/AF1QipO3Pz0KzP_x0P8K5N-5P_w_XzY4Pz-6S5H_6tL1=w800-h600", imageAlt: "clinic entrance exterior" },
      ]}
      title="Practical Information"
      description="Everything you need to know to visit us seamlessly."
    />
  </div>

  <div id="services" data-section="services">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="one-large-left-three-stacked-right"
      useInvertedBackground={false}
      products={[
        { id: "1", name: "Teeth Whitening", price: "From ₹15,000", imageSrc: "https://lh3.googleusercontent.com/p/AF1QipP_b-6s4yG9Mv8iZ7-3H1G-yH8L_W2zJ4k9f3P=w800-h600?_wi=2" },
        { id: "2", name: "Porcelain Veneers", price: "From ₹45,000", imageSrc: "https://lh3.googleusercontent.com/p/AF1QipNlqjK_jF9uB79fL6Ue6_2Z15-v4X_tC1G22U0=w800-h600?_wi=2" },
        { id: "3", name: "Professional Cleaning", price: "From ₹5,000", imageSrc: "https://lh3.googleusercontent.com/p/AF1QipPz0KzP_x0P8K5N-5P_w_XzY4Pz-6S5H_6tL1=w800-h600" },
      ]}
      title="Our Signature Services"
      description="Premium cosmetic and restorative solutions delivered with artistry."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", icon: Smile, title: "Happy Smiles", value: "1,500+" },
        { id: "m2", icon: Award, title: "Clinic Experience", value: "12 Years" },
        { id: "m3", icon: Heart, title: "Patient Trust", value: "99%" },
      ]}
      title="By The Numbers"
      description="Our commitment to excellence speaks for itself through our community results."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Priya Sharma", handle: "@priya_sharma", testimonial: "I've always feared the dentist, but Dr. Nidhi made me feel so understood. The ambiance is like a spa!", rating: 5, imageSrc: "https://lh3.googleusercontent.com/p/AF1QipP_b-6s4yG9Mv8iZ7-3H1G-yH8L_W2zJ4k9f3P=w800-h600?_wi=3" },
      ]}
      showRating={true}
      title="Patient Voices"
      description="Hear how our patients transformed their perspectives on dentistry."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "Do you offer anxiety-free dentistry?", content: "Absolutely. We specialize in techniques and environmental factors that reduce anxiety significantly." },
      ]}
      title="Common Questions"
      description="Find answers to help you feel more comfortable about your upcoming visit."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag="Ready to begin?"
      title="Start Your Smile Journey"
      description="Reach out to us at Meckoni Residency, Matunga East. Call us at 085911 16511 to book your calm consultation."
      buttons={[
        { text: "Book Your Calm Consultation", href: "#" },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Contact Details",          items: [
            { label: "Meckoni Residency, 103, Bhandarkar Rd, Matunga East" },
            { label: "Hours: Mon-Sat, 9am - 8pm" },
            { label: "Call: 085911 16511" },
          ]
        },
        {
          title: "Quick Links",          items: [
            { label: "Services", href: "#services" },
            { label: "About Us", href: "#about" },
          ],
        },
      ]}
      bottomLeftText="© 2024 The Smile House, Matunga"
      bottomRightText="Women-Owned & LGBTQ+ Friendly"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
