"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Users, Stethoscope, Award, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="DRA. PEREA ZARAGOZA"
          navItems={[
            { name: "Inicio", id: "#home" },
            { name: "Servicios", id: "#services" },
            { name: "Sobre Nosotros", id: "#about" },
            { name: "Equipo", id: "#team" },
            { name: "Testimonios", id: "#testimonials" },
            { name: "FAQ", id: "#faq" },
            { name: "Contacto", id: "#contact" }
          ]}
          logoSrc="http://img.b2bpic.net/free-vector/clean-dent-dental-clinic-template_742173-32587.jpg"
          logoAlt="CLINICA DENTAL DRA. PEREA ZARAGOZA Logo"
          button={{ text: "Pedir Cita", href: "#contact" }}
        />
      </div>
      <div id="home" data-section="home">
        <HeroBillboardRotatedCarousel
          title="Sonrisas Saludables, Vida Plena en Zaragoza"
          description="En Clínica Dental Dra. Perea Zaragoza, combinamos la experiencia con la tecnología más avanzada para cuidar tu salud bucodental y devolverte la confianza de una sonrisa radiante."
          background={{
            variant: "rotated-rays-animated"
          }}
          buttons={[
            { text: "Pedir Cita Ahora", href: "#contact" },
            { text: "Nuestros Servicios", href: "#services" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/empty-stomatology-orthodontic-hospital-cabinet-with-nobody-it-equipped-with-modern-furniture-teet_482257-2882.jpg", imageAlt: "Dentist examining a smiling patient" },
            { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/afro-girl-dental-chair-with-dentist-assistant-around_651396-1409.jpg", imageAlt: "Happy family at the dental clinic" },
            { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/successful-cheerful-young-diverse-business-people_1262-1185.jpg", imageAlt: "Patient relaxing in a modern dental chair" },
            { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/close-up-dentist-using-instruments_23-2151053275.jpg", imageAlt: "Advanced dental imaging technology" },
            { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/dentist-showing-denture-model-patient_107420-65328.jpg", imageAlt: "Dentist consulting a patient with a tablet" },
            { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/woman-going-through-dental-treatment-with-expander_23-2147862044.jpg", imageAlt: "Professional dental team in a bright clinic" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
          tag="Tu Salud Bucodental, Nuestra Prioridad"
        />
      </div>
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="¿Quiénes Somos?"
          description="En Clínica Dental Dra. Perea Zaragoza, nos dedicamos a ofrecer atención dental de la más alta calidad, con un enfoque en la prevención, el bienestar y la estética. Nuestro equipo de profesionales altamente cualificados utiliza las técnicas y tecnologías más innovadoras para garantizar tratamientos efectivos y resultados duraderos. Creemos en una odontología cercana y personalizada, donde cada paciente se siente escuchado y comprendido. Tu sonrisa es nuestra mayor recompensa."
          metrics={[
            { value: "20+", title: "Años de Experiencia" },
            { value: "98%", title: "Pacientes Satisfechos" },
            { value: "100%", title: "Tecnología Avanzada" }
          ]}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/empty-sofa-interior-decoration_1339-7730.jpg"
          imageAlt="Interior de la moderna clínica dental"
        />
      </div>
      <div id="services" data-section="services">
        <FeatureCardNine
          title="Nuestros Tratamientos Odontológicos"
          description="Ofrecemos una amplia gama de servicios dentales personalizados para toda la familia, garantizando soluciones integrales para tu salud bucal."
          features={[
            {
              title: "Odontología General",              description: "Revisiones, empastes, limpiezas y tratamientos para mantener tus dientes y encías sanos.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-dental-equipment_23-2149164289.jpg", imageAlt: "Dentista realizando una revisión general" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/dentist-woman-holding-mock-up-green-screen-chroma-key-tablet-with-isolated-display-discussing-oral-hygiene-with-man-patient-stomatological-consultation-dental-office-stomatology-concept_482257-39543.jpg", imageAlt: "Radiografía dental digital en pantalla" }
            },
            {
              title: "Estética Dental",              description: "Blanqueamiento, carillas y diseño de sonrisa para transformar tu aspecto y realzar tu belleza natural.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/dermatologist-female-patient-discussing-digital-tablet_107420-65415.jpg", imageAlt: "Paciente mostrando una sonrisa brillante" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/old-man-sitting-dentist-s-office_1157-19457.jpg", imageAlt: "Mano de dentista colocando carilla" }
            },
            {
              title: "Implantes y Ortodoncia",              description: "Soluciones avanzadas para reemplazar piezas perdidas o corregir la alineación de tus dientes.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/pediatric-dentist-talking-with-little-girl-dental-office_651396-2539.jpg", imageAlt: "Implantes dentales en modelo 3D" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing_176474-96417.jpg", imageAlt: "Sonrisa con alineadores invisibles" }
            }
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Cifras que Inspiran Confianza"
          description="Nuestros resultados hablan por sí solos. Compromiso con la excelencia y la satisfacción del paciente."
          metrics={[
            { id: "m1", icon: Users, title: "Pacientes Atendidos", value: "5.000+" },
            { id: "m2", icon: Stethoscope, title: "Tratamientos Realizados", value: "12.000+" },
            { id: "m3", icon: Award, title: "Años Cuidando Sonrisas", value: "20+" },
            { id: "m4", icon: Star, title: "Valoración Media (5 Estrellas)", value: "4.9" }
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="team" data-section="team">
        <TeamCardSix
          title="Nuestro Equipo de Profesionales"
          description="Conoce a los expertos que se dedican a tu salud bucodental con pasión y dedicación."
          members={[
            { id: "1", name: "Dra. Ana Perea Zaragoza", role: "Directora Clínica y Odontóloga General", imageSrc: "https://images.unsplash.com/photo-1622253692010-337f4ce40d49?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", imageAlt: "Retrato de la Dra. Ana Perea Zaragoza" },
            { id: "2", name: "María García", role: "Higienista Dental y Auxiliar", imageSrc: "https://images.unsplash.com/photo-1594824479536-a142079038ba?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", imageAlt: "Retrato de María García" },
            { id: "3", name: "Dr. Javier López", role: "Odontólogo Especialista en Implantes", imageSrc: "https://images.unsplash.com/photo-1612348577038-1647be7301ae?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", imageAlt: "Retrato del Dr. Javier López" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Lo Que Dicen Nuestros Pacientes"
          cardTag="Experiencias Reales"
          testimonials={[
            { id: "1", name: "Carlos Ruíz", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sofa_329181-12139.jpg", imageAlt: "Avatar de Carlos Ruíz" },
            { id: "2", name: "Laura Martín", imageSrc: "http://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg", imageAlt: "Avatar de Laura Martín" },
            { id: "3", name: "Sergio Gómez", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", imageAlt: "Avatar de Sergio Gómez" },
            { id: "4", name: "Elena Vidal", imageSrc: "http://img.b2bpic.net/free-photo/front-view-senior-with-hand-stretched_23-2148373841.jpg", imageAlt: "Avatar de Elena Vidal" },
            { id: "5", name: "Pablo Flores", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-female-face-looking-camera_1262-2974.jpg", imageAlt: "Avatar de Pablo Flores" },
            { id: "6", name: "Isabel Navarro", imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", imageAlt: "Avatar de Isabel Navarro" }
          ]}
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>
      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Preguntas Frecuentes"
          description="¿Tienes dudas? Aquí respondemos a las preguntas más comunes sobre nuestros servicios y la salud dental."
          faqs={[
            { id: "faq1", title: "¿Cuál es la importancia de las revisiones dentales periódicas?", content: "Las revisiones periódicas son cruciales para detectar a tiempo cualquier problema dental, como caries o enfermedades de las encías, antes de que se agraven. Permiten mantener una buena salud bucal y prevenir tratamientos más complejos." },
            { id: "faq2", title: "¿Es doloroso el blanqueamiento dental?", content: "El blanqueamiento dental es un procedimiento seguro y generalmente indoloro. Algunos pacientes pueden experimentar una sensibilidad temporal, que desaparece en poco tiempo. Siempre realizamos un diagnóstico previo para asegurar tu comodidad." },
            { id: "faq3", title: "¿Qué tipos de ortodoncia ofrecen?", content: "Ofrecemos diversas opciones de ortodoncia, incluyendo brackets tradicionales, ortodoncia lingual y alineadores transparentes (Invisalign). Durante tu consulta, evaluaremos cuál es el tratamiento más adecuado para tus necesidades y estilo de vida." }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/patients-with-protection-masks-waiting-doctor-dental-clinic-reception-while-stomatologist-working-background-wearing-ppe-suit-concept-new-normal-dentist-visit-coronavirus-outbreak_482257-3546.jpg"
          imageAlt="Dentista explicando un modelo dental a un paciente"
          mediaPosition="right"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Contáctanos"
          title="Agenda Tu Cita Hoy"
          description="Estamos listos para ayudarte a conseguir la sonrisa que siempre has deseado. ¡Ponte en contacto con nosotros!"
          buttons={[
            { text: "Llamar Ahora", href: "tel:+34976123456" },
            { text: "Enviar Mensaje", href: "mailto:info@clinicadra.perea.com" }
          ]}
          background={{
            variant: "downward-rays-animated"
          }}
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            { title: "Servicios", items: [{ label: "Odontología General", href: "#services" }, { label: "Estética Dental", href: "#services" }, { label: "Implantes Dentales", href: "#services" }, { label: "Ortodoncia", href: "#services" }] },
            { title: "Clínica", items: [{ label: "Sobre Nosotros", href: "#about" }, { label: "Nuestro Equipo", href: "#team" }, { label: "Testimonios", href: "#testimonials" }, { label: "FAQ", href: "#faq" }] },
            { title: "Contacto", items: [{ label: "Pedir Cita", href: "#contact" }, { label: "Ubicación", href: "#contact" }, { label: "Teléfono", href: "tel:+34976123456" }, { label: "Email", href: "mailto:info@clinicadra.perea.com" }] }
          ]}
          logoSrc="http://img.b2bpic.net/free-vector/clean-dent-dental-clinic-template_742173-32587.jpg"
          logoAlt="CLINICA DENTAL DRA. PEREA ZARAGOZA Logo"
          logoText="DRA. PEREA ZARAGOZA"
          copyrightText="© 2024 Clínica Dental Dra. Perea Zaragoza | Todos los derechos reservados."
        />
      </div>
    </ThemeProvider>
  );
}