/** Shopify CDN: Minification failed

Line 16:14 Unexpected "{"
Line 16:24 Expected ":"
Line 16:32 Unexpected "'react'"
Line 17:13 Expected ":"
Line 17:57 Unexpected "'lucide-react'"
Line 19:0 Comments in CSS use "/* ... */" instead of "//"
Line 26:1 Unexpected ";"
Line 28:0 Comments in CSS use "/* ... */" instead of "//"
Line 40:7 Expected ":"
Line 42:7 Expected ":"
... and 1 more hidden warnings

**/
import React, { useState } from 'react';
import { Menu, Search, ShoppingBag, X, ArrowRight } from 'lucide-react';

// --- Paleta de Colores de la Marca ---
const colors = {
  carbon: '#222222',
  hueso: '#F5F5F0',
  cemento: '#A9A9A9',
  arena: '#D8CBB6',
  terracota: '#B87A63'
};

// Componente para simular las fotografías descritas en el manual
const PhotographyPlaceholder = ({ text, bgColor, textColor = colors.carbon, aspectRatio = "aspect-square" }) => (
  <div 
    className={`w-full flex flex-col items-center justify-center p-6 text-center transition-opacity duration-500 hover:opacity-90 ${aspectRatio}`}
    style={{ backgroundColor: bgColor, color: textColor }}
  >
    <span className="font-montserrat text-xs tracking-widest uppercase opacity-50 mb-2">Dirección de Arte</span>
    <p className="font-lora italic text-sm md:text-base leading-relaxed max-w-[80%]">"{text}"</p>
  </div>
);

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const products = [
    { name: 'Anillo Dualidad', price: '120 €', imageText: 'Un accesorio que descansa entre dos superficies contrastantes: hormigón y lino.', bg: colors.cemento },
    { name: 'Brazalete Integración', price: '185 €', imageText: 'Manos que casi se tocan, capturando el espacio negativo.', bg: colors.arena },
    { name: 'Collar Atemporal', price: '210 €', imageText: 'Juego de sombras que se encuentran sobre una superficie neutra.', bg: colors.hueso },
    { name: 'Bolso Estructura', price: '340 €', imageText: 'Foco en la textura táctil del cuero contra madera cruda.', bg: colors.cemento },
  ];

  return (
    <div className="min-h-screen flex flex-col" style={{ backgroundColor: colors.hueso, color: colors.carbon }}>
      {/* Importación de Tipografías: Montserrat (Primaria) y Lora (Secundaria) */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Montserrat:wght@400;600;700&display=swap');
        .font-montserrat { font-family: 'Montserrat', sans-serif; }
        .font-lora { font-family: 'Lora', serif; }
        ::selection { background-color: ${colors.terracota}; color: ${colors.hueso}; }
      `}} />

      {/* Announcement Bar */}
      <div 
        className="w-full py-2 px-4 text-center z-50 relative"
        style={{ backgroundColor: colors.carbon, color: colors.hueso }}
      >
        <p className="font-montserrat text-[10px] md:text-xs tracking-[0.2em] uppercase">
          Diseñado para tus dos mitades. Envíos globales.
        </p>
      </div>

      {/* Header (Navegación estilo Spotlight: limpia y centrada) */}
      <header className="sticky top-0 w-full z-40 bg-opacity-95 backdrop-blur-sm" style={{ backgroundColor: colors.hueso }}>
        <div className="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
          
          {/* Mobile Menu Icon */}
          <button className="md:hidden" onClick={() => setIsMenuOpen(true)}>
            <Menu size={24} style={{ color: colors.carbon }} />
          </button>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex space-x-8 w-1/3">
            {['Colecciones', 'Filosofía', 'Manifiesto'].map((item) => (
              <a key={item} href="#" className="font-montserrat text-sm tracking-widest hover:opacity-60 transition-opacity">
                {item}
              </a>
            ))}
          </nav>

          {/* Logo Central */}
          <div className="w-1/3 flex justify-center">
            <h1 className="font-montserrat font-bold text-3xl md:text-4xl tracking-[0.15em] leading-none">
              AMBOS
            </h1>
          </div>

          {/* Icons Right */}
          <div className="w-1/3 flex justify-end space-x-6">
            <button className="hover:opacity-60 transition-opacity hidden md:block">
              <Search size={20} style={{ color: colors.carbon }} />
            </button>
            <button className="hover:opacity-60 transition-opacity">
              <ShoppingBag size={20} style={{ color: colors.carbon }} />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile Menu Overlay */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-50 flex flex-col p-6" style={{ backgroundColor: colors.hueso, color: colors.carbon }}>
          <div className="flex justify-between items-center mb-12">
            <h2 className="font-montserrat font-bold text-2xl tracking-widest">AMBOS</h2>
            <button onClick={() => setIsMenuOpen(false)}><X size={28} /></button>
          </div>
          <nav className="flex flex-col space-y-8 text-center mt-10">
            {['Colecciones', 'Filosofía', 'Manifiesto', 'Buscar'].map((item) => (
              <a key={item} href="#" className="font-montserrat text-xl tracking-widest uppercase">
                {item}
              </a>
            ))}
          </nav>
        </div>
      )}

      <main className="flex-grow">
        {/* Hero Section */}
        <section className="relative w-full h-[75vh] md:h-[85vh] flex items-center justify-center overflow-hidden">
          {/* Hero Background - Representando el 70% de tonos neutros */}
          <div className="absolute inset-0 z-0 flex">
            <div className="w-1/2 h-full" style={{ backgroundColor: colors.arena }}></div>
            <div className="w-1/2 h-full" style={{ backgroundColor: colors.cemento }}></div>
          </div>
          
          {/* Hero Content */}
          <div className="relative z-10 text-center px-6 max-w-3xl mix-blend-color-burn">
            <h2 className="font-montserrat font-bold text-4xl md:text-6xl tracking-wider mb-6 leading-tight text-white drop-shadow-sm">
              El equilibrio es el nuevo lujo.
            </h2>
            <p className="font-lora text-lg md:text-xl mb-10 text-white italic drop-shadow-sm">
              Conecta tus mundos. Diseñado para tus dos mitades.
            </p>
            <button 
              className="font-montserrat text-sm tracking-[0.2em] uppercase px-10 py-4 transition-all hover:bg-opacity-90"
              style={{ backgroundColor: colors.terracota, color: colors.hueso }}
            >
              Explorar la Dualidad
            </button>
          </div>
        </section>

        {/* Manifesto / Quote Section */}
        <section className="py-24 md:py-32 px-6 text-center max-w-4xl mx-auto">
          <p className="font-lora italic text-2xl md:text-4xl leading-relaxed" style={{ color: colors.carbon }}>
            "Existimos para conectar dualidades y celebrar el equilibrio. Creamos piezas que permiten expresar la totalidad de lo que eres, sin compartimentos ni contradicciones."
          </p>
          <div className="mt-12 w-px h-16 mx-auto" style={{ backgroundColor: colors.carbon, opacity: 0.2 }}></div>
        </section>

        {/* Featured Collection Grid (Spotlight Theme Style) */}
        <section className="px-6 pb-24 md:pb-32 max-w-7xl mx-auto">
          <div className="flex justify-between items-end mb-12">
            <h3 className="font-montserrat text-xl md:text-2xl tracking-widest uppercase">Piezas Atemporales</h3>
            <a href="#" className="hidden md:flex font-montserrat text-sm tracking-widest items-center hover:opacity-60 transition-opacity">
              Ver todas <ArrowRight size={16} className="ml-2" />
            </a>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12">
            {products.map((product, idx) => (
              <div key={idx} className="group cursor-pointer">
                {/* Product Image Area */}
                <div className="mb-6 overflow-hidden">
                  <PhotographyPlaceholder 
                    text={product.imageText} 
                    bgColor={product.bg} 
                    aspectRatio="aspect-[4/5]"
                  />
                </div>
                {/* Product Info */}
                <div className="text-center">
                  <h4 className="font-montserrat text-sm tracking-widest uppercase mb-2 group-hover:opacity-70 transition-opacity">
                    {product.name}
                  </h4>
                  <p className="font-lora text-sm" style={{ color: colors.carbon, opacity: 0.8 }}>
                    {product.price}
                  </p>
                </div>
              </div>
            ))}
          </div>
          
          <div className="mt-12 text-center md:hidden">
            <button className="font-montserrat text-sm tracking-widest uppercase pb-1 border-b" style={{ borderColor: colors.carbon }}>
              Ver todas las piezas
            </button>
          </div>
        </section>

        {/* Editorial Split Section */}
        <section className="flex flex-col md:flex-row w-full border-t border-b" style={{ borderColor: `${colors.carbon}20` }}>
          <div className="w-full md:w-1/2">
            <PhotographyPlaceholder 
              text="Interacción sutil. Reflejos en el agua y texturas minerales. La ausencia es tan importante como la presencia." 
              bgColor={colors.carbon} 
              textColor={colors.hueso}
              aspectRatio="aspect-square md:aspect-auto md:h-full min-h-[500px]"
            />
          </div>
          <div className="w-full md:w-1/2 flex flex-col justify-center p-12 md:p-24" style={{ backgroundColor: colors.hueso }}>
            <h3 className="font-montserrat text-2xl md:text-3xl tracking-widest uppercase mb-6">
              Calidad Atemporal
            </h3>
            <p className="font-lora text-base md:text-lg leading-relaxed mb-10" style={{ color: colors.carbon, opacity: 0.8 }}>
              Nuestras puertas y nuestros diseños están abiertos a todos. Creemos en la funcionalidad inteligente y en la belleza que se adapta. Detrás de cada diseño, hay una conexión real y táctil, pensada para trascender las temporadas.
            </p>
            <div>
              <button 
                className="font-montserrat text-xs tracking-[0.2em] uppercase pb-2 border-b-2 hover:opacity-60 transition-opacity inline-flex items-center"
                style={{ borderColor: colors.terracota }}
              >
                Nuestra Filosofía <ArrowRight size={14} className="ml-2" />
              </button>
            </div>
          </div>
        </section>
      </main>

      {/* Footer Minimalista */}
      <footer className="w-full pt-20 pb-10 px-6" style={{ backgroundColor: colors.carbon, color: colors.hueso }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-12 mb-20">
          
          {/* Brand Info */}
          <div className="md:col-span-4">
            <h2 className="font-montserrat font-bold text-3xl tracking-[0.15em] mb-6">AMBOS</h2>
            <p className="font-lora text-sm italic opacity-80 max-w-xs">
              El equilibrio es nuestro norte. En el diseño, en la vida, en nuestro mensaje.
            </p>
          </div>

          {/* Links */}
          <div className="md:col-span-2">
            <h4 className="font-montserrat text-xs tracking-widest uppercase mb-6 opacity-50">Explorar</h4>
            <ul className="space-y-4 font-lora text-sm">
              <li><a href="#" className="hover:opacity-70 transition-opacity">Colecciones</a></li>
              <li><a href="#" className="hover:opacity-70 transition-opacity">Filosofía</a></li>
              <li><a href="#" className="hover:opacity-70 transition-opacity">Materiales</a></li>
            </ul>
          </div>

          <div className="md:col-span-2">
            <h4 className="font-montserrat text-xs tracking-widest uppercase mb-6 opacity-50">Soporte</h4>
            <ul className="space-y-4 font-lora text-sm">
              <li><a href="#" className="hover:opacity-70 transition-opacity">Conexión (Contacto)</a></li>
              <li><a href="#" className="hover:opacity-70 transition-opacity">Envíos y Retornos</a></li>
              <li><a href="#" className="hover:opacity-70 transition-opacity">Guía de Cuidados</a></li>
            </ul>
          </div>

          {/* Newsletter */}
          <div className="md:col-span-4">
            <h4 className="font-montserrat text-xs tracking-widest uppercase mb-6 opacity-50">Únete a nuestra conexión</h4>
            <p className="font-lora text-sm opacity-80 mb-6">
              Reflexiones sobre diseño, equilibrio y lanzamientos intencionales.
            </p>
            <div className="flex border-b" style={{ borderColor: `${colors.hueso}40` }}>
              <input 
                type="email" 
                placeholder="Tu correo electrónico" 
                className="w-full bg-transparent py-3 font-lora text-sm outline-none placeholder-opacity-50"
                style={{ color: colors.hueso }}
              />
              <button className="font-montserrat text-xs tracking-widest uppercase px-4 hover:opacity-70 transition-opacity">
                Unirse
              </button>
            </div>
          </div>
        </div>

        {/* Copyright */}
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center text-xs font-montserrat tracking-widest opacity-40 border-t pt-8" style={{ borderColor: `${colors.hueso}20` }}>
          <p>© {new Date().getFullYear()} AMBOS. TODOS LOS DERECHOS RESERVADOS.</p>
          <div className="flex space-x-6 mt-4 md:mt-0">
            <a href="#">Términos</a>
            <a href="#">Privacidad</a>
          </div>
        </div>
      </footer>
    </div>
  );
}