"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="LuxeStudio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="LuxeStudio"
      description="Elevating your local experience with premium craftsmanship and an approachable, modern touch. Discover the difference of excellence."
      buttons={[
        {
          text: "Book Now",
          href: "#contact",
        },
        {
          text: "Learn More",
          href: "#about",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-futuristic-building_181624-26791.jpg",
          imageAlt: "Luxurious studio interior",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-tailor-working-leather-fabric_1303-23389.jpg",
          imageAlt: "Artisanal detail focus",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/keto-diet-food-still-life_23-2149278978.jpg",
          imageAlt: "Minimalist premium setting",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/classic-apartment-decoration-lamp-metal_1203-4547.jpg",
          imageAlt: "Warm approachable lighting",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/led-drawer-blue-fronts-minimal-kitchen_169016-69301.jpg",
          imageAlt: "Modern design aesthetic",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/view-modern-futuristic-work-space-with-furniture_23-2151797732.jpg",
          imageAlt: "Refined customer service",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Crafting Excellence"
      description="Founded with the mission to bring a premium, human-centric approach to local services. We prioritize quality and trust above all."
      metrics={[
        {
          value: "10+",
          title: "Years Experience",
        },
        {
          value: "500+",
          title: "Satisfied Clients",
        },
        {
          value: "24/7",
          title: "Support",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/forensic-examiners-having-discussion_1098-16316.jpg"
      imageAlt="About us photo"
      mediaAnimation="slide-up"
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      negativeCard={{
        items: [
          "Limited custom support",
          "Standard processing times",
        ],
      }}
      positiveCard={{
        items: [
          "Personalized strategy session",
          "Priority premium access",
          "Lifetime maintenance included",
        ],
      }}
      title="Our Premium Services"
      description="Tailored solutions designed to exceed your expectations."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Microsoft",
        "Google",
        "Apple",
        "Amazon",
        "Tesla",
        "Adobe",
        "Nike",
      ]}
      title="Trusted by Leaders"
      description="Join thousands of clients who trust us with their needs."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah J.",
          imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg",
        },
        {
          id: "t2",
          name: "Michael R.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12324.jpg",
        },
        {
          id: "t3",
          name: "Elena V.",
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-blond-business-woman-standing-with-coffee-cup_23-2148095744.jpg",
        },
        {
          id: "t4",
          name: "David W.",
          imageSrc: "http://img.b2bpic.net/free-photo/girl-beautifully-painted-brown-eyes-with-eyeliner-highlighting-features-face-model-red-blouse-sends-air-kiss_197531-12005.jpg",
        },
        {
          id: "t5",
          name: "Jessica M.",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg",
        },
      ]}
      cardTitle="Client Stories"
      cardTag="Reviews"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split-description"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "How do I book?",
          content: "Just use the contact form at the bottom.",
        },
        {
          id: "f2",
          title: "What is the turnaround?",
          content: "We pride ourselves on efficient, high-quality delivery.",
        },
        {
          id: "f3",
          title: "Are you fully licensed?",
          content: "Yes, we meet all industry standards.",
        },
      ]}
      title="Common Questions"
      description="Everything you need to know about our process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "gradient-bars",
      }}
      tag="Booking"
      title="Start Your Experience"
      description="Leave your email and our team will get in touch shortly to schedule your consultation."
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-woman-working-as-interior-designer_23-2150346509.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="LuxeStudio"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Premium",
              href: "#services",
            },
            {
              label: "Consulting",
              href: "#services",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
