// Hero + tour dates + marquee — v2 (Sentinel-style, dark + green)
const { useState: useState_S, useEffect: useEffect_S } = React;

function TopBar({ onTickets, onScrollTo }) {
  return (
    <div className="topbar">
      <div className="brand">TOMMY&nbsp;MUÑOZ</div>
      <nav>
        <a href="#fechas" onClick={(e) => { e.preventDefault(); onScrollTo("fechas"); }}>Fechas</a>
        <a href="#sobre" onClick={(e) => { e.preventDefault(); onScrollTo("sobre"); }}>Bio</a>
        <a href="#sets" onClick={(e) => { e.preventDefault(); onScrollTo("sets"); }}>Sets</a>
        <a href="#prensa" onClick={(e) => { e.preventDefault(); onScrollTo("prensa"); }}>Archive</a>
        <a href="#booking" onClick={(e) => { e.preventDefault(); onScrollTo("booking"); }}>Booking</a>
      </nav>
      <div className="right">
        <button className="nav-cta" onClick={onTickets}>Comprar Entradas</button>
      </div>
    </div>
  );
}

function HeroCountdown({ target }) {
  const [t, setT] = useState_S(() => diffT(target));
  useEffect_S(() => {
    const id = setInterval(() => setT(diffT(target)), 1000);
    return () => clearInterval(id);
  }, [target]);
  return (
    <div className="cd">
      <div className="cell"><div className="num">{String(t.d).padStart(2, "0")}</div><div className="lab">días</div></div>
      <div className="cell"><div className="num">{String(t.h).padStart(2, "0")}</div><div className="lab">hrs</div></div>
      <div className="cell"><div className="num">{String(t.m).padStart(2, "0")}</div><div className="lab">min</div></div>
      <div className="cell"><div className="num">{String(t.s).padStart(2, "0")}</div><div className="lab">seg</div></div>
    </div>
  );
}
function diffT(target) {
  const now = new Date();
  let ms = Math.max(0, target.getTime() - now.getTime());
  const d = Math.floor(ms / 86400000); ms -= d * 86400000;
  const h = Math.floor(ms / 3600000); ms -= h * 3600000;
  const m = Math.floor(ms / 60000); ms -= m * 60000;
  const s = Math.floor(ms / 1000);
  return { d, h, m, s };
}

function Hero({ onTickets }) {
  const F = DATA.featured;
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg">
        <video
          className="hero-video"
          src={DATA.heroVideo}
          poster={DATA.heroPoster}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
        />
      </div>
      <div className="hero-overlay"></div>
      <div className="hero-vignette"></div>

      <div className="hero-event-pill opacity-0 animate-fade-up" style={{ animationDelay: "0.9s" }}>
        <div className="next">▸ PRÓXIMO SHOW · A LA VENTA</div>
        <div className="ev">LA TM 36</div>
        <div className="meta">{F.venue} · {F.city}<br/>SÁB 05 SEP 2026 · DESDE 23:00</div>
        <HeroCountdown target={F.date} />
      </div>

      <div className="hero-content">
        <h1 className="hero-h1 opacity-0 animate-fade-up" style={{ animationDelay: "0.2s" }}>
          TOMMY<span className="acc"> MUÑOZ</span>
        </h1>
        <p className="hero-sub opacity-0 animate-fade-up" style={{ animationDelay: "0.4s" }}>
          Movemos los cuerpos. Correctamente.
        </p>
        <p className="hero-desc opacity-0 animate-fade-up" style={{ animationDelay: "0.55s" }}>
          DJ residente y productor de Tucumán. Reggaetón, perreo y electrónica latina sin transiciones limpias, sin pedir permiso. Sets cargados en clubes de Argentina, Uruguay y Chile. 18.000 personas en open air. Una serie propia — <strong style={{ color: "var(--foreground)", fontWeight: 500 }}>LA TM</strong> — que ya va por la edición 36.
        </p>
        <div className="hero-ctas opacity-0 animate-fade-up" style={{ animationDelay: "0.7s" }}>
          <button className="hero-btn primary" onClick={onTickets}>Comprar entradas</button>
          <button className="hero-btn white" onClick={() => document.getElementById("sets").scrollIntoView({ behavior: "smooth" })}>Escuchar sets</button>
        </div>
        <p className="hero-trust opacity-0 animate-fade-up" style={{ animationDelay: "0.85s" }}>
          Residente Club Pampa · S. M. de Tucumán · 236 shows desde 2019.
        </p>
      </div>
    </section>
  );
}

