import React from "react";

// HotLanding.jsx
// Página React de una sola pieza - lista para pegársela a tu proyecto
// Requiere Tailwind CSS en el proyecto (clases usadas ampliamente)

export default function HotLanding() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-900 via-black to-gray-900 text-white overflow-hidden">
      {/* Background flame glow */}
      <div className="absolute inset-0 pointer-events-none -z-10">
        <div className="absolute -left-1/4 top-1/4 w-[1200px] h-[1200px] rounded-full filter blur-3xl opacity-30 bg-gradient-to-r from-orange-500 via-red-600 to-pink-600 animate-pulse-slow" />
        <div className="absolute right-0 bottom-0 w-[900px] h-[900px] rounded-full filter blur-2xl opacity-25 bg-gradient-to-l from-yellow-400 via-orange-500 to-red-600 animate-pulse-slower" />
      </div>

      <header className="max-w-6xl mx-auto px-6 py-8 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-yellow-400 to-red-500 flex items-center justify-center shadow-2xl transform rotate-6">
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" fill="white" />
            </svg>
          </div>
          <h1 className="text-2xl font-extrabold tracking-tight">Tope de Wapa</h1>
        </div>
        <nav className="space-x-4 hidden md:flex">
          <a className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 transition">Inicio</a>
          <a className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 transition">Coches</a>
          <a className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 transition">Galería</a>
          <a className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 transition">Contacto</a>
        </nav>
      </header>

      <main className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center gap-12 py-12">
        {/* Left: Hero text */}
        <section className="flex-1">
          <h2 className="text-5xl md:text-6xl font-extrabold leading-tight">La web más <span className="bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 via-orange-400 to-red-500">caliente</span> de la ciudad</h2>
          <p className="mt-6 text-lg text-white/85">Coches potentes, estética que rompe pupilas y animaciones que prenden todo. Entra y deja que el espectáculo hable por sí mismo.</p>

          <div className="mt-8 flex items-center gap-4">
            <a className="inline-flex items-center gap-3 px-6 py-3 rounded-2xl bg-gradient-to-r from-red-500 to-yellow-400 text-black font-bold shadow-2xl transform hover:scale-105 transition">Ver la flota
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="ml-1">
                <path d="M5 12h14M13 5l7 7-7 7" stroke="black" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>

            <a className="px-5 py-3 rounded-2xl border border-white/10 hover:border-white/30 transition">Contactar</a>
          </div>

          <div className="mt-10 grid grid-cols-3 gap-3">
            <Stat label="Caballos" value="900+" />
            <Stat label="Aceleración" value="0-100 en 2.6s" />
            <Stat label="Kilómetros" value="0 (estreno)" />
          </div>
        </section>

        {/* Right: Visual stage with cars and flames */}
        <section className="flex-1 relative w-full max-w-2xl">
          <div className="relative rounded-3xl overflow-hidden border border-white/10 shadow-2xl bg-black/60">
            {/* Road */}
            <div className="h-72 md:h-96 bg-gradient-to-b from-gray-800 via-gray-900 to-black p-6">
              <div className="relative h-full">
                {/* Flame columns (SVG) */}
                <div className="absolute left-6 bottom-6 scale-90 transform animate-flame">
                  <FlameLarge />
                </div>
                <div className="absolute right-6 bottom-6 scale-75 transform animate-flame delay-200">
                  <FlameLarge />
                </div>

                {/* Cars sliding */}
                <div className="absolute inset-0 pointer-events-none">
                  <CarStrip yPercent={65} delay={0} size={1.0} />
                  <CarStrip yPercent={78} delay={800} size={0.8} />
                  <CarStrip yPercent={50} delay={1600} size={1.2} direction="left" />
                </div>

                {/* Sparks */}
                <div className="absolute inset-0 animate-sparks opacity-60" aria-hidden></div>

                {/* Center badge */}
                <div className="absolute left-1/2 -translate-x-1/2 top-8 text-center">
                  <div className="inline-flex items-center gap-3 px-5 py-2 rounded-full bg-white/6 backdrop-blur">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                      <path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" fill="white" />
                    </svg>
                    <span className="font-semibold">Furia & Estilo</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Footer strip */}
            <div className="px-6 py-3 border-t border-white/5 flex items-center justify-between">
              <div className="text-sm">Galería épica — 24/7</div>
              <div className="text-sm">Síguenos: @tope_de_wapa</div>
            </div>
          </div>
        </section>
      </main>

      <footer className="mt-12 py-10 text-center text-sm text-white/60">Diseñado para impresionar • Hecho con <span className="text-amber-400">🔥</span></footer>

      {/* Styles */}
      <style>{`
        @keyframes slide-right {
          0% { transform: translateX(-120%); }
          100% { transform: translateX(120%); }
        }
        @keyframes slide-left {
          0% { transform: translateX(120%); }
          100% { transform: translateX(-120%); }
        }
        @keyframes flame-flicker {
          0% { transform: translateY(0) scaleY(1); opacity: 0.9 }
          50% { transform: translateY(-6px) scaleY(1.03); opacity: 1 }
          100% { transform: translateY(0) scaleY(1); opacity: 0.9 }
        }
        @keyframes sparks {
          0% { opacity: 0.2; transform: translateY(0); }
          50% { opacity: 0.9; transform: translateY(-8px); }
          100% { opacity: 0.2; transform: translateY(0); }
        }

        .animate-flame { animation: flame-flicker 1.6s ease-in-out infinite; }
        .animate-sparks { background-image: radial-gradient(circle at 20% 20%, rgba(255,200,70,0.18), transparent 6%), radial-gradient(circle at 80% 40%, rgba(255,120,50,0.12), transparent 8%), radial-gradient(circle at 50% 80%, rgba(255,255,255,0.06), transparent 6%); animation: sparks 4s infinite; }
        .animate-pulse-slow { animation: pulse 6s ease-in-out infinite; }
        .animate-pulse-slower { animation: pulse 10s ease-in-out infinite; }

        @keyframes pulse { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.05); opacity: 1 } }

        /* small helper delays without Tailwind */
        .delay-200 { animation-delay: .2s; }

      `}</style>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div className="bg-white/5 p-4 rounded-2xl flex flex-col items-start">
      <div className="text-sm text-white/70">{label}</div>
      <div className="text-2xl font-bold mt-1">{value}</div>
    </div>
  );
}

