"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="compact"
        sizing="mediumLargeSizeLargeTitles"
        background="grid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Products",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="VIN Tech"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="VIN Technology"
      description="Your trusted partner for complete smart home and office technology solutions. Expert sales and support for CCTV, water purification, solar energy, and electronics."
      buttons={[
        {
          text: "Explore Services",
          href: "#services",
        },
        {
          text: "Contact Us",
          href: "#contact",
        },
      ]}
      slides={[
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tepypu",
          imageAlt: "smart home technology service center",
        },
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oz3ixl&_wi=1",
          imageAlt: "cctv security surveillance system",
        },
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w9bjvj&_wi=1",
          imageAlt: "water purification system modern kitchen",
        },
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2oq2pj&_wi=1",
          imageAlt: "solar inverter battery system",
        },
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tqo13l&_wi=1",
          imageAlt: "modern smart television",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "CCTV Surveillance",
          subtitle: "24/7 Security Monitoring",
          category: "Protection",
          value: "High Definition",
          buttons: [
            {
              text: "Learn More",
              href: "#",
            },
          ],
        },
        {
          id: "f2",
          title: "RO Water Purifier",
          subtitle: "Pure Healthy Water",
          category: "Filtration",
          value: "Advanced Tech",
          buttons: [
            {
              text: "Learn More",
              href: "#",
            },
          ],
        },
        {
          id: "f3",
          title: "Solar Power",
          subtitle: "Efficient Inverters",
          category: "Energy",
          value: "Sustainability",
          buttons: [
            {
              text: "Learn More",
              href: "#",
            },
          ],
        },
      ]}
      title="Comprehensive Tech Services"
      description="We specialize in modern home and office hardware, providing seamless installation and expert maintenance."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Smart LED TV",
          price: "$450",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tqo13l&_wi=2",
        },
        {
          id: "p2",
          name: "Business PC",
          price: "$899",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=avcmhe",
        },
        {
          id: "p3",
          name: "4K Security Camera",
          price: "$120",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oz3ixl&_wi=2",
        },
        {
          id: "p4",
          name: "Solar Battery",
          price: "$300",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2oq2pj&_wi=2",
        },
        {
          id: "p5",
          name: "RO System",
          price: "$250",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w9bjvj&_wi=2",
        },
        {
          id: "p6",
          name: "Water Softener",
          price: "$180",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5nwwsq",
        },
      ]}
      title="Featured Hardware"
      description="Premium electronics and appliances tailored to your business and residential needs."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "500+",
          description: "Successful Installations",
        },
        {
          id: "m2",
          value: "10+ Years",
          description: "Market Experience",
        },
        {
          id: "m3",
          value: "98%",
          description: "Customer Satisfaction",
        },
      ]}
      title="Proven Excellence"
      description="Driven by innovation and commitment to customer satisfaction across every installation."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="VIN Tech provided a fast installation of our CCTV system. Very professional and clean work."
      rating={5}
      author="Rajesh Kumar"
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8ibt8t",
          alt: "satisfied customer tech support",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hsjn8u",
          alt: "home owner appliance installation",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bdipan",
          alt: "professional manager office tech",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qk0gmi",
          alt: "tech enthusiast solar installation",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k59mei",
          alt: "family modern kitchen appliance",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Do you provide after-sales service?",
          content: "Yes, all our installations come with professional maintenance support.",
        },
        {
          id: "q2",
          title: "Can you customize solar setups?",
          content: "Absolutely, we design solar systems according to your specific power load requirements.",
        },
        {
          id: "q3",
          title: "How quickly can you install CCTV?",
          content: "We offer same-day site assessment and quick installation schedules for most residential projects.",
        },
      ]}
      sideTitle="Tech Support FAQs"
      sideDescription="Common questions regarding our services and product support."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Tech Solutions",
        "Energy Corp",
        "Security Systems Inc",
        "Water Pure Tech",
        "Global Appliances",
        "Smart Grid Systems",
        "Digital Home Inc",
      ]}
      title="Trusted Partners"
      description="Working with industry leaders to bring you the best in technology."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Get in touch"
      title="Ready to upgrade your home?"
      description="Reach out today for a consultation or to schedule a service visit."
      buttons={[
        {
          text: "Contact Us",
          href: "mailto:vintech@example.com",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8rulef"
      logoText="VIN Technology"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#",
            },
            {
              label: "Services",
              href: "#services",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact",
              href: "#contact",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
          ],
        },
      ]}
      imageAlt="abstract digital connection background"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}