"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="mediumSizeLargeTitles"
        background="none"
        cardStyle="gradient-radial"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Home", id: "/" },
        { name: "About", id: "/about" },
        { name: "Contact", id: "/contact" },
      ]}
      brandName="PROTO-TRANSIT"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{ variant: "gradient-bars" }}
      title="Redefining Motion Architecture."
      description="Crafting the next generation of transportation with computational design and cinematic precision."
      tag="Transport Conceptualization"
      buttons={[
        { text: "View Portfolio", href: "#portfolio" },
        { text: "Contact", href: "/contact" },
      ]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001289.jpg?_wi=1", imageAlt: "futuristic concept car dark studio" },
        { imageSrc: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649843.jpg?_wi=1", imageAlt: "futuristic vehicle concept dark studio" }
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by Industry Leaders"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Philosophy of Speed"
      description="We bridge the gap between engineering and emotional design, creating vehicles that feel like an extension of the human experience."
      tag="Design Vision"
      imageSrc="http://img.b2bpic.net/free-photo/monitors-photovoltaics-factory-used-manage-performance-robot-arms_482257-125090.jpg?_wi=1"
      imageAlt="transportation designer working at desk"
      buttons={[{ text: "Read More", href: "/about" }]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { id: "f1", title: "Concept Sketches", description: "Rapid ideation using digital and analog techniques.", tag: "Process", imageSrc: "http://img.b2bpic.net/free-photo/off-road-car-wilderness_23-2151483065.jpg", imageAlt: "Off-road car in the wilderness" },
        { id: "f2", title: "3D Modeling", description: "High-fidelity surfacing for manufacturing-ready prototypes.", tag: "Precision", imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001289.jpg?_wi=2", imageAlt: "Off-road car in the wilderness" },
        { id: "f3", title: "Cinematic Renders", description: "Storytelling through lighting, texture, and environment.", tag: "Vision", imageSrc: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649843.jpg?_wi=2", imageAlt: "Off-road car in the wilderness" },
        { id: "f4", title: "Aerodynamic Optimization", description: "Wind tunnel simulation for peak efficiency.", tag: "Aerodynamics", imageSrc: "http://img.b2bpic.net/free-photo/monitors-photovoltaics-factory-used-manage-performance-robot-arms_482257-125090.jpg?_wi=2", imageAlt: "Off-road car in the wilderness" },
        { id: "f5", title: "Material Innovation", description: "Exploring sustainable carbon-neutral composites.", tag: "Sustainability", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-mean-transportation-ultra-modern-city_23-2151065392.jpg?_wi=1", imageAlt: "Off-road car in the wilderness" },
      ]}
      title="Design Capabilities"
      description="Comprehensive design services for future-facing mobility."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        { id: "p1", name: "Autonomous Pod", price: "2024", variant: "Mobility", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-mean-transportation-ultra-modern-city_23-2151065392.jpg?_wi=2" },
        { id: "p2", name: "Hyperloop Aero", price: "2024", variant: "Transport", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg" },
        { id: "p3", name: "Velocity Racer", price: "2023", variant: "Race", imageSrc: "http://img.b2bpic.net/free-photo/sunset-race_23-2151952483.jpg" },
        { id: "p4", name: "Red Shift Moto", price: "2023", variant: "Motorcycle", imageSrc: "http://img.b2bpic.net/free-vector/dark-black-wallpaper-with-abstract-shiny-metallic-design_1017-59672.jpg" },
        { id: "p5", name: "Urban Glide", price: "2022", variant: "Urban", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599322.jpg" },
        { id: "p6", name: "V-Plane Concept", price: "2022", variant: "Aviation", imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-looking-spaceship_23-2150675505.jpg" },
      ]}
      title="Project Gallery"
      description="Select case studies showcasing our design development journey."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "15+", title: "Global Projects", items: ["Concept Ideation", "Manufacturing Ready", "Strategic Consulting"] },
        { id: "m2", value: "8k+", title: "Render Hours", items: ["3D Modeling", "Lighting Simulation", "Texture Mapping"] },
        { id: "m3", value: "100%", title: "Client Satisfaction", items: ["Vision Alignment", "Iterative Workflow", "Final Delivery"] },
      ]}
      title="Project Statistics"
      description="Key achievements in our design practice."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        { id: "t1", name: "Sarah Miller", role: "Creative Director", company: "AutoDesign Lab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/african-guy-wears-trendy-wristwatch-posing-with-smile-near-beige-wall-outdoor-portrait-black-man-good-mood-standing-with-arms-crossed_197531-21794.jpg" },
        { id: "t2", name: "David Chen", role: "Head of R&D", company: "NextMotion", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg" },
        { id: "t3", name: "Alex Riviera", role: "Lead Architect", company: "Veloce Corp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg" },
        { id: "t4", name: "Elena Rossi", role: "Project Manager", company: "SkyTransport", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-architect-with-safety-helmet_23-2148242912.jpg" },
        { id: "t5", name: "Marcus Thorne", role: "Design Lead", company: "Velocity Systems", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-bald-man-suit-wearing-glasses-looking-front-with-serious-confident-expression-standing-pink-wall_141793-62172.jpg" },
      ]}
      kpiItems={[
        { value: "5.0", label: "Avg Rating" },
        { value: "20+", label: "Partners" },
        { value: "100%", label: "On Time" },
      ]}
      title="Client Voices"
      description="Partners who trust our design process."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag="Let's Talk"
      title="Ready for the Future?"
      description="Collaborate with us on your next automotive design innovation. We're ready to define the next era of mobility."
      buttons={[
        { text: "Contact Us", href: "/contact" },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Portfolio", href: "#portfolio" }] },
        { title: "Contact", items: [{ label: "Email", href: "mailto:info@proto.design" }, { label: "Contact Page", href: "/contact" }] },
        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
      ]}
      logoText="PROTO-TRANSIT"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}