function HeroMarquee() {
  const items = [
    { icon: "star", text: "LA TM 36" },
    { icon: "dot", text: "05 · SEP · 2026" },
    { icon: "star", text: "CLUB PAMPA" },
    { icon: "dot", text: "TUCUMÁN · ARGENTINA" },
    { icon: "star", text: "ENTRADAS A LA VENTA" },
    { icon: "dot", text: "DJ TAO INVITADO" },
    { icon: "star", text: "PERREO + ELECTRÓNICA LATINA" },
    { icon: "dot", text: "1.800 CAP" },
  ];
  return <Marquee items={items} />;
}

function Dates() {
  return (
    <section className="section" id="fechas" data-screen-label="02 Fechas">
      <div className="section-head">
        <h2>Tour 2026 <span className="acc">/ south cone</span></h2>
        <div className="idx">N° 002 — UPCOMING / 8 DATES</div>
      </div>
      <div className="dates">
        {DATA.tour.map((e, i) => (
          <div className="date-row" key={i}>
            <div className="dt">
              <span>{e.d}</span>
              <small>{e.day} · {e.m} '{e.y.slice(2)}</small>
            </div>
            <div className="city">
              {e.city.toUpperCase()}
              <small>{e.country}</small>
            </div>
            <div className="venue">{e.venue}</div>
            <div className="venue dim">{e.tag}</div>
            <div className={`stat ${e.statCls || statClsFromCode(e.status)}`}>
              {statLabel(e.status)}
            </div>
            <div className="stat acc">
              {e.status === "so" ? "—" : "Ver →"}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
function statLabel(s) {
  return s === "av" ? "DISPONIBLE" : s === "few" ? "POCAS ENTRADAS" : "AGOTADO";
}
function statClsFromCode(s) {
  return s === "av" ? "av" : s === "few" ? "few" : "so";
}

function About() {
  return (
    <section className="section" id="sobre" data-screen-label="03 Sobre">
      <div className="section-head">
        <h2>Sobre <span className="acc">tommy</span></h2>
        <div className="idx">N° 003 — BIO / SINCE 2019</div>
      </div>
      <div className="about">
        <div className="about-portrait">
          <img src={DATA.portraitImg} alt="Tommy Muñoz" />
          <span className="label tl">PORTRAIT · TM</span>
          <span className="label br">FILE / 0001</span>
        </div>
        <div className="about-copy">
          <h3>De <span className="accent">Tucumán</span> al cono sur. Sin filtro, sin parar.</h3>
          <p>
            Tommy Muñoz arrancó en 2019 en sótanos de San Miguel de Tucumán. Hoy llena Mandarine Park
            en Buenos Aires y abre fechas en Montevideo y Santiago. Su show es una mezcla cruda de reggaetón,
            perreo y electrónica latina — sin transiciones limpias, sin pedir permiso.
          </p>
          <p>
            La serie <span className="acc">LA TM</span> empezó como una fiesta para amigos. Ya va por la edición 36
            y se convirtió en el evento más esperado del calendario nocturno del NOA.
          </p>
          <div className="about-stats">
            {DATA.stats.map((s, i) => (
              <div className="stat" key={i}>
                <div className="num">{s.n}</div>
                <div className="lab">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Sets() {
  const [playingId, setPlayingId] = useState_S(null);
  return (
    <section className="section" id="sets" data-screen-label="04 Sets">
      <div className="section-head">
        <h2>Sets &amp; mixes</h2>
        <div className="idx">N° 004 — AUDIO / 4 LATEST</div>
      </div>
      <div className="sets">
        {DATA.sets.map((s) => {
          const playing = playingId === s.id;
          return (
            <div className={`set-card ${playing ? "playing" : ""}`} key={s.id}>
              <div className="top">
                <span className="tag">REC · {s.year}</span>
                <span className="tag dim">{s.dur}</span>
              </div>
              <h4>{s.title}</h4>
              <div>
                <div className="desc">{s.venue}</div>
                <div className="desc dim" style={{ marginTop: 4 }}>{s.desc}</div>
              </div>
              <div className="controls">
                <button
                  className="play-btn"
                  onClick={() => setPlayingId(playing ? null : s.id)}
                  aria-label={playing ? "Pausar" : "Reproducir"}
                >
                  {playing ? (
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="2" width="3" height="12"/><rect x="10" y="2" width="3" height="12"/></svg>
                  ) : (
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M3 1.5l11 6.5L3 14.5z"/></svg>
                  )}
                </button>
                <Waveform playing={playing} bars={42} />
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section className="section" id="prensa" data-screen-label="05 Gallery">
      <div className="section-head">
        <h2>Archive <span className="acc">'25 / '26</span></h2>
        <div className="idx">N° 005 — VISUAL / FROM PAST SHOWS</div>
      </div>
      <div className="gallery">
        {DATA.gallery.map((g, i) => (
          <div className="gphoto" key={i} style={{ gridArea: g.area }}>
            {g.img ? <img src={g.img} alt={g.label} loading="lazy" /> : <div className="ph">{g.label}</div>}
            {g.sub && <span className="tag-bl">{g.sub}</span>}
          </div>
        ))}
      </div>
    </section>
  );
}

function Booking() {
  const [sent, setSent] = useState_S(false);
  return (
    <section className="section" id="booking" data-screen-label="06 Booking">
      <div className="section-head">
        <h2>Booking <span className="acc">privado</span></h2>
        <div className="idx">N° 006 — MGMT / DIRECT</div>
      </div>
      <div className="booking">
        <div className="booking-copy">
          <h3>¿Quieren contratar a Tommy? <em>Sin intermediarios.</em></h3>
          <p>
            Para fechas privadas, festivales y presentaciones internacionales, contacto directo
            con management. Respondemos en menos de 48hs.
          </p>
          <div className="tag" style={{ marginTop: 24 }}>
            BOOKING@TOMMYMUNOZ.AR · +54 9 381 555 0136
          </div>
          <div className="tag dim" style={{ marginTop: 8 }}>
            TECH RIDER & HOSPITALITY RIDER DISPONIBLES BAJO PEDIDO
          </div>
        </div>
        <form className="booking-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          {sent ? (
            <div style={{ textAlign: "center", padding: "30px 0" }}>
              <div className="tag acc" style={{ marginBottom: 12 }}>▸ SOLICITUD ENVIADA</div>
              <h4 style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 28, letterSpacing: "-0.03em", textTransform: "uppercase" }}>
                Gracias. Te respondemos pronto.
              </h4>
            </div>
          ) : (
            <>
              <div className="field-row">
                <div className="field">
                  <label>Nombre / Empresa</label>
                  <input type="text" required placeholder="Ej. Producciones X" />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" required placeholder="booking@..." />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Fecha estimada</label>
                  <input type="text" placeholder="DD / MM / AAAA" />
                </div>
                <div className="field">
                  <label>Ciudad / Venue</label>
                  <input type="text" placeholder="Ej. Buenos Aires" />
                </div>
              </div>
              <div className="field">
                <label>Detalles del evento</label>
                <textarea placeholder="Capacidad, formato (club / festival / privado), duración del set, presupuesto..."></textarea>
              </div>
              <button className="btn solid" type="submit">
                Enviar solicitud <span className="arr">→</span>
              </button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-screen-label="07 Footer">
      <div className="footer-grid">
        <div>
          <h5>Suscribite</h5>
          <p className="dim" style={{ maxWidth: "32ch", marginBottom: 16, lineHeight: 1.5, fontSize: 14, fontWeight: 300 }}>
            Pre-sale exclusivo, sets en streaming y avisos de fechas antes que nadie.
          </p>
          <form className="field" onSubmit={(e) => { e.preventDefault(); e.target.reset(); }}>
            <div style={{ display: "flex", borderBottom: "1px solid var(--border)", gap: 12, alignItems: "center" }}>
              <input type="email" placeholder="tu@email.com" style={{ borderBottom: "none", flex: 1 }} required />
              <button className="tag acc" type="submit" style={{ background: "none", border: 0, padding: 8, fontWeight: 600 }}>SUBIRME →</button>
            </div>
          </form>
        </div>
        <div>
          <h5>Tour</h5>
          <ul>
            <li><a href="#fechas">Próximas fechas</a></li>
            <li><a href="#sets">Sets</a></li>
            <li><a href="#prensa">Press kit</a></li>
            <li><a href="#sobre">Bio</a></li>
          </ul>
        </div>
        <div>
          <h5>Contacto</h5>
          <ul>
            <li><a href="#booking">Booking</a></li>
            <li><a href="#">Prensa</a></li>
            <li><a href="#">Soporte tickets</a></li>
            <li><a href="#">Reventa oficial</a></li>
          </ul>
        </div>
        <div>
          <h5>Social</h5>
          <ul>
            <li><a href="https://www.instagram.com/tommymunozdj/" target="_blank" rel="noreferrer">Instagram ↗</a></li>
            <li><a href="#">TikTok ↗</a></li>
            <li><a href="#">SoundCloud ↗</a></li>
            <li><a href="#">YouTube ↗</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <div className="wm">TOMMY<br/>MUÑOZ<span className="acc">.</span></div>
        <div className="meta">
          © MMXXVI · TM RECORDINGS<br/>
          SAN MIGUEL DE TUCUMÁN — AR<br/>
          DESIGN / TICKETING v2.0
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Hero, HeroMarquee, Dates, About, Sets, Gallery, Booking, Footer });