/* global React, CrownMark */
const { useState, useEffect, useRef } = React;

// ---------- Process Timeline ----------
const phases = [
{
  n: "01",
  title: "ESCUCHAR LA CALLE",
  sub: "Entender",
  body: "Vamos al barrio. Hablamos con los niños y jóvenes, las juntas vecinales, los entrenadores. La cancha no se diseña desde un escritorio — se diseña escuchando.",
  img: "assets/sketch-low.jpeg"
},
{
  n: "02",
  title: "TRAZAR LA JUGADA",
  sub: "Estrategia",
  body: "Definimos qué traer: torneo 3x3, clínica, mural, drop de merch. Cada comuna pide algo distinto y armamos un plan a su medida.",
  img: "assets/sketch-pose.jpeg"
},
{
  n: "03",
  title: "PRESENTAR EL REINO",
  sub: "Solución",
  body: "Cancha lista, DJ en el parlante, banderas en alto. Diseñamos y llevamos la producción completa para que el evento se sienta digno de un Mundial.",
  img: "assets/court-mockup.jpeg"
},
{
  n: "04",
  title: "EN LA CANCHA Y ESCENARIO",
  sub: "En terreno",
  body: "Activamos alianzas con marcas, equipos y municipios. Conseguimos balones, indumentaria, premios. Todo lo que necesita una jornada épica.",
  img: "assets/cap-mockup.jpeg"
},
{
  n: "05",
  title: "CUIDAR EL LEGADO",
  sub: "Seguimiento",
  body: "Seguimos a los jugadores, a los proyectos sociales, a las canchas. El streetball no es un evento — es una comunidad.",
  img: "assets/squad-sunset.jpeg"
}];


