"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="layered-gradient"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "About",          id: "about"},
        {
          name: "Collection",          id: "product"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Gupta Ambulance"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "gradient-bars"}}
      title="Gupta Ambulance Services"
      description="Professional, reliable, and prompt emergency medical transport services available 24/7."
      buttons={[
        {
          text: "Call Emergency",          href: "tel:+919876543210"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/ambulance-parked-city-street_23-2149129532.jpg"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Compassionate Care"
      description="We pride ourselves on providing life-saving support with highly trained staff and modern medical equipment."
      imageSrc="http://img.b2bpic.net/free-photo/paramedic-checking-patient_23-2148700984.jpg"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "24/7 Emergency Hotline",          description: "Immediate response teams ready at all times.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/doctor-holding-emergency-phone_23-2148810056.jpg"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/ambulance-dashboard-view_23-2149129555.jpg"},
        },
        {
          title: "Advanced Life Support",          description: "Equipped with ICU-grade medical technology.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/medical-equipment-ambulance_23-2149129538.jpg"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/oxygen-tank-ambulance_23-2149129545.jpg"},
        },
        {
          title: "Broad Service Areas",          description: "Serving all major districts and suburban areas.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/map-navigation-emergency_23-2148700990.jpg"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/city-traffic-emergency_23-2148700995.jpg"},
        },
      ]}
      showStepNumbers={false}
      title="Our Services"
      description="Reliable medical transport for every critical situation."
    />
  </div>

  <div id="product" data-section="product">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
        {
          id: "1",          brand: "Emergency",          name: "Basic Life Support",          price: "Contact for Price",          rating: 5,
          reviewCount: "150",          imageSrc: "http://img.b2bpic.net/free-photo/ambulance-vehicle-road_23-2149129560.jpg"},
        {
          id: "2",          brand: "Emergency",          name: "Advanced ICU Transport",          price: "Contact for Price",          rating: 5,
          reviewCount: "95",          imageSrc: "http://img.b2bpic.net/free-photo/medical-specialist-ambulance_23-2148701000.jpg"},
      ]}
      title="Transport Options"
      description="Select the transport service suitable for your condition."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Gupta Ambulance arrived within minutes and saved my father's life. Extremely professional."
      rating={5}
      author="Rajesh Kumar"
      avatars={[]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "City Hospital",        "Metro Medical Center",        "LifeCare Clinic",        "State Emergency Services",        "Red Cross Partner"]}
      title="Trusted Partners"
      description="Working closely with leading healthcare institutions."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "How quickly can you arrive?",          content: "Our average response time is under 15 minutes within city limits."},
        {
          id: "q2",          title: "Do you operate at night?",          content: "Yes, we are a 24/7 emergency service provider."},
        {
          id: "q3",          title: "Do you serve suburbs?",          content: "Yes, we provide medical transport across all district peripheries."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/emergency-medical-call_23-2148700980.jpg"
      mediaAnimation="slide-up"
      title="Frequently Asked Questions"
      description="Everything you need to know about our response protocols."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Emergency Contact"
      description="Call our hotline for immediate assistance or leave your details for a scheduled transfer."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Name"},
        {
          name: "location",          type: "text",          placeholder: "Current Location"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/emergency-response-team-outside_23-2148700998.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Gupta Ambulance"
      leftLink={{
        text: "Hotline: +91 9876543210",        href: "tel:+919876543210"}}
      rightLink={{
        text: "Service Areas: Pan-District",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
