"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import PricingCardSeven from '@/components/sections/pricing/PricingCardSeven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TeamCardSeven from '@/components/sections/team/TeamCardSeven';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Calendar, CheckCircle, Crown, DollarSign, Facebook, Heart, HelpCircle, Instagram, Linkedin, Smile, Sparkles, Star, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="large"
      sizing="mediumSizeExtraLargeSpacing"
      background="floatingGradient"
      cardStyle="noise-gradient"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238990550-j5ojkxih.jpg"
          logoAlt="Premium Dental Boutique"
          brandName="Smile Aesthetic"
          button={{
            text: "Book Appointment",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplitImage
          logoText="SMILE AESTHETIC"
          description="Experience premium dental care in our luxury boutique clinic. Advanced treatments, expert dentists, and exceptional patient comfort."
          buttons={[
            {
              text: "Schedule Now",
              href: "#contact"
            },
            {
              text: "Learn Services",
              href: "#services"
            }
          ]}
          layoutOrder="default"
          splitImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238992978-o63iw1sb.jpg"
          splitImageAlt="Professional dentist providing premium care"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238991719-qftzvb3i.jpg"
          imageAlt="Modern luxury dental clinic interior"
          frameStyle="card"
          ariaLabel="Premium dental boutique hero section"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Patient Success"
          tagIcon={Star}
          title="Transformed my smile and confidence completely. The entire team made me feel welcome and cared for."
          description="Dr. Sarah Mitchell"
          subdescription="Cosmetic Dentistry Patient"
          icon={Heart}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766152144682-htnjk2vn.jpg"
          imageAlt="Happy patient with beautiful smile"
          useInvertedBackground="noInvert"
          ariaLabel="Patient testimonial section"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEighteen
          negativeCard={{
            title: "Standard Dentistry",
            items: [
              "Basic cleaning and checkups",
              "Standard whitening",
              "Simple fillings",
              "Limited aesthetics focus",
              "Longer appointment times"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238994426-le4hrb1j.jpg"
          }}
          positiveCard={{
            title: "Premium Boutique Dentistry",
            items: [
              "Comprehensive cosmetic treatments",
              "Advanced whitening technology",
              "Aesthetic restorations",
              "Personalized smile design",
              "Efficient luxury experience"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238995291-zfby5eag.jpg"
          }}
          animationType="slide-up"
          title="Why Choose Premium Boutique Care"
          description="Discover the difference between standard dental care and luxury boutique dentistry tailored to your unique smile."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Our Difference"
          tagIcon={Sparkles}
          ariaLabel="Service comparison section"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardSeven
          plans={[
            {
              id: "basic",
              tag: "STARTER",
              tagIcon: Smile,
              pricingOptions: [
                {
                  value: "visit",
                  label: "Per Visit",
                  price: "$150",
                  subtitle: "Standard cleaning"
                },
                {
                  value: "package",
                  label: "3-Visit Package",
                  price: "$399",
                  subtitle: "Save 11%"
                }
              ],
              defaultOption: "visit",
              selectorNote: "Package pricing available",
              description: "Comprehensive dental checkup and professional cleaning with consultation.",
              buttons: [
                {
                  text: "Book Cleaning",
                  href: "#contact"
                }
              ]
            },
            {
              id: "cosmetic",
              tag: "MOST POPULAR",
              tagIcon: Sparkles,
              pricingOptions: [
                {
                  value: "monthly",
                  label: "Single",
                  price: "$800",
                  subtitle: "Per treatment"
                },
                {
                  value: "package",
                  label: "Treatment Plan",
                  price: "$2,200",
                  subtitle: "3 sessions - Save 8%"
                }
              ],
              defaultOption: "package",
              selectorNote: "Premium whitening included",
              description: "Advanced cosmetic treatments including professional whitening, veneers, and smile design.",
              buttons: [
                {
                  text: "Start Transformation",
                  href: "#contact"
                }
              ]
            },
            {
              id: "premium",
              tag: "LUXURY",
              tagIcon: Crown,
              pricingOptions: [
                {
                  value: "single",
                  label: "Single Procedure",
                  price: "$2,500",
                  subtitle: "Custom restoration"
                },
                {
                  value: "comprehensive",
                  label: "Full Smile Makeover",
                  price: "$8,500",
                  subtitle: "Complete transformation"
                }
              ],
              defaultOption: "comprehensive",
              selectorNote: "Personalized consultation included",
              description: "Exclusive smile makeover with custom veneers, implants, and comprehensive aesthetic design.",
              buttons: [
                {
                  text: "Schedule Consultation",
                  href: "#contact"
                }
              ]
            }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          containerStyle="default"
          title="Premium Treatment Plans"
          description="Flexible pricing for every smile journey, from routine care to complete transformations."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Pricing"
          tagIcon={DollarSign}
          ariaLabel="Pricing section"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          metrics={[
            {
              id: "1",
              icon: Users,
              title: "Patients Served",
              value: "5,000+"
            },
            {
              id: "2",
              icon: Star,
              title: "Satisfaction Rate",
              value: "98%"
            },
            {
              id: "3",
              icon: Award,
              title: "Years Experience",
              value: "25+"
            },
            {
              id: "4",
              icon: Heart,
              title: "Smile Transformations",
              value: "3,200"
            }
          ]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          title="Clinic Excellence"
          description="Our commitment to quality care and patient satisfaction reflected in every number."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Why Us"
          tagIcon={CheckCircle}
          ariaLabel="Clinic metrics section"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSeven
          team={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238996469-lziler4p.jpg",
              imageAlt: "Dr. James Anderson, Lead Dentist"
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238997526-k6wdmrza.jpg",
              imageAlt: "Dr. Emma Collins, Cosmetic Specialist"
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238990550-j5ojkxih.jpg",
              imageAlt: "Lisa Park, Dental Hygienist"
            },
            {
              id: "4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238991719-qftzvb3i.jpg",
              imageAlt: "Rachel Thompson, Patient Coordinator"
            },
            {
              id: "5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238992978-o63iw1sb.jpg",
              imageAlt: "Michael Singh, Dental Assistant"
            },
            {
              id: "6",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766238998424-pr7g9r4o.jpg",
              imageAlt: "Jessica Lee, Clinical Assistant"
            }
          ]}
          title="Trusted by thousands of smiling patients"
          useInvertedBackground="noInvert"
          ariaLabel="Team section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          faqs={[
            {
              id: "1",
              title: "How often should I visit for dental checkups?",
              content: "We recommend professional cleanings and checkups every 6 months for optimal oral health. However, some patients with specific conditions may benefit from more frequent visits. During your consultation, we'll create a personalized care schedule based on your individual needs."
            },
            {
              id: "2",
              title: "What makes your clinic different from standard dentistry?",
              content: "Our boutique approach combines advanced cosmetic techniques with personalized care. We focus on aesthetic outcomes, use cutting-edge technology, and provide a luxury patient experience with shorter appointment times and maximum comfort."
            },
            {
              id: "3",
              title: "How long do teeth whitening results last?",
              content: "Professional whitening results typically last 6-12 months depending on your lifestyle and habits. We provide custom trays for maintenance touch-ups at home. Avoiding staining foods and beverages can extend results significantly."
            },
            {
              id: "4",
              title: "Are cosmetic treatments covered by insurance?",
              content: "Most cosmetic treatments are not covered by standard dental insurance as they're considered elective. However, we offer flexible payment plans and can provide documentation for FSA/HSA accounts. Our team will review all options during your consultation."
            },
            {
              id: "5",
              title: "What is the recovery time for dental implants?",
              content: "Initial healing takes about 7-10 days, with complete osseointegration occurring over 3-6 months. We provide detailed aftercare instructions and follow-up appointments to ensure proper healing. Most patients resume normal activities within 1-2 weeks."
            },
            {
              id: "6",
              title: "Do you offer emergency dental services?",
              content: "Yes, we reserve appointment slots for urgent dental issues. If you experience severe pain or damage, please call our emergency line. We prioritize emergency cases and will schedule you as quickly as possible."
            }
          ]}
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services, treatments, and patient care."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          tag="Help"
          tagIcon={HelpCircle}
          ariaLabel="Frequently asked questions section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Calendar}
          title="Ready for Your Smile Transformation"
          description="Schedule a consultation with our team to discuss your dental goals and discover how we can create your perfect smile."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Schedule Now"
          termsText="We respect your privacy. We'll only use your information to confirm your appointment."
          ariaLabel="Contact and appointment section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Smile Aesthetic"
          copyrightText="© 2025 Smile Aesthetic Boutique Dentistry. All rights reserved."
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com",
              ariaLabel: "Facebook"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",
              ariaLabel: "LinkedIn"
            }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}