"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { CheckCircle, Zap, Truck, Star, MessageCircle, Award, HelpCircle, Bell } from "lucide-react";

const HomePage = () => {
  const navItems = [
    { name: "How It Works", id: "how-it-works" },
    { name: "Vehicles", id: "vehicles" },
    { name: "Features", id: "features" },
    { name: "Testimonials", id: "testimonials" },
    { name: "FAQ", id: "faq" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "How It Works", href: "#how-it-works" },
        { label: "Browse Vehicles", href: "#vehicles" },
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#pricing" },
      ],
    },
    {
      items: [
        { label: "About Us", href: "/about" },
        { label: "For Owners", href: "/for-owners" },
        { label: "Blog", href: "/blog" },
        { label: "Careers", href: "/careers" },
      ],
    },
    {
      items: [
        { label: "Contact Support", href: "/contact" },
        { label: "Safety", href: "#safety" },
        { label: "Insurance", href: "#insurance" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      items: [
        { label: "Privacy Policy", href: "#privacy" },
        { label: "Terms & Conditions", href: "#terms" },
        { label: "Refund Policy", href: "#refund" },
        { label: "Cancellation Policy", href: "#cancellation" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="blurBottom"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="MultiVehicle"
          navItems={navItems}
          button={{
            text: "Book Now",
            href: "/booking",
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Book Any Vehicle, Anytime, Anywhere"
          description="Connect with reliable vehicle owners and book bikes, cars, tractors, trucks, and JCBs for your immediate needs. Experience hassle-free booking, transparent pricing, and trusted transactions."
          tag="Trusted by thousands"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Start Booking",
              href: "/booking",
            },
            {
              text: "Become an Owner",
              href: "/for-owners",
            },
          ]}
          buttonAnimation="slide-up"
          background={{
            variant: "radial-gradient",
          }}
          testimonials={[
            {
              name: "Rajesh Kumar",
              handle: "@rajesh_farmer",
              testimonial: "Found a perfect tractor within minutes. Saved me so much money!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-a-confident-ind-1773655711088-f0fdd062.png",
            },
            {
              name: "Priya Singh",
              handle: "@priya_travels",
              testimonial: "Best platform for renting vehicles. Super reliable owners.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-a-young-indian--1773655711186-bf4fa7d4.png",
            },
            {
              name: "Amit Patel",
              handle: "@amit_construction",
              testimonial: "JCB availability at my fingertips. Game changer!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-const-1773655711160-37e38203.png",
            },
          ]}
          testimonialRotationInterval={5000}
          useInvertedBackground={false}
          mediaAnimation="blur-reveal"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/a-modern-clean-booking-dashboard-interfa-1773655711766-0adda782.png"
          imageAlt="MultiVehicle Booking Platform Dashboard"
          imagePosition="right"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardTwentyFour
          title="How MultiVehicle Booking Works"
          description="Our simple 3-step process makes vehicle booking effortless and transparent."
          tag="Simple Process"
          tagIcon={Zap}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "search",
              title: "Search & Browse",
              author: "Step 1",
              description: "Search for vehicles by type, location, date, and price. Browse verified owners and vehicle ratings.",
              tags: ["Real-time availability", "Filters & sort options"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/mobile-app-screen-showing-a-vehicle-sear-1773655711724-5832ca8e.png",
            },
            {
              id: "book",
              title: "Book & Confirm",
              author: "Step 2",
              description: "Select your desired date and time, review booking details, and confirm. Transparent pricing with no hidden charges.",
              tags: ["Instant confirmation", "Clear pricing"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/booking-confirmation-screen-showing-sele-1773655711387-9bcd0947.png",
            },
            {
              id: "enjoy",
              title: "Enjoy & Rate",
              author: "Step 3",
              description: "Use the vehicle as agreed. Complete your booking and rate both the vehicle and owner to help the community.",
              tags: ["Reliable service", "Community feedback"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/rating-and-review-screen-post-rental-sho-1773655711647-1e3c6cd7.png",
            },
          ]}
        />
      </div>

      <div id="vehicles" data-section="vehicles">
        <ProductCardTwo
          title="Available Vehicles"
          description="Choose from our diverse fleet of vehicles tailored to every need and budget."
          tag="5+ Vehicle Types"
          tagIcon={Truck}
          tagAnimation="slide-up"
          gridVariant="three-columns-all-equal-width"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "bikes",
              brand: "Two Wheelers",
              name: "Bikes & Scooters",
              price: "From ₹500/day",
              rating: 4.8,
              reviewCount: "2.3K",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/high-quality-image-of-a-modern-bike-or-s-1773655711433-86c01c8f.png",
              imageAlt: "Bikes and Scooters for daily commute",
            },
            {
              id: "cars",
              brand: "Four Wheelers",
              name: "Cars & SUVs",
              price: "From ₹1500/day",
              rating: 4.9,
              reviewCount: "3.1K",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-product-image-of-a-sedan-or-1773655710905-ecfc66c1.png",
              imageAlt: "Cars and SUVs for personal travel",
            },
            {
              id: "tractors",
              brand: "Agriculture",
              name: "Tractors",
              price: "From ₹1200/day",
              rating: 4.7,
              reviewCount: "1.8K",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/agricultural-tractor-photographed-from-t-1773655711475-1ee6b325.png",
              imageAlt: "Tractors for farming and agriculture",
            },
            {
              id: "trucks",
              brand: "Transport",
              name: "Trucks & Carts",
              price: "From ₹2000/day",
              rating: 4.6,
              reviewCount: "2.5K",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/commercial-truck-or-cargo-vehicle-medium-1773655711050-71a49c20.png",
              imageAlt: "Trucks and carts for cargo transport",
            },
            {
              id: "jcb",
              brand: "Construction",
              name: "JCB & Excavators",
              price: "From ₹3000/day",
              rating: 4.8,
              reviewCount: "1.2K",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/jcb-excavator-or-construction-equipment--1773655711447-3293b741.png",
              imageAlt: "JCB machines for construction",
            },
            {
              id: "specialists",
              brand: "Special Equipment",
              name: "Specialized Vehicles",
              price: "Custom pricing",
              rating: 4.9,
              reviewCount: "890",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/specialized-construction-or-farm-equipme-1773655711588-e6ae62ca.png",
              imageAlt: "Specialized vehicles for unique needs",
            },
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <MetricSplitMediaAbout
          title="Why Choose MultiVehicle?"
          description="We're building the most trusted vehicle rental marketplace with verified owners, transparent pricing, and exceptional customer support."
          tag="Platform Highlights"
          tagIcon={Star}
          tagAnimation="slide-up"
          metrics={[
            { value: "15K+", title: "Verified Owners" },
            { value: "50K+", title: "Active Users" },
            { value: "100K+", title: "Successful Bookings" },
            { value: "4.8★", title: "Average Rating" },
          ]}
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/composite-illustration-showing-multiple--1773655711621-e6e16e5b.png"
          imageAlt="MultiVehicle Platform Features"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="What Our Users Say"
          description="Real stories from users and owners who trust MultiVehicle."
          tag="User Reviews"
          tagIcon={MessageCircle}
          tagAnimation="slide-up"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "user1",
              name: "Suresh Kumar",
              role: "Farmer",
              testimonial: "MultiVehicle helped me find a tractor on short notice. The owner was professional and the equipment was in perfect condition.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655711401-56e76e6e.png",
            },
            {
              id: "user2",
              name: "Divya Sharma",
              role: "Travel Enthusiast",
              testimonial: "Excellent platform! Booked a car for our family trip. Great experience and very affordable compared to traditional rental companies.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-femal-1773655710195-d74ef624.png",
            },
            {
              id: "user3",
              name: "Arjun Verma",
              role: "Construction Manager",
              testimonial: "Reliable source for construction equipment. The booking process is smooth and customer support is always helpful.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655710439-68dba0be.png",
            },
            {
              id: "owner1",
              name: "Vikram Patel",
              role: "Vehicle Owner",
              testimonial: "As a vehicle owner, MultiVehicle helped me monetize my idle tractor. Great commission structure and secure transactions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655710344-3c8e9658.png",
            },
            {
              id: "owner2",
              name: "Meera Singh",
              role: "Car Owner",
              testimonial: "Earning good passive income from my car. The platform handles payments securely and provides good protection for owners.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-femal-1773655710630-e3386f1a.png",
            },
            {
              id: "owner3",
              name: "Rajesh Nair",
              role: "JCB Operator",
              testimonial: "My JCB equipment is always in demand on MultiVehicle. Consistent bookings and reliable renters make this worthwhile.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655711498-5240ed1d.png",
            },
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="Recognized and supported by major platforms and organizations."
          tag="Partnership Network"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "TechStartup India",
            "Agriculture Connect",
            "Construction Pro",
            "TravelBuddy",
            "FarmCare",
            "Fleet Management",
            "Transport Hub",
            "Business Growth",
          ]}
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/tech-startup-company-logo-design-modern--1773655710724-ff734106.png",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/agriculture-and-farming-organization-log-1773655711414-23094bf3.png",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/construction-industry-logo-strong-profes-1773655711979-ab393289.png",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/travel-and-tourism-platform-logo-modern--1773655716352-96a7bb4a.png",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/farm-management-software-logo-combines-a-1773655710121-0d7fb544.png",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/fleet-management-logistics-company-logo--1773655709900-a69c877f.png",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/transportation-and-logistics-hub-logo-in-1773655711348-9688cbdf.png",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/business-growth-and-development-company--1773655711171-39777d78.png",
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about booking, payments, and safety."
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="blur-reveal"
          faqsAnimation="slide-up"
          mediaPosition="left"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/illustration-showing-customer-support-co-1773655711606-628b70c3.png"
          imageAlt="Customer Support"
          faqs={[
            {
              id: "faq1",
              title: "How do I book a vehicle?",
              content: "Simply search for your desired vehicle type, location, and dates. Review the owner's profile and ratings, select your vehicle, and complete the booking. You'll receive instant confirmation via email and SMS.",
            },
            {
              id: "faq2",
              title: "What are the payment options?",
              content: "We accept credit cards, debit cards, UPI, net banking, and wallet payments. All transactions are secured with encryption. You can also use promotional codes for discounts.",
            },
            {
              id: "faq3",
              title: "How are owners verified?",
              content: "All vehicle owners go through a thorough verification process including identity verification, vehicle documentation, and insurance checks. Only verified owners can list vehicles on our platform.",
            },
            {
              id: "faq4",
              title: "What if there's an issue during rental?",
              content: "Our 24/7 customer support team is always ready to help. Report any issues immediately through the app. We provide insurance coverage and dispute resolution for all bookings.",
            },
            {
              id: "faq5",
              title: "Can I cancel my booking?",
              content: "Yes! Cancellations made 24 hours before the rental start date get a full refund. Cancellations within 24 hours may incur a cancellation fee as per our policy.",
            },
            {
              id: "faq6",
              title: "How can I become a vehicle owner on MultiVehicle?",
              content: "Visit our 'For Owners' section, complete the registration, upload your vehicle documents, and set your pricing. Once approved, you can start listing your vehicles and earning income.",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          title="Stay Updated with Latest Offers"
          description="Subscribe to our newsletter for exclusive deals, new vehicle listings, and platform updates."
          background={{
            variant: "animated-grid",
          }}
          useInvertedBackground={false}
          tagIcon={Bell}
          tagAnimation="slide-up"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="By subscribing, you agree to our Terms and Privacy Policy. We'll send you updates about new vehicles and exclusive offers."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="MultiVehicle"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
};

export default HomePage;