"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import { Clock, Cloud, Shield, ShieldCheck, Speedometer, Fuel, Thermometer } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumSizeLargeTitles"
        background="noise"
        cardStyle="gradient-mesh"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Metrics",          id: "#metrics"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Map",          id: "#map"},
        {
          name: "Insights",          id: "#insights"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="DriveInsight AI"
    />
  </div>

  <div id="home" data-section="home">
      <HeroOverlay
      title="DriveInsight AI: Real-Time Vehicle Telemetry & Analytics Platform"
      description="Unlock unparalleled insights into your fleet with our cloud-based dashboard, powered by advanced AI and GCP for predictive maintenance and optimized driver behavior."
      buttons={[
        {
          text: "Get a Demo",          href: "#contact"},
        {
          text: "Learn More",          href: "#about"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg"
      imageAlt="Connected-car cloud dashboard displaying vehicle telemetry"
      showBlur={true}
      textPosition="bottom"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg",          alt: "Close up of accounting sales statistics on computer display"},
        {
          src: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169866.jpg",          alt: "Representation of user experience and interface design"},
        {
          src: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg",          alt: "Closeup of african american entrepreneur analyzing company profit"},
        {
          src: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg",          alt: "Financial program user interface on PC screen on home office desk"},
        {
          src: "http://img.b2bpic.net/free-photo/hand-with-car-made-cloud_1134-148.jpg",          alt: "Hand with a car made of cloud"},
      ]}
      avatarText="Trusted by leading automotive innovators"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "speed",          value: "75 MPH",          title: "Average Speed",          description: "Real-time average speed across your fleet for efficiency monitoring.",          icon: Speedometer,
        },
        {
          id: "fuel",          value: "85%",          title: "Fuel Level",          description: "Instant overview of fuel levels to prevent unexpected stoppages.",          icon: Fuel,
        },
        {
          id: "engine-temp",          value: "90°C",          title: "Engine Temperature",          description: "Critical engine temperature monitoring to prevent overheating and damage.",          icon: Thermometer,
        },
        {
          id: "health-score",          value: "9.2/10",          title: "Vehicle Health Score",          description: "An aggregated score reflecting overall vehicle health based on multiple parameters.",          icon: ShieldCheck,
        },
      ]}
      title="Key Performance Indicators"
      description="Monitor critical vehicle health and performance metrics at a glance for proactive management."
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      imagePosition="right"
      title="Powering Intelligent Fleet Management on GCP"
      description="DriveInsight AI leverages Google Cloud Platform's robust infrastructure to deliver scalable, secure, and lightning-fast telemetry processing. Our platform is built for reliability and real-time data insights, ensuring your operations are always optimized."
      bulletPoints={[
        {
          title: "Scalable Infrastructure",          description: "Built on GCP to effortlessly handle data from thousands of vehicles.",          icon: Cloud,
        },
        {
          title: "Enterprise-Grade Security",          description: "Your data is protected with industry-leading encryption and compliance.",          icon: Shield,
        },
        {
          title: "Real-Time Processing",          description: "Instant data ingestion and analysis for immediate insights and actions.",          icon: Clock,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/online-car-insurance-application_53876-167062.jpg"
      imageAlt="Google Cloud Platform infrastructure illustration"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "real-time-telemetry",          label: "Live Data Feeds",          title: "Real-Time Telemetry Panel",          items: [
            "Instant data updates from all connected vehicles.",            "Customizable dashboard views for key metrics.",            "High-frequency data streaming for granular analysis."],
        },
        {
          id: "active-alerts",          label: "Event Notifications",          title: "Active Alerts & Notifications",          items: [
            "Configurable alert thresholds for critical parameters.",            "Instant notifications via email, SMS, or in-app.",            "Detailed event logs for post-incident analysis."],
        },
        {
          id: "vehicle-health",          label: "Diagnostic Charts",          title: "Vehicle Health Charts",          items: [
            "Trend analysis for engine parameters and system health.",            "Visual representation of diagnostic trouble codes.",            "Proactive identification of potential maintenance needs."],
        },
      ]}
      title="Comprehensive Telemetry & Alerting"
      description="Gain full visibility into every vehicle's status with real-time data streams and instant notifications for critical events."
    />
  </div>

  <div id="map" data-section="map">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "map-1",          name: "Live Vehicle Tracking",          price: "GPS",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-wavy-folds-background_1048-16955.jpg",          imageAlt: "Live vehicle tracking map"},
        {
          id: "map-2",          name: "Fleet Overview",          price: "Multi-Vehicle",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-truck-boxes_23-2149853131.jpg",          imageAlt: "Multi-vehicle fleet overview map"},
        {
          id: "map-3",          name: "Route Optimization",          price: "Efficiency",          imageSrc: "http://img.b2bpic.net/free-photo/map-car_1160-57.jpg",          imageAlt: "Route optimization map"},
        {
          id: "map-4",          name: "Historical Journeys",          price: "Playback",          imageSrc: "http://img.b2bpic.net/free-photo/speed-neon-lights-city_23-2149552524.jpg",          imageAlt: "Historical journey map"},
        {
          id: "map-5",          name: "Geo-Fencing Alerts",          price: "Boundaries",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827294.jpg",          imageAlt: "Geo-fencing map with alerts"},
        {
          id: "map-6",          name: "Combined View",          price: "Live + Map",          imageSrc: "http://img.b2bpic.net/free-photo/focused-videographer-producer-working-movie-production-editing-film-design_482257-19397.jpg",          imageAlt: "Split view of live feed and map"},
      ]}
      title="Dynamic Vehicle Location & Route Optimization"
      description="Track your fleet in real-time on an interactive map, visualize routes, and optimize logistics with our intuitive mapping solution."
    />
  </div>

  <div id="insights" data-section="insights">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "predictive-maintenance",          label: "AI-Driven Forecasts",          title: "Predictive Insights Section",          items: [
            "AI algorithms predict component failures before they occur.",            "Schedule maintenance proactively to minimize downtime.",            "Reduce operational costs through optimized service intervals."],
        },
        {
          id: "driver-behavior",          label: "Performance Analysis",          title: "Driver Behavior Analytics Charts",          items: [
            "Monitor harsh braking, acceleration, and cornering.",            "Identify unsafe driving patterns and provide coaching.",            "Improve fuel efficiency through better driving habits."],
        },
        {
          id: "performance-benchmarking",          label: "Fleet Comparison",          title: "Fleet Performance Benchmarking",          items: [
            "Compare vehicle and driver performance against benchmarks.",            "Identify top performers and areas for improvement.",            "Drive continuous improvement across your entire fleet."],
        },
      ]}
      title="Advanced Analytics for Proactive Decisions"
      description="Move beyond reactive management with AI-driven insights for predictive maintenance and driver performance analysis."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",          title: "What kind of vehicles does DriveInsight AI support?",          content: "DriveInsight AI is designed to support a wide range of vehicles, from commercial trucks and delivery vans to passenger fleets. Our platform is hardware-agnostic and can integrate with various telematics devices."},
        {
          id: "faq-2",          title: "How does your platform ensure data security?",          content: "We leverage Google Cloud Platform's robust security features, including end-to-end encryption, identity and access management, and continuous security monitoring, to ensure your data is always protected and compliant with industry standards."},
        {
          id: "faq-3",          title: "Can I customize the dashboard to my specific needs?",          content: "Yes, DriveInsight AI offers highly customizable dashboards. You can select which KPIs to display, configure alert thresholds, and create personalized reports to match your operational requirements."},
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to the most common questions about DriveInsight AI and our Vehicle Telemetry Platform."
      faqsAnimation="slide-up"
      textPosition="left"
      showCard={true}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="Get Started"
      title="Request a Demo"
      description="Experience the power of DriveInsight AI firsthand. Fill out the form to schedule a personalized demonstration with our experts and discover how we can transform your fleet management."
      imageSrc="http://img.b2bpic.net/free-photo/close-up-laptop-with-economic-report_1098-2544.jpg"
      imageAlt="Team collaborating around a holographic car dashboard"
      mediaAnimation="opacity"
      mediaPosition="right"
      inputPlaceholder="Enter your email"
      buttonText="Schedule Demo"
      termsText="By clicking Schedule Demo you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Platform Overview",              href: "#home"},
            {
              label: "Telemetry Features",              href: "#features"},
            {
              label: "Predictive Insights",              href: "#insights"},
            {
              label: "Vehicle Map",              href: "#map"},
          ],
        },
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Blog",              href: "#"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
            {
              label: "Support",              href: "#faq"},
          ],
        },
      ]}
      logoText="DriveInsight AI"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