function FlameLarge() {
  return (
    <svg width="140" height="180" viewBox="0 0 80 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="drop-shadow-2xl">
      <defs>
        <linearGradient id="g1" x1="0" x2="1">
          <stop offset="0%" stopColor="#FFD36A" />
          <stop offset="60%" stopColor="#FF5A00" />
          <stop offset="100%" stopColor="#FF0048" />
        </linearGradient>
      </defs>
      <g>
        <path d="M40 2 C30 18, 14 30, 17 50 C19 66, 32 80, 40 92 C48 80, 61 66, 63 50 C66 30, 50 18, 40 2 Z" fill="url(#g1)" />
        <path d="M40 18 C34 26, 26 34, 28 46 C29 54, 36 63, 40 70 C44 63, 51 54, 52 46 C54 34, 46 26, 40 18 Z" fill="#FFB44D" opacity="0.95" />
      </g>
    </svg>
  );
}

function CarStrip({ yPercent = 70, delay = 0, size = 1, direction = 'right' }) {
  const animName = direction === 'right' ? 'slide-right' : 'slide-left';
  const style = {
    top: `${yPercent}%`,
    animation: `${animName} 8s linear ${delay}ms infinite`,
    transformOrigin: 'left center',
  };

  return (
    <div style={{ position: 'absolute', left: 0, right: 0, pointerEvents: 'none' }}>
      <div style={style} className="relative">
        <CarSVG scale={size} />
      </div>
    </div>
  );
}

function CarSVG({ scale = 1 }) {
  return (
    <div style={{ transform: `scale(${scale})` }} className="ml-[-12%]">
      <svg width="340" height="110" viewBox="0 0 340 110" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="40" width="340" height="40" rx="12" fill="rgba(255,255,255,0.03)" />
        <g transform="translate(0,0)">
          <path d="M20 60 L60 40 L220 40 L300 60 L320 80 L280 80 L260 70 L100 70 L80 80 L40 80 Z" fill="#111827" opacity="0.95" />
          <circle cx="90" cy="82" r="10" fill="#000" stroke="#fff" strokeWidth="4" />
          <circle cx="230" cy="82" r="10" fill="#000" stroke="#fff" strokeWidth="4" />
          <rect x="70" y="44" width="110" height="22" rx="6" fill="#1F2937" />
          <rect x="190" y="44" width="70" height="22" rx="6" fill="#374151" />
          {/* Headlights glow */}
          <ellipse cx="310" cy="66" rx="6" ry="4" fill="#FFD36A" opacity="0.9" />
          <ellipse cx="308" cy="66" rx="14" ry="6" fill="#FFD36A" opacity="0.06" />
        </g>
      </svg>
    </div>
  );
}