"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, CheckCircle, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="aurora"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Inicio",          id: "hero"},
        {
          name: "Sobre Nosotros",          id: "about"},
        {
          name: "Principios",          id: "features"},
        {
          name: "Contacto",          id: "contact"},
      ]}
      brandName="Silver City"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "gradient-bars"}}
      title="Somos Personas de Mandamiento"
      description="Un espacio informativo dedicado a compartir nuestros valores, principios y la misión que guía nuestras acciones diarias en Silver City."
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desk-with-laptop-mouse_23-2148291124.jpg",          imageAlt: "informative website hero background"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/multiracial-group-people-discussing-business-office_1268-21455.jpg",          imageAlt: "community support informative design"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/facade-view-modern-entrance_1359-373.jpg",          imageAlt: "urban city architecture modern"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/colorful-arrow-symbols-mobile-phone-pen-blue-backdrop_23-2147875665.jpg",          imageAlt: "Colorful arrow symbols; mobile phone; and pen on blue backdrop"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-colourful-workspace-desing_23-2148226832.jpg",          imageAlt: "Flat lay colourful workspace desing"},
      ]}
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Nuestra Esencia"
      metrics={[
        {
          icon: Users,
          label: "Miembros Activos",          value: "150+"},
        {
          icon: Award,
          label: "Años de Compromiso",          value: "12"},
        {
          icon: CheckCircle,
          label: "Proyectos Completados",          value: "500"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Integridad",          description: "Actuamos con transparencia y rectitud en cada paso que damos.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=29fyix"},
        {
          title: "Servicio",          description: "Nuestra razón de ser es brindar apoyo constante a quienes lo necesitan.",          imageSrc: "http://img.b2bpic.net/free-photo/teamworking-colleagues-data-center-replacing-storage-rackmounts-components_482257-122041.jpg"},
        {
          title: "Compromiso",          description: "Mantenemos firme nuestra palabra en el cumplimiento de cada objetivo.",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-people-working-together_23-2150384880.jpg"},
      ]}
      title="Nuestros Pilares"
      description="Principios fundamentales que definen nuestra identidad y cómo servimos a la comunidad."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "95%",          title: "Satisfacción",          items: [
            "Servicio de alta calidad",            "Respuesta eficiente",            "Atención personalizada"],
        },
        {
          id: "m2",          value: "800",          title: "Personas Impactadas",          items: [
            "Historias de éxito",            "Familias apoyadas",            "Vidas transformadas"],
        },
        {
          id: "m3",          value: "24/7",          title: "Disponibilidad",          items: [
            "Soporte permanente",            "Acceso constante",            "Atención ininterrumpida"],
        },
      ]}
      title="Impacto Comunitario"
      description="Resultados tangibles de nuestro trabajo y dedicación en Silver City."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      animationType="blur-reveal"
      team={[
        {
          id: "t1",          name: "Ana Rodríguez",          role: "Directora",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg"},
        {
          id: "t2",          name: "Carlos Méndez",          role: "Coordinador",          imageSrc: "http://img.b2bpic.net/free-photo/bearded-male-manager-formal-suit-his-female-assistant_273609-4719.jpg"},
        {
          id: "t3",          name: "Sofía López",          role: "Estratega",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097942.jpg"},
      ]}
      title="Nuestro Equipo"
      description="Profesionales comprometidos con la visión y los valores de nuestra organización."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="La dedicación del equipo de Silver City ha sido transformadora para nuestra comunidad. Son verdaderas personas de mandamiento."
      rating={5}
      author="Elena Vargas"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",          alt: "Elena"},
        {
          src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",          alt: "Ricardo"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg",          alt: "María"},
        {
          src: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg",          alt: "Jorge"},
        {
          src: "http://img.b2bpic.net/free-photo/smiley-woman-office-holding-tablet_23-2148356266.jpg",          alt: "Ana"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "¿Qué significa ser personas de mandamiento?",          content: "Significa regir nuestras acciones basándonos en principios de honestidad y responsabilidad social."},
        {
          id: "f2",          title: "¿Cómo puedo formar parte?",          content: "Puedes contactarnos a través de nuestros canales oficiales para conocer las formas de participación."},
        {
          id: "f3",          title: "¿Dónde operan?",          content: "Nuestra base principal se encuentra en Silver City, sirviendo a toda la región."},
      ]}
      sideTitle="Preguntas Frecuentes"
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "rotated-rays-animated"}}
      text="¿Quieres saber más sobre nuestro trabajo en Silver City? Ponte en contacto con nosotros hoy."
      buttons={[
        {
          text: "Contactar",          href: "mailto:info@silvercity.com"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/aerial-view-gold-coast-skyline-residential-waterways-australia_1308-189563.jpg"
      logoText="Silver City"
      columns={[
        {
          title: "Enlaces",          items: [
            {
              label: "Inicio",              href: "#hero"},
            {
              label: "Sobre Nosotros",              href: "#about"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacidad",              href: "#"},
            {
              label: "Términos",              href: "#"},
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}