"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, Shield, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="CyberGuard"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="CyberGuard"
      description="Proactive protection for your digital assets. We provide elite cybersecurity intelligence to secure your business ecosystem against evolving threats."
      buttons={[
        {
          text: "Get Protected",
          href: "#contact",
        },
        {
          text: "View Pricing",
          href: "#pricing",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concept_23-2152004046.jpg",
          imageAlt: "Data Protection",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637784.jpg",
          imageAlt: "Secure Shield",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/programmer-walking-data-center-coding-laptop_482257-124794.jpg",
          imageAlt: "Server Security",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-cool-background_181624-21208.jpg",
          imageAlt: "Firewall System",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/technology-enter-password-security-graphic-concept_53876-123748.jpg",
          imageAlt: "Authentication",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/commander-communicating-with-allied-forces-transmitting-data_482257-90016.jpg",
          imageAlt: "Network Defense",
        },
      ]}
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Enterprise Data",
        "Cloud Guard",
        "Tech Sync",
        "Secure Corp",
        "Shield Net",
        "Inno Sec",
        "Data Shield",
      ]}
      title="Securing Global Leaders"
      description="Trusted by industry experts to defend the infrastructure of the future."
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",
          content: "Our Mission is Total Digital Sovereignty",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/trans-man-work-with-laptop_23-2149409845.jpg",
          alt: "Team",
        },
      ]}
      buttons={[
        {
          text: "Read Our Vision",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        {
          title: "Zero Trust Architecture",
          description: "Strict verification, least privilege, and continuous monitoring.",
          imageSrc: "http://img.b2bpic.net/free-photo/gradient-technology-background_23-2151895855.jpg",
          imageAlt: "Zero Trust",
        },
        {
          title: "Real-time Analytics",
          description: "Detect threats before they escalate into breaches.",
          imageSrc: "http://img.b2bpic.net/free-vector/technology-logo-template_23-2150529433.jpg",
          imageAlt: "Real-time",
        },
        {
          title: "Threat Intel Feeds",
          description: "Global database of emerging vectors for early prevention.",
          imageSrc: "http://img.b2bpic.net/free-photo/technician-using-laptop-data-center-managing-servers_482257-124813.jpg",
          imageAlt: "Threat Intel",
        },
      ]}
      title="Cyber Security Capabilities"
      description="Comprehensive defense strategies tailored to your enterprise scale."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "starter",
          price: "$1,999/mo",
          name: "Starter",
          buttons: [
            {
              text: "Start Plan",
              href: "#",
            },
          ],
          features: [
            "Security Scan",
            "Basic Firewall",
            "Email Support",
          ],
        },
        {
          id: "enterprise",
          price: "$4,999/mo",
          name: "Enterprise",
          buttons: [
            {
              text: "Choose Enterprise",
              href: "#",
            },
          ],
          features: [
            "24/7 Monitoring",
            "Zero Trust Setup",
            "Priority Support",
          ],
        },
        {
          id: "custom",
          price: "Custom",
          name: "Enterprise Plus",
          buttons: [
            {
              text: "Contact Us",
              href: "#contact",
            },
          ],
          features: [
            "Dedicated SOC",
            "Global Infrastructure",
            "Tailored Defense",
          ],
        },
      ]}
      title="Defensive Tiers"
      description="Flexible plans designed to grow with your infrastructure demands."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Shield,
          title: "Threats Blocked",
          value: "1.2M+",
        },
        {
          id: "m2",
          icon: Zap,
          title: "Response Time",
          value: "< 5ms",
        },
        {
          id: "m3",
          icon: Award,
          title: "Client Retention",
          value: "99.8%",
        },
      ]}
      title="Proven Efficacy"
      description="Data-driven results ensuring peace of mind across our client base."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="CyberGuard transformed our security posture completely. We've had zero incidents since integration."
      rating={5}
      author="Sarah Miller, CTO"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/four-multiethnic-colleagues-looking-computer-screen-office_93675-134937.jpg",
          alt: "Sarah",
        },
        {
          src: "http://img.b2bpic.net/free-photo/people-around-computer_23-2149370613.jpg",
          alt: "Mark",
        },
        {
          src: "http://img.b2bpic.net/free-photo/group-graphic-designers-using-digital-tablet_1170-772.jpg",
          alt: "Lisa",
        },
        {
          src: "http://img.b2bpic.net/free-photo/multiracial-workers-using-laptop-device-write-emails-solving-tasks_482257-123663.jpg",
          alt: "David",
        },
        {
          src: "http://img.b2bpic.net/free-photo/call-center-team-agents-wearing-headset-assisting-customers_482257-125962.jpg",
          alt: "James",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Is integration slow?",
          content: "Deployment takes minutes with our managed automation tools.",
        },
        {
          id: "q2",
          title: "Can you scale?",
          content: "Our infra supports everything from SMBs to Fortune 500.",
        },
        {
          id: "q3",
          title: "Do you provide SOC?",
          content: "Yes, dedicated 24/7 Security Operations Center services are available.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/mystery-box-collage_23-2150061729.jpg"
      mediaAnimation="slide-up"
      title="Defensive Queries"
      description="Common answers to your protection questions."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "animated-grid",
      }}
      title="Secure Your Future"
      description="Ready to fortify your perimeter? Reach out to our engineers."
      imageSrc="http://img.b2bpic.net/free-photo/experienced-call-center-employee-listening-customer-inquiries_482257-125965.jpg"
      mediaAnimation="slide-up"
      tag="Contact Us"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="CyberGuard"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Security",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Compliance",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
