// ============================================================
// Tribeca Lisboa — EVENT DETAIL sections (responsive)
// Reuses Primitives (CAT, R, IconPin, Reveal) + the homepage
// event card REventCard (from ResponsiveSections.jsx) for Related.
// ============================================================
const { useState: useStateE, useEffect: useEffectE, useRef: useRefE } = React;

// ---- icons (1px line, match grotesque tone; X = real logo) ---
function EIcon({ name, style }) {
  const stroke = {
    back:   <path d="M15 4l-7 8 7 8" />,
    share:  <><circle cx="6" cy="12" r="2.4"/><circle cx="17" cy="6" r="2.4"/><circle cx="17" cy="18" r="2.4"/><path d="M8.1 10.9l6.8-3.8M8.1 13.1l6.8 3.8"/></>,
    cal:    <><rect x="3.5" y="5" width="17" height="16"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/></>,
    ticket: <><path d="M3 8.5a2 2 0 012-2h14a2 2 0 012 2 1.8 1.8 0 000 3.6V14a2 2 0 01-2 2H5a2 2 0 01-2-2v-1.9A1.8 1.8 0 003 8.5z"/><path d="M14 6.5v10"/></>,
    arrow:  <path d="M5 12h13M12 5l7 7-7 7" />,
    check:  <path d="M4 12l5 5L20 6" />,
    close:  <path d="M6 6l12 12M18 6L6 18" />,
    link:   <><path d="M9 14l6-6"/><path d="M11 6l1-1a4 4 0 015.6 5.6l-2 2"/><path d="M13 18l-1 1a4 4 0 01-5.6-5.6l2-2"/></>,
    ig:     <><rect x="3.5" y="3.5" width="17" height="17" rx="4.5"/><circle cx="12" cy="12" r="3.6"/><circle cx="16.8" cy="7.2" r="1" fill="currentColor" stroke="none"/></>,
    wa:     <path d="M5 19l1.2-3.4A7 7 0 1112 19a7 7 0 01-3.4-.9L5 19z" />,
  }[name];
  // X (Twitter) is a solid-glyph logo, not a line icon
  if (name === 'xlogo') {
    return (
      <svg viewBox="0 0 24 24" fill="currentColor" style={style}>
        <path d="M17.53 3h2.94l-6.42 7.34L21.6 21h-5.9l-4.62-6.04L5.8 21H2.86l6.87-7.85L2.4 3h6.05l4.18 5.52L17.53 3Zm-1.03 16.2h1.63L7.6 4.7H5.85L16.5 19.2Z" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
      strokeLinecap="round" strokeLinejoin="round" style={style}>{stroke}</svg>
  );
}

// ---- reveal-on-scroll (full-page / window) -----------------
function useReveal(rootRef) {
  useEffectE(() => {
    const root = rootRef.current;
    if (!root) return;
    const els = root.querySelectorAll('.ed-rev');
    if (window.PREFERS_REDUCED) { els.forEach(e => e.classList.add('in')); return; }
    const vh = () => window.innerHeight || document.documentElement.clientHeight;
    const check = () => els.forEach(el => {
      if (el.classList.contains('in')) return;
      const r = el.getBoundingClientRect();
      if (r.top < vh() - 30 && r.bottom > 0) el.classList.add('in');
    });
    let frames = 0, raf, alive = true;
    const burst = () => { if (!alive) return; check(); if (frames++ < 16) raf = requestAnimationFrame(burst); };
    const onScroll = () => check();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    burst();
    const t1 = setTimeout(check, 300), t2 = setTimeout(check, 800);
    return () => { alive = false; cancelAnimationFrame(raf); clearTimeout(t1); clearTimeout(t2);
      window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);
}

// ---- Hero ---------------------------------------------------
function EdHero() {
  const lang = React.useContext(LangContext);
  const c = CAT[EVENT.cat];
  return (
    <section className="ed-hero">
      <img className="ed-hero-img" src={R(EVENT.hero)} alt={EVENT.title} />
      <div className="ed-hero-grad"></div>
      <div className="ed-hero-body">
        <div className="r-wrap">
          <div className="ed-hero-col">
            <div className="ed-hero-row">
              <span className="ed-tag" style={{ background: c.bg, color: c.hl }}>{c.label}</span>
              <span className="ed-badge" style={{ background: 'var(--purple)' }}>{EVENT.status}</span>
            </div>
            <span className="ed-kicker">{tt(lang, EVENT.kickerEn, EVENT.kicker)}</span>
            <h1 className="ed-hero-title">{EVENT.title}</h1>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Info strip + secondary actions -------------------------
function EdInfo({ onCalendar, onShare }) {
  const lang = React.useContext(LangContext);
  return (
    <section className="ed-info">
      <div className="r-wrap ed-rev">
        <div className="ed-info-grid">
          <div className="ed-info-cell"><div className="ed-info-k">{tt(lang, 'Date', 'Data')}</div><div className="ed-info-v">{tt(lang, EVENT.dateEn, EVENT.date)}</div></div>
          <div className="ed-info-cell"><div className="ed-info-k">{tt(lang, 'Time · Duration', 'Hora · Duração')}</div><div className="ed-info-v">{EVENT.time} · {EVENT.duration}</div></div>
          <div className="ed-info-cell full"><div className="ed-info-k">{tt(lang, 'Venue', 'Local')}</div><div className="ed-info-v"><span className="pin"><IconPin /></span>{EVENT.venueName} · {EVENT.venueArea}</div></div>
        </div>
        <div className="ed-actions" style={{ display: 'none' }} data-hidden="temporarily — restore on request">
          <button className="ed-act" onClick={onCalendar}><EIcon name="cal" /> {tt(lang, 'Add to calendar', 'Adicionar ao calendário')}</button>
          <button className="ed-act" onClick={onShare}><EIcon name="share" /> {tt(lang, 'Share', 'Partilhar')}</button>
        </div>
      </div>
    </section>
  );
}

// ---- Description --------------------------------------------
function EdDescription() {
  const lang = React.useContext(LangContext);
  return (
    <section className="ed-sec">
      <div className="r-wrap">
        <div className="ed-eyebrow ed-rev"><span className="tx">{tt(lang, 'About the event', 'Sobre o evento')}</span><span className="ln"></span></div>
        <p className="ed-lead ed-rev">{tt(lang, EVENT.leadEn, EVENT.lead)}</p>
        <p className="ed-body ed-rev" style={{ marginTop: 16 }}>{tt(lang, EVENT.bodyEn, EVENT.body)}</p>
      </div>
    </section>
  );
}

// ---- Program ------------------------------------------------
function EdProgram() {
  const lang = React.useContext(LangContext);
  return (
    <section className="ed-sec">
      <div className="r-wrap">
        <div className="ed-eyebrow ed-rev"><span className="tx">{tt(lang, 'The night, in detail', 'A noite, ao detalhe')}</span><span className="ln"></span></div>
        <h2 className="ed-h ed-rev" style={{ marginBottom: 20 }}>{tt(lang, 'Programme', 'Programa')}</h2>
        <div className="ed-prog ed-rev">
          {PROGRAM.map((p, i) => (
            <div className="ed-prog-row" key={i}>
              <div className="ed-prog-time">{p.time}</div>
              <div className="ed-prog-main">
                <span className="ed-prog-dot"></span>
                <div className="ed-prog-title">{tt(lang, p.titleEn, p.title)}</div>
                <div className="ed-prog-note">{tt(lang, p.noteEn, p.note)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Guest / speaker card (shared component — reused by the
// News Article page for Related speakers; do not fork) ---------
function EdGuestCard({ g }) {
  const lang = React.useContext(LangContext);
  const linked = window.isConfirmedGuest ? isConfirmedGuest(g.id) : true; // only confirmed guests open a Talent page
  const inner = (<>
    <div className="ed-gcard-imgwrap">
      <img className="ed-gcard-img" src={R(g.img)} alt={g.name} />
      {linked && <div className="ed-gcard-arrow"><EIcon name="arrow" /></div>}
    </div>
    <div className="ed-gcard-role">{tt(lang, g.roleEn || g.role, g.role)}</div>
    <div className="ed-gcard-name">{g.name}</div>
  </>);
  if (!linked) {
    return <div className="ed-gcard" style={{ cursor: 'default' }}>{inner}</div>;
  }
  return <a className="ed-gcard" href={urlFor('talent', g.id)}>{inner}</a>;
}

// ---- Guests (editorial rail — no feature card) --------------
function EdGuests() {
  const lang = React.useContext(LangContext);
  return (
    <section className="ed-sec">
      <div className="r-wrap">
        <div className="ed-eyebrow ed-rev"><span className="tx">{tt(lang, 'Who you’ll meet', 'Quem vais encontrar')}</span><span className="ln"></span></div>
        <h2 className="ed-h ed-rev" style={{ marginBottom: 20 }}>{tt(lang, 'Guests', 'Convidados')}</h2>
      </div>
      <div className="ed-grail ed-bleedpad ed-rev">
        {GUESTS.map(g => <EdGuestCard key={g.id} g={g} />)}
      </div>
    </section>
  );
}

// ---- Related (events only — homepage event card) ------------
function EdRelated() {
  const lang = React.useContext(LangContext);
  return (
    <section className="ed-sec">
      <div className="r-wrap">
        <div className="ed-eyebrow ed-rev"><span className="tx">{tt(lang, 'Related content', 'Conteúdo relacionado')}</span><span className="ln"></span></div>
        <h2 className="ed-h ed-rev" style={{ marginBottom: 20 }}>{tt(lang, 'Recommended', 'Recomendados')}</h2>
      </div>
      <div className="r-rail ed-rev" style={{ paddingTop: 0 }}>
        {RELATED.map(ev => <REventCard key={ev.id} ev={ev} />)}
      </div>
    </section>
  );
}

Object.assign(window, { EIcon, useReveal, EdHero, EdInfo, EdDescription, EdProgram, EdGuests, EdGuestCard, EdRelated });