const { useRef, useEffect, useState } = React;
const { useScrollProgress, CountUp, Reveal, useLandingStats } = window;

/* ===== MARQUEE / SOCIAL PROOF ===== */

function Marquee() {
  const items = [
    'Une plateforme, pas dix abonnements',
    'Paiement unique, accès à vie',
    'Droits de revente : 100%',
    'Paiements hebdomadaires',
    'Communauté française active',
    'Outils IA intégrés',
    'Pages de vente en un clic',
    'Support direct par l\'équipe',
    'Mises à jour en continu',
  ];
  const loop = [...items, ...items];
  return (
    <section style={{ padding: '72px 0', overflow: 'hidden', position: 'relative', background: 'transparent' }}>
      <div style={{
        display: 'flex', gap: 72,
        animation: 'marq 60s linear infinite',
        whiteSpace: 'nowrap',
        width: 'max-content',
      }}>
        {loop.map((t, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 72 }}>
            <span className="serif-i" style={{
              fontSize: 'clamp(48px, 5.2vw, 72px)',
              letterSpacing: '-0.025em',
              lineHeight: 1,
              color: 'var(--ink)',
            }}>{t}</span>
            <span style={{
              width: 10, height: 10, borderRadius: '50%',
              background: 'var(--accent)',
              boxShadow: '0 0 16px var(--accent-glow)',
              flexShrink: 0,
            }}></span>
          </span>
        ))}
      </div>
    </section>
  );
}

/* ===== STATS ROW (big numbers that count up) ===== */

function StatsBlock() {
  const { stats } = useLandingStats();
  return (
    <section style={{
      padding: '0',
      background: 'transparent',
      position: 'relative',
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: '1px solid var(--line)',
        borderBottom: '1px solid var(--line)',
        width: '100%',
        background: 'transparent',
      }}>
        <BigStat label="Membres actifs"    value={stats.membres} suffix="+" />
        <BigStat label="Revenus générés"   value={stats.revenus} suffix=" €" />
        <BigStat label="Droits de revente" value={100}           suffix="%" />
        <BigStat label="Satisfaction"      value={96}            suffix="%" />
      </div>
    </section>
  );
}

function BigStat({ label, value, suffix = '', decimals = 0 }) {
  return (
    <Reveal className="big-stat" style={{ textAlign: 'center' }}>
      <div style={{
        padding: '40px 24px',
        borderRight: '1px solid var(--line)',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 14,
      }}>
        <div className="label">{label}</div>
        <div className="serif" style={{
          fontSize: 'clamp(48px, 5.4vw, 76px)',
          lineHeight: 1,
          letterSpacing: '-0.025em',
        }}>
          <CountUp to={value} decimals={decimals} suffix={suffix} duration={1800} />
        </div>
      </div>
      <style>{`
        .big-stat:last-child > div { border-right: 0; }
      `}</style>
    </Reveal>
  );
}

Object.assign(window, { Marquee, StatsBlock });