// Burger Summit 2026 — Palestrantes confirmados + Edições anteriores
const { useRef: useRefS } = React;

const PHOTOS = ['assets/photo-speaker.jpg', 'assets/photo-crowd.jpg', 'assets/photo-expo.jpg'];

function ConfirmedSpeakers() {
  const others = [
    { nm: ['Fábio', 'Braga'], ro: 'Bunker Hamburgueria', src: 'assets/spk-fabio.jpg', pos: '50% 22%' },
    { nm: ['André', 'Trato'], ro: 'Trato & Butter', src: 'assets/spk-andre.jpg', pos: '50% 24%' },
  ];
  const row2 = [
    { nm: ['Nabil', 'Fino Corte'], ro: 'Fino Corte', src: 'assets/speaker-nabil.jpg', pos: '50% 18%' },
    { nm: ['Dudu', 'Bastos'], ro: 'Mr. Larica', src: 'assets/speaker-dudu.jpg', pos: '50% 12%' },
    { nm: ['Ingrid', 'Brabus'], ro: 'Brabus Burger', src: 'assets/speaker-ingrid.jpg', pos: '50% 24%' },
    { soon: true },
  ];
  return (
    <section className="sec surface-asphalt dot-light" id="palestrantes">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow" style={{color:'var(--bs-gold)'}}>Os gigantes em campo</span>
            <h2 className="sec-title" style={{color:'#fff'}}>Palestrantes <span className="accent-gold">confirmados</span></h2>
          </div>
          <p className="sec-sub" style={{color:'#fff'}}>Onde os maiores do setor se encontram. Confira a escalação da Nação — e fique de olho, tem reforço chegando.</p>
        </div>

        <div className="spk-feature">
          {/* headliner */}
          <div className="spk-card big" style={{aspectRatio:'auto'}}>
            <img src="assets/photo-berg.jpg" alt="Berg Júnior" style={{objectPosition:'50% 18%'}} />
            <div className="scrim"></div>
            <div className="tagtop"><span className="confirm"><span className="ck">✓</span> Presença confirmada</span></div>
            <div className="tagtop right"><span className="bs-tag" style={{background:'var(--site-accent)'}}>Empreendedorismo</span></div>
            <div className="body">
              <div className="nm">Berg <span className="accentline">Júnior</span></div>
              <div className="ro">CEO &amp; Fundador · Quarteiro</div>
            </div>
            <div className="bar"></div>
          </div>
          {others.map((s, i) => (
            <div className="spk-card" key={i}>
              <img src={s.src} alt={s.nm.join(' ')} style={{objectPosition:s.pos}} />
              <div className="scrim"></div>
              <div className="body">
                <div className="nm">{s.nm[0]} <span className="accentline">{s.nm[1]}</span></div>
                <div className="ro">{s.ro}</div>
              </div>
              <div className="bar"></div>
            </div>
          ))}
        </div>

        <div className="spk-grid-4">
          {row2.map((s, i) => s.soon ? (
            <div className="spk-card soon" key={i}><span>Em breve</span></div>
          ) : (
            <div className="spk-card" key={i}>
              <img src={s.src} alt={s.nm.join(' ')} style={{objectPosition:s.pos}} />
              <div className="scrim"></div>
              <div className="body">
                <div className="nm">{s.nm[0]} <span className="accentline">{s.nm[1]}</span></div>
                <div className="ro">{s.ro}</div>
              </div>
              <div className="bar"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PastEditions() {
  const railRef = useRefS(null);
  const people = [
    { nm: ['Paulo', 'Camargo'], src: 'assets/past-paulo.jpg', pos: '50% 32%' },
    { nm: ['Netão'], full: 'Netão', src: 'assets/past-netao.jpg', pos: '66% 42%' },
    { nm: ['Raphael', 'Silva'], ro: 'Lucrando com Delivery', src: 'assets/past-raphael.jpg', pos: '50% 24%' },
    { nm: ['Daniel', 'Madre Teresa'], src: 'assets/past-daniel.jpg', pos: '50% 38%' },
    { nm: ['Marcos', 'Brito'], src: 'assets/past-marcos.jpg', pos: '50% 38%' },
    { nm: ['Alexandre', 'Matos'], ro: 'Fast-food Milionário', src: 'assets/past-alexandre.jpg', pos: '60% 30%' },
    { nm: ['Fábio', 'Bindes'], src: 'assets/past-bindes.jpg', pos: '50% 26%' },
  ];
  const initials = (p) => (p.full ? p.full.slice(0,2) : (p.nm[0][0] + (p.nm[1] ? p.nm[1][0] : ''))).toUpperCase();
  const scroll = (dir) => {
    const el = railRef.current;
    if (el) el.scrollBy({ left: dir * 360, behavior: 'smooth' });
  };
  return (
    <section className="sec surface-black past" id="edicoes">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Já passaram pelo palco</span>
            <h2 className="sec-title" style={{color:'#fff'}}>Personalidades das <span className="accent">edições anteriores</span></h2>
          </div>
          <div className="rail-nav">
            <button aria-label="Anterior" onClick={()=>scroll(-1)}>‹</button>
            <button aria-label="Próximo" onClick={()=>scroll(1)}>›</button>
          </div>
        </div>
      </div>
      <div className="wrap">
        <div className="rail" ref={railRef}>
          {people.map((p, i) => (
            <div className={'pcard' + (p.src ? '' : ' ph')} key={i}>
              {p.src ? (
                <img src={p.src} alt={p.nm.join(' ')} style={{objectPosition:p.pos || '50% 25%'}} />
              ) : (
                <div className="ph-fill" aria-hidden="true"><span className="ph-mono">{initials(p)}</span></div>
              )}
              <div className="scrim"></div>
              {p.ro && <span className="pcard-ro">{p.ro}</span>}
              <div className="nm">{p.nm[0]}{p.nm[1] && <span>{p.nm[1]}</span>}</div>
              <div className="bar"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ConfirmedSpeakers, PastEditions });