"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Services",          id: "services"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="LogisticsFlow"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "plain"}}
      title="Logistics That Moves Your Business Forward"
      description="Realtime tracking, reliable delivery, and supply chain solutions built for growth. Partner with logistics experts who understand your industry."
      buttons={[
        {
          text: "Get a Quote Today",          href: "#contact"},
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/conveyor-belt-with-cardboard-boxes-warehouse_23-2152001545.jpg",          imageAlt: "Logistics tech hub"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/logistics-means-transport-together-with-technological-futuristic-holograms_23-2151662916.jpg",          imageAlt: "Digital cargo tracking"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/trucking-logistics-fleet-management-technology_23-2151989548.jpg",          imageAlt: "Smart freight transit"},
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Driven by Efficiency, Committed to Growth."
      buttons={[
        {
          text: "Our Mission",          href: "#services"},
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "No hidden shipping fees",          "No lack of communication",          "No generic logistics plans"],
      }}
      positiveCard={{
        items: [
          "End-to-end transparency",          "Scalable fulfillment solutions",          "Industry-leading delivery speed"],
      }}
      title="Why Global Partners Trust Us"
      description="We offer a distinct approach to supply chain management that prioritizes your business outcomes."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "99.8%",          description: "On-time Delivery Rate"},
        {
          id: "m2",          value: "250+",          description: "Global Hubs"},
        {
          id: "m3",          value: "5M+",          description: "Packages Shipped Annually"},
      ]}
      title="Proven Performance"
      description="Numbers speak for our reliability."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "Freight Cargo",          price: "Custom Pricing",          imageSrc: "http://img.b2bpic.net/free-photo/shipping-container-being-lifted-by-crane-port_23-2152005474.jpg"},
        {
          id: "p2",          name: "Automation Sorting",          price: "Integrated",          imageSrc: "http://img.b2bpic.net/free-photo/stockroom-manager-working-merchandise-inventory_482257-77590.jpg"},
        {
          id: "p3",          name: "Tracking Portal",          price: "Free Access",          imageSrc: "http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116602.jpg"},
      ]}
      title="Our Shipping Solutions"
      description="From local freight to international fulfillment, we manage your inventory with precision."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Sarah Johnson",          role: "CEO",          company: "GlobalTrade Inc.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-tablet_23-2149271749.jpg"},
        {
          id: "t2",          name: "Michael Chen",          role: "Supply Chain Lead",          company: "InnovateLab",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-posing-while-holding-laptop_23-2148817115.jpg"},
      ]}
      kpiItems={[
        {
          value: "4.9/5",          label: "Client Rating"},
        {
          value: "100%",          label: "Compliance"},
        {
          value: "24/7",          label: "Support Availability"},
      ]}
      title="Trusted by Leaders"
      description="Our commitment to supply chain excellence speaks for itself."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      tag="Get Started"
      title="Optimize Your Logistics"
      description="Contact us to scale your operations."
      buttons={[
          { text: "Contact Sales", href: "#" }
      ]}
      background={{ variant: "plain" }}
      useInvertedBackground={true}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="LogisticsFlow"
      leftLink={{ text: "Privacy Policy", href: "#" }}
      rightLink={{ text: "Terms of Service", href: "#" }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}