"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeLargeTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "System",
          id: "product-preview",
        },
        {
          name: "Proof",
          id: "testimonials",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "FAQ",
          id: "faq",
        },
      ]}
      brandName="GLOW-UP"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardScroll
      background={{
        variant: "radial-gradient",
      }}
      title="Your Face Isn't the Problem. Your System Is."
      description="The complete blueprint to fix bloating, sharpen your jawline, improve facial structure, and glow up fast."
      buttons={[
        {
          text: "Unlock Your Glow-Up Now",
          href: "#pricing",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-young-caucasian-female-with-long-blonde-hair-nice-face-bright-earrings-white-suit_132075-9619.jpg?_wi=1"
    />
  </div>

  <div id="product-preview" data-section="product-preview">
      <FeatureCardNine
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Face Debloat Protocol",
          description: "Reduce water retention and reveal your natural structure.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-kit-collection_23-2149204203.jpg",
            imageAlt: "Icon",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-vector/luxury-business-logo-set_53876-115910.jpg",
            imageAlt: "Icon",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-caucasian-female-with-long-blonde-hair-nice-face-bright-earrings-white-suit_132075-9619.jpg?_wi=2",
          imageAlt: "minimal gold icon design",
        },
        {
          title: "Jawline Optimization",
          description: "Techniques to sharpen and define your bone structure.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/woman-reading-e-mail-letter-laptop-screen_1163-3818.jpg",
            imageAlt: "Icon",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/woman-touching-her-ideal-skin_633478-486.jpg",
            imageAlt: "Icon",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-3d-rendering-modern-tech-device_187299-46717.jpg",
          imageAlt: "minimal gold icon design",
        },
        {
          title: "Hormone Optimization",
          description: "Internal systems that drive facial definition.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/everyday-home-utensils-dark-marble-background_58702-17786.jpg",
            imageAlt: "Icon",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/female-male-gender-symbols-close-up_23-2148419681.jpg",
            imageAlt: "Icon",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg",
          imageAlt: "minimal gold icon design",
        },
        {
          title: "Skin & Glow Guide",
          description: "Surface level optimization for maximum shine.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/yellow-smoke-curl-black-background-with-copy-space-writing-text_23-2148092828.jpg",
            imageAlt: "Icon",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-glasses-pink-backdrop_23-2147948651.jpg",
            imageAlt: "Icon",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/combination-facial-features-concept_23-2150039743.jpg?_wi=1",
          imageAlt: "minimal gold icon design",
        },
        {
          title: "Daily Routine Blueprint",
          description: "Habits that build long-term structure.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/close-up-picture-cheerful-attractive-young-female-secretary-with-hair-knot-bright-make-up-drinking-coffee-tea-looking-smiling-joyfully_343059-2972.jpg?_wi=1",
            imageAlt: "Icon",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-vector/business-concepts_23-2147501681.jpg",
            imageAlt: "Icon",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/profile-view-fierce-displeased-young-caucasian-male-with-goatee-mustache-stylish-haircut-poising-isolated-white-t-shirt-looking-away-with-angry-offended-expression-does-want-talk_343059-4270.jpg?_wi=1",
          imageAlt: "minimal gold icon design",
        },
        {
          title: "Hidden Mistakes",
          description: "Avoid the common errors ruining your progress.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-crossed-arms-against-concrete-backdrop_23-2148130266.jpg?_wi=1",
            imageAlt: "Icon",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/alert-sign-front-side_187299-39177.jpg",
            imageAlt: "Icon",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/woman-smiles-positively-feels-free-dressed-beige-jacket-has-happy-expression-strolls-ancient-city-enjoys-excursion_273609-54765.jpg?_wi=1",
          imageAlt: "minimal gold icon design",
        },
      ]}
      showStepNumbers={false}
      title="The Ultimate Transformation Bundle"
      description="Everything you need to optimize your facial aesthetics."
    />
  </div>

  <div id="transformations" data-section="transformations">
      <TeamCardTen
      useInvertedBackground={false}
      title="Real Transformations. No Surgery."
      tag="Results"
      members={[
        {
          id: "t1",
          name: "7 days difference",
          imageSrc: "http://img.b2bpic.net/free-photo/combination-facial-features-concept_23-2150039743.jpg?_wi=2",
        },
        {
          id: "t2",
          name: "Protocol consistency",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-picture-cheerful-attractive-young-female-secretary-with-hair-knot-bright-make-up-drinking-coffee-tea-looking-smiling-joyfully_343059-2972.jpg?_wi=2",
        },
        {
          id: "t3",
          name: "Structured changes",
          imageSrc: "http://img.b2bpic.net/free-photo/profile-view-fierce-displeased-young-caucasian-male-with-goatee-mustache-stylish-haircut-poising-isolated-white-t-shirt-looking-away-with-angry-offended-expression-does-want-talk_343059-4270.jpg?_wi=2",
        },
      ]}
      memberVariant="card"
      membersAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Liam K.",
          handle: "@user1",
          testimonial: "My face got slimmer in 3 days. Unreal results.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-crossed-arms-against-concrete-backdrop_23-2148130266.jpg?_wi=2",
        },
        {
          id: "2",
          name: "Marcus R.",
          handle: "@user2",
          testimonial: "Jawline is finally visible. Best investment.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-smiles-positively-feels-free-dressed-beige-jacket-has-happy-expression-strolls-ancient-city-enjoys-excursion_273609-54765.jpg?_wi=2",
        },
        {
          id: "3",
          name: "Ethan J.",
          handle: "@user3",
          testimonial: "Didn't expect this to actually work.",
          imageSrc: "http://img.b2bpic.net/free-photo/hispanic-man-standing-blue-background-strong-person-showing-arm-muscle-confident-proud-power_839833-1629.jpg",
        },
        {
          id: "4",
          name: "Noah S.",
          handle: "@user4",
          testimonial: "Game changer for my daily routine.",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-sitting-couch_23-2148415931.jpg",
        },
        {
          id: "5",
          name: "Jacob M.",
          handle: "@user5",
          testimonial: "Protocol is easy to follow and very effective.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-posing-outside_176420-3991.jpg",
        },
      ]}
      title="4.8/5 Rated by 3,500+ Customers"
      description="Don't just take our word for it."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          badge: "Limited Drop",
          price: "$9.99",
          subtitle: "Full access to all protocols",
          features: [
            "Face Debloat",
            "Jawline Guide",
            "Hormone Optimization",
            "Skin Guide",
            "Daily Routine",
          ],
        },
      ]}
      title="Get The Blueprint Today"
      description="Total value $136. Your price: $9.99."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Is this safe?",
          content: "Yes, all protocols are non-invasive and habit-based.",
        },
        {
          id: "f2",
          title: "How fast will I see results?",
          content: "Most users see visible reduction in bloat within 3-7 days.",
        },
        {
          id: "f3",
          title: "Do I need supplements?",
          content: "No, this is purely natural protocol-based guidance.",
        },
        {
          id: "f4",
          title: "Is this for beginners?",
          content: "Yes, everything is explained in simple steps.",
        },
        {
          id: "f5",
          title: "How do I access?",
          content: "Instant digital delivery via email upon purchase.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Everything you need to know."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "System",
          items: [
            {
              label: "Product",
              href: "#product-preview",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 GLOW-UP BLUEPRINT"
      bottomRightText="Instant Digital Delivery"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
