"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Activity, Award, BarChart3, CheckCircle, CircleDollarSign, DollarSign, Globe, HelpCircle, Home, Lightbulb, Mail, Package, Settings, Shield, Sparkles, Star, TrendingUp, Truck, Users, Zap, Clock } from 'lucide-react';
import Link from 'next/link';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="LogiAI"
          bottomLeftText="Global E-commerce Solutions"
          bottomRightText="hello@logiai.com"
          logoOnClick={() => window.location.href = "/"}
          logoHref="/"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="AI-Powered Logistics for Modern E-commerce"
          description="Automate, optimize, and scale your supply chain with intelligent logistics. Real-time route optimization, predictive inventory management, and seamless carrier integration."
          tag="Smart Logistics"
          tagIcon={Zap}
          buttons={[
            { text: "Start Free Trial", href: "https://app.logiai.com/signup" },
            { text: "View Demo", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Real-Time Logistics Hub",
            logoIcon: Activity,
            imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
            searchPlaceholder: "Track shipment...",
            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Export Report", href: "#" }
            ],
            sidebarItems: [
              { icon: Home },
              { icon: BarChart3 },
              { icon: Settings }
            ],
            stats: [
              {
                title: "Shipments Processed",
                values: [24580, 31420, 38950],
                description: "Daily volume"
              },
              {
                title: "Delivery Time Saved",
                values: [15, 22, 28],
                valueSuffix: "%",
                description: "Optimization gains"
              },
              {
                title: "Cost Reduction",
                values: [12000, 18000, 25000],
                valuePrefix: "$",
                description: "Monthly savings"
              }
            ],
            chartTitle: "Shipment Volume Trend",
            chartData: [
              { value: 45 },
              { value: 65 },
              { value: 55 },
              { value: 80 },
              { value: 90 }
            ],
            listTitle: "Recent Operations",
            listItems: [
              { icon: Truck, title: "24K shipments routed", status: "Optimized" },
              { icon: Package, title: "15K packages sorted", status: "In Progress" },
              { icon: CheckCircle, title: "12K deliveries completed", status: "Delivered" }
            ]
          }}
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Intelligent Logistics Capabilities"
          description="Harness AI to transform your supply chain operations and unlock competitive advantages."
          tag="Features"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          features={[
            {
              title: "Route Optimization",
              description: "AI algorithms optimize delivery routes in real-time, reducing time and fuel costs.",
              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Predictive Analytics",
              description: "Anticipate demand patterns and optimize inventory across your supply chain.",
              bentoComponent: "line-chart"
            },
            {
              title: "Carrier Integration",
              description: "Seamlessly connect with multiple carriers and automatically select optimal shipping methods.",
              bentoComponent: "orbiting-icons",
              centerIcon: Zap,
              items: [
                { icon: Truck, ring: 1 },
                { icon: Package, ring: 2 },
                { icon: Globe, ring: 2 }
              ]
            },
            {
              title: "Real-Time Tracking",
              description: "Monitor every shipment with live GPS tracking and instant notifications.",
              bentoComponent: "map"
            }
          ]}
        />
      </div>

      <div id="features-hover" data-section="features-hover">
        <FeatureHoverPattern
          title="Why Choose LogiAI"
          description="Experience the difference that intelligent automation brings to your logistics operations."
          tag="Core Benefits"
          tagIcon={Lightbulb}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="blur-reveal"
          features={[
            {
              icon: Zap,
              title: "Lightning-Fast Processing",
              description: "Process thousands of shipments simultaneously with millisecond optimization"
            },
            {
              icon: Shield,
              title: "Enterprise Security",
              description: "Bank-level encryption and compliance with HIPAA, SOC 2, and GDPR standards"
            },
            {
              icon: TrendingUp,
              title: "Proven ROI",
              description: "Average clients see 30% reduction in logistics costs within 90 days"
            },
            {
              icon: Users,
              title: "Dedicated Support",
              description: "24/7 technical support and strategic logistics consulting included"
            },
            {
              icon: Zap,
              title: "API-First Architecture",
              description: "Flexible REST and GraphQL APIs for seamless system integration"
            },
            {
              icon: Clock,
              title: "99.99% Uptime SLA",
              description: "Multi-region deployment ensures your logistics never stop"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Success"
          tagIcon={Award}
          title="Transforming E-commerce Logistics at Scale"
          description="LogiAI was founded by logistics veterans and AI researchers who saw an opportunity to revolutionize supply chain management. Today, we power logistics for thousands of e-commerce businesses worldwide, processing millions of shipments monthly and saving our clients hundreds of millions in operational costs."
          metrics={[
            { value: "2.4M+", title: "Shipments Optimized Monthly" },
            { value: "$500M+", title: "Client Cost Savings YTD" }
          ]}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/senior-logistic-worker-hardhat-uniform-walking-warehouse-wheeling-palette-jack-back-view-full-length-labor-logistics-concept_74855-14263.jpg"
          imageAlt="Modern logistics distribution center with AI automation"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What E-commerce Leaders Say"
          description="Hear from the companies transforming their logistics with LogiAI"
          tag="Customer Success"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              handle: "CEO, FastShip Co.",
              testimonial: "LogiAI reduced our shipping costs by 35% in the first quarter. The route optimization alone pays for the platform 10x over.",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              name: "Marcus Williams",
              handle: "Operations Director, Urban Express",
              testimonial: "The real-time tracking and predictive inventory features have transformed how we manage our supply chain. Customer satisfaction is up 40%.",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",
              imageAlt: "Marcus Williams"
            },
            {
              id: "3",
              name: "Jennifer Rodriguez",
              handle: "VP Logistics, TrendStyle Inc.",
              testimonial: "Integration was seamless, and the AI recommendations are incredibly accurate. This is how logistics should work in 2025.",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",
              imageAlt: "Jennifer Rodriguez"
            },
            {
              id: "4",
              name: "David Kim",
              handle: "Founder, CraftBox Store",
              testimonial: "As a growing e-commerce business, LogiAI has been invaluable. I went from chaos to predictable, optimized operations.",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",
              imageAlt: "David Kim"
            },
            {
              id: "5",
              name: "Emma Thompson",
              handle: "Supply Chain Manager, Global Goods",
              testimonial: "The platform's ability to handle multiple carriers and automatically select the best option is game-changing.",
              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
              imageAlt: "Emma Thompson"
            },
            {
              id: "6",
              name: "Alex Patel",
              handle: "CTO, NextGen Commerce",
              testimonial: "Robust API, excellent documentation, and support team that actually understands logistics tech. Highly recommended.",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
              imageAlt: "Alex Patel"
            }
          ]}
          speed={40}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Transform Your Logistics?"
          description="Join thousands of e-commerce companies optimizing their supply chains with AI. Book a demo or start your free trial today."
          buttons={[
            { text: "Start Free Trial", href: "https://app.logiai.com/signup" },
            { text: "Book a Demo", href: "#" }
          ]}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterBaseCard
        logoText="LogiAI"
        columns={[
          {
            title: "Product",
            items: [
              { label: "Features", href: "#features" },
              { label: "Pricing", href: "/pricing" },
              { label: "Security", href: "#" },
              { label: "API Docs", href: "#" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About", href: "/about" },
              { label: "Blog", href: "#" },
              { label: "Careers", href: "#" },
              { label: "Press", href: "#" }
            ]
          },
          {
            title: "Resources",
            items: [
              { label: "Documentation", href: "#" },
              { label: "Case Studies", href: "#" },
              { label: "Guides", href: "#" },
              { label: "Community", href: "#" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy", href: "#" },
              { label: "Terms", href: "#" },
              { label: "Compliance", href: "#" },
              { label: "Contact", href: "/contact" }
            ]
          }
        ]}
        copyrightText="© 2025 LogiAI. AI-Powered Logistics for E-commerce."
      />
    </ThemeProvider>
  );
}