"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 MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { CheckCircle, Star } from "lucide-react";

const ForOwnersPage = () => {
  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="Earn Money with Your Vehicle"
          description="List your vehicle on MultiVehicle and start earning passive income. Reach thousands of renters, secure payments, and manage your bookings with ease. Whether it's a car, bike, tractor, or truck, monetize your asset today."
          tag="Join 15K+ Vehicle Owners"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Register Your Vehicle",
              href: "/register-vehicle",
            },
            {
              text: "Learn More",
              href: "#earnings",
            },
          ]}
          buttonAnimation="slide-up"
          background={{
            variant: "radial-gradient",
          }}
          testimonials={[
            {
              name: "Vikram Patel",
              handle: "@vikram_owner",
              testimonial: "I earn ₹2,000+ per week from my idle tractor. MultiVehicle made it simple!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655710344-3c8e9658.png?_wi=3",
            },
            {
              name: "Meera Singh",
              handle: "@meera_carowner",
              testimonial: "Great platform! My car is constantly booked. Easy payments and support.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-femal-1773655710630-e3386f1a.png?_wi=3",
            },
            {
              name: "Rajesh Nair",
              handle: "@rajesh_jcb",
              testimonial: "My JCB equipment generates consistent income. Best investment ever!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655711498-5240ed1d.png?_wi=3",
            },
          ]}
          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?_wi=2"
          imageAlt="Vehicle Owner Dashboard"
          imagePosition="right"
        />
      </div>

      <div id="earnings" data-section="earnings">
        <MetricSplitMediaAbout
          title="Why Partner with MultiVehicle?"
          description="Get access to a thriving community of renters, secure payment processing, 24/7 support, and tools to maximize your earnings."
          tag="Owner Benefits"
          tagIcon={Star}
          tagAnimation="slide-up"
          metrics={[
            { value: "50K+", title: "Active Renters" },
            { value: "100%", title: "Payment Security" },
            { value: "24/7", title: "Support" },
            { value: "0% Fee", title: "Setup Cost" },
          ]}
          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?_wi=3"
          imageAlt="Owner Dashboard Features"
        />
      </div>

      <div id="owner-testimonials" data-section="owner-testimonials">
        <TestimonialCardTwo
          title="Hear from Our Vehicle Owners"
          description="Success stories from owners who've transformed their vehicles into income streams."
          tag="Owner Success"
          tagAnimation="slide-up"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "owner1",
              name: "Harish Sharma",
              role: "Truck Owner",
              testimonial: "Started with one truck, now I've added two more. The demand is incredible and payments are always on time.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655710344-3c8e9658.png?_wi=4",
            },
            {
              id: "owner2",
              name: "Priya Desai",
              role: "Car Owner",
              testimonial: "My car was sitting idle. Now it earns money while I use my backup vehicle. Best passive income!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-femal-1773655710195-d74ef624.png?_wi=2",
            },
            {
              id: "owner3",
              name: "Ravi Kumar",
              role: "Tractor Owner",
              testimonial: "The seasonal booking pattern works perfectly for my farm. Extra income during off-season is excellent.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/professional-headshot-of-an-indian-male--1773655711401-56e76e6e.png?_wi=2",
            },
          ]}
        />
      </div>

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

export default ForOwnersPage;