const ProcessTimeline = () => {
  const [active, setActive] = useState(0);
  const hoverSfx = useRef(null);
  const playHover = () => {
    try {
      if (!hoverSfx.current) {
        hoverSfx.current = new Audio("assets/pelota.mp3");
        hoverSfx.current.volume = 0.55;
      }
      const a = hoverSfx.current;
      a.currentTime = 0;
      a.play().catch(() => {});
    } catch (e) {}
  };
  return (
    <section id="impacto" data-screen-label="Proceso" className="relative py-12 md:py-16 bg-[#020100] overflow-hidden">
      {/* Faint pattern */}
      <div className="absolute inset-0 opacity-[0.04] pointer-events-none" style={{ backgroundImage: "url('assets/camo-pattern.jpeg')", backgroundSize: "500px" }} />

      <div className="relative max-w-[1440px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10 mb-10">
          <div className="lg:col-span-7">
            <div className="text-[#FF6D0D] uppercase tracking-[0.3em] text-xs mb-4" style={{ fontFamily: "Inter, sans-serif" }}>
              ·  El Regreso
            </div>
            <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 6vw, 96px)", lineHeight: 0.92 }} className="text-white">
              EL <span className="text-[#FF6D0D]">REGRESO.</span>
            </h2>
          </div>
          <div className="lg:col-span-5 text-white/80 text-base md:text-lg leading-relaxed self-end space-y-4" style={{ fontFamily: "Inter, sans-serif" }}>
            <p>
              <span className="text-white font-semibold">No ofrecemos solo un show. Creamos experiencias.</span> El proyecto combina deporte, cultura urbana, música, interacción con el público y exhibiciones de alto impacto, adaptables a colegios, universidades, centros deportivos, plazas, eventos y marcas.
            </p>
            <p className="text-white/65">
              La exhibición considera jugadores, DJ/animador, sistema de sonido, dinámicas participativas, concursos, incentivos y la posibilidad de registro audiovisual — generando una experiencia cercana, entretenida y memorable para la comunidad.
            </p>
          </div>
        </div>

        <div className="grid lg:grid-cols-12 gap-10 items-stretch">
          {/* Left: phase nav */}
          <div className="lg:col-span-5">
            <ol className="relative h-full flex flex-col justify-between">
              {/* Track */}
              <div className="absolute left-[19px] top-2 bottom-2 w-px bg-white/10" />
              <div
                className="absolute left-[19px] top-2 w-px bg-[#FF6D0D] transition-all duration-700"
                style={{ height: `${active / (phases.length - 1) * 92}%` }} />
              
              {phases.map((p, i) => {
                const on = i === active;
                const done = i < active;
                return (
                  <li key={p.n} className="relative pl-14 cursor-pointer group" onMouseEnter={() => { playHover(); setActive(i); }} onClick={() => setActive(i)}>
                    <div
                      className={
                      "absolute left-0 top-0 w-10 h-10 flex items-center justify-center border-2 transition-all duration-300 " + (
                      on ? "bg-[#FF6D0D] border-[#FF6D0D] scale-110" : done ? "bg-[#FF6D0D]/30 border-[#FF6D0D]" : "bg-[#020100] border-white/20")
                      }>
                      
                      <span className={"text-xs font-bold " + (on ? "text-black" : "text-white")} style={{ fontFamily: "'Anton', sans-serif" }}>
                        {p.n}
                      </span>
                    </div>
                    <div className={"text-[10px] uppercase tracking-[0.25em] mb-1 " + (on ? "text-[#FF6D0D]" : "text-white/40")} style={{ fontFamily: "Inter, sans-serif" }}>
                      Fase {p.n} · {p.sub}
                    </div>
                    <h3 className={"text-2xl md:text-3xl transition-colors " + (on ? "text-white" : "text-white/50 group-hover:text-white/80")} style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.01em" }}>
                      {p.title}
                    </h3>
                  </li>);

              })}
            </ol>
          </div>

          {/* Right: active phase detail */}
          <div className="lg:col-span-7 relative flex flex-col">
            <div className="relative flex-1 min-h-[460px] overflow-hidden border border-white/10">
              {phases.map((p, i) =>
              <div
                key={p.n}
                className="absolute inset-0 transition-opacity duration-700"
                style={{ opacity: i === active ? 1 : 0, pointerEvents: i === active ? "auto" : "none" }}>
                
                  <img src={p.img} alt={p.title} className="absolute inset-0 w-full h-full object-cover" />
                  <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />
                  <div className="absolute inset-x-0 bottom-0 p-6 md:p-10">
                    <div className="flex items-baseline gap-4 mb-3">
                      <span className="text-[#FF6D0D]" style={{ fontFamily: "'Anton', sans-serif", fontSize: 64, lineHeight: 0.8 }}>
                        {p.n}
                      </span>
                      <div>
                        <div className="text-white/60 text-xs uppercase tracking-[0.25em]" style={{ fontFamily: "Inter, sans-serif" }}>Fase {p.n}</div>
                        <h3 className="text-white text-3xl md:text-4xl" style={{ fontFamily: "'Anton', sans-serif" }}>{p.title}</h3>
                      </div>
                    </div>
                    <p className="text-white/80 text-base md:text-lg max-w-2xl leading-relaxed" style={{ fontFamily: "Inter, sans-serif" }}>
                      {p.body}
                    </p>
                  </div>
                </div>
              )}
            </div>
            <div className="mt-4 flex justify-between text-xs text-white/40" style={{ fontFamily: "Inter, sans-serif" }}>
              <span>{String(active + 1).padStart(2, "0")} / {String(phases.length).padStart(2, "0")}</span>
              <div className="flex gap-2">
                <button onClick={() => setActive((a) => Math.max(0, a - 1))} className="hover:text-white transition-colors">← Anterior</button>
                <span>·</span>
                <button onClick={() => setActive((a) => Math.min(phases.length - 1, a + 1))} className="hover:text-white transition-colors">Siguiente →</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// ---------- Manifest banner ----------
const Manifest = () =>
<section className="relative py-14 md:py-20 overflow-hidden">
    <div className="absolute inset-0">
      <img src="assets/camo-pattern.jpeg" className="w-full h-full object-cover" alt="" />
      <div className="absolute inset-0 bg-[#020100]/80" />
    </div>
    <div className="relative max-w-[1440px] mx-auto px-6 md:px-10 text-center">
      <CrownMark size={80} />
      <h2
      className="mt-8 text-white mx-auto"
      style={{
        fontFamily: "'Anton', sans-serif",
        fontSize: "clamp(48px, 9vw, 160px)",
        lineHeight: 0.88,
        letterSpacing: "-0.01em"
      }}>
      
        DEJA LA PANTALLA.<br />
        <span className="text-[#FF6D0D] italic">TOMA EL BALÓN.</span>
      </h2>
      <p className="mt-8 text-white/70 text-lg md:text-2xl max-w-2xl mx-auto" style={{ fontFamily: "Inter, sans-serif" }}>Aquí nace otra historia...La tuya.

    </p>
    </div>
  </section>;


// ---------- Testimonials marquee ----------
const testimonials = [
{ name: "BABYFACE", role: "Jugador · Reyes de la Calle", quote: "Entreno mientras mi competencia duerme." },
{ name: "TAZ", role: "Jugador · Leyenda", quote: "Las personas valiosas no son las que brillan más, sino las que iluminan la vida de quienes aman." },
{ name: "THE CREATOR", role: "Jugador · Reyes de la Calle", quote: "El básquet no es solo un deporte, es un juego. Y los juegos están para disfrutarlos. A eso le llamamos Streetball." },
{ name: "PABLO COP", role: "Coach · Reyes de la Calle", quote: "Si entrenas te superas" },
{ name: "Andrés Cárdenas Underesu", role: "Cineasta · Santiago", quote: "Filmar a este movimiento es filmar un pedazo de Chile que nadie más mira." },
{ name: "CRISONE", role: "Jugador · Reyes de la Calle", quote: "1% de talento 99% de trabajo" },
{ name: "PRIMATE", role: "Jugador · Reyes de la Calle", quote: "Entrega seguridad a tu equipo; que no te vean cansado" },
{ name: "ZENDOH", role: "Jugador · Leyenda", quote: "La vida es ahora, comparte lo bueno" }];


const TestimonialCard = ({ t }) =>
<article className="w-[400px] md:w-[480px] shrink-0 mx-3 bg-[#0A0807] border border-white/10 p-8 hover:border-[#FF6D0D]/40 transition-colors">
    <div className="text-[#FF6D0D] text-5xl leading-none mb-2" style={{ fontFamily: "'Anton', sans-serif" }}>"</div>
    <p className="text-white/85 text-base md:text-lg leading-relaxed mb-6 -mt-3" style={{ fontFamily: "Inter, sans-serif" }}>
      {t.quote}
    </p>
    <div className="flex items-center gap-4 pt-4 border-t border-white/10">
      <div className="w-12 h-12 rounded-full bg-gradient-to-br from-[#FF6D0D] to-[#a04408] flex items-center justify-center text-black font-bold" style={{ fontFamily: "'Anton', sans-serif" }}>
        {t.name.split(" ").map((n) => n[0]).slice(0, 2).join("")}
      </div>
      <div>
        <div className="text-white text-sm font-semibold" style={{ fontFamily: "Inter, sans-serif" }}>{t.name}</div>
        <div className="text-white/50 text-xs uppercase tracking-widest" style={{ fontFamily: "Inter, sans-serif" }}>{t.role}</div>
      </div>
    </div>
  </article>;


const Testimonials = () => {
  const row = [...testimonials, ...testimonials];
  return (
    <section id="prensa" data-screen-label="Testimonios" className="relative py-12 md:py-16 bg-[#020100] overflow-hidden">
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 mb-10">
        <div className="text-[#FF6D0D] uppercase tracking-[0.3em] text-xs mb-4" style={{ fontFamily: "Inter, sans-serif" }}>
          ·  Voces del Reino
        </div>
        <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 6vw, 88px)", lineHeight: 0.92 }} className="text-white">
          LO QUE DICE<br /><span className="text-[#FF6D0D]">LA CANCHA.</span>
        </h2>
      </div>

      <div className="relative">
        <div className="absolute inset-y-0 left-0 w-24 md:w-40 bg-gradient-to-r from-[#020100] to-transparent z-10 pointer-events-none" />
        <div className="absolute inset-y-0 right-0 w-24 md:w-40 bg-gradient-to-l from-[#020100] to-transparent z-10 pointer-events-none" />
        <div className="flex marquee">
          {row.map((t, i) => <TestimonialCard key={i} t={t} />)}
        </div>
        <div className="flex marquee marquee-reverse mt-4">
          {row.slice().reverse().map((t, i) => <TestimonialCard key={"r" + i} t={t} />)}
        </div>
      </div>
    </section>);

};

