// ============================================================
// Tribeca Lisboa — EVENT DETAIL app (responsive, bilingual)
// Uses shared SiteHeader / SiteMenuDrawer + global lang.
// ============================================================
const { useState: useStateA, useRef: useRefA } = React;

function EdToast({ msg, icon, show }) {
  return <div className={`ed-toast ${show ? 'show' : ''}`}>{icon && <EIcon name={icon} />}{msg}</div>;
}

function EdShareSheet({ open, onClose, onCopied, lang }) {
  const opts = [
    { name: 'Instagram', icon: 'ig' },
    { name: 'WhatsApp', icon: 'wa' },
    { name: 'X', icon: 'xlogo' },
    { name: tt(lang, 'Copy link', 'Copiar link'), icon: 'link', copy: true },
  ];
  return (
    <div className={`ed-sheet ${open ? 'open' : ''}`}>
      <div className="ed-sheet-scrim" onClick={onClose}></div>
      <div className="ed-sheet-panel">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h3 className="ed-sheet-title">{tt(lang, 'Share', 'Partilhar')}</h3>
          <button className="ed-sheet-x" onClick={onClose} aria-label={tt(lang, 'Close', 'Fechar')}><EIcon name="close" /></button>
        </div>
        <div className="ed-sheet-row">
          {opts.map(o => (
            <button className="ed-share-btn" key={o.name}
              onClick={() => { if (o.copy) onCopied(); else onClose(); }}>
              <EIcon name={o.icon} /> {o.name}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function EventDetailInner() {
  const lang = React.useContext(LangContext);
  const rootRef = useRefA(null);
  const [menu, setMenu] = useStateA(false);
  const [share, setShare] = useStateA(false);
  const [toast, setToast] = useStateA(null);
  const toastTimer = useRefA(null);

  useReveal(rootRef);

  const flashToast = (msg, icon) => {
    setToast({ msg, icon });
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2200);
  };

  return (
    <div className="ed" ref={rootRef}>
      <SiteHeader onMenu={() => setMenu(true)} />
      <EdHero />
      <EdInfo onCalendar={() => flashToast(tt(lang, 'Added to calendar', 'Adicionado ao calendário'), 'check')} onShare={() => setShare(true)} />
      <EdDescription />
      <EdProgram />
      <EdGuests />
      {/* TEMPORARILY HIDDEN — restore on request: <EdRelated /> */}
      <RFooter />
      <div className="ed-tail"></div>

      {/* persistent ticket CTA — no pricing, availability + action only */}
      <div className="ed-cta">
        <div className="r-wrap ed-cta-inner">
          <div className="ed-cta-avail"><span className="dot"></span>{tt(lang, EVENT.availabilityEn, EVENT.availability)}</div>
          <button className="ed-cta-btn" onClick={() => flashToast(tt(lang, 'Opening checkout…', 'A abrir checkout…'), 'ticket')}>
            <EIcon name="ticket" /> {tt(lang, 'Get tickets', 'Comprar bilhetes')}
          </button>
        </div>
      </div>

      <EdShareSheet lang={lang} open={share} onClose={() => setShare(false)}
        onCopied={() => { setShare(false); flashToast(tt(lang, 'Link copied', 'Link copiado'), 'check'); }} />
      <EdToast msg={toast ? toast.msg : ''} icon={toast ? toast.icon : null} show={!!toast} />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

function EventDetail() {
  const [lang] = useLang();
  return (
    <LangContext.Provider value={lang}>
      <EventDetailInner />
    </LangContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<EventDetail />);