"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Activity, Calendar, Coffee, MessageCircle, Scissors, ShoppingBag, TrendingUp, Languages } from "lucide-react";

export default function LandingPage() {
  const t = (key: string) => key;

  const languageSelector = (
    <div className="flex items-center gap-2 cursor-pointer">
      <Languages size={18} />
      <select className="bg-transparent cursor-pointer outline-none">
        <option>EN</option>
        <option>PT</option>
        <option>ES</option>
      </select>
    </div>
  );

  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="fluid"
        cardStyle="glass-depth"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: t("Intro"), id: "hero" },
        { name: t("Características"), id: "transformation" },
        { name: t("Portafolio"), id: "portfolio" },
        { name: t("Contacto"), id: "contact" },
      ]}
      brandName="ELEVATE"
    />
    {/* Language selector integrated into UI */}
    <div className="fixed top-4 right-4 z-50 bg-white/80 backdrop-blur p-2 rounded-full shadow-sm text-sm">
       {languageSelector}
    </div>
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{ variant: "radial-gradient" }}
      title={t("Los negocios locales merecen una presencia digital de clase mundial.")}
      description={t("Reimaginamos pequeños negocios y los convertimos en marcas extraordinarias para la era de la IA.")}
      testimonials={[
        { name: "Sarah Miller", handle: "@sarah_salon", testimonial: t("Mi clínica se veía obsoleta hasta que ELEVATE la transformó. El aumento en conversiones fue inmediato."), rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-work_23-2149485515.jpg" },
        { name: "John Doe", handle: "@johns_barber", testimonial: t("Todo el proceso fue mágico. Convirtieron nuestra pequeña tienda en un destino de lujo."), rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-man-with-wine-glass-night-club_23-2148037554.jpg" }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/person-using-ar-technology-perform-their-occupation_23-2151137485.jpg"
      imageAlt="Arquitectura digital cinemática"
      marqueeItems={[
        { type: "text", text: t("Diseño UI/UX de Élite") },
        { type: "text", text: t("Identidad de Marca Premium") },
        { type: "text", text: t("Motion Graphics Cinemáticos") },
      ]}
    />
  </div>

  <div id="transformation" data-section="transformation">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={true}
      title={t("La Experiencia de Transformación")}
      description={t("La mayoría de los negocios locales tienen un gran servicio pero se ven pequeños online. Cerramos esa brecha elevando su autoridad, confianza y valor percibido.")}
      bulletPoints={[
        { title: t("Antes: Obsoleto"), description: t("Presencia digital genérica que espanta a los clientes premium.") },
        { title: t("Después: Extraordinario"), description: t("Experiencia de marca de alta gama que te posiciona como líder del mercado.") },
        { title: t("Catalizador de Conversión"), description: t("Diseño UI/UX diseñado para convertir visitantes en clientes leales.") },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/building_1127-3445.jpg"
      imageAlt="Interior de boutique de lujo"
    />
  </div>

  <div id="industries" data-section="industries">
      <FeatureBorderGlow
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { title: t("Belleza y Barbería"), description: t("Estudios de alta gama y clínicas estéticas."), icon: Scissors },
        { title: t("Retail y Boutiques"), description: t("Tiendas de moda modernas y estilo de vida."), icon: ShoppingBag },
        { title: t("Salud y Bienestar"), description: t("Clínicas dentales y consultorios."), icon: Activity },
        { title: t("Hospitalidad"), description: t("Cafés, restaurantes y gastronomía."), icon: Coffee },
      ]}
      title={t("Industrias que Elevamos")}
      description={t("Nos especializamos en sectores de servicios físicos que requieren posicionamiento digital de élite.")}
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        { id: "p1", name: t("La Barbería Moderna"), price: t("Experiencia"), imageSrc: "http://img.b2bpic.net/free-photo/elegant-minimal-interior-design_23-2151913231.jpg" },
        { id: "p2", name: t("Boutique de Lujo"), price: t("Identidad"), imageSrc: "http://img.b2bpic.net/free-photo/woman-buys-dishes-store_1157-36691.jpg" },
        { id: "p3", name: t("Café Artesanal"), price: t("Diseño"), imageSrc: "http://img.b2bpic.net/free-photo/cafe-interior-with-orange-sofa-three-tables-three-black-chairs_181624-8624.jpg" },
      ]}
      title={t("Ejemplos de Marca Premium")}
      description={t("Presentaciones realistas de cómo reimaginamos la identidad de tu negocio.")}
    />
  </div>

  <div id="results" data-section="results">
      <MetricCardOne
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "87%", title: t("Aumento de Reservas"), description: t("Impacto directo en el flujo de citas."), icon: Calendar },
        { id: "m2", value: "64%", title: t("Clics en WhatsApp"), description: t("Aumento en consultas directas."), icon: MessageCircle },
        { id: "m3", value: "3.4x", title: t("Autoridad Percibida"), description: t("Crecimiento en reputación y confianza."), icon: TrendingUp },
      ]}
      title={t("Autoridad Medible")}
      description={t("No solo creamos sitios web; construimos activos generadores de ingresos.")}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        { id: "t1", name: "James Anderson", handle: "Fundador, Urban Grooming", testimonial: t("El ritmo cinemático de nuestro nuevo sitio cambió cómo vendemos. Estamos llenos cada semana."), imageSrc: "http://img.b2bpic.net/free-photo/portrait-shaved-head-male-dressed-native-viking-s-costume_613910-12250.jpg" },
        { id: "t2", name: "Elena Rossi", handle: "Dueña, Rossi Boutique", testimonial: t("Todo se siente premium y artesanal. Es exactamente lo que necesitábamos."), imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-modern-male-with-tattoos-his-arms-posing-near-window-room-with-loft-interior_613910-11811.jpg" }
      ]}
      title={t("Voces de Transformación")}
      description={t("Negocios reales alcanzando resultados extraordinarios mediante nuestra alquimia digital.")}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag={t("Empecemos")}
      title={t("Tu negocio ya existe físicamente. Hazlo inolvidable digitalmente.")}
      description={t("No te conformes con lo genérico. Transforma tu negocio en una experiencia digital de élite.")}
      buttons={[{ text: t("Agendar Sesión de Estrategia"), href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        { title: t("Compañía"), items: [{ label: t("Sobre Nosotros"), href: "#" }, { label: t("Portafolio"), href: "#portfolio" }] },
        { title: t("Servicios"), items: [{ label: t("Estrategia"), href: "#" }, { label: t("Diseño Digital"), href: "#" }] },
        { title: t("Ubicación"), items: [{ label: "Reino Unido", href: "#" }, { label: "España", href: "#" }, { label: "Portugal", href: "#" }, { label: "Brasil", href: "#" }] },
      ]}
      bottomLeftText="© 2024 ELEVATE AI."
      bottomRightText={t("Creando experiencias digitales premium.")}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}