// ---------- Drop / Tienda ----------
const drops = [
{ name: "POLERA FUNDADORES", line: "Oversize · Since 2003", price: "$24.990", img: "assets/polera-fundadores-v2.png" },
{ name: "JOCKEY DESDE 2003", line: "Cuero + Algodón", price: "$18.990", img: "assets/cap-mockup.jpeg" },
{ name: "SHORTS REINO", line: "Mesh · Drawstring blanco", price: "$22.990", img: "assets/shorts-camo.jpeg" },
{ name: "POLERA ZENDOH", line: "Drop 01 · Edición limitada", price: "$26.990", img: "assets/zendoh-tee-v2.png" }];


const Tienda = () =>
<section id="tienda" data-screen-label="Tienda" className="relative py-16 md:py-24 bg-[#0A0807]">
    <div className="max-w-[1440px] mx-auto px-6 md:px-10">
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
        <div>
          <div className="text-[#FF6D0D] uppercase tracking-[0.3em] text-xs mb-4" style={{ fontFamily: "Inter, sans-serif" }}>
            ·  Tienda Oficial
          </div>
          <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 6vw, 88px)", lineHeight: 0.92 }} className="text-white">
            VESTÍ EL <span className="text-[#FF6D0D]">REINO.</span>
          </h2>
        </div>
        <a href="#tienda" className="text-white hover:text-[#FF6D0D] text-sm uppercase tracking-[0.2em] font-semibold flex items-center gap-2" style={{ fontFamily: "Inter, sans-serif" }}>
          Ver tienda completa
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
        </a>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {drops.map((d) =>
      <article key={d.name} className="group bg-[#020100] border border-white/5 hover:border-[#FF6D0D]/40 transition-all">
            <div className="relative aspect-[4/5] overflow-hidden bg-black">
              <img src={d.img} alt={d.name} className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
              <div className="absolute top-3 left-3 bg-[#FF6D0D] text-black text-[10px] uppercase tracking-widest font-bold px-2 py-1" style={{ fontFamily: "'Anton', sans-serif" }}>
                Drop
              </div>
            </div>
            <div className="p-5">
              <div className="text-white text-lg" style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.02em" }}>{d.name}</div>
              <div className="text-white/50 text-xs uppercase tracking-widest mt-1" style={{ fontFamily: "Inter, sans-serif" }}>{d.line}</div>
              <div className="flex items-center justify-between mt-4">
                <div className="text-[#FF6D0D] font-bold" style={{ fontFamily: "'Anton', sans-serif", fontSize: 20 }}>{d.price}</div>
                <button className="w-9 h-9 bg-white/5 hover:bg-[#FF6D0D] hover:text-black border border-white/10 hover:border-[#FF6D0D] text-white flex items-center justify-center transition-all">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h2l2 12h12l2-8H6M9 21a1 1 0 100-2 1 1 0 000 2zm9 0a1 1 0 100-2 1 1 0 000 2z" /></svg>
                </button>
              </div>
            </div>
          </article>
      )}
      </div>
    </div>
  </section>;


