"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 PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Zap, Sparkles, Award, Target, Star, DollarSign, HelpCircle, Send, Home, Map, BarChart3, Settings, Hexagon, Package, Truck, CheckCircle, Boxes, Globe, TrendingUp, Users, Cpu, Network, Shield } from "lucide-react";

export default function LandingPage() {
  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: "hero" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="LogiSync AI"
          bottomLeftText="AI-Powered Logistics"
          bottomRightText="hello@logisync.ai"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Intelligent Logistics at Scale"
          description="Transform your supply chain with AI-powered optimization. Real-time tracking, predictive analytics, and autonomous routing for the future of logistics."
          tag="AI-Powered Supply Chain"
          tagIcon={Zap}
          buttons={[
            { text: "Get Started", href: "#contact" },
            { text: "View Demo", href: "https://demo.logisync.ai" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Live Logistics Hub",            logoIcon: Hexagon,
            imageSrc: "https://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg",            searchPlaceholder: "Track shipment ID",            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Export Report", href: "#" }
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: Map, active: false },
              { icon: BarChart3, active: false },
              { icon: Settings, active: false }
            ],
            stats: [
              {
                title: "Active Routes",                values: [2847, 3156, 3521],
                description: "Optimized delivery routes"
              },
              {
                title: "Avg Delivery Time",                values: [4.2, 3.8, 3.5],
                valuePrefix: "",                valueSuffix: "h",                description: "Hours saved daily"
              },
              {
                title: "Network Coverage",                values: [156, 178, 195],
                valuePrefix: "",                valueSuffix: "%",                description: "Global distribution coverage"
              }
            ],
            chartTitle: "Daily Shipment Volume",            chartData: [
              { value: 65 },
              { value: 78 },
              { value: 72 },
              { value: 85 },
              { value: 92 }
            ],
            listTitle: "Active Shipments",            listItems: [
              { icon: Package, title: "Order #847293", status: "In Transit" },
              { icon: Truck, title: "Fleet Pickup", status: "Scheduled" },
              { icon: CheckCircle, title: "Delivery Complete", status: "Delivered" }
            ]
          }}
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="AI-Powered Capabilities"
          description="Leverage machine learning and real-time data to optimize every aspect of your logistics operations."
          tag="Advanced Technology"
          tagIcon={Sparkles}
          features={[
            {
              title: "Route Optimization",              description: "AI algorithms calculate the most efficient delivery routes in real-time, reducing fuel costs and delivery times.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Predictive Analytics",              description: "Forecast demand, predict maintenance needs, and anticipate supply chain disruptions before they happen.",              bentoComponent: "line-chart"
            },
            {
              title: "Real-Time Tracking",              description: "Monitor every shipment with precision GPS tracking and comprehensive visibility across your entire network.",              bentoComponent: "map"
            },
            {
              title: "Integration Hub",              description: "Seamlessly connect with your existing systems through our comprehensive API and pre-built integrations.",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Boxes, ring: 1 },
                { icon: Truck, ring: 1 },
                { icon: BarChart3, ring: 2 },
                { icon: Settings, ring: 2 },
                { icon: Globe, ring: 3 }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features-hover" data-section="features-hover">
        <FeatureHoverPattern
          title="Enterprise Solutions"
          description="Comprehensive tools designed for enterprises managing complex logistics networks at global scale."
          tag="Enterprise Grade"
          tagIcon={Award}
          features={[
            {
              icon: Zap,
              title: "Lightning-Fast Processing",              description: "Process millions of data points instantaneously with our distributed architecture and edge computing capabilities."
            },
            {
              icon: Shield,
              title: "Enterprise Security",              description: "Military-grade encryption, compliance with GDPR, HIPAA, and SOC 2 Type II certifications for complete peace of mind."
            },
            {
              icon: TrendingUp,
              title: "Scalable Infrastructure",              description: "Grow from regional to global operations without infrastructure limitations or performance degradation."
            },
            {
              icon: Users,
              title: "Dedicated Support",              description: "24/7 enterprise support with dedicated account managers and custom SLA agreements for your business."
            },
            {
              icon: Cpu,
              title: "AI Optimization Engine",              description: "Proprietary machine learning models continuously learn from your operations to improve efficiency."
            },
            {
              icon: Network,
              title: "Global Network",              description: "Access our worldwide partner network spanning 150+ countries for seamless international logistics."
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Impact"
          tagIcon={Target}
          title="Transforming Global Supply Chains"
          description="LogiSync AI has helped enterprise companies reduce logistics costs by an average of 35% while improving delivery times. Our AI-driven platform processes over 100 million shipments annually, optimizing routes, predicting delays, and automating warehouse operations at unprecedented scale."
          metrics={[
            { value: "100M+", title: "Shipments Optimized Annually" },
            { value: "35%", title: "Average Cost Reduction" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/map-car_1160-57.jpg"
          imageAlt="Advanced warehouse automation facility"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Trusted by Industry Leaders"
          description="Hear from companies that transformed their logistics operations with LogiSync AI."
          tag="Client Success"
          tagIcon={Star}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "VP Operations, GlobalShip Co",              testimonial: "LogiSync AI reduced our delivery times by 40% and cut logistics costs significantly. The predictive analytics alone has transformed how we plan operations.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "Marcus Chen",              handle: "CEO, Express Logistics",              testimonial: "Implementing their platform was seamless. Within three months, we saw measurable improvements across all KPIs. Highly recommended for enterprise operations.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Marcus Chen"
            },
            {
              id: "3",              name: "Elena Rodriguez",              handle: "Operations Director, TradeFlow Inc",              testimonial: "The real-time tracking and route optimization have been game-changers. Our customers love the transparency, and our margins have improved dramatically.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageAlt: "Elena Rodriguez"
            },
            {
              id: "4",              name: "James Patterson",              handle: "CTO, DistributionPro",              testimonial: "The API integration was straightforward and the technical support is exceptional. This platform scales with us as we grow globally.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",              imageAlt: "James Patterson"
            },
            {
              id: "5",              name: "Lisa Zhang",              handle: "Supply Chain Manager, Pacific Traders",              testimonial: "LogiSync's AI keeps surprising us with its insights. Predictive maintenance alerts have prevented costly downtime multiple times already.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",              imageAlt: "Lisa Zhang"
            },
            {
              id: "6",              name: "David Kumar",              handle: "Founder, FastFreight Solutions",              testimonial: "From a startup perspective, this platform gave us enterprise-level capabilities without the enterprise overhead. Absolutely transformational.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              imageAlt: "David Kumar"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Flexible Pricing for Every Scale"
          description="Choose a plan that grows with your business. All plans include 24/7 support and access to core AI features."
          tag="Transparent Pricing"
          tagIcon={DollarSign}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "startup",              price: "$499/mo",              name: "Startup Plan",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Up to 500 shipments/month",                "Basic route optimization",                "Real-time GPS tracking",                "Email support",                "API access",                "3 team members"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$1,999/mo",              name: "Professional Plan",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Schedule Demo", href: "#" }
              ],
              features: [
                "Unlimited shipments",                "Advanced AI optimization",                "Predictive analytics",                "Priority support",                "Custom integrations",                "15 team members",                "Warehouse automation",                "Compliance reporting"
              ]
            },
            {
              id: "enterprise",              price: "Custom",              name: "Enterprise Plan",              buttons: [
                { text: "Contact Sales", href: "mailto:sales@logisync.ai" },
                { text: "View Features", href: "#" }
              ],
              features: [
                "Unlimited everything",                "Dedicated infrastructure",                "Custom AI models",                "24/7 dedicated support",                "White-label options",                "Unlimited team members",                "Global network access",                "SLA guarantees",                "Advanced analytics"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Common Questions"
          description="Find answers to frequently asked questions about LogiSync AI and our logistics platform."
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How long does implementation take?",              content: "Most implementations are completed within 2-4 weeks. We provide dedicated implementation support and can accelerate timelines for enterprise customers. Our onboarding process includes data migration, team training, and custom configuration."
            },
            {
              id: "2",              title: "Does LogiSync integrate with existing systems?",              content: "Yes, we offer extensive integration capabilities through our REST API, webhooks, and pre-built connectors for major ERP and WMS platforms. Our technical team can develop custom integrations if needed."
            },
            {
              id: "3",              title: "What happens to my data?",              content: "Your data is encrypted at rest and in transit using military-grade AES-256 encryption. We comply with GDPR, HIPAA, SOC 2 Type II, and maintain multiple geographic backups for disaster recovery."
            },
            {
              id: "4",              title: "Can I scale from startup to enterprise?",              content: "Absolutely. Our platform is designed to scale seamlessly from managing hundreds to millions of shipments daily. You only pay for what you use, and can upgrade anytime."
            },
            {
              id: "5",              title: "What kind of support is available?",              content: "We offer 24/7 email, chat, and phone support for all customers. Professional and Enterprise plans include dedicated account managers and custom SLA agreements."
            },
            {
              id: "6",              title: "How accurate are the AI predictions?",              content: "Our models maintain 94%+ accuracy on delivery time predictions and 89% on demand forecasting after 30 days of learning your operational patterns. Accuracy improves over time as the system processes more data."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Transform?"
          tagIcon={Send}
          title="Start Optimizing Your Logistics Today"
          description="Join industry leaders who have transformed their supply chains with AI. Get a personalized demo and discover how LogiSync AI can reduce costs and improve efficiency."
          buttons={[
            { text: "Schedule Demo", href: "https://calendly.com/logisync" },
            { text: "Contact Sales", href: "mailto:sales@logisync.ai" }
          ]}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="LogiSync AI"
          copyrightText="© 2025 LogiSync AI. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features-bento" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Integrations", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Contact Support", href: "mailto:support@logisync.ai" },
                { label: "Status Page", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}