// 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: 'Banca Burger', img: 1, pos: '50% 30%' },
    { nm: ['André', 'Trato'], ro: 'Trato & Butter', img: 2, pos: '50% 35%' },
  ];
  const row2 = [
    { nm: ['Nabil', 'Fino Corte'], ro: 'Fino Corte', img: 0, pos: '50% 18%' },
    { nm: ['Dudu', 'Bastos'], ro: 'Marketing & Branding', img: 1, pos: '40% 40%' },
    { nm: ['Ingrid', 'Brabus'], ro: 'Brabus Burger', img: 2, pos: '60% 30%' },
    { 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={PHOTOS[s.img]} 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={PHOTOS[s.img]} 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: ['Berg', 'Júnior'], src: 'assets/photo-berg.jpg', pos: '50% 18%' },
    { nm: ['Fábio', 'Braga'], img: 1 },
    { nm: ['André', 'Trato'], img: 2 },
    { nm: ['Nabil', 'Fino Corte'], img: 0 },
    { nm: ['Dudu', 'Bastos'], img: 1 },
    { nm: ['Ingrid', 'Brabus'], img: 2 },
  ];
  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" key={i}>
              <img src={p.src || PHOTOS[p.img]} alt={p.nm.join(' ')} style={{objectPosition:p.pos || '50% 25%'}} />
              <div className="scrim"></div>
              <div className="nm">{p.nm[0]}<span>{p.nm[1]}</span></div>
              <div className="bar"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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