// Burger Summit 2026 — Hero + contagem regressiva
const { useState: useStateH, useEffect: useEffectH } = React;

// Evento: 17 Ago 2026, 07h (Recife, UTC-3)
const EVENT_TS = new Date('2026-08-17T07:00:00-03:00').getTime();

function useCountdown(target) {
  const calc = () => {
    const diff = Math.max(0, target - Date.now());
    const d = Math.floor(diff / 86400000);
    const h = Math.floor((diff % 86400000) / 3600000);
    const m = Math.floor((diff % 3600000) / 60000);
    const s = Math.floor((diff % 60000) / 1000);
    return { d, h, m, s };
  };
  const [t, setT] = useStateH(calc);
  useEffectH(() => {
    const id = setInterval(() => setT(calc()), 1000);
    return () => clearInterval(id);
  }, [target]);
  return t;
}

function Countdown() {
  const { d, h, m, s } = useCountdown(EVENT_TS);
  const cells = [[d, 'Dias'], [h, 'Horas'], [m, 'Min'], [s, 'Seg']];
  return (
    <div className="countdown" aria-label="Contagem regressiva">
      {cells.map(([n, l], i) => (
        <React.Fragment key={l}>
          <div className="cd-cell">
            <div className="n">{String(n).padStart(2, '0')}</div>
            <div className="l">{l}</div>
          </div>
          {i < cells.length - 1 && <span className="cd-sep">:</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function Hero({ tone, onBuy, onNav }) {
  return (
    <React.Fragment>
      <section className={'hero dot-light' + (tone && tone !== 'hot' ? ' tone-' + tone : '')} id="topo">
        <div className="fire" aria-hidden="true"></div>
        <span className="ghostmark" aria-hidden="true">BURGER</span>
        <div className="hero-in">
          <div className="lead-row">
            <span className="h-eyebrow">
              17–18 Agosto 2026 <span className="dotsep">·</span> Recife / PE <span className="dotsep">·</span> Vagas limitadas
            </span>
            <h1>O maior movimento de <span className="gold">donos de hamburgueria</span> do Brasil.</h1>
            <p className="h-lead">
              A Nação está formada. Dois dias de imersão com os gigantes do setor, feira de negócios
              com as maiores marcas e o networking que vai colocar a sua hamburgueria em outro patamar.
            </p>
            <div className="hero-actions">
              <a className="bs-btn bs-btn-gold bs-btn-lg" onClick={onBuy}>Garantir meu ingresso</a>
              <a className="bs-btn bs-btn-ghost bs-btn-lg" style={{color:'#fff'}} onClick={()=>onNav('ingressos')}>
                <span>Ver lotes e preços →</span>
              </a>
            </div>
            <div className="trust">
              <span aria-hidden="true">🔥</span> Mais de 1.000 donos de hamburgueria já entraram em campo nas edições anteriores.
            </div>
            <Countdown />
          </div>
          <img className="crest" src="assets/logo-crest-color.png" alt="Burger Summit 2026" />
        </div>
      </section>
      <HeroStrip />
    </React.Fragment>
  );
}

function HeroStrip() {
  const items = ['Imersão com os gigantes', 'Feira de negócios', 'Networking de alto nível', 'Kit da Nação', 'Brasa & chapa', 'Centro de Convenções · Recife'];
  const doubled = [...items, ...items];
  return (
    <div className="hero-strip">
      <div className="marquee">
        <div className="track">
          {doubled.map((it, i) => (
            <span className="item" key={i}>{it} <span className="star">✦</span></span>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, Countdown });