"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Activity, Download, MapPin, Shield, Upload, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmallSizeLargeTitles"
        background="fluid"
        cardStyle="soft-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Features",
          id: "features",
        },
        {
          name: "FAQ",
          id: "faq",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="PakSpeed"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "sparkles-gradient",
      }}
      title="Check Your Speed in Pakistan"
      description="Get accurate real-time data on your connection speed specifically optimized for Pakistan-based IP addresses. Fast, reliable, and precise."
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg",
          imageAlt: "digital internet speed test dashboard",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg",
          imageAlt: "fiber optic cable data transfer",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blue-vivid-optic-fiber_23-2148779320.jpg",
          imageAlt: "modern network analytics UI",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/server-cloud-data-storage-concept-cloudscape-digital-online-service-global-network-web-database-backup-computer-infrastructure_90220-1318.jpg",
          imageAlt: "digital server connectivity map",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/spaceship-crew-member-stressed-by-unknown-hull-breach-causing-alarm-sound_482257-126223.jpg",
          imageAlt: "digital network speed gauge",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg",
          imageAlt: "abstract data signals nodes",
        },
      ]}
      buttons={[
        {
          text: "Run Speed Test",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Why Test Locally?"
      metrics={[
        {
          icon: MapPin,
          label: "Region Specific",
          value: "Pakistan",
        },
        {
          icon: Zap,
          label: "Latency",
          value: "Low MS",
        },
        {
          icon: Shield,
          label: "Accuracy",
          value: "99.9%",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSix
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Local Server Routing",
          description: "Connected to servers within Pakistan for the most accurate latency reporting.",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-couple-vacation_23-2147978877.jpg",
          imageAlt: "location detection icon",
        },
        {
          title: "Ping Monitoring",
          description: "Detect real-time delays with granular millisecond tracking tools.",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-taking-photos_23-2149155171.jpg",
          imageAlt: "network latency test result",
        },
        {
          title: "Bandwidth Analysis",
          description: "Detailed breakdown of your current upload and download capabilities.",
          imageSrc: "http://img.b2bpic.net/free-photo/data-information-analytics-perfomance-concept_53876-167154.jpg",
          imageAlt: "upload download speed comparison",
        },
      ]}
      title="Pro Features"
      description="Designed for Pakistani users who need to monitor their local bandwidth performance."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Download,
          title: "Download",
          value: "100Mbps",
        },
        {
          id: "m2",
          icon: Upload,
          title: "Upload",
          value: "50Mbps",
        },
        {
          id: "m3",
          icon: Activity,
          title: "Latency",
          value: "12ms",
        },
      ]}
      title="Network Insights"
      description="Understand your current digital performance parameters."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "PTCL",
        "StormFiber",
        "Nayatel",
        "Transworld",
        "Zong",
        "Jazz",
        "Telenor",
      ]}
      title="Supported by Local Networks"
      description="We work with top providers across the region."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Why does it only work for Pakistan?",
          content: "Our servers are geographically located within Pakistan to provide local latency and true bandwidth stats.",
        },
        {
          id: "q2",
          title: "Is my data stored?",
          content: "We do not store your personal data, only anonymous speed metrics for regional analysis.",
        },
        {
          id: "q3",
          title: "How often should I test?",
          content: "We recommend testing at different times of the day to get a clear picture of your ISP's performance.",
        },
      ]}
      title="Common Questions"
      description="Everything you need to know about testing your speeds."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "gradient-bars",
      }}
      text="Need professional network diagnostics for your business in Pakistan?"
      buttons={[
        {
          text: "Contact Support",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/technological-blue-background-circuit_1017-3795.jpg"
      logoText="PakSpeed"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Speed Test",
              href: "#",
            },
            {
              label: "Network Stats",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#",
            },
            {
              label: "Support",
              href: "#",
            },
          ],
        },
      ]}
      imageAlt="futuristic digital network city"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
