"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="largeSmall"
        background="none"
        cardStyle="glass-depth"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Inicio",          id: "/"},
        {
          name: "Propiedades",          id: "/properties"},
        {
          name: "Servicios",          id: "/#services"},
        {
          name: "Nosotros",          id: "/about"},
        {
          name: "Contacto",          id: "/contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jijj4r"
      logoAlt="Rossana Bonora Propiedades Logo"
      brandName="Rossana Bonora Propiedades"
    />
  </div>

  <div id="property-catalog" data-section="property-catalog">
      <ProductCatalog
      layout="page"
      products={[
        {
          id: "pc1",          category: "Residencial",          name: "Mansión con Vista al Mar",          price: "$4,800,000 USD",          rating: 5,
          reviewCount: "22",          imageSrc: "http://img.b2bpic.net/free-photo/ancient-colonnade-surrounded-by-green-garden-city-center-architectural-harmony-nature_169016-69859.jpg",          imageAlt: "Mansión de lujo con vista al mar"},
        {
          id: "pc2",          category: "Apartamento",          name: "Penthouse Urbano",          price: "$2,100,000 USD",          rating: 4,
          reviewCount: "18",          imageSrc: "http://img.b2bpic.net/free-photo/young-happy-smiling-caucasian-woman-traveller-fitting-dress-sunglasses-high-floor-bangkok_343596-1438.jpg",          imageAlt: "Penthouse moderno en la ciudad"},
        {
          id: "pc3",          category: "Comercial",          name: "Oficina Premium",          price: "$3,500,000 USD",          rating: 5,
          reviewCount: "10",          imageSrc: "http://img.b2bpic.net/free-photo/important-building-facade_1127-23.jpg",          imageAlt: "Edificio de oficinas de lujo"},
        {
          id: "pc4",          category: "Inversión",          name: "Terreno Costero",          price: "$950,000 USD",          rating: 4,
          reviewCount: "7",          imageSrc: "http://img.b2bpic.net/free-photo/umbrella-chair-around-swimming-pool-neary-sea-ocean-beach-with-blue-sky-white-cloud_74190-8487.jpg",          imageAlt: "Terreno exclusivo en la costa"},
        {
          id: "pc5",          category: "Residencial",          name: "Casa de Campo",          price: "$1,750,000 USD",          rating: 5,
          reviewCount: "14",          imageSrc: "http://img.b2bpic.net/free-photo/couple-home-spending-time-together_23-2149185016.jpg",          imageAlt: "Lujosa casa de campo"},
        {
          id: "pc6",          category: "Residencial",          name: "Loft con Diseño",          price: "$1,100,000 USD",          rating: 4,
          reviewCount: "9",          imageSrc: "http://img.b2bpic.net/free-photo/hotel-room-with-lit-lamp_1203-547.jpg",          imageAlt: "Loft con diseño moderno"},
      ]}
      searchPlaceholder="Buscar propiedades..."
      filters={[
        {
          label: "Estado",          options: [
            "Venta",            "Alquiler"],
          selected: "Venta",          onChange: (value: string) => {},
        },
        {
          label: "Tipo",          options: [
            "Todos",            "Residencial",            "Comercial",            "Inversión"],
          selected: "Todos",          onChange: (value: string) => {},
        },
        {
          label: "Ubicación",          options: [
            "Todas",            "Miami",            "Madrid",            "Punta del Este",            "Montevideo"],
          selected: "Todas",          onChange: (value: string) => {},
        },
      ]}
    />
  </div>

  <div id="properties-faq" data-section="properties-faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "¿Cómo es el proceso de compra de una propiedad?",          content: "Nuestro proceso incluye asesoramiento inicial, búsqueda personalizada, visitas guiadas, negociación de ofertas, revisión legal y acompañamiento hasta la firma. Nos encargamos de todos los detalles para una compra sin preocupaciones."},
        {
          id: "faq2",          title: "¿Qué servicios ofrecen para la venta de propiedades?",          content: "Ofrecemos una valoración profesional de tu propiedad, un plan de marketing exclusivo para propiedades de lujo, gestión de visitas, negociaciones estratégicas y acompañamiento legal para garantizar una venta exitosa y al mejor precio."},
        {
          id: "faq3",          title: "¿Pueden ayudarme con inversiones inmobiliarias internacionales?",          content: "Sí, contamos con experiencia en el mercado inmobiliario internacional y una red de contactos que nos permite asesorarte en inversiones en propiedades de lujo en diferentes países, como Miami, Madrid y Punta del Este."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-checking-map_23-2149080792.jpg"
      imageAlt="Person asking questions to a real estate agent"
      mediaAnimation="slide-up"
      title="Preguntas Frecuentes sobre Propiedades"
      description="Encuentra respuestas a las preguntas más comunes sobre la compra, venta y alquiler de propiedades de lujo con Rossana Bonora."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jijj4r"
      logoAlt="Rossana Bonora Propiedades Logo"
      columns={[
        {
          items: [
            {
              label: "Inicio",              href: "/"},
            {
              label: "Propiedades",              href: "/properties"},
            {
              label: "Servicios",              href: "/#services"},
          ],
        },
        {
          items: [
            {
              label: "Nosotros",              href: "/about"},
            {
              label: "Contacto",              href: "/contact"},
          ],
        },
        {
          items: [
            {
              label: "Privacidad",              href: "#"},
            {
              label: "Términos",              href: "#"},
          ],
        },
      ]}
      logoText="Rossana Bonora Propiedades"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
