/* Hero — headline with rotating verb (i18n-aware) */

function useLocalClock() {
  const [t, setT] = React.useState('');
  React.useEffect(() => {
    const tick = () => {
      const now = new Date();
      const opts = { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Paris' };
      setT(now.toLocaleTimeString('en-GB', opts) + ' CET');
    };
    tick();
    const id = setInterval(tick, 10000);
    return () => clearInterval(id);
  }, []);
  return t;
}

function Hero() {
  const t = window.t;
  const verbs = t('hero.verbs');
  const [vi, setVi] = React.useState(0);
  const time = useLocalClock();

  React.useEffect(() => {
    const id = setInterval(() => setVi(v => (v + 1) % verbs.length), 2400);
    return () => clearInterval(id);
  }, [verbs.length]);

  React.useEffect(() => { setVi(0); }, [verbs]);

  const [counts, setCounts] = React.useState([0, 0, 0, 0]);
  React.useEffect(() => {
    const targets = [4, 2, 3, 8];
    const start = performance.now();
    const dur = 1600;
    let raf;
    const tick = (ts) => {
      const p = Math.min(1, (ts - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setCounts(targets.map(v => Math.round(v * eased)));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="container">

        <div className="hero-meta mask-reveal" style={{ '--d': '200ms' }}>
          <span style={{ display: 'inline-flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
            <span className="status-pill">
              <span className="status-dot" />
              <span>{t('hero.available')}</span>
            </span>
            <span className="divider" />
            <span>{t('hero.location')}</span>
            <span className="divider" />
            <span>{time || '—'}</span>
            <span className="divider" />
            <span>{t('hero.version')}</span>
          </span>
        </div>

        <h1 className="hero-headline">
          <span className="mask-reveal"><span style={{ '--d': '300ms' }}>Alexis</span></span>
          <span className="mask-reveal mask-reveal--name"><span className="hero-name" style={{ '--d': '450ms' }}>Bonnard</span></span>
          <span className="mask-reveal mask-reveal--verb">
            <span style={{ '--d': '600ms' }} className="line-verb-row">
              <span className="verb verb-italic" aria-label={verbs[vi]}>
                <span className="verb-track" style={{ transform: `translateY(calc(-${vi} * var(--verb-step, 1.15em)))` }}>
                  {verbs.map((v, i) => <span key={i}>{v}</span>)}
                  <span>{verbs[0]}</span>
                </span>
              </span>
            </span>
          </span>
          <span className="mask-reveal verb-suffix-line">
            <span style={{ '--d': '750ms' }}>{t('hero.verbSuffix').trim()}</span>
          </span>
        </h1>

        <div className="hero-grid">
          <div>
            <div className="hero-ctas reveal in" style={{ transitionDelay: '900ms' }}>
              <a href="#/docs" className="btn btn-primary">
                <span>{t('hero.ctaPrimary')}</span>
                <svg className="btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </a>
              <a href="#/contact" className="btn btn-ghost">
                <span>{t('hero.ctaGhost')}</span>
              </a>
            </div>
          </div>

          <div className="code-panel reveal in" style={{ transitionDelay: '1000ms' }}>
            <div className="code-panel-head">
              <span className="code-dot r" />
              <span className="code-dot y" />
              <span className="code-dot g" />
              <span className="code-panel-title">bonnard.ts</span>
            </div>
            <div className="code-body">
              <span className="code-line"><span className="code-com">{t('hero.codeComment')}</span></span>
              <span className="code-line"><span className="code-kw">const</span> me = {'{'}</span>
              <span className="code-line">{'  '}role: <span className="code-str">'{t('hero.codeRole')}'</span>,</span>
              <span className="code-line">{'  '}stack: [<span className="code-str">'rust'</span>, <span className="code-str">'ts'</span>, <span className="code-str">'python'</span>],</span>
              <span className="code-line">{'  '}focus: <span className="code-str">'{t('hero.codeFocus')}'</span>,</span>
              <span className="code-line">{'  '}years: <span className="code-num">2</span>,</span>
              <span className="code-line">{'  '}shipping: <span className="code-kw">true</span></span>
              <span className="code-line">{'}'};</span>
              <span className="code-line"> </span>
              <span className="code-line"><span className="code-fn">hire</span>(me)<span className="caret" /></span>
            </div>
          </div>
        </div>

        <div className="marquee reveal in" style={{ transitionDelay: '1100ms' }}>
          <div className="marquee-track">
            {[...Array(2)].map((_, k) => (
              <React.Fragment key={k}>
                {['Rust', 'TypeScript', 'Python', 'Next.js', 'Vue', 'AdonisJS', 'PostgreSQL', 'Langchain', 'Axum', 'Tokio', 'Docker', 'AWS'].map(s => (
                  <span className="marquee-item" key={s + k}>
                    <span>{s}</span>
                    <span className="marquee-sep">✦</span>
                  </span>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="hero-stats reveal in" style={{ transitionDelay: '1200ms' }}>
          <div className="stat">
            <span className="stat-label">{t('hero.stats.shipped')}</span>
            <span className="stat-value">{counts[0]}<span className="unit">+</span></span>
          </div>
          <div className="stat">
            <span className="stat-label">{t('hero.stats.years')}</span>
            <span className="stat-value">{counts[1]}<span className="unit">yrs</span></span>
          </div>
          <div className="stat">
            <span className="stat-label">{t('hero.stats.clients')}</span>
            <span className="stat-value">{counts[2]}</span>
          </div>
          <div className="stat">
            <span className="stat-label">{t('hero.stats.tech')}</span>
            <span className="stat-value">{counts[3]}<span className="unit">+</span></span>
          </div>
        </div>

      </div>

      <div className="scroll-indicator" aria-hidden style={{ display: 'none' }}>
        <span>{t('hero.scroll')}</span>
        <span className="scroll-indicator-line" />
      </div>
    </section>
  );
}

window.Hero = Hero;