"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Award, Building2, Car, MapPin, MessageCircle, Star, TrendingUp, Users, Zap, Heart, ThumbsUp, Shield, Briefcase } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="grid"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="RideFlow"
          navItems={[
            { name: "How It Works", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Safety", id: "safety" },
            { name: "About", id: "about" }
          ]}
          button={{
            text: "Get Started",            href: "#booking"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Your ride, moments away"
          description="Experience the fastest, safest, and most affordable taxi booking platform. Get where you need to go with confidence."
          background={{ variant: "animated-grid" }}
          tag="Trusted by millions"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Download App", href: "#booking" },
            { text: "Learn More", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285284.jpg", alt: "User 1" },
            { src: "http://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg", alt: "User 2" },
            { src: "http://img.b2bpic.net/free-photo/medium-shot-female-economist-working-office_23-2150251746.jpg", alt: "User 3" },
            { src: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg", alt: "User 4" }
          ]}
          avatarText="50M+ active riders"
          imageSrc="http://img.b2bpic.net/free-vector/collection-public-transport-app-screens_23-2148683050.jpg?_wi=1"
          imageAlt="RideFlow taxi app interface"
          mediaAnimation="blur-reveal"
          testimonials={[
            {
              name: "Sarah Chen",              handle: "@ridingdaily",              testimonial: "Finally a taxi app that works reliably. RideFlow gets me where I need to be on time, every time.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285284.jpg?_wi=1",              imageAlt: "Sarah Chen"
            },
            {
              name: "Michael Torres",              handle: "@torontorider",              testimonial: "The pricing is transparent and fair. No hidden fees, just honest transportation.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg?_wi=1",              imageAlt: "Michael Torres"
            },
            {
              name: "Priya Sharma",              handle: "@mobilecity",              testimonial: "Best app design I've seen. Super clean, easy to book, and my driver is always professional.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-female-economist-working-office_23-2150251746.jpg?_wi=1",              imageAlt: "Priya Sharma"
            },
            {
              name: "James Wilson",              handle: "@dailycommute",              testimonial: "RideFlow replaced my car for city travel. It's that good and that reliable.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg?_wi=1",              imageAlt: "James Wilson"
            }
          ]}
          testimonialRotationInterval={5000}
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why choose RideFlow"
          description="We've reimagined taxi booking to be faster, safer, and more transparent than ever before."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Industry Leading"
          tagIcon={Award}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get Started Free", href: "#booking" }
          ]}
          buttonAnimation="slide-up"
          negativeCard={{
            items: [
              "Unpredictable wait times",              "Hidden surge pricing",              "Limited driver verification",              "Poor customer support",              "Complicated app interface"
            ]
          }}
          positiveCard={{
            items: [
              "5-minute average wait time",              "Transparent fixed pricing",              "Verified professional drivers",              "24/7 dedicated support",              "Intuitive one-tap booking"
            ]
          }}
          animationType="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Built for modern mobility"
          metrics={[
            { icon: Users, label: "Active Riders", value: "50M+" },
            { icon: MapPin, label: "Cities Covered", value: "250+" },
            { icon: Zap, label: "Rides Per Day", value: "2.5M+" },
            { icon: Star, label: "Average Rating", value: "4.9/5" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardOne
          title="Choose your ride"
          description="Select from our fleet of reliable vehicles, each with verified professional drivers."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Multiple Options"
          tagIcon={Car}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Now", href: "#booking" }
          ]}
          buttonAnimation="slide-up"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "economy",              name: "Economy",              price: "$5.99",              imageSrc: "http://img.b2bpic.net/free-vector/collection-public-transport-app-screens_23-2148683050.jpg?_wi=2",              imageAlt: "Economy car"
            },
            {
              id: "comfort",              name: "Comfort",              price: "$8.99",              imageSrc: "http://img.b2bpic.net/free-vector/collection-public-transport-app-screens_23-2148683050.jpg?_wi=3",              imageAlt: "Comfort car"
            },
            {
              id: "premium",              name: "Premium",              price: "$12.99",              imageSrc: "http://img.b2bpic.net/free-vector/collection-public-transport-app-screens_23-2148683050.jpg?_wi=4",              imageAlt: "Premium car"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Real-time performance"
          description="Our platform is engineered for reliability, speed, and exceptional user experience."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Proven Results"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          buttons={[
            { text: "View Technology", href: "#" }
          ]}
          buttonAnimation="slide-up"
          animationType="slide-up"
          metrics={[
            {
              id: "availability",              value: "99.9%",              title: "Platform Uptime",              items: ["24/7 monitoring", "Redundant systems", "Instant failover"]
            },
            {
              id: "speed",              value: "< 5s",              title: "Average Match Time",              items: ["AI-powered matching", "Predictive routing", "Optimal efficiency"]
            },
            {
              id: "satisfaction",              value: "98%",              title: "Customer Satisfaction",              items: ["Professional drivers", "Quality assurance", "Support team"]
            }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by leading companies worldwide"
          description="Enterprise partners rely on RideFlow for corporate mobility solutions."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Enterprise Partners"
          tagIcon={Building2}
          tagAnimation="slide-up"
          buttons={[
            { text: "Enterprise Solutions", href: "#" }
          ]}
          buttonAnimation="slide-up"
          names={["Google", "Microsoft", "Apple", "Meta", "Amazon", "Tesla", "Netflix"]}
          logos={[
            "http://img.b2bpic.net/free-vector/set-three-abstract-yellow-taxi-banners_23-2147564455.jpg",            "http://img.b2bpic.net/free-vector/black-red-round-logo_1043-235.jpg",            "http://img.b2bpic.net/free-vector/best-delivery-logo-background_1392-1.jpg",            "http://img.b2bpic.net/free-vector/flat-electronics-logo-design-pack_23-2148998713.jpg",            "http://img.b2bpic.net/free-vector/vintage-car-logo-collection_23-2147730872.jpg",            "http://img.b2bpic.net/free-vector/hand-drawn-transport-business-card_23-2149903193.jpg",            "http://img.b2bpic.net/free-vector/taxi-business-card-template_1051-1494.jpg"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="What riders love about us"
          description="Real feedback from people who use RideFlow every day."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Customer Reviews"
          tagIcon={MessageCircle}
          tagAnimation="slide-up"
          buttons={[
            { text: "Read All Stories", href: "#" }
          ]}
          buttonAnimation="slide-up"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Emma Rodriguez",              role: "Business Executive",              testimonial: "The reliability is unmatched. I book my morning commute without thinking twice—it's always there.",              imageSrc: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285284.jpg?_wi=2",              imageAlt: "Emma Rodriguez",              icon: Heart
            },
            {
              id: "2",              name: "David Kim",              role: "Frequent Traveler",              testimonial: "Transparent pricing means no surprises. Every ride costs exactly what was quoted.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg?_wi=2",              imageAlt: "David Kim",              icon: ThumbsUp
            },
            {
              id: "3",              name: "Lisa Anderson",              role: "University Student",              testimonial: "The app is so intuitive, even my grandma uses it! And the student discount is amazing.",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-female-economist-working-office_23-2150251746.jpg?_wi=2",              imageAlt: "Lisa Anderson",              icon: Star
            },
            {
              id: "4",              name: "Marcus Johnson",              role: "Night Shift Worker",              testimonial: "Available 24/7, professional drivers, and fair pricing. Everything I need for safe travel.",              imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg?_wi=2",              imageAlt: "Marcus Johnson",              icon: Shield
            },
            {
              id: "5",              name: "Sophia Chen",              role: "Event Planner",              testimonial: "Corporate rides for our events are seamless. Support team is incredibly responsive.",              imageSrc: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285284.jpg?_wi=3",              imageAlt: "Sophia Chen",              icon: Briefcase
            },
            {
              id: "6",              name: "Alex Martinez",              role: "Senior Consultant",              testimonial: "The driver quality is exceptional. Always professional, courteous, and on time.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg?_wi=3",              imageAlt: "Alex Martinez",              icon: Award
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to revolutionize your commute? Download RideFlow today and get your first ride free."
          animationType="entrance-slide"
          buttons={[
            { text: "Get Started", href: "#booking" },
            { text: "Contact Support", href: "mailto:support@rideflow.com" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-vector/collection-public-transport-app-screens_23-2148683050.jpg?_wi=5"
          imageAlt="RideFlow app footer"
          logoText="RideFlow"
          copyrightText="© 2025 RideFlow. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Download App", href: "#" },
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#product" },
                { label: "Enterprise", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Safety", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Feedback", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}