// lost.jsx — もう会えない生き物たち（絶滅種カードギャラリー）
function LostLightbox({ src, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [onClose]);
  return (
    <div className="ls-lb" role="dialog" aria-modal="true" aria-label="カード拡大表示" onClick={onClose}>
      <button className="ls-lb-close" onClick={onClose} aria-label="閉じる">✕</button>
      <img src={src} alt="" onClick={(e) => e.stopPropagation()} />
    </div>);
}

function LostCard({ card, onOpen }) {
  return (
    <figure
      className="ls-card"
      tabIndex={0}
      onClick={() => onOpen(card.full)}
      onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();onOpen(card.full);}}}>
      <div className="ls-frame"><img src={card.thumb} alt={card.name} loading="lazy" /></div>
      <figcaption>
        <span className="ls-year">† {card.year}</span>
        <span className="ls-name">{card.name}<i>{card.sci}</i></span>
      </figcaption>
    </figure>);
}

function Lost() {
  const [lb, setLb] = React.useState(null);
  const cards = [
  { name: 'ニホンオオカミ', sci: 'C. hodophilax', year: '1905',
    thumb: 'assets/extinct/nihon-okami-sm.png', full: 'assets/extinct/nihon-okami.png' },
  { name: 'ステラーダイカイギュウ', sci: 'Hydrodamalis gigas', year: '1768',
    thumb: 'assets/extinct/steller-daikaigyu-sm.png', full: 'assets/extinct/steller-daikaigyu.png' }];

  return (
    <section className="ls-section" id="lost">
      <div className="ls-inner">
        <div className="ls-head">
          <span className="ls-kicker">NO LONGER WITH US</span>
          <h2 className="ls-title">会えなくなる前に出来ることを。</h2>
          <p className="ls-sub">かつて、この地球で共に生きた動物たち。</p>
        </div>
        <div className="ls-rail">
          {cards.map((c) => <LostCard key={c.name} card={c} onOpen={setLb} />)}
        </div>
        <p className="ls-hint">カードをクリックすると拡大します</p>
      </div>
      {lb && ReactDOM.createPortal(
        <LostLightbox src={lb} onClose={() => setLb(null)} />,
        document.body
      )}
    </section>);
}
Object.assign(window, { Lost, LostCard, LostLightbox });