"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { CheckCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        { name: "Benefits", id: "#about" },
        { name: "Features", id: "#features" },
        { name: "Testimonials", id: "#testimonials" },
        { name: "FAQ's", id: "#faq" },
      ]}
      brandName="FaceKit"
      button={{ text: "Download App", href: "#" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{ variant: "gradient-bars" }}
      title="Master Your Facial Symmetry with AI-Driven Insights"
      description="FaceKit delivers real-time 3D facial analysis, personalized feedback, and progress tracking powered by TrueDepth technology."
      tag="Advanced AI Analysis"
      buttons={[{ text: "Get Started", href: "#" }]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg", imageAlt: "3d facial analysis ui dark mode" },
        { imageSrc: "http://img.b2bpic.net/free-photo/face-recognition-personal-identification-collage_23-2150165573.jpg", imageAlt: "3d face scan wireframe" }
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 50,000+ users worldwide"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Real Measurements, Not Vague Ratings"
      description="FaceKit replaces guesswork with precise 3D data. Understand your facial structure through advanced algorithms that provide actionable, personalized insights."
      metrics={[
        { value: "3D", title: "Facial Scans" },
        { value: "100%", title: "Data Accuracy" },
        { value: "24/7", title: "Track Progress" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/facial-recognition-id-verification-technology_23-2152004085.jpg"
      imageAlt="biometric face scanner interface"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "3D Facial Mapping",          description: "Get deep insight into your facial metrics with high-precision scans that track even the smallest changes over time.",          media: { imageSrc: "http://img.b2bpic.net/free-photo/business-work-area_1388-82.jpg", imageAlt: "data progress tracking app" },
          items: [
            { icon: CheckCircle, text: "Real-time accuracy" },
            { icon: CheckCircle, text: "Structured measurement points" },
          ],
          reverse: false
        },
      ]}
      title="Everything You Need to Track Progress"
      description="Transform your routine with tools designed for modern facial improvement."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "95%",          title: "User Satisfaction",          description: "Users report improved routine consistency.",          imageSrc: "http://img.b2bpic.net/free-photo/high-tech-office-ready-stock-trading_482257-121465.jpg"
        },
        {
          id: "m2",          value: "100k+",          title: "Scans Performed",          description: "Thousands of users trust our data.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-illustration-human-face-design_460848-8147.jpg"
        },
        {
          id: "m3",          value: "24/7",          title: "Continuous Access",          description: "Track your progress whenever.",          imageSrc: "http://img.b2bpic.net/free-photo/facial-recognition-collage-concept_23-2150038886.jpg"
        },
      ]}
      title="Data That Actually Matters"
      description="See your improvements in real numbers. Our tracking makes facial analysis transparent."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        { id: "1", name: "Noah Temple", imageSrc: "http://img.b2bpic.net/free-photo/closeup-goodlooking-tender-friendly-pretty-middleaged-30s-woman-extend-arm-hold-camera-hand-smiling-broadly-taking-selfie-photographing-record-videomessage-calling-husband_176420-51274.jpg" },
        { id: "2", name: "Lando Dawson", imageSrc: "http://img.b2bpic.net/free-photo/man-smiling_1187-3402.jpg" },
        { id: "3", name: "Lucia Rosberg", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-965.jpg" },
        { id: "4", name: "Oliver Quinn", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9660.jpg" },
        { id: "5", name: "Marcus Thorne", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-bearded-young-man-from-spain-elegant-gray-shirt_181624-58370.jpg" },
      ]}
      cardTitle="What Our Users Say"
      cardTag="Testimonials"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "How accurate is the 3D scan?", content: "FaceKit utilizes high-precision TrueDepth sensors for clinically accurate measurements." },
        { id: "f2", title: "Can I share my progress?", content: "Yes, you can easily export and share your progress charts directly from the app." },
        { id: "f3", title: "What device do I need?", content: "FaceKit is optimized for modern iOS devices equipped with TrueDepth camera arrays." },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/global-communication-hd-wallpaper-business-network-design_53876-153352.jpg"
      title="Frequently Asked Questions"
      description="Answers to common questions about your facial tracking journey."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{ variant: "rotated-rays-static" }}
      text="Ready to transform your facial routine? Contact us at contact@facekitapp.com for support or inquiries."
      buttons={[{ text: "Contact Support", href: "mailto:contact@facekitapp.com" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Benefits", href: "#about" }, { label: "Features", href: "#features" }, { label: "Testimonials", href: "#testimonials" }] },
        { items: [{ label: "FAQ's", href: "#faq" }, { label: "Privacy Policy", href: "#" }] },
      ]}
      logoText="FaceKit Pro"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}