import React, { useState, useEffect, useRef } from 'react';
import * as THREE from 'three';
import { ShoppingCart, Menu, X, ChevronRight, Zap, Globe, ShieldCheck, Cpu, Search, Instagram, Facebook } from 'lucide-react';

// --- Escena 3D de Fondo (Abstracta y Tecnológica) ---
const Hero3D = () => {
  const mountRef = useRef(null);

  useEffect(() => {
    let width = mountRef.current.clientWidth;
    let height = mountRef.current.clientHeight;
    
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    
    renderer.setSize(width, height);
    mountRef.current.appendChild(renderer.domElement);

    // Torus Knot para un look más complejo y moderno
    const geometry = new THREE.TorusKnotGeometry(1.5, 0.4, 100, 16);
    const material = new THREE.MeshStandardMaterial({
      color: 0x00f2ff,
      wireframe: true,
      metalness: 0.9,
      roughness: 0.1,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const light = new THREE.PointLight(0x7000ff, 2, 100);
    light.position.set(5, 5, 5);
    scene.add(light);
    
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
    scene.add(ambientLight);

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      mesh.rotation.x += 0.003;
      mesh.rotation.y += 0.005;
      renderer.render(scene, camera);
    };

    const handleResize = () => {
      if (!mountRef.current) return;
      width = mountRef.current.clientWidth;
      height = mountRef.current.clientHeight;
      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    };

    window.addEventListener('resize', handleResize);
    animate();

    return () => {
      window.removeEventListener('resize', handleResize);
      if (mountRef.current) mountRef.current.removeChild(renderer.domElement);
    };
  }, []);

  return <div ref={mountRef} className="absolute inset-0 z-0 opacity-40" />;
};

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const productos = [
    { id: 1, name: "Casaca 'Cyber-Pulse'", price: "349", img: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?auto=format&fit=crop&q=80&w=500", tag: "NUEVO" },
    { id: 2, name: "Cargo 'Phantom' Negro", price: "199", img: "https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?auto=format&fit=crop&q=80&w=500", tag: "POPULAR" },
    { id: 3, name: "Hoddie 'Glitch' Oversize", price: "220", img: "https://images.unsplash.com/photo-1556821840-3a63f95609a7?auto=format&fit=crop&q=80&w=500", tag: "NUEVO" },
    { id: 4, name: "Sneakers 'Vertex' V1", price: "480", img: "https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?auto=format&fit=crop&q=80&w=500", tag: "LIMITADO" },
  ];

  return (
    <div className="min-h-screen bg-black text-white font-sans selection:bg-cyan-500 selection:text-black">
      
      {/* Barra de Anuncio */}
      <div className="bg-gradient-to-r from-purple-700 via-cyan-600 to-purple-700 py-2 text-center text-[10px] font-black tracking-[0.3em] uppercase overflow-hidden whitespace-nowrap">
        <div className="inline-block animate-marquee">
          ENVÍOS GRATIS A TODO EL PERÚ POR LANZAMIENTO — 15% DE DESCUENTO EN TU PRIMERA COMPRA — BRUKUTU FUTUREWEAR 2024 —&nbsp;
        </div>
        <div className="inline-block animate-marquee">
          ENVÍOS GRATIS A TODO EL PERÚ POR LANZAMIENTO — 15% DE DESCUENTO EN TU PRIMERA COMPRA — BRUKUTU FUTUREWEAR 2024 —&nbsp;
        </div>
      </div>

      {/* Navegación */}
      <nav className={`fixed w-full z-50 transition-all duration-500 ${scrolled ? 'bg-black/90 backdrop-blur-xl py-3 border-b border-white/10' : 'bg-transparent py-8'}`}>
        <div className="max-w-[1600px] mx-auto px-6 flex justify-between items-center">
          {/* Menu Icon (Mobile) */}
          <button className="lg:hidden p-2" onClick={() => setIsMenuOpen(true)}>
            <Menu size={24} />
          </button>

          {/* Links Izquierda (Desktop) */}
          <div className="hidden lg:flex gap-8 text-[11px] font-black uppercase tracking-widest">
            <a href="#" className="hover:text-cyan-400 transition-colors">Tienda</a>
            <a href="#" className="hover:text-cyan-400 transition-colors">Colecciones</a>
            <a href="#" className="hover:text-cyan-400 transition-colors">Drops</a>
          </div>
          
          {/* Logo Central */}
          <div className="flex flex-col items-center">
            <h1 className="text-4xl md:text-5xl font-black tracking-tighter italic text-transparent bg-clip-text bg-gradient-to-r from-white via-cyan-400 to-white drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]">
              BRUKUTU
            </h1>
          </div>

          {/* Iconos Derecha */}
          <div className="flex items-center gap-6">
            <button className="hidden sm:block hover:text-cyan-400 transition-colors">
              <Search size={20} />
            </button>
            <button className="hover:text-cyan-400 transition-colors relative">
              <ShoppingCart size={22} />
              <span className="absolute -top-2 -right-2 bg-white text-black text-[9px] font-black w-4 h-4 rounded-full flex items-center justify-center">0</span>
            </button>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden">
        <Hero3D />
        <div className="relative z-10 text-center px-6">
          <h2 className="text-[12vw] md:text-[8vw] font-black leading-[0.8] tracking-tighter uppercase italic mb-8">
            STREETWEAR <br />
            <span className="text-transparent stroke-text">DISTÓPICO</span>
          </h2>
          <div className="flex flex-col md:flex-row items-center justify-center gap-6">
            <button className="group relative px-12 py-5 bg-white text-black font-black uppercase tracking-widest text-xs overflow-hidden transition-all">
              <span className="relative z-10 group-hover:text-white transition-colors duration-300">Comprar Ahora</span>
              <div className="absolute inset-0 bg-cyan-600 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
            </button>
            <button className="px-12 py-5 border border-white/20 hover:border-white font-black uppercase tracking-widest text-xs transition-all">
              Ver Lookbook
            </button>
          </div>
        </div>
        
        {/* Decoración lateral */}
        <div className="absolute left-10 bottom-10 hidden lg:block">
          <p className="text-[10px] font-mono text-white/30 rotate-90 origin-left tracking-[0.5em]">LIM-2024-BRK</p>
        </div>
      </section>

      {/* Categorías Rápidas */}
      <section className="grid grid-cols-1 md:grid-cols-2 h-[600px] border-y border-white/10">
        <div className="relative group overflow-hidden border-r border-white/10">
          <img src="https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&q=80&w=800" className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0" alt="Hombres" />
          <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
            <h3 className="text-5xl font-black italic uppercase tracking-tighter">Hombres</h3>
          </div>
        </div>
        <div className="relative group overflow-hidden">
          <img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?auto=format&fit=crop&q=80&w=800" className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0" alt="Mujeres" />
          <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
            <h3 className="text-5xl font-black italic uppercase tracking-tighter">Mujeres</h3>
          </div>
        </div>
      </section>

      {/* Productos Destacados */}
      <section className="py-32 px-6 max-w-[1600px] mx-auto">
        <div className="flex justify-between items-end mb-16">
          <h3 className="text-5xl font-black uppercase tracking-tighter italic">Nuevos Ingresos</h3>
          <a href="#" className="border-b-2 border-cyan-500 pb-1 text-xs font-black tracking-widest uppercase">Ver todo</a>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {productos.map((prod) => (
            <div key={prod.id} className="group flex flex-col">
              <div className="relative aspect-[4/5] overflow-hidden bg-zinc-900 border border-white/5">
                <img 
                  src={prod.img} 
                  alt={prod.name} 
                  className="w-full h-full object-cover transition-all duration-700 group-hover:scale-105 group-hover:opacity-40"
                />
                {prod.tag && (
                  <span className="absolute top-4 left-4 bg-white text-black text-[9px] font-black px-3 py-1 uppercase tracking-widest">
                    {prod.tag}
                  </span>
                )}
                {/* Botón de Añadir Rápido */}
                <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                  <button className="bg-white text-black p-4 rounded-full transform translate-y-4 group-hover:translate-y-0 transition-transform">
                    <ShoppingCart size={24} />
                  </button>
                </div>
              </div>
              <div className="mt-6 flex flex-col gap-1">
                <h4 className="text-sm font-black uppercase tracking-widest text-gray-400 group-hover:text-white transition-colors">{prod.name}</h4>
                <p className="text-xl font-bold font-mono">S/ {prod.price}.00</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Marquee de Marca */}
      <section className="bg-white text-black py-10 overflow-hidden whitespace-nowrap border-y-4 border-cyan-500">
        <div className="flex animate-marquee-slow text-7xl md:text-9xl font-black italic uppercase tracking-tighter leading-none">
          <span>BRUKUTU FUTUREWEAR — LIMA PERÚ — DESIGNED FOR THE VOID —&nbsp;</span>
          <span>BRUKUTU FUTUREWEAR — LIMA PERÚ — DESIGNED FOR THE VOID —&nbsp;</span>
        </div>
      </section>

      {/* Footer Minimalista Moderno */}
      <footer className="bg-black pt-32 pb-12 px-6 border-t border-white/10">
        <div className="max-w-[1600px] mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-20 mb-32">
            <div className="col-span-1 md:col-span-1">
              <h2 className="text-4xl font-black italic mb-8 tracking-tighter">BRUKUTU</h2>
              <div className="flex gap-6">
                <Instagram size={20} className="hover:text-cyan-400 cursor-pointer transition-colors" />
                <Facebook size={20} className="hover:text-cyan-400 cursor-pointer transition-colors" />
                <Globe size={20} className="hover:text-cyan-400 cursor-pointer transition-colors" />
              </div>
            </div>
            
            <div>
              <h5 className="text-[11px] font-black uppercase tracking-[0.3em] mb-10 text-gray-500">Info</h5>
              <ul className="flex flex-col gap-4 text-sm font-bold uppercase tracking-widest">
                <li className="hover:text-cyan-400 cursor-pointer">Nosotros</li>
                <li className="hover:text-cyan-400 cursor-pointer">Sostenibilidad</li>
                <li className="hover:text-cyan-400 cursor-pointer">Puntos de Venta</li>
              </ul>
            </div>

            <div>
              <h5 className="text-[11px] font-black uppercase tracking-[0.3em] mb-10 text-gray-500">Ayuda</h5>
              <ul className="flex flex-col gap-4 text-sm font-bold uppercase tracking-widest">
                <li className="hover:text-cyan-400 cursor-pointer">Envíos y Retornos</li>
                <li className="hover:text-cyan-400 cursor-pointer">Cuidado de Prendas</li>
                <li className="hover:text-cyan-400 cursor-pointer">Contacto</li>
              </ul>
            </div>

            <div>
              <h5 className="text-[11px] font-black uppercase tracking-[0.3em] mb-10 text-gray-500">Newsletter</h5>
              <div className="relative">
                <input 
                  type="email" 
                  placeholder="TU@EMAIL.COM" 
                  className="bg-transparent border-b border-white/30 w-full py-2 text-sm focus:outline-none focus:border-cyan-500 transition-colors uppercase font-black"
                />
                <button className="absolute right-0 bottom-2 text-xs font-black uppercase tracking-widest text-cyan-400">Unirse</button>
              </div>
            </div>
          </div>
          
          <div className="flex flex-col md:flex-row justify-between items-center gap-6 text-[10px] font-black tracking-widest text-gray-600 uppercase">
            <p>© 2024 BRUKUTU PERÚ. TODOS LOS DERECHOS RESERVADOS.</p>
            <div className="flex gap-8">
              <span>Términos y Condiciones</span>
              <span>Libro de Reclamaciones</span>
            </div>
          </div>
        </div>
      </footer>

      {/* Menu Mobile */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-[100] bg-white text-black p-10 flex flex-col justify-between animate-in slide-in-from-left duration-500">
          <div className="flex justify-between items-center">
            <span className="font-black italic text-2xl uppercase">Menú</span>
            <button onClick={() => setIsMenuOpen(false)}><X size={40} /></button>
          </div>
          <nav className="flex flex-col gap-6">
            <a href="#" className="text-6xl font-black uppercase italic tracking-tighter hover:text-cyan-500 transition-colors">Tienda</a>
            <a href="#" className="text-6xl font-black uppercase italic tracking-tighter hover:text-cyan-500 transition-colors">Drops</a>
            <a href="#" className="text-6xl font-black uppercase italic tracking-tighter hover:text-cyan-500 transition-colors">Hombres</a>
            <a href="#" className="text-6xl font-black uppercase italic tracking-tighter hover:text-cyan-500 transition-colors">Mujeres</a>
          </nav>
          <div className="flex gap-10 font-black uppercase text-xs tracking-widest">
            <a href="#">Instagram</a>
            <a href="#">WhatsApp</a>
          </div>
        </div>
      )}

      {/* Estilos CSS Inline para animaciones */}
      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-100%); }
        }
        @keyframes marquee-slow {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .animate-marquee {
          animation: marquee 20s linear infinite;
        }
        .animate-marquee-slow {
          animation: marquee-slow 30s linear infinite;
        }
        .stroke-text {
          -webkit-text-stroke: 1px white;
          color: transparent;
        }
      `}} />
    </div>
  );
};

export default App;