// Hero — dark navy, big logo card, gold pull-quote, multi-color title
const { useState, useEffect, useRef } = React;

function Hero({ t, onPlay, playing }) {
  const [visibleMsgs, setVisibleMsgs] = useState(0);

  useEffect(() => {
    setVisibleMsgs(0);
    const timers = [];
    t.hero.convo.forEach((_, i) => {
      timers.push(setTimeout(() => setVisibleMsgs(v => Math.max(v, i + 1)), 700 + i * 900));
    });
    return () => timers.forEach(clearTimeout);
  }, [t]);

  const today = new Date().toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

  return (
    <section className="hero hero-dark">
      <span className="hero-glow hero-glow-a" />
      <span className="hero-glow hero-glow-b" />
      <span className="hero-grain" />

      <div className="container">
        <div className="hero-masthead dark">
          <span className="mh-l">Vol. 01 · Ed. 2026</span>
          <span className="mh-c">{t.hero.kicker}</span>
          <span className="mh-r">{today}</span>
        </div>

        <div className="hero-top">
          <div className="logo-card">
            <img src="/landing-new/assets/idna-logo.png" alt="IDNA EdTech" />
          </div>
          <p className="hero-quote">{t.hero.quote}</p>
        </div>

        <h1 className="hero-title-big">
          {t.hero.title_pre} <span className="acc-green">{t.hero.title_em}</span> {t.hero.title_post}
        </h1>

        <p className="hero-sub-dark">{t.hero.sub}</p>

        <div className="hero-cta-row center">
          <a href="/login" className="btn btn-leaf">
            {t.hero.cta} <span className="arr">→</span>
          </a>
          <span className="hero-note dark">{t.hero.note}</span>
        </div>

        <div className="convo-card-dark">
          <div className="convo-head dark">
            <span className="convo-dot">Live session</span>
            <span className="convo-class">Class 9 · Mathematics</span>
          </div>
          <div className="convo-body">
            {t.hero.convo.slice(0, visibleMsgs).map((m, i) => (
              <div className={`msg ${m.who}`} key={`${t.hero.convo.length}-${i}`} style={{ animationDelay: `${i * 60}ms` }}>
                <div className="avatar">{m.who === 'child' ? 'आ' : 'I'}</div>
                <div className="bubble">{m.text}</div>
              </div>
            ))}
          </div>
          <div className="convo-foot dark">
            <div className="wave">
              {Array.from({ length: 14 }).map((_, i) => <span key={i} style={{ animationPlayState: playing ? 'running' : 'paused' }} />)}
            </div>
            <button className="play-btn leaf" onClick={onPlay}>
              {playing ? '■' : <span className="play-icon" />} {t.hero.play}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;