"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, CalendarCheck, CheckCircle, Globe, Leaf, Sparkles, Star, UserCheck, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmallSizeMediumTitles"
        background="aurora"
        cardStyle="soft-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Sustainability",
          id: "#sustainability",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      button={{
        text: "Book Your Ride",
        href: "#contact",
      }}
      brandName="EMOTO"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "radial-gradient",
      }}
      title="Sustainable Commuting, Reliable Service, Every Ride"
      description="Experience eco-friendly electric shuttle transportation designed for modern commuters. Book your journey in seconds with transparent pricing and real-time tracking."
      tagAnimation="none"
      buttons={[
        {
          text: "Book Your Ride Now",
          href: "#contact",
        },
      ]}
      buttonAnimation="none"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-city-with-high-tech-mobility-social-welfare_23-2151065331.jpg",
          imageAlt: "Electric shuttle on a city road",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-travelling-by-city-bus-with-surgical-mask_23-2148958114.jpg",
          imageAlt: "Spacious electric shuttle interior",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-digital-nomad-traveling-winter-time_23-2149207303.jpg",
          imageAlt: "Mobile app for booking electric shuttles",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/aerial-overhead-shot-narrow-road-mountains-near-steven-s-pass-seattle-washington-dc-usa_181624-11816.jpg",
          imageAlt: "Aerial view of electric shuttles in urban traffic",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-charging-electro-car-street_1303-25979.jpg",
          imageAlt: "Electric shuttle charging at a station",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/you-can-see-photographer-reflection-glasses-young-beautiful-girl-warm-clothes-have-walk-city-her-weekends-time_146671-16854.jpg",
          imageAlt: "Commuters entering an electric shuttle",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Your Journey Towards Sustainable Mobility"
      metrics={[
        {
          icon: Leaf,
          label: "Eco-friendly Miles",
          value: "1M+",
        },
        {
          icon: Users,
          label: "Satisfied Commuters",
          value: "10K+",
        },
        {
          icon: CalendarCheck,
          label: "Years in Service",
          value: "5+",
        },
      ]}
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Eco-Friendly Rides",
          description: "Contribute to a greener planet with zero-emission electric vehicles, reducing your carbon footprint with every journey.",
          bentoComponent: "reveal-icon",
          icon: Leaf,
          imageSrc: "http://img.b2bpic.net/free-vector/recycle-sign-leaves-with-bolt_78370-6730.jpg",
          imageAlt: "eco friendly electric icon",
        },
        {
          title: "Seamless Booking",
          description: "Our intuitive platform allows you to book your ride in seconds, offering transparent pricing and real-time tracking for ultimate peace of mind.",
          bentoComponent: "reveal-icon",
          icon: CalendarCheck,
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-city-with-high-tech-mobility-social-welfare_23-2151065331.jpg",
          imageAlt: "eco friendly electric icon",
        },
        {
          title: "Professional Drivers",
          description: "Travel with confidence knowing you're in the hands of experienced, courteous, and highly trained professional drivers.",
          bentoComponent: "reveal-icon",
          icon: UserCheck,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-travelling-by-city-bus-with-surgical-mask_23-2148958114.jpg",
          imageAlt: "eco friendly electric icon",
        },
      ]}
      title="Why Choose EMOTO?"
      description="Discover the core advantages of EMOTO's electric shuttle service, blending environmental responsibility with top-tier convenience and efficiency for all your transportation needs."
      tagAnimation="none"
      buttonAnimation="none"
    />
  </div>

  <div id="offerings" data-section="offerings">
      <ProductCardOne
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "1",
          name: "City Shuttle",
          price: "From €5",
          imageSrc: "http://img.b2bpic.net/free-photo/adults-learning-use-electric-scooter_23-2149341772.jpg",
          imageAlt: "Electric city shuttle",
        },
        {
          id: "2",
          name: "Executive Commute",
          price: "From €15",
          imageSrc: "http://img.b2bpic.net/free-photo/holding-plastic-cup-coffee-paperwork-back-seat-car-senior-businessman-with-documents_146671-14517.jpg",
          imageAlt: "Luxury electric executive vehicle",
        },
        {
          id: "3",
          name: "Airport Transfer",
          price: "From €25",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-using-digital-tablet-waiting-area_107420-95810.jpg",
          imageAlt: "Electric shuttle at airport terminal",
        },
        {
          id: "4",
          name: "Event Transport",
          price: "Custom Quote",
          imageSrc: "http://img.b2bpic.net/free-photo/diverse-family-friends-leaving-journey-loading-inflatable-trolley-bags-trunk-vehicle-travel-summer-holiday-vacation-going-seaside-destination-with-smiling-people_482257-48321.jpg",
          imageAlt: "Electric mini-bus at event venue",
        },
        {
          id: "5",
          name: "Custom Route Planning",
          price: "Flexible Pricing",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-scientist-data-center-uses-ai-tablet_482257-121074.jpg",
          imageAlt: "Digital map showing a customized route",
        },
        {
          id: "6",
          name: "Subscription Plans",
          price: "Starting at €99/month",
          imageSrc: "http://img.b2bpic.net/free-photo/paper-urban-transport-arrangement_23-2149003894.jpg",
          imageAlt: "Graphic illustrating subscription model",
        },
      ]}
      title="Our Eco-Fleet & Services"
      description="Explore our range of electric vehicles and tailored services, from daily commutes to corporate shuttles, all designed for comfort and sustainability."
      tagAnimation="none"
      buttonAnimation="none"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "single-ride",
          badge: "One-Time",
          badgeIcon: Sparkles,
          price: "€5",
          subtitle: "Perfect for occasional trips",
          buttons: [
            {
              text: "Book Now",
              href: "#contact",
            },
          ],
          features: [
            "Instant booking",
            "Real-time tracking",
            "Standard vehicle",
          ],
        },
        {
          id: "daily-commute",
          badge: "Best Value",
          badgeIcon: Star,
          price: "€49/week",
          subtitle: "Ideal for regular daily travel",
          buttons: [
            {
              text: "Get Started",
              href: "#contact",
            },
          ],
          features: [
            "Up to 10 rides/week",
            "Priority support",
            "Flexible scheduling",
          ],
        },
        {
          id: "monthly-pass",
          badge: "Unlimited",
          badgeIcon: Award,
          price: "€199/month",
          subtitle: "Ultimate convenience for frequent users",
          buttons: [
            {
              text: "Subscribe Now",
              href: "#contact",
            },
          ],
          features: [
            "Unlimited rides",
            "Dedicated account manager",
            "Premium vehicle access",
          ],
        },
      ]}
      title="Transparent & Flexible Pricing"
      description="Find the perfect plan for your commuting needs, from single rides to monthly subscriptions, with clear, upfront costs and no hidden fees."
      tagAnimation="none"
      buttonAnimation="none"
    />
  </div>

  <div id="sustainability" data-section="sustainability">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "1",
          icon: CheckCircle,
          title: "CO2 Emissions Reduced",
          value: "200+ Tons",
        },
        {
          id: "2",
          icon: Globe,
          title: "Trees Planted Equivalent",
          value: "1000+",
        },
        {
          id: "3",
          icon: Zap,
          title: "Trips on Clean Energy",
          value: "95%",
        },
      ]}
      title="Driving a Greener Future"
      description="Our commitment to the environment is reflected in every mile. See the positive impact of choosing EMOTO for your daily travel."
      tagAnimation="none"
      buttonAnimation="none"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Elena Petrovic",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-pretty-woman-posing_23-2148610243.jpg",
          imageAlt: "Elena Petrovic",
        },
        {
          id: "2",
          name: "Marko Jovanovic",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-her-coworkers-clapping-hands-meeting-office_637285-207.jpg",
          imageAlt: "Marko Jovanovic",
        },
        {
          id: "3",
          name: "Ana Kostic",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-girl-sitting_23-2148601849.jpg",
          imageAlt: "Ana Kostic",
        },
        {
          id: "4",
          name: "Nikola Popovic",
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-doing-thumbs-up-sign_23-2148631398.jpg",
          imageAlt: "Nikola Popovic",
        },
        {
          id: "5",
          name: "Milica Djordjevic",
          imageSrc: "http://img.b2bpic.net/free-photo/concept-renewable-energy-with-light-bulb_329181-19294.jpg",
          imageAlt: "Milica Djordjevic",
        },
      ]}
      cardTitle="What Our Commuters Say"
      cardTag="Trusted Rides"
      buttonAnimation="none"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",
          title: "What areas does EMOTO service?",
          content: "EMOTO primarily services urban areas within [City/Region Name] and its immediate surroundings. Please check our booking platform for specific route availability.",
        },
        {
          id: "2",
          title: "How do I book a ride?",
          content: "You can easily book a ride through our mobile app or website. Simply enter your pick-up and drop-off locations, choose your vehicle type, and confirm your journey.",
        },
        {
          id: "3",
          title: "What are your operating hours?",
          content: "EMOTO operates [mention specific hours, e.g., 24/7 or specific daily hours]. Our electric shuttles are available to fit your commuting schedule.",
        },
        {
          id: "4",
          title: "What types of electric vehicles do you use?",
          content: "Our fleet consists of modern, comfortable electric vehicles, including compact city shuttles and executive sedans, all chosen for their efficiency and safety.",
        },
        {
          id: "5",
          title: "Is EMOTO suitable for corporate clients?",
          content: "Yes, we offer tailored corporate shuttle solutions for businesses looking to provide sustainable and reliable transportation for their employees. Contact us for a custom quote.",
        },
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to common questions about our electric shuttle service, booking process, and sustainability efforts."
      buttonAnimation="none"
      faqsAnimation="slide-up"
      textPosition="left"
      showCard={true}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get in Touch"
      title="Book Your Eco-Friendly Ride Today!"
      description="Ready to experience sustainable, reliable, and convenient electric transportation? Contact us to schedule your next journey with Kombi Prevoz EMOTO."
      buttons={[
        {
          text: "Call Us Now",
          href: "tel:+1234567890",
        },
        {
          text: "Send an Email",
          href: "mailto:info@emoto.com",
        },
      ]}
      buttonAnimation="none"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/3d-network-communications-background-with-modern-techno-design_1048-12786.jpg"
      logoText="EMOTO"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Sustainability",
              href: "#sustainability",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "City Shuttle",
              href: "#offerings",
            },
            {
              label: "Airport Transfer",
              href: "#offerings",
            },
            {
              label: "Corporate Solutions",
              href: "#offerings",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
            {
              label: "Cookie Policy",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Kombi Prevoz EMOTO. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