// ---------- Contact + Footer ----------
const ContactCTA = ({ onCTA }) =>
<section id="contacto" data-screen-label="Contacto" className="relative py-12 md:py-16 bg-[#020100] border-t border-white/5">
    <div className="max-w-[1440px] mx-auto px-6 md:px-10">
      <div className="grid lg:grid-cols-12 gap-12 items-center">
        <div className="lg:col-span-7">
          <div className="text-[#FF6D0D] uppercase tracking-[0.3em] text-xs mb-4" style={{ fontFamily: "Inter, sans-serif" }}>
            ·  Únete al Reino
          </div>
          <h2 style={{ fontFamily: "'Anton', sans-serif", fontSize: "clamp(40px, 7vw, 110px)", lineHeight: 0.9 }} className="text-white">
            ¿LISTO PARA <br />
            <span className="text-[#FF6D0D]">JUGAR?</span>
          </h2>
          <p className="mt-6 text-white/70 text-lg max-w-xl leading-relaxed" style={{ fontFamily: "Inter, sans-serif" }}>
            Si querés llevar Reyes a tu comuna, sumarte como jugador, auspiciar un torneo
            o cubrir un evento — escríbenos. Te respondemos en menos de 24 horas.
          </p>
          <div className="mt-8 flex flex-wrap gap-4">
            <button onClick={onCTA} className="bg-[#FF6D0D] hover:bg-[#ff8530] text-black font-bold px-8 py-5 uppercase tracking-[0.18em] transition-all hover:-translate-y-0.5 shadow-[0_16px_48px_-12px_rgba(255,109,13,0.5)]" style={{ fontFamily: "'Anton', sans-serif", fontSize: 17, letterSpacing: "0.2em" }}>
              Empezar conversación
            </button>
            <a href="https://www.youtube.com/@ReyesdelaCalleoficial" target="_blank" rel="noopener noreferrer" className="border-2 border-white/30 text-white px-8 py-5 uppercase tracking-[0.18em] font-bold hover:border-white transition-colors" style={{ fontFamily: "'Anton', sans-serif", fontSize: 17, letterSpacing: "0.2em" }}>
              Canal YouTube
            </a>
          </div>
        </div>

        <div className="lg:col-span-5">
          <div className="relative aspect-[16/9] max-w-md ml-auto overflow-hidden">
            <div className="absolute -inset-4 bg-[#FF6D0D]/20 blur-3xl rounded-full" />
            <video
            ref={(el) => {if (el) {el.muted = true;el.volume = 0;el.defaultMuted = true;}}}
            src="assets/player.mp4"
            autoPlay
            muted
            loop
            playsInline
            disableRemotePlayback
            className="relative w-full h-full object-cover border-2 border-[#FF6D0D]/30" />
          </div>
        </div>
      </div>
    </div>
  </section>;


