"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, CreditCard, Headphones, ShieldCheck, Tag, Truck, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Inventory",
          id: "#products",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="lovercars123"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "sparkles-gradient",
      }}
      title="Drive Your Dream at lovercars123"
      description="Discover a curated collection of high-performance vehicles, matched with service that puts you in the driver's seat."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/picture-brunette-female-black-car-with-amazing-smile_181624-51627.jpg",
          alt: "User",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-dancer-practising-dance_107420-63929.jpg",
          alt: "User",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-male-leaning-new-car_23-2148332929.jpg",
          alt: "User",
        },
        {
          src: "http://img.b2bpic.net/free-photo/expression-proud-one-boy-people_1187-5998.jpg",
          alt: "User",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-woman-embracing-her-new-car-excited-young-woman-her-new-car-indoors-young-cheerful-woman-enjoying-new-car-hugging-steering-wheel-sitting-inside_657921-533.jpg",
          alt: "User",
        },
      ]}
      buttons={[
        {
          text: "View Inventory",
          href: "#products",
        },
        {
          text: "Contact Us",
          href: "#contact",
        },
      ]}
      buttonAnimation="slide-up"
      marqueeItems={[
        {
          type: "text-icon",
          text: "100% Certified Vehicles",
          icon: ShieldCheck,
        },
        {
          type: "text-icon",
          text: "Instant Financing",
          icon: CreditCard,
        },
        {
          type: "text-icon",
          text: "Worldwide Delivery",
          icon: Truck,
        },
        {
          type: "text-icon",
          text: "24/7 Expert Support",
          icon: Headphones,
        },
        {
          type: "text-icon",
          text: "Competitive Pricing",
          icon: Tag,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",
          content: "Passion for ",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/front-air-conditioners-metallic-color-car_114579-4010.jpg",
          alt: "Luxury Dashboard",
        },
        {
          type: "text",
          content: " Precision Engineering.",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: Zap,
          title: "Rapid Procurement",
          description: "Access to a global network ensuring you get your dream model faster.",
        },
        {
          icon: ShieldCheck,
          title: "Certified Quality",
          description: "Every vehicle undergoes a rigorous multi-point inspection to ensure absolute peace of mind.",
        },
        {
          icon: Award,
          title: "Expert Service",
          description: "Our team of seasoned enthusiasts is here to guide you through every mile of the journey.",
        },
      ]}
      title="The lovercars123 Advantage"
      description="We don't just sell cars; we deliver performance, reliability, and unparalleled value to every enthusiast."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "Sport S-Class",
          price: "$120,000",
          variant: "Red",
          imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp_74190-5433.jpg",
        },
        {
          id: "2",
          name: "Urban Cruiser",
          price: "$45,000",
          variant: "Silver",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlights-gray-car-with-man_158538-8150.jpg",
        },
        {
          id: "3",
          name: "Terra SUV",
          price: "$65,000",
          variant: "Black",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-security-guards-working_23-2148404048.jpg",
        },
        {
          id: "4",
          name: "Sky Convertible",
          price: "$85,000",
          variant: "Blue",
          imageSrc: "http://img.b2bpic.net/free-photo/stunning-young-woman-wearing-dress-posing-front-her-car-outdoors-ownership-driver_158595-6721.jpg",
        },
        {
          id: "5",
          name: "Zen Coupe",
          price: "$55,000",
          variant: "White",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlight-white-luxury-car-lights-against-grey-background_181624-25222.jpg",
        },
        {
          id: "6",
          name: "Track Rally",
          price: "$95,000",
          variant: "Green",
          imageSrc: "http://img.b2bpic.net/free-photo/off-road-car-wilderness_23-2151482973.jpg",
        },
      ]}
      title="Current Inventory"
      description="Browse our latest arrivals, from track-ready monsters to luxurious daily drivers."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "p1",
          tag: "Essentials",
          price: "$499",
          period: "/mo",
          description: "Flexible leasing options for the daily driver.",
          button: {
            text: "Choose Basic",
          },
          featuresTitle: "Includes:",
          features: [
            "Basic Warranty",
            "Roadside Support",
            "Priority Service",
          ],
        },
        {
          id: "p2",
          tag: "Enthusiast",
          price: "$999",
          period: "/mo",
          description: "Full-service ownership for the weekend warrior.",
          button: {
            text: "Choose Pro",
          },
          featuresTitle: "Includes:",
          features: [
            "Extended Warranty",
            "24/7 Concierge",
            "Track Day Access",
          ],
        },
        {
          id: "p3",
          tag: "Ultimate",
          price: "$1,499",
          period: "/mo",
          description: "The peak of luxury and performance maintenance.",
          button: {
            text: "Choose Elite",
          },
          featuresTitle: "Includes:",
          features: [
            "Full Coverage",
            "Priority Parts Access",
            "Vehicle Upgrades",
          ],
        },
      ]}
      title="Transparent Ownership Plans"
      description="Choose the ownership model that fits your lifestyle perfectly."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "500+",
          title: "Cars Sold",
          description: "Happy drivers on the road.",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-red-car_181624-25381.jpg",
        },
        {
          id: "m2",
          value: "150+",
          title: "Satisfied Partners",
          description: "Trusted by manufacturers worldwide.",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-valet-doing-his-job_23-2150274629.jpg",
        },
        {
          id: "m3",
          value: "12k",
          title: "Miles Delivered",
          description: "Pure performance delivered.",
          imageSrc: "http://img.b2bpic.net/free-psd/modern-family-car-image-without-background_530521-1820.jpg",
        },
      ]}
      title="By the Numbers"
      description="Our success is measured by the miles driven and smiles shared."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah J.",
          handle: "@sarahdrive",
          testimonial: "The best buying experience I've ever had. lovercars123 made it simple.",
          imageSrc: "http://img.b2bpic.net/free-photo/driver-dressed-elegant-costume_23-2149184243.jpg",
        },
        {
          id: "2",
          name: "Mark D.",
          handle: "@markspeed",
          testimonial: "Reliable, fast, and exactly as promised. My new car is perfect.",
          imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-with-arms-crossed-spanner_1170-1435.jpg",
        },
        {
          id: "3",
          name: "Emily R.",
          handle: "@emmycars",
          testimonial: "Customer service was top-tier. I love my new ride!",
          imageSrc: "http://img.b2bpic.net/free-photo/young-family-choosing-car-car-showroom_1303-17390.jpg",
        },
        {
          id: "4",
          name: "David K.",
          handle: "@davidrace",
          testimonial: "Professional and high-quality inventory. Highly recommended.",
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-lady-dressed-raincoat-sitting-car_171337-3516.jpg",
        },
        {
          id: "5",
          name: "Alex W.",
          handle: "@alextrack",
          testimonial: "Exceeded all expectations. Will return for my next upgrade.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-wink-camera_23-2148289216.jpg",
        },
      ]}
      title="What Enthusiasts Say"
      description="Join our growing community of happy car lovers."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Do you offer financing?",
          content: "Yes, we offer competitive financing plans for all our inventory.",
        },
        {
          id: "f2",
          title: "Can I test drive before buying?",
          content: "Absolutely! We encourage test drives to ensure you love your car.",
        },
        {
          id: "f3",
          title: "What about after-sales service?",
          content: "Our service center is open for all routine maintenance and repairs.",
        },
      ]}
      title="Common Questions"
      description="Have questions? We have the answers."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Start Your Journey"
      description="Get in touch with us today to start the conversation about your next dream car."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Name",
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "What car are you looking for?",
      }}
      imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-car-parking-lot_74190-4753.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/majestic-sunset-view-landscape-with-unpaved-road-disappearing-into-horizon_181624-57025.jpg"
      logoText="lovercars123"
      columns={[
        {
          title: "Navigation",
          items: [
            {
              label: "Home",
              href: "#hero",
            },
            {
              label: "Inventory",
              href: "#products",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
