"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Periogen"
          navItems={[
            { name: "Products", id: "products" },
            { name: "Benefits", id: "benefits" },
            { name: "Reviews", id: "reviews" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Shop Now",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="Periogen"
          description="Premium dental care products designed for a brighter, healthier smile. Discover the power of our advanced dust rinse and toothpaste formulations."
          layoutOrder="default"
          buttons={[
            { text: "Shop Products", href: "#products" },
            { text: "Learn More", href: "#benefits" }
          ]}
          buttonAnimation="slide-up"
          mediaAnimation="slide-up"
          frameStyle="card"
          imageSrc="http://img.b2bpic.net/free-photo/toothpaste-tube-squeezing-out-white-cream_23-2152003246.jpg"
          imageAlt="Periogen premium toothpaste and dust rinse collection"
          background={{ variant: "plain" }}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Our Product Range"
          description="Carefully crafted formulations for optimal oral health and radiant smiles"
          tag="Products"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "1",              brand: "Periogen",              name: "Advanced Toothpaste",              price: "$24.99",              rating: 5,
              reviewCount: "1.2k",              imageSrc: "http://img.b2bpic.net/free-photo/toothpaste-tube-squeezing-out-white-cream_23-2152003246.jpg",              imageAlt: "Periogen Advanced Toothpaste"
            },
            {
              id: "2",              brand: "Periogen",              name: "Professional Dust Rinse",              price: "$32.99",              rating: 5,
              reviewCount: "890",              imageSrc: "http://img.b2bpic.net/free-photo/soap-toiletries-shelf-blue-bathroom_93675-134989.jpg",              imageAlt: "Periogen Professional Dust Rinse"
            },
            {
              id: "3",              brand: "Periogen",              name: "Complete Care Bundle",              price: "$49.99",              rating: 5,
              reviewCount: "650",              imageSrc: "http://img.b2bpic.net/free-photo/toothbrush_93675-132313.jpg",              imageAlt: "Periogen Complete Care Bundle"
            }
          ]}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureCardEight
          title="Why Choose Periogen"
          description="Experience the difference premium dental care makes with our scientifically formulated products"
          tag="Benefits"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Advanced Whitening",              description: "Clinically proven formula delivers noticeably whiter teeth in just two weeks with gentle, effective ingredients",              imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-having-fun-street-wearing-white-funny-dress-white-headphones_291049-2261.jpg"
            },
            {
              id: 2,
              title: "Superior Protection",              description: "Multi-layer protection against plaque, tartar, and cavities with our patented dust rinse technology",              imageSrc: "http://img.b2bpic.net/free-photo/dentist-pov-checking-patient-teeth-hygine-using-drill-fix-dental-cavity-stomatolog-wearing-safety-gear-against-coronavirus-heatlhcare-check-patient_482257-12450.jpg"
            },
            {
              id: 3,
              title: "Fresh Breath Guarantee",              description: "Long-lasting fresh breath confidence with our advanced mint formulation that lasts up to 12 hours",              imageSrc: "http://img.b2bpic.net/free-vector/dental-care-products-realistic-poster_1284-29821.jpg"
            },
            {
              id: 4,
              title: "Natural Ingredients",              description: "Formulated with premium natural extracts that are gentle on enamel while delivering powerful results",              imageSrc: "http://img.b2bpic.net/free-photo/different-natural-self-care-products-composition_23-2148989969.jpg"
            }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardFifteen
          testimonial="Periogen has completely transformed my daily oral care routine. The results are remarkable, and I've never felt more confident about my smile. Highly recommend!"
          rating={5}
          author="Sarah Johnson, Dental Professional"
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "Sarah Johnson" },
            { src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "Michael Chen" },
            { src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "Emily Rodriguez" },
            { src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "David Kim" }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about Periogen products and oral care"
          tag="Support"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaPosition="left"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          animationType="smooth"
          imageSrc="http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg"
          imageAlt="Healthy smile with Periogen products"
          faqs={[
            {
              id: "1",              title: "How often should I use Periogen toothpaste?",              content: "We recommend using Periogen Advanced Toothpaste twice daily, morning and night, just like any regular toothpaste. For best results with our dust rinse, use it once daily after brushing."
            },
            {
              id: "2",              title: "Is Periogen safe for sensitive teeth?",              content: "Yes! Our formula is specifically designed to be gentle on enamel while providing powerful cleaning. If you have extremely sensitive teeth, consult your dentist, and consider our sensitivity-formula variant."
            },
            {
              id: "3",              title: "When will I see whitening results?",              content: "Most users notice visible results within 2-3 weeks of consistent use. Optimal results typically appear after 6-8 weeks. Results vary based on starting tooth color and lifestyle factors."
            },
            {
              id: "4",              title: "Can I use both products together?",              content: "Absolutely! Using both Periogen toothpaste and dust rinse together creates a comprehensive oral care routine that maximizes protection and whitening benefits."
            },
            {
              id: "5",              title: "What makes Periogen different?",              content: "Periogen combines advanced dust rinse technology with premium natural ingredients, clinically proven formulations, and superior whitening capabilities. All products are dentist-approved and enamel-safe."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Join Our Smile Revolution"
          description="Subscribe to get exclusive offers, oral care tips, and early access to new Periogen products"
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Periogen"
          columns={[
            {
              items: [
                { label: "Shop", href: "#products" },
                { label: "Benefits", href: "#benefits" },
                { label: "Reviews", href: "#reviews" }
              ]
            },
            {
              items: [
                { label: "About", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" },
                { label: "Warranty", href: "#" }
              ]
            },
            {
              items: [
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