const Footer = () =>
<footer className="relative bg-black text-white border-t border-white/10">
    <div className="max-w-[1440px] mx-auto px-6 md:px-10 py-16">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-10 mb-12">
        <div className="col-span-2 md:col-span-1">
          <CrownMark size={72} color="#FFFFFF" />
          <p className="mt-5 text-white/50 text-sm max-w-[240px] leading-relaxed" style={{ fontFamily: "Inter, sans-serif" }}>
            Movimiento de streetball chileno fundado en 2003. Cultura, comunidad y cancha.
          </p>
        </div>

        {[
      { title: "Navegación", links: [{ l: "Historia", href: "#historia" }, { l: "Archivo de la Calle", href: "#equipo" }, { l: "El Regreso", href: "#impacto" }, { l: "Lo que dice la Cancha", href: "#prensa" }, { l: "Novedades", href: "#novedades" }] },
      { title: "Legal", links: [{ l: "Términos", href: "terminos.html" }, { l: "Privacidad", href: "privacidad.html" }, { l: "Cookies", href: "privacidad.html#cookies" }] },
      { title: "Conecta", links: [{ l: "Instagram @reyesdelacalle.cl", href: "https://instagram.com/reyesdelacalle.cl", ext: true }, { l: "YouTube", href: "https://www.youtube.com/@ReyesdelaCalleoficial", ext: true }] }].
      map((col) =>
      <div key={col.title}>
            <div className="text-[#FF6D0D] uppercase tracking-[0.25em] text-xs mb-5 font-semibold" style={{ fontFamily: "Inter, sans-serif" }}>
              {col.title}
            </div>
            <ul className="flex flex-col gap-3">
              {col.links.map((l) =>
          <li key={l.l}>
                  <a href={l.href} {...(l.ext ? { target: "_blank", rel: "noopener noreferrer" } : {})} className="text-white/70 hover:text-white text-sm transition-colors" style={{ fontFamily: "Inter, sans-serif" }}>
                    {l.l}
                  </a>
                </li>
          )}
            </ul>
          </div>
      )}
      </div>

      <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div className="text-white/40 text-xs uppercase tracking-[0.2em] flex flex-col sm:flex-row sm:items-center gap-x-3 gap-y-1" style={{ fontFamily: "Inter, sans-serif" }}>
          <span>© 2026 Reyes de la Calle · Hecho en Santiago, Chile</span>
          <span className="hidden sm:inline text-white/20">·</span>
          <span>
            Desarrollado por <a href="https://satori360.cl/" target="_blank" rel="noopener noreferrer" className="text-white/60 hover:text-[#FF6D0D] transition-colors">Satori360</a>
          </span>
        </div>
        <div className="flex items-center gap-4">
          <button
          onClick={() => window.dispatchEvent(new CustomEvent("rdc:open-admin"))}
          className="text-white/30 hover:text-[#FF6D0D] text-[10px] uppercase tracking-[0.25em] transition-colors"
          style={{ fontFamily: "Inter, sans-serif" }}>
            · Admin
          </button>
          <div className="flex items-center gap-2 text-[#FF6D0D]" style={{ fontFamily: "'Anton', sans-serif", letterSpacing: "0.15em" }}>
            #REYESDELACALLE
          </div>
        </div>
      </div>
    </div>

    {/* Giant wordmark */}
    <div className="overflow-hidden border-t border-white/5">
      <div
      className="text-center text-[#0A0807] py-6 select-none"
      style={{
        fontFamily: "'Anton', sans-serif",
        fontSize: "clamp(80px, 18vw, 280px)",
        lineHeight: 0.85,
        color: "#0A0807",
        WebkitTextStroke: "1px rgba(255,109,13,0.15)"
      }}>
      
        REYES DE LA CALLE
      </div>
    </div>
  </footer>;


