// ============================================================
// HERO — "Learn to trade. Without losing your money."
// ============================================================

const TickerNumber = ({ value, duration = 1200 }) => {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(value * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, duration]);
  return <span style={{ fontVariantNumeric: 'tabular-nums' }}>{n.toLocaleString()}</span>;
};

const Hero = ({ onJoin, onScrollHow, waitlistCount, accentMode }) => {
  const { t } = useI18n();
  // Desktop-only intro video that fades out to reveal hero.jpg when it ends.
  // On mobile/narrow viewports the <video> isn't rendered at all (avoids the download).
  const videoRef = React.useRef(null);
  const [isDesktop, setIsDesktop] = React.useState(() =>
    typeof window !== 'undefined' && window.matchMedia('(min-width: 769px)').matches
  );
  const [videoEnded, setVideoEnded] = React.useState(false);

  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const mq = window.matchMedia('(min-width: 769px)');
    const handler = (e) => setIsDesktop(e.matches);
    if (mq.addEventListener) mq.addEventListener('change', handler);
    else mq.addListener(handler);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener('change', handler);
      else mq.removeListener(handler);
    };
  }, []);

  React.useEffect(() => {
    if (!isDesktop) return;
    const v = videoRef.current;
    if (!v) return;
    const tryPlay = () => {
      const p = v.play();
      if (p && p.catch) p.catch(() => {});
    };
    tryPlay();
  }, [isDesktop]);

  // accentMode: 'classic' = the "nothing" gold word, 'underline' = gold underline, 'serif' = serif italic
  const headline = (() => {
    if (accentMode === 'underline') {
      return (<>
        {t('hero.underline.prefix')}<br />
        {t('hero.underline.middle')} <span style={{
          color: 'var(--fg)',
          borderBottom: '4px solid var(--gold-400)',
          paddingBottom: 4,
        }}>{t('hero.underline.accent')}</span>.
      </>);
    }
    if (accentMode === 'serif') {
      return (<>
        {t('hero.serif.prefix')}<br />
        {t('hero.serif.middle')} <em style={{
          fontFamily: 'Martina Plantijn', fontStyle: 'italic',
          fontWeight: 400, color: 'var(--gold-400)', textTransform: 'none',
          letterSpacing: '-.015em',
        }}>{t('hero.serif.accent')}</em>.
      </>);
    }
    // classic
    return (<>
{t('hero.classic.line1')}<br />{t('hero.classic.line2')}<br />
      <span style={{ color: 'var(--gold-400)' }}>{t('hero.classic.line3')}</span>
    </>);
  })();

  return (
    <section id="top" style={{
      position: 'relative', padding: '96px 48px 120px', overflow: 'hidden',
      background: 'radial-gradient(ellipse at 78% 30%, rgba(196,172,120,.08), transparent 55%)',
    }}>
      <img src="assets3/hero.jpg" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', opacity: .65, pointerEvents: 'none',
      }} alt="" />
      {isDesktop && (
        <video
          ref={videoRef}
          src="assets3/hero-video.mp4"
          poster="assets3/hero.jpg"
          muted
          playsInline
          autoPlay
          preload="auto"
          aria-hidden="true"
          onEnded={() => setVideoEnded(true)}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', opacity: videoEnded ? 0 : 1,
            transition: 'opacity 600ms ease', pointerEvents: 'none',
          }}
        />
      )}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.75) 60%, var(--ink-0) 100%)',
      }} />



      {/* Hairline grid overlay */}
      <div style={{
        position: 'absolute', inset: 0, opacity: .35, pointerEvents: 'none',
        backgroundImage: 'linear-gradient(rgba(246,242,232,.025) 1px, transparent 1px)',
        backgroundSize: '100% 96px',
      }} />

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        

        <h1 data-reveal style={{
          fontFamily: 'RH Phonic', fontWeight: 700,
          fontSize: 'clamp(56px,8.6vw,128px)', lineHeight: .94,
          letterSpacing: '-.03em', textTransform: 'uppercase',
          margin: 0, maxWidth: 1100,
        }}>
          {headline}
        </h1>

        <div data-reveal style={{
          fontFamily: 'Martina Plantijn', fontStyle: 'italic',
          fontSize: 22, color: 'var(--fg-muted)', marginTop: 40,
          maxWidth: 640, lineHeight: 1.5,
        }}>
          {t('hero.sub')}
        </div>

        <div className="hero-actions" style={{ marginTop: 44 }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" onClick={onJoin}>{t('hero.ctaJoin')}</Btn>
            <Btn size="lg" variant="ghost" onClick={onScrollHow}>{t('hero.ctaHow')}</Btn>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero, TickerNumber });