"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Zap, Workflow, Grid3x3, Sparkles, Github } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="VisionSync"
          navItems={[
            { name: "How It Works", id: "how-it-works" },
            { name: "Industries", id: "industries" },
            { name: "Features", id: "features" },
            { name: "Tech Stack", id: "tech-stack" },
            { name: "Open Source", id: "open-source" }
          ]}
          button={{ text: "Get Early Access", href: "#contact" }}
          className="fixed top-6 left-1/2 -translate-x-1/2 z-50"
          buttonClassName="bg-gradient-to-r from-violet-400 to-violet-600 hover:shadow-lg hover:shadow-violet-500/50 transition-all duration-300"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="See Everything. Miss Nothing."
          description="AI-powered real-time analytics across unlimited camera feeds. Transform surveillance into actionable insights with YOLOv8 computer vision. One platform for Workplace Safety, Traffic Analytics, Manufacturing QA, and Restaurant Operations."
          tag="AI Surveillance Revolution"
          tagIcon={Zap}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/a-modern-ai-powered-surveillance-dashboa-1772477572857-f81e1ae7.png?_wi=1"
          imageAlt="VisionSync AI surveillance dashboard with multi-camera feeds and real-time analytics"
          buttons={[
            { text: "Get Early Access", href: "#contact" },
            { text: "View Demo", href: "#features" }
          ]}
          mediaAnimation="slide-up"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Built for Enterprise Teams"
          description="Trusted by leading organizations across safety, logistics, manufacturing, and hospitality sectors."
          tag="Industry Leaders"
          names={[
            "Safety Operations",            "Traffic Management",            "Manufacturing QA",            "Hospitality Tech",            "Logistics Networks",            "Smart Cities",            "Enterprise Security"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
          speed={35}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardTwelve
          features={[
            {
              id: "connect",              label: "1",              title: "Connect Your Cameras",              items: [
                "MJPEG streaming support",                "Multi-camera synchronization",                "Zero GPU requirements for setup",                "Cloud and on-premise compatible"
              ]
            },
            {
              id: "process",              label: "2",              title: "AI Processes in Real-Time",              items: [
                "YOLOv8 computer vision engine",                "Custom training pipelines",                "25+ FPS processing capability",                "Configurable detection models"
              ]
            },
            {
              id: "insights",              label: "3",              title: "Get Actionable Insights",              items: [
                "WebSocket-powered dashboards",                "Smart alert system with severity levels",                "Historical analytics and trends",                "Export detection reports"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Process"
          tagIcon={Workflow}
          title="How VisionSync Works"
          description="A three-step flow from cameras to intelligent insights, powered by cutting-edge AI."
        />
      </div>

      <div id="industries" data-section="industries">
        <ProductCardThree
          products={[
            {
              id: "workplace",              name: "Workplace Safety",              price: "PPE Compliance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/a-live-demo-showing-visionsync-detecting-1772477572828-a28bf781.png",              imageAlt: "Workplace safety PPE detection interface",              initialQuantity: 1
            },
            {
              id: "traffic",              name: "Traffic Analytics",              price: "Vehicle Counting",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/traffic-analytics-dashboard-displaying-v-1772477572527-e78472d2.png?_wi=1",              imageAlt: "Traffic analytics and vehicle detection dashboard",              initialQuantity: 1
            },
            {
              id: "manufacturing",              name: "Manufacturing QA",              price: "Defect Detection",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/manufacturing-quality-control-screen-usi-1772477572965-8dd9f16a.png?_wi=1",              imageAlt: "Manufacturing quality control defect detection",              initialQuantity: 1
            },
            {
              id: "restaurant",              name: "Restaurant Ops",              price: "Occupancy Monitor",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/restaurant-operations-dashboard-monitori-1772477573813-8fce1c44.png?_wi=1",              imageAlt: "Restaurant occupancy and table management",              initialQuantity: 1
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          title="Industry Solutions"
          description="Specialized detection and analytics for four key verticals. Click to explore capabilities."
          tag="Vertical Solutions"
          tagIcon={Grid3x3}
        />
      </div>

      <div id="features" data-section="features">
        <MetricCardEleven
          metrics={[
            {
              id: "streaming",              value: "∞",              title: "Multi-Camera Support",              description: "Unlimited concurrent camera feeds and streams",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/a-modern-ai-powered-surveillance-dashboa-1772477572857-f81e1ae7.png?_wi=2",              imageAlt: "Multi-camera streaming dashboard"
            },
            {
              id: "alerts",              value: "100%",              title: "Smart Alert System",              description: "Configurable severity levels with real-time notifications",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/artistic-representation-of-ai-video-proc-1772477573050-67c8d435.png",              imageAlt: "Alert configuration and notification system"
            },
            {
              id: "accuracy",              value: "25+",              title: "Real-Time FPS",              description: "Fast inference speed with YOLOv8 optimization",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/technical-architecture-visualization-sho-1772477572910-370d8505.png",              imageAlt: "Performance metrics and FPS display"
            },
            {
              id: "training",              value: "Custom",              title: "Training Pipeline",              description: "Fine-tune models for your specific use cases",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/manufacturing-quality-control-screen-usi-1772477572965-8dd9f16a.png?_wi=2",              imageAlt: "Custom model training interface"
            },
            {
              id: "demo",              value: "GPU-Free",              title: "Demo Mode",              description: "Evaluate VisionSync without GPU infrastructure",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/restaurant-operations-dashboard-monitori-1772477573813-8fce1c44.png?_wi=2",              imageAlt: "Demo mode interface showing sample detections"
            },
            {
              id: "websocket",              value: "Live",              title: "WebSocket Dashboards",              description: "Sub-second latency data updates and streaming",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/traffic-analytics-dashboard-displaying-v-1772477572527-e78472d2.png?_wi=2",              imageAlt: "Live WebSocket dashboard with real-time updates"
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          title="Enterprise-Grade Features"
          description="Everything you need for production-ready AI surveillance at scale."
          tag="Capabilities"
          tagIcon={Sparkles}
        />
      </div>

      <div id="tech-stack" data-section="tech-stack">
        <SocialProofOne
          title="Built With Modern Technology"
          description="A modern tech stack designed for scale, performance, and developer experience."
          tag="Tech Stack"
          names={[
            "Next.js",            "FastAPI",            "YOLOv8",            "OpenCV",            "WebSockets",            "SQLite",            "Tailwind CSS"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
          speed={40}
        />
      </div>

      <div id="open-source" data-section="open-source">
        <TestimonialAboutCard
          tag="MIT License"
          title="Built in the Open"
          description="Contribute to VisionSync"
          subdescription="Star us on GitHub and join a community of AI developers"
          icon={Github}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOwG6UBG1VgAzptAMsnXE4YBZC/github-repository-showcase-with-prominen-1772477573905-a1d9f454.png"
          imageAlt="VisionSync GitHub repository with star count"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "How It Works", href: "#how-it-works" },
                { label: "Industries", href: "#industries" },
                { label: "Features", href: "#features" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "GitHub", href: "https://github.com/visionsync/ai-surveillance" },
                { label: "Documentation", href: "https://docs.visionsync.ai" },
                { label: "Blog", href: "https://blog.visionsync.ai" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Privacy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 VisionSync. Released under MIT License."
          bottomRightText="Made with AI and passion for computer vision"
        />
      </div>
    </ThemeProvider>
  );
}