"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

import { Shield, Zap, Droplet, Smartphone, Eye, ShoppingCart, TrendingUp } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="ClearShield Pro"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Models", id: "models" },
            { name: "Why Us", id: "trust" },
            { name: "Shop", id: "shop" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Protección Invisible. Seguridad Total."
          description="Kit completo transparente diseñado para máxima protección sin ocultar el diseño original del iPhone."
          tag="Premium Protection"
          imageSrc="http://img.b2bpic.net/free-photo/rose-gold-marble-phone-with-blank-screen-peach-background_53876-153477.jpg"
          imageAlt="3D render of complete transparent iPhone protection kit with floating components"
          textPosition="center"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Comprar Ahora", href: "#shop" },
            { text: "Ver Modelos", href: "#models" },
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          title="¿Qué incluye el Kit?"
          description="Cuatro componentes de protección premium diseñados para trabajar juntos sin comprometer la claridad o la estética."
          features={[
            {
              icon: Shield,
              title: "O-FOLD HD Screen Protector",              description: "Vidrio templado HD ultra transparente con alta sensibilidad táctil y máxima resistencia contra arañazos."},
            {
              icon: Zap,
              title: "Funda Magnética Transparente",              description: "Material Bayer TPU, 2400 Gauss de potencia magnética, compatible con carga magnética. Diseño ultra claro que no amarillea."},
            {
              icon: Eye,
              title: "Protector de Lentes Cámara",              description: "Cobertura completa HD con protección contra rayones y golpes, mantiene la calidad fotográfica original."},
            {
              icon: Droplet,
              title: "Alcohol Pack Profesional",              description: "Paño de microfibra incluido con solución de limpieza profesional previa a la instalación."},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <TextSplitAbout
          title="Beneficios Clave"
          description={[
            "Protección 360° que cubre pantalla, carcasa y cámara sin agregar peso ni volumen innecesario.",            "Transparencia total que celebra el diseño premium del iPhone original.",            "Ajuste perfecto calibrado para cada modelo específico del iPhone.",            "Compatible con tecnología magnética para accesorios inalámbricos.",            "Instalación sencilla con kit de limpieza profesional incluido."]}
          useInvertedBackground={false}
          showBorder={true}
          buttons={[{ text: "Conocer Más", href: "#models" }]}
        />
      </div>

      <div id="shop" data-section="shop">
        <ProductCardOne
          title="Elige tu modelo"
          description="Selecciona el kit protector compatible con tu iPhone."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "15-pro-max",              name: "Kit iPhone 15 Pro Max",              price: "$79.99",              imageSrc: "http://img.b2bpic.net/free-photo/grey-cell-phone-connected-usb-cable-type-c-charging_58702-4785.jpg",              imageAlt: "iphone 15 pro max transparent case protective kit phone accessory"},
            {
              id: "16",              name: "Kit iPhone 16",              price: "$69.99",              imageSrc: "http://img.b2bpic.net/free-photo/rose-gold-marble-phone-with-blank-screen-peach-background_53876-153477.jpg",              imageAlt: "iphone 16 phone case protection kit transparent case"},
            {
              id: "16-pro",              name: "Kit iPhone 16 Pro",              price: "$79.99",              imageSrc: "http://img.b2bpic.net/free-photo/lovely-smiling-girl-with-dark-hairstyle-is-making-selfie-outdoors-sunshine-while-resting-beach-phone-focus-foreground-girl-background-out-focus_291650-2216.jpg",              imageAlt: "iphone 16 pro premium case phone protection clear case"},
          ]}
        />
      </div>

      <div id="models" data-section="models">
        <MetricCardOne
          title="Compatibilidad Completa"
          description="Disponible para todos los modelos actuales de iPhone."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "5",              title: "Modelos",              description: "iPhone 15 Pro Max hasta 17 Pro Max",              icon: Smartphone,
            },
            {
              id: "2",              value: "2400",              title: "Gauss",              description: "Potencia magnética extrema",              icon: Zap,
            },
            {
              id: "3",              value: "100%",              title: "Transparente",              description: "Sin amarillamiento con el tiempo",              icon: Eye,
            },
          ]}
        />
      </div>

      <div id="trust" data-section="trust">
        <SocialProofOne
          title="Compra con Confianza"
          description="Respaldamos cada compra con nuestras garantías de satisfacción."
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Envíos Rápidos en 24-48 horas",            "Pago 100% Seguro",            "Garantía de Satisfacción 30 días",            "Soporte Técnico 24/7"]}
          speed={50}
          showCard={true}
        />
      </div>

      <div id="final-cta" data-section="final-cta">
        <ContactFaq
          ctaTitle="Dale protección premium a tu iPhone hoy mismo."
          ctaDescription="Completa tu compra ahora y recibe tu kit en 48 horas."
          ctaButton={{
            text: "Agregar al carrito",            href: "#shop"}}
          ctaIcon={ShoppingCart}
          faqs={[
            {
              id: "1",              title: "¿Es compatible con carga inalámbrica?",              content: "Sí, la funda magnética transparente es completamente compatible con carga magnética y inalámbrica Qi. El protector de pantalla también permite carga rápida sin interferencias."},
            {
              id: "2",              title: "¿Cuánto tiempo tarda en amarillear?",              content: "Nuestro material TPU Bayer es resistente al amarillamiento durante 2+ años con uso normal. Ofrecemos cambios sin costo si experimenta decoloración prematura."},
            {
              id: "3",              title: "¿Qué pasa si se rompe el protector?",              content: "Tu compra incluye garantía de 30 días con reemplazo gratuito. También ofrecemos protectores de reemplazo a precio reducido después de los 30 días."},
            {
              id: "4",              title: "¿Es fácil de instalar?",              content: "Muy fácil. Incluye kit de limpieza profesional, instrucciones paso a paso y video de instalación. Sin burbujas de aire garantizado con nuestro método especial."},
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="ClearShield Pro"
          leftLink={{
            text: "Política de Privacidad",            href: "#"}}
          rightLink={{
            text: "Términos de Servicio",            href: "#"}}
        />
      </div>
    </ThemeProvider>
  );
}