// ---------- Contact form modal ----------
const LeadModal = ({ open, onClose }) => {
  const [data, setData] = useState({ goal: "torneo", name: "", email: "", comuna: "", message: "" });
  const [sent, setSent] = useState(false);
  useEffect(() => {if (open) {setSent(false);}}, [open]);
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  const goals = [
  { v: "torneo", t: "Traer un torneo a mi comuna" },
  { v: "jugar", t: "Sumarme como jugador/a" },
  { v: "auspicio", t: "Auspicio / Marca" },
  { v: "prensa", t: "Prensa / Cobertura" }];

  const goalLabel = goals.find((g) => g.v === data.goal)?.t || "Contacto";
  const valid = data.name.trim() && data.email.trim() && data.message.trim();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!valid) return;
    const subject = `[Reyes de la Calle] ${goalLabel} — ${data.name}`;
    const body = [
    `Motivo: ${goalLabel}`,
    `Nombre: ${data.name}`,
    `Email: ${data.email}`,
    data.comuna ? `Comuna: ${data.comuna}` : null,
    "",
    "Mensaje:",
    data.message].
    filter(Boolean).join("\n");
    const url = `mailto:contacto@reyesdelacalle.cl?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = url;
    setSent(true);
  };

  return (
    <div onClick={(e) => {if (e.target === e.currentTarget) onClose();}} className="fixed inset-0 z-[200] bg-black/85 backdrop-blur-md flex items-center justify-center p-4 overflow-y-auto" style={{ animation: "fadeIn 0.3s ease" }}>
      {/* Botón X — fijo al viewport, siempre visible */}
      <button type="button" onClick={onClose} className="fixed top-4 right-4 md:top-6 md:right-6 w-12 h-12 rounded-full bg-[#FF6D0D] hover:bg-[#ff8530] text-black flex items-center justify-center transition-all hover:scale-110 z-[210] shadow-[0_6px_24px_rgba(0,0,0,0.6)]" aria-label="Cerrar">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
      </button>
      <div className="relative bg-[#0A0807] border border-white/10 w-full max-w-2xl my-8" style={{ animation: "pop 0.4s cubic-bezier(.34,1.56,.64,1)" }}>

        {!sent ?
        <form onSubmit={handleSubmit} className="p-8 md:p-10">
            <div className="text-[#FF6D0D] uppercase tracking-[0.25em] text-xs mb-3" style={{ fontFamily: "Inter, sans-serif" }}>
              ·  Únete al Reino
            </div>
            <h3 className="text-white mb-2" style={{ fontFamily: "'Anton', sans-serif", fontSize: 42, lineHeight: 0.95 }}>
              CUÉNTANOS <span className="text-[#FF6D0D]">QUÉ NECESITAS.</span>
            </h3>
            <p className="text-white/55 text-sm mb-6" style={{ fontFamily: "Inter, sans-serif" }}>
              Te respondemos directo a tu mail en menos de 24 horas.
            </p>

            <div className="mb-5">
              <label className="block text-white/60 text-[10px] uppercase tracking-[0.25em] mb-2" style={{ fontFamily: "Inter, sans-serif" }}>Motivo</label>
              <div className="grid grid-cols-2 gap-2">
                {goals.map((g) =>
              <button
                key={g.v}
                type="button"
                onClick={() => setData((d) => ({ ...d, goal: g.v }))}
                className={"text-left text-sm border px-4 py-3 transition-all " + (data.goal === g.v ? "border-[#FF6D0D] bg-[#FF6D0D]/10 text-white" : "border-white/10 text-white/70 hover:border-white/30")}
                style={{ fontFamily: "Inter, sans-serif" }}>
                    {g.t}
                  </button>
              )}
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block text-white/60 text-[10px] uppercase tracking-[0.25em] mb-2" style={{ fontFamily: "Inter, sans-serif" }}>Nombre *</label>
                <input required value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} placeholder="Tu nombre" className="w-full bg-transparent border-b-2 border-white/20 focus:border-[#FF6D0D] outline-none py-2 text-white placeholder-white/30" style={{ fontFamily: "Inter, sans-serif" }} />
              </div>
              <div>
                <label className="block text-white/60 text-[10px] uppercase tracking-[0.25em] mb-2" style={{ fontFamily: "Inter, sans-serif" }}>Email *</label>
                <input required type="email" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} placeholder="tu@email.cl" className="w-full bg-transparent border-b-2 border-white/20 focus:border-[#FF6D0D] outline-none py-2 text-white placeholder-white/30" style={{ fontFamily: "Inter, sans-serif" }} />
              </div>
            </div>

            <div className="mb-5">
              <label className="block text-white/60 text-[10px] uppercase tracking-[0.25em] mb-2" style={{ fontFamily: "Inter, sans-serif" }}>Comuna (opcional)</label>
              <input value={data.comuna} onChange={(e) => setData({ ...data, comuna: e.target.value })} placeholder="La Pintana, Quilicura..." className="w-full bg-transparent border-b-2 border-white/20 focus:border-[#FF6D0D] outline-none py-2 text-white placeholder-white/30" style={{ fontFamily: "Inter, sans-serif" }} />
            </div>

            <div className="mb-6">
              <label className="block text-white/60 text-[10px] uppercase tracking-[0.25em] mb-2" style={{ fontFamily: "Inter, sans-serif" }}>Mensaje *</label>
              <textarea
              required
              value={data.message}
              onChange={(e) => setData({ ...data, message: e.target.value })}
              placeholder="Cuéntanos sobre tu idea, tu barrio, tu fecha estimada..."
              rows="5"
              className="w-full bg-white/5 border border-white/10 focus:border-[#FF6D0D] outline-none p-3 text-white placeholder-white/30 resize-none"
              style={{ fontFamily: "Inter, sans-serif" }} />
            </div>

            <div className="flex items-center justify-between gap-4 flex-wrap">
              <div className="text-white/40 text-xs" style={{ fontFamily: "Inter, sans-serif" }}>
                ↗ Se enviará a <span className="text-[#FF6D0D]">contacto@reyesdelacalle.cl</span>
              </div>
              <button
              type="submit"
              disabled={!valid}
              className={"inline-flex items-center gap-3 px-6 py-3 uppercase tracking-[0.18em] font-bold transition-all " + (valid ? "bg-[#FF6D0D] hover:bg-[#ff8530] text-black hover:-translate-y-0.5 shadow-[0_8px_24px_-8px_rgba(255,109,13,0.7)]" : "bg-white/10 text-white/40 cursor-not-allowed")}
              style={{ fontFamily: "'Anton', sans-serif", fontSize: 15 }}>
                Enviar mensaje
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
              </button>
            </div>
          </form> :

        <div className="p-10 text-center">
            <div className="inline-block mb-6"><CrownMark size={80} /></div>
            <h3 className="text-white" style={{ fontFamily: "'Anton', sans-serif", fontSize: 48, lineHeight: 0.95 }}>
              MENSAJE <span className="text-[#FF6D0D]">EN CAMINO.</span>
            </h3>
            <p className="mt-4 text-white/70 max-w-md mx-auto" style={{ fontFamily: "Inter, sans-serif" }}>
              Gracias {data.name || "amigo"}. Si tu cliente de mail no se abrió automáticamente, escríbenos directo a <a href="mailto:contacto@reyesdelacalle.cl" className="text-[#FF6D0D] underline">contacto@reyesdelacalle.cl</a>
            </p>
            <button onClick={onClose} className="mt-8 bg-[#FF6D0D] text-black font-bold px-8 py-3 uppercase tracking-[0.2em]" style={{ fontFamily: "'Anton', sans-serif" }}>
              Cerrar
            </button>
          </div>
        }
      </div>
    </div>);
};

Object.assign(window, { ProcessTimeline, Manifest, Testimonials, Tienda, ContactCTA, Footer, LeadModal });