// hero.jsx
function HeroVideoCard({ src, label }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const v = ref.current;
    if (!v) return;
    v.muted = true;
    v.playsInline = true;
    v.defaultMuted = true;
    const tryPlay = () => {
      const p = v.play();
      if (p && p.catch) p.catch(() => {});
    };
    tryPlay();
    v.addEventListener('canplay', tryPlay);
    v.addEventListener('loadeddata', tryPlay);
    return () => {
      v.removeEventListener('canplay', tryPlay);
      v.removeEventListener('loadeddata', tryPlay);
    };
  }, [src]);
  return (
    <video
      ref={ref}
      autoPlay
      muted
      loop
      playsInline
      preload="auto"
      aria-label={label}
      poster=""
    >
      <source src={src} type="video/mp4" />
    </video>
  );
}

function Hero({ heroCopy = 0 }) {
  const copy = window.HERO_COPIES[heroCopy] || window.HERO_COPIES[0];
  const heroCreatures = [window.CREATURES[0], window.CREATURES[5], window.CREATURES[10]];

  return (
    <section className="hero" id="hero">
      <div className="hero-halftone-top" />
      <div className="hero-grid">
        <div>
          <div style={{ marginBottom: 28 }}><Logo size={560} /></div>
          <h1 className="hero-catch">{copy.title.map((t, i) => <React.Fragment key={i}>{t}</React.Fragment>)}</h1>
          <p className="hero-sub">{copy.sub}</p>
          <div className="hero-ctas">
            <a href="#gallery" className="pop-btn orange">カード図鑑を見る →</a>
            <a href="#events" className="pop-btn ghost" style={{ border: '3px solid var(--line)' }}>イベントを見る</a>
          </div>
          <div style={{ display: 'flex', gap: 28, marginTop: 40, flexWrap: 'wrap' }}>
            {[{ n: '212', l: '収録 生き物' }, { n: '35', l: '生息地タイプ' }, { n: '7', l: 'パック種類' }].map((s, i) => (
              <div key={i}>
                <div style={{ fontFamily: 'Zen Antique', fontSize: 40, lineHeight: 1 }}>{s.n}<span style={{ fontSize: 16, color: 'var(--muted)', marginLeft: 4 }}>種</span></div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 6, letterSpacing: '0.1em' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hero-stage">
          <div className="hero-card-stack">
            {/* Left: card back */}
            <div className="hero-card">
              <div className="hero-card-back">
                <img src="assets/card-back.png" alt="生態系ウォーズ カード裏面" />
              </div>
            </div>
            {/* Center: Manta (full art, raised) */}
            <div className="hero-card">
              <div className="hero-card-real">
                <HeroVideoCard src="assets/hero-manta-v2.mp4" label="マンタ No.147" />
              </div>
            </div>
            {/* Right: Kounotori */}
            <div className="hero-card">
              <div className="hero-card-real">
                <HeroVideoCard src="assets/hero-kounotori.mp4" label="コウノトリ No.94" />
              </div>
            </div>
            <div className="hero-stamp"><span>遊んで</span><span>知って</span><span>守ろう！</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });