"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLarge"
        background="circleGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Inicio", id: "hero" },
        { name: "Mujeres", id: "womens" },
        { name: "Colección", id: "products" },
        { name: "Testimonios", id: "testimonials" },
        { name: "Contacto", id: "contact" },
      ]}
      brandName="Aura Couture"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{ variant: "plain" }}
      title="Aura Couture: Elegancia Sin Fronteras"
      description="Descubre una selección exclusiva de perfumes, ropa y accesorios de lujo diseñados para quienes valoran la sofisticación y el detalle."
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/client-suit-boutique-with-shopping-bags_7502-4397.jpg", imageAlt: "Fashion Model" },
        { imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150218026.jpg", imageAlt: "Luxury Wear" },
        { imageSrc: "http://img.b2bpic.net/free-photo/rack-with-overclothes-shop_23-2147784096.jpg", imageAlt: "Boutique Detail" }
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="womens" data-section="womens">
    <ProductCardTwo
      title="Colección Mujer"
      description="Piezas seleccionadas con elegancia atemporal para resaltar tu estilo único."
      gridVariant="four-items-2x2-equal-grid"
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      products={[
        { id: "w1", brand: "Aura", name: "Blusa Seda Crema", price: "$140", rating: 5, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-wearing-silk-blouse_23-2149176321.jpg" },
        { id: "w2", brand: "Aura", name: "Vestido Lino Natural", price: "$210", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/woman-summer-linen-dress_23-2148967402.jpg" },
        { id: "w3", brand: "Aura", name: "Falda Midi Estructurada", price: "$130", rating: 4, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-midi-skirt_23-2149123456.jpg" },
        { id: "w4", brand: "Aura", name: "Accesorios Perla", price: "$85", rating: 5, reviewCount: "50", imageSrc: "http://img.b2bpic.net/free-photo/pearl-jewelry-set_23-2148956789.jpg" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Tradición y Estilo"
      description="Nuestra boutique se dedica a curar piezas únicas. Combinamos la artesanía tradicional con tendencias contemporáneas para ofrecerte una experiencia de compra inigualable."
      metrics={[{ value: "15+", title: "Años de experiencia" }, { value: "500+", title: "Clientes satisfechos" }, { value: "100%", title: "Calidad garantizada" }]}
      imageSrc="http://img.b2bpic.net/free-photo/workshop-is-full-work-by-tailors_329181-14375.jpg"
      imageAlt="About Aura Couture"
      mediaAnimation="blur-reveal"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { id: "f1", title: "Accesorios Premium", descriptions: ["Piezas hechas con cuero genuino y acabados de alta costura."], imageSrc: "http://img.b2bpic.net/free-photo/woman-casual-wear-holding-purse_23-2147784098.jpg", imageAlt: "Leather Accessory" },
        { id: "f2", title: "Perfumería Exclusiva", descriptions: ["Fragancias importadas seleccionadas por sus notas únicas."], imageSrc: "http://img.b2bpic.net/free-photo/liquor-square-bottle_176474-6075.jpg", imageAlt: "Perfume" },
        { id: "f3", title: "Relojería y Joyería", descriptions: ["Accesorios atemporales para complementar cualquier outfit."], imageSrc: "http://img.b2bpic.net/free-photo/businessman-checking-time-hand-watch_53876-20483.jpg", imageAlt: "Watch" }
      ]}
      title="Nuestra Selección"
      description="Lo que nos hace únicos en el mercado de alta moda."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "p1", brand: "Aura", name: "Camisa de Lujo Hombre", price: "$120", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/blue-wedding-attire-groom-hanging-wall_8353-9801.jpg" },
        { id: "p2", brand: "Aura", name: "Vestido de Noche Seda", price: "$290", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/young-sexy-blond-woman-model-evening-yellow-dress-posing-blue-sky-background_158538-9417.jpg" },
        { id: "p3", brand: "Aura", name: "Botas de Piel", price: "$180", rating: 4, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/brown-shoe-with-rocks-broccoli_52683-94824.jpg" },
        { id: "p4", brand: "Essence", name: "Perfume Oud Gold", price: "$95", rating: 5, reviewCount: "40", imageSrc: "http://img.b2bpic.net/free-photo/closeup-perfume_53876-42017.jpg" }
      ]}
      title="Catálogo Destacado"
      description="Piezas que definen tu carácter."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[{ id: "m1", value: "1000+", description: "Productos vendidos" }, { id: "m2", value: "20+", description: "Marcas exclusivas" }, { id: "m3", value: "4.9", description: "Calificación promedio" }]}
      title="Números que Cuentan Historias"
      description="Confianza y calidad avalada por nuestro crecimiento."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Ana García", role: "Arquitecta", testimonial: "La mejor selección de accesorios que he encontrado. Elegancia pura.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-mirror_1301-1468.jpg" },
        { id: "t2", name: "Carlos Ruíz", role: "Consultor", testimonial: "El perfume Oud es simplemente extraordinario. Muy recomendable.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-light-shirt-looking-front_197531-24030.jpg" },
        { id: "t3", name: "Elena Torres", role: "Empresaria", testimonial: "Calidad inigualable en todas sus piezas. Mi tienda favorita.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-white-shirt-watching-camera-straight-hair-blowed-by-wind_633478-1290.jpg" }
      ]}
      title="Lo que dicen nuestros clientes"
      description="Historias de elegancia compartidas por nuestra comunidad."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[{ id: "q1", title: "¿Tienen envíos a domicilio?", content: "Sí, realizamos envíos seguros a toda la región." }, { id: "q2", title: "¿Puedo hacer cambios?", content: "Ofrecemos garantía de satisfacción y cambios dentro de los primeros 15 días." }, { id: "q3", title: "¿Cómo es el empaque?", content: "Todas nuestras piezas vienen en empaques premium listos para regalo." }]}
      title="Preguntas Frecuentes"
      description="Resolvemos todas tus dudas sobre nuestros productos."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/atelier-shop-full-sartorial-outfits_482257-90452.jpg"
      imageAlt="Atelier shop full of sartorial outfits"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{ variant: "radial-gradient" }}
      text="¿Listo para elevar tu estilo? Contáctanos hoy."
      buttons={[{ text: "WhatsApp", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Aura Couture"
      columns={[{ title: "Tienda", items: [{ label: "Catálogo", href: "#products" }, { label: "Perfumes", href: "#products" }] }, { title: "Ayuda", items: [{ label: "FAQ", href: "#faq" }, { label: "Contacto", href: "#contact" }] }]}
      copyrightText="© 2024 Aura Couture."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
