/* Hero.jsx — book cover + title block + actions */

/* Authoritative retailer list — mitpress.mit.edu/9780262052276 (Oct 2025).
   All links below are live on the publisher page (no "coming soon"). */
const RETAILERS = [
  { name: 'MIT Press Bookstore',  href: 'https://mitpressbookstore.mit.edu/book/9780262052276', tag: 'US', flag: '🇺🇸' },
  { name: 'Penguin Random House', href: 'https://www.penguinrandomhouse.com/search/site/?q=9780262052276', tag: 'US', flag: '🇺🇸' },
  { name: 'Amazon',               href: 'https://www.amazon.com/dp/026205227X/', tag: 'US', flag: '🇺🇸' },
  { name: 'Barnes & Noble',       href: 'https://www.barnesandnoble.com/s/9780262052276/', tag: 'US', flag: '🇺🇸' },
  { name: 'Bookshop.org',         href: 'https://bookshop.org/a/2238/9780262052276', tag: 'US', flag: '🇺🇸' },
  { name: 'IndieBound',           href: 'https://www.indiebound.org/book/9780262052276', tag: 'US', flag: '🇺🇸' },
  { name: 'Indigo',               href: 'https://www.chapters.indigo.ca/books/search?keywords=9780262052276&pageSize=10', tag: 'CA', flag: '🇨🇦' },
  { name: 'Amazon.co.uk',         href: 'https://www.amazon.co.uk/dp/026205227X/', tag: 'UK', flag: '🇬🇧' },
  { name: 'Blackwell\u2019s',     href: 'https://blackwells.co.uk/bookshop/product/9780262052276', tag: 'UK', flag: '🇬🇧' },
  { name: 'Bookshop.org UK',      href: 'https://uk.bookshop.org/a/2238/9780262052276', tag: 'UK', flag: '🇬🇧' },
  { name: 'Foyles',               href: 'https://www.foyles.co.uk/search?term=9780262052276', tag: 'UK', flag: '🇬🇧' },
  { name: 'Hive',                 href: 'https://www.hive.co.uk/Search/Keyword?keyword=9780262052276&productType=0', tag: 'UK', flag: '🇬🇧' },
  { name: 'Waterstones',          href: 'https://www.waterstones.com/books/search/term/9780262052276', tag: 'UK', flag: '🇬🇧' },
];

function Hero({ onJump }) {
  const { t } = useI18n();
  const [open, setOpen] = React.useState(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    function onDoc(e) { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const titleLines = t('hero.title').split('\n');

  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div>
          <h1 className="hero-title">
            {titleLines.map((line, i) => (
              <React.Fragment key={i}>{i > 0 && <br/>}{line}</React.Fragment>
            ))}
          </h1>
          <div className="hero-thread" aria-hidden="true"></div>
          <p className="hero-sub">{t('hero.sub')}</p>
          <p className="hero-desc">{t('hero.desc')}</p>
          <div className="hero-authors">
            Paulo Blikstein <span className="sep">&amp;</span> Deborah Fields
          </div>
          <div className="hero-meta">
            {t('hero.meta').map((m, i) => (
              <React.Fragment key={m}>
                {i > 0 && <span>·</span>}
                <span>{m}</span>
              </React.Fragment>
            ))}
          </div>
          <div className="hero-actions">
            <div className="buy-menu-wrap" ref={wrapRef}>
              <button
                className="btn primary"
                aria-haspopup="true"
                aria-expanded={open}
                onClick={() => setOpen(o => !o)}
              >
                {t('hero.buy')} <span className="arrow">→</span>
              </button>
              <div className={"buy-menu" + (open ? " open" : "")} role="menu">
                {RETAILERS.filter(r => !r.soon).slice(0, 6).map(r => (
                  <a key={r.name} href={r.href} role="menuitem" target="_blank" rel="noopener">
                    <span>{r.name}</span>
                    <span className="arrow">↗</span>
                  </a>
                ))}
              </div>
            </div>
            <button className="btn ghost" onClick={() => onJump?.('oa')}>
              {t('hero.readOA')} <span className="arrow">→</span>
            </button>
          </div>
        </div>
        <div className="cover-wrap">
          <img
            className="book3d"
            src="assets/book-3d.png"
            alt="Paperback of The Society That Learns by Paulo Blikstein and Deborah A. Fields"
          />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.RETAILERS = RETAILERS;