"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "About",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Asra Protection Services"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="Asra Protection Services"
      description="Professional-grade security solutions dedicated to protecting your assets, personnel, and peace of mind. Excellence in every detail."
      buttons={[
        {
          text: "Get Protected",          href: "#contact"},
        {
          text: "Our Approach",          href: "#about"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/security-guards-patrolling-building-interior_23-2148421040.jpg",          imageAlt: "Security personnel on patrol"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/security-camera-monitoring-system-control-room_23-2149372480.jpg",          imageAlt: "Advanced surveillance monitoring"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-building-entrance_23-2148197178.jpg",          imageAlt: "Secure facility entrance"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-security-guard-radio-communication_23-2148421048.jpg",          imageAlt: "Professional communication"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Secure & Vigilant"
      description="Founded on the principles of integrity and operational excellence. We provide comprehensive security protocols tailored to modern environmental risks."
      metrics={[
        {
          value: "15+",          title: "Years Expertise"},
        {
          value: "200+",          title: "Secure Sites"},
        {
          value: "24/7",          title: "Operations"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/professional-security-team-meeting_1098-16316.jpg"
      imageAlt="Our expert security team"
      mediaAnimation="slide-up"
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      negativeCard={{
        items: [
          "Basic perimeter monitoring",          "Slow response times"],
      }}
      positiveCard={{
        items: [
          "Advanced Threat Intelligence",          "Armed & Unarmed Protection",          "Executive Security Services"],
      }}
      title="Security Capabilities"
      description="Tailored protection strategies designed for maximum coverage and reliability."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Global Logistics",        "Financial Hubs",        "Data Centers",        "Retail Chains",        "Corporate HQ",        "Government Agencies",        "Residential Complexes"]}
      title="Protecting Leaders"
      description="Trusted by institutions that demand the highest level of security standards."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "James K., Facilities Manager",          imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-professional-suit-office_23-2148112202.jpg"},
        {
          id: "t2",          name: "Elena M., Bank Director",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-business-woman-standing-with-portfolio_23-2148095744.jpg"},
        {
          id: "t3",          name: "Robert D., Event Coordinator",          imageSrc: "http://img.b2bpic.net/free-photo/professional-looking-man-portrait_107420-12324.jpg"},
      ]}
      cardTitle="Proven Results"
      cardTag="Testimonials"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split-description"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "What areas do you serve?",          content: "We provide protection services across metropolitan and remote regional sectors."},
        {
          id: "f2",          title: "Are guards trained and licensed?",          content: "Yes, all personnel are background-checked and hold valid security certifications."},
        {
          id: "f3",          title: "Do you provide 24/7 security?",          content: "Absolutely. Our command center operates non-stop to ensure immediate response."},
      ]}
      title="Security Insights"
      description="Everything you need to know about our protection protocols."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "gradient-bars"}}
      tag="Inquiries"
      title="Request a Consultation"
      description="Secure your property today. Leave your details below, and our experts will conduct a site security assessment."
      imageSrc="http://img.b2bpic.net/free-photo/security-officer-working-night-shift_23-2150346509.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Asra Protection Services"
      columns={[
        {
          title: "Security",          items: [
            { label: "About Us", href: "#about" },
            { label: "Services", href: "#services" },
          ],
        },
        {
          title: "Contact",          items: [
            { label: "Get Help", href: "#contact" },
            { label: "FAQ", href: "#faq" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}