// SALVO — Part 1: Utilities, Loader, Cursor, Nav, Hero, Stats, Problem

const { useState, useEffect, useRef, useCallback, useMemo } = React;

// ===== HOOKS =====

const useInView = (options = {}) => {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setInView(true); observer.disconnect(); }
    }, { threshold: 0.12, ...options });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);
  return [ref, inView];
};

const useReducedMotion = () => {
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReduced(mq.matches);
    const handler = (e) => setReduced(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return reduced;
};

// ===== ANIMATED COUNTER =====

const AnimatedCounter = ({ from = 0, to, duration = 1500, suffix = '', prefix = '', format }) => {
  const [value, setValue] = useState(from);
  const [ref, inView] = useInView();
  const reduced = useReducedMotion();

  useEffect(() => {
    if (!inView) return;
    if (reduced) { setValue(to); return; }
    const start = performance.now();
    const animate = (now) => {
      const p = Math.min((now - start) / duration, 1);
      const ease = p === 1 ? 1 : 1 - Math.pow(2, -10 * p);
      setValue(from + (to - from) * ease);
      if (p < 1) requestAnimationFrame(animate);
    };
    requestAnimationFrame(animate);
  }, [inView, reduced]);

  const display = format ? format(value) : (Number.isInteger(to) ? Math.round(value) : value.toFixed(1));
  return <span ref={ref}>{prefix}{display}{suffix}</span>;
};

// ===== REVEAL ON SCROLL =====

const RevealOnScroll = ({ children, delay = 0, y = 20, className = '' }) => {
  const [ref, inView] = useInView();
  const reduced = useReducedMotion();
  const style = reduced ? {} : {
    opacity: inView ? 1 : 0,
    transform: inView ? 'translateY(0)' : `translateY(${y}px)`,
    transition: `opacity 0.6s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.6s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
  };
  return <div ref={ref} style={style} className={className}>{children}</div>;
};

// ===== SALVO BUTTON =====

const SalvoButton = ({ children, variant = 'primary', onClick, href, style = {} }) => {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: '8px',
    fontFamily: "'Syne', sans-serif", fontWeight: 700,
    fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase',
    padding: '12px 28px', cursor: 'pointer', border: 'none',
    textDecoration: 'none', transition: 'all 0.2s cubic-bezier(0.16,1,0.3,1)',
    position: 'relative', overflow: 'hidden',
  };
  const primary = {
    ...base, background: 'var(--accent)', color: 'var(--bg)',
    ...style,
  };
  const ghost = {
    ...base, background: 'transparent', color: 'var(--white)',
    border: '1px solid var(--border)', ...style,
  };
  const s = variant === 'primary' ? primary : ghost;
  const El = href ? 'a' : 'button';
  return (
    <El
      href={href} onClick={onClick} style={s}
      onMouseEnter={e => {
        if (variant === 'primary') {
          e.currentTarget.style.background = 'var(--accent-dim)';
          e.currentTarget.style.transform = 'translateY(-2px)';
          e.currentTarget.style.boxShadow = '0 8px 32px rgba(255,107,53,0.25)';
        } else {
          e.currentTarget.style.color = 'var(--accent)';
          e.currentTarget.style.borderColor = 'var(--accent)';
          e.currentTarget.style.transform = 'translateY(-2px)';
        }
      }}
      onMouseLeave={e => {
        e.currentTarget.style.background = variant === 'primary' ? 'var(--accent)' : 'transparent';
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = 'none';
        if (variant !== 'primary') {
          e.currentTarget.style.color = 'var(--white)';
          e.currentTarget.style.borderColor = 'var(--border)';
        }
      }}
    >{children}</El>
  );
};

// ===== CUSTOM CURSOR =====

const CustomCursor = () => {
  const dotRef = useRef(null);
  const ringRef = useRef(null);
  const pos = useRef({ x: 0, y: 0 });
  const ring = useRef({ x: 0, y: 0 });

  useEffect(() => {
    const dot = dotRef.current;
    const ringEl = ringRef.current;
    if (!dot || !ringEl) return;

    const onMove = (e) => {
      pos.current = { x: e.clientX, y: e.clientY };
      dot.style.transform = `translate(${e.clientX - 4}px, ${e.clientY - 4}px)`;
    };

    let raf;
    const animate = () => {
      ring.current.x += (pos.current.x - ring.current.x) * 0.12;
      ring.current.y += (pos.current.y - ring.current.y) * 0.12;
      ringEl.style.transform = `translate(${ring.current.x - 16}px, ${ring.current.y - 16}px)`;
      raf = requestAnimationFrame(animate);
    };
    animate();

    const onEnter = () => { dot.style.width = '32px'; dot.style.height = '32px'; dot.style.marginTop = '-12px'; dot.style.marginLeft = '-12px'; };
    const onLeave = () => { dot.style.width = '8px'; dot.style.height = '8px'; dot.style.marginTop = '0'; dot.style.marginLeft = '0'; };

    document.addEventListener('mousemove', onMove);
    document.querySelectorAll('a, button, [role=button]').forEach(el => {
      el.addEventListener('mouseenter', onEnter);
      el.addEventListener('mouseleave', onLeave);
    });

    return () => {
      document.removeEventListener('mousemove', onMove);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <>
      <div ref={dotRef} style={{
        position: 'fixed', top: 0, left: 0, width: 8, height: 8,
        background: 'var(--accent)', borderRadius: '50%', pointerEvents: 'none',
        zIndex: 9999, transition: 'width 0.2s, height 0.2s',
        mixBlendMode: 'difference',
      }} />
      <div ref={ringRef} style={{
        position: 'fixed', top: 0, left: 0, width: 32, height: 32,
        border: '1px solid rgba(255,107,53,0.4)', borderRadius: '50%',
        pointerEvents: 'none', zIndex: 9998,
      }} />
    </>
  );
};

// ===== LOADER =====

const Loader = ({ onDone }) => {
  const [phase, setPhase] = useState('letters'); // letters | line | tagline | fadeout
  const [letters, setLetters] = useState([false,false,false,false,false]);
  const [lineWidth, setLineWidth] = useState(0);
  const [typed, setTyped] = useState('');
  const [opacity, setOpacity] = useState(1);
  const reduced = useReducedMotion();
  const tagline = 'FIRE WHEN READY.';

  useEffect(() => {
    if (reduced) { onDone(); return; }

    const word = 'SALVO';
    // Stagger letters
    word.split('').forEach((_, i) => {
      setTimeout(() => setLetters(prev => { const n=[...prev]; n[i]=true; return n; }), i * 80 + 100);
    });

    // Draw line
    setTimeout(() => {
      setPhase('line');
      let w = 0;
      const lineAnim = setInterval(() => {
        w += 4;
        setLineWidth(Math.min(w, 100));
        if (w >= 100) clearInterval(lineAnim);
      }, 16);
    }, 700);

    // Typewriter tagline
    setTimeout(() => {
      setPhase('tagline');
      let i = 0;
      const typeAnim = setInterval(() => {
        i++;
        setTyped(tagline.slice(0, i));
        if (i >= tagline.length) clearInterval(typeAnim);
      }, 30);
    }, 1100);

    // Fade out
    setTimeout(() => {
      setPhase('fadeout');
      setOpacity(0);
      setTimeout(onDone, 500);
    }, 1900);
  }, []);

  return (
    <div
      onClick={onDone}
      style={{
        position: 'fixed', inset: 0, background: 'var(--bg)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        zIndex: 10000, opacity, transition: 'opacity 0.5s ease', cursor: 'pointer',
      }}
    >
      <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(64px, 12vw, 120px)', color: 'var(--accent)', lineHeight: 0.9, letterSpacing: '-0.02em', display: 'flex' }}>
        {'SALVO'.split('').map((l, i) => (
          <span key={i} style={{
            display: 'inline-block',
            opacity: letters[i] ? 1 : 0,
            transform: letters[i] ? 'translateY(0) scale(1)' : 'translateY(16px) scale(0.95)',
            transition: 'opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1)',
          }}>{l}</span>
        ))}
      </div>
      <div style={{ width: 'clamp(200px, 30vw, 400px)', height: '1px', background: 'var(--border)', marginTop: 16, position: 'relative' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, height: '1px', background: 'var(--accent)', width: `${lineWidth}%`, transition: 'none' }} />
      </div>
      <div style={{ marginTop: 16, fontFamily: "'DM Mono', monospace", fontSize: 12, letterSpacing: '0.2em', color: 'var(--muted)', minHeight: 20 }}>
        {typed}
      </div>
      <div style={{ position: 'absolute', bottom: 24, fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', color: 'var(--muted)', opacity: 0.5, textTransform: 'uppercase' }}>
        Click to skip
      </div>
    </div>
  );
};

// ===== NAV =====

const Nav = ({ onReserve }) => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
    setMobileOpen(false);
  };

  const links = [
    { label: 'Science', id: 'science' },
    { label: 'Produit', id: 'product' },
    { label: 'Athlètes', id: 'athletes' },
    { label: 'Pré-commande', id: 'preorder' },
  ];

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
        background: 'rgba(11,13,19,0.85)', backdropFilter: 'blur(14px)',
        borderBottom: '1px solid var(--border)',
        padding: scrolled ? '10px 40px' : '16px 40px',
        transition: 'padding 0.3s ease',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div
          style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: scrolled ? 18 : 22, color: 'var(--accent)', cursor: 'pointer', transition: 'font-size 0.3s ease', letterSpacing: '0.04em' }}
          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        >SALVO</div>

        <div className="nav-links" style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {links.map(l => (
            <button key={l.id} onClick={() => scrollTo(l.id)} style={{
              fontFamily: "'DM Mono', monospace", fontSize: 10, letterSpacing: '0.15em',
              textTransform: 'uppercase', color: 'var(--muted)', background: 'none',
              border: 'none', cursor: 'pointer', transition: 'color 0.2s',
              padding: 0,
            }}
            onMouseEnter={e => e.target.style.color = 'var(--white)'}
            onMouseLeave={e => e.target.style.color = 'var(--muted)'}
            >{l.label}</button>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          <SalvoButton onClick={onReserve}>Réserver</SalvoButton>
          <button className="burger" onClick={() => setMobileOpen(!mobileOpen)} style={{
            display: 'none', background: 'none', border: 'none', cursor: 'pointer',
            color: 'var(--white)', padding: 4,
          }}>
            <svg width="22" height="16" viewBox="0 0 22 16" fill="none">
              <line x1="0" y1="1" x2="22" y2="1" stroke="currentColor" strokeWidth="1.5"/>
              <line x1="0" y1="8" x2="22" y2="8" stroke="currentColor" strokeWidth="1.5"/>
              <line x1="0" y1="15" x2="22" y2="15" stroke="currentColor" strokeWidth="1.5"/>
            </svg>
          </button>
        </div>
      </nav>

      {/* Mobile overlay */}
      {mobileOpen && (
        <div style={{
          position: 'fixed', inset: 0, background: 'var(--bg)', zIndex: 999,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40,
        }}>
          <button onClick={() => setMobileOpen(false)} style={{
            position: 'absolute', top: 20, right: 24, background: 'none', border: 'none',
            color: 'var(--muted)', cursor: 'pointer', fontSize: 24,
          }}>✕</button>
          {links.map(l => (
            <button key={l.id} onClick={() => scrollTo(l.id)} style={{
              fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 44,
              color: 'var(--white)', background: 'none', border: 'none', cursor: 'pointer',
              letterSpacing: '-0.02em',
            }}
            onMouseEnter={e => e.target.style.color = 'var(--accent)'}
            onMouseLeave={e => e.target.style.color = 'var(--white)'}
            >{l.label}</button>
          ))}
          <SalvoButton onClick={() => { onReserve(); setMobileOpen(false); }}>Réserver mon pack</SalvoButton>
        </div>
      )}
    </>
  );
};

// ===== PARTICLE CANVAS =====

const ParticleCanvas = () => {
  const canvasRef = useRef(null);
  const reduced = useReducedMotion();

  useEffect(() => {
    if (reduced) return;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    const resize = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener('resize', resize);

    const N = 90;
    const particles = Array.from({ length: N }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.25,
      vy: (Math.random() - 0.5) * 0.25,
      r: Math.random() * 1.2 + 0.5,
      op: Math.random() * 0.12 + 0.03,
    }));

    let raf;
    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      particles.forEach(p => {
        p.x = (p.x + p.vx + canvas.width) % canvas.width;
        p.y = (p.y + p.vy + canvas.height) % canvas.height;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255,107,53,${p.op})`;
        ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    };
    draw();

    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, [reduced]);

  return <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} />;
};

// ===== HERO SECTION =====

const HeroSection = ({ onReserve }) => {
  const [visible, setVisible] = useState({ badge: false, letters: [false,false,false,false,false], sub: false, tagline: false, cta: false, stats: false });
  const reduced = useReducedMotion();

  useEffect(() => {
    if (reduced) {
      setVisible({ badge: true, letters: [true,true,true,true,true], sub: true, tagline: true, cta: true, stats: true });
      return;
    }
    setTimeout(() => setVisible(v => ({ ...v, badge: true })), 300);
    'SALVO'.split('').forEach((_, i) => {
      setTimeout(() => setVisible(v => { const l = [...v.letters]; l[i] = true; return { ...v, letters: l }; }), 500 + i * 70);
    });
    setTimeout(() => setVisible(v => ({ ...v, sub: true })), 900);
    setTimeout(() => setVisible(v => ({ ...v, tagline: true })), 1100);
    setTimeout(() => setVisible(v => ({ ...v, cta: true })), 1400);
    setTimeout(() => setVisible(v => ({ ...v, stats: true })), 1700);
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };

  const stats = [
    { val: '90s', label: 'Onset time' },
    { val: '900mg', label: 'Sodium' },
    { val: '1/7', label: 'Athlètes ciblés' },
    { val: '30ml', label: 'Format shot' },
  ];

  return (
    <section id="hero" style={{ minHeight: '100vh', position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', background: 'var(--bg)' }}>
      <ParticleCanvas />

      {/* Radial glow */}
      <div style={{
        position: 'absolute', bottom: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: '60vw', height: '40vh',
        background: 'radial-gradient(ellipse, rgba(255,107,53,0.12) 0%, transparent 70%)',
        animation: 'glowPulse 3s ease-in-out infinite',
        pointerEvents: 'none',
      }} />

      <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', padding: '120px 40px 80px', maxWidth: 900, width: '100%' }}>
        {/* Badge */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
          color: 'var(--muted)', border: '1px solid var(--border)', padding: '6px 14px', marginBottom: 40,
          opacity: visible.badge ? 1 : 0,
          transform: visible.badge ? 'translateY(0)' : 'translateY(10px)',
          transition: 'opacity 0.4s ease, transform 0.4s ease',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }} />
          Pré-commande — Q4 2026
        </div>

        {/* Brand hero */}
        <h1 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(72px, 13vw, 160px)', lineHeight: 0.85, letterSpacing: '-0.03em', color: 'var(--accent)', marginBottom: 24, display: 'flex', justifyContent: 'center' }}>
          {'SALVO'.split('').map((l, i) => (
            <span key={i} style={{
              display: 'inline-block',
              opacity: visible.letters[i] ? 1 : 0,
              transform: visible.letters[i] ? 'translateY(0) scale(1)' : 'translateY(20px) scale(0.95)',
              transition: 'opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1)',
            }}>{l}</span>
          ))}
        </h1>

        {/* Subtitle */}
        <div style={{
          fontFamily: "'DM Mono', monospace", fontSize: 13, letterSpacing: '0.2em',
          color: 'var(--muted)', marginBottom: 32, textTransform: 'uppercase',
          opacity: visible.sub ? 1 : 0,
          transform: visible.sub ? 'translateY(0)' : 'translateY(10px)',
          transition: 'opacity 0.5s ease, transform 0.5s ease',
        }}>Fire When Ready.</div>

        {/* Tagline */}
        <p style={{
          fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300, fontSize: 'clamp(16px, 2vw, 20px)',
          lineHeight: 1.6, color: 'var(--white)', maxWidth: 560, margin: '0 auto 48px',
          opacity: visible.tagline ? 1 : 0,
          transform: visible.tagline ? 'translateY(0)' : 'translateY(16px)',
          transition: 'opacity 0.5s ease, transform 0.5s ease',
        }}>
          Le premier shot anti-crampe européen.<br />
          <span style={{ color: 'var(--muted)' }}>90 secondes. Double action. Pour le 1 sur 7.</span>
        </p>

        {/* CTA row */}
        <div style={{
          display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 72,
          opacity: visible.cta ? 1 : 0,
          transform: visible.cta ? 'translateY(0)' : 'translateY(16px)',
          transition: 'opacity 0.5s ease, transform 0.5s ease',
        }}>
          <SalvoButton onClick={onReserve} style={{ padding: '14px 36px', fontSize: 12 }}>Réserver mon pack</SalvoButton>
          <SalvoButton variant="ghost" onClick={() => scrollTo('science')} style={{ padding: '14px 28px', fontSize: 12 }}>
            Comprendre la science →
          </SalvoButton>
        </div>

        {/* Stats strip */}
        <div style={{
          display: 'flex', gap: 0, justifyContent: 'center',
          borderTop: '1px solid var(--border)', paddingTop: 32,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              flex: 1, textAlign: 'center', padding: '0 24px',
              borderRight: i < stats.length - 1 ? '1px solid var(--border)' : 'none',
              opacity: visible.stats ? 1 : 0,
              transform: visible.stats ? 'translateY(0)' : 'translateY(12px)',
              transition: `opacity 0.4s ease ${i * 100}ms, transform 0.4s ease ${i * 100}ms`,
            }}>
              <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(20px, 2.5vw, 28px)', color: 'var(--white)', marginBottom: 4 }}>{s.val}</div>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Scroll indicator */}
      <div style={{
        position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        opacity: 0.4, animation: 'fadeUpDown 2s ease-in-out infinite',
      }}>
        <div style={{ width: 1, height: 40, background: 'linear-gradient(to bottom, transparent, var(--muted))' }} />
        <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)' }}>Scroll</div>
      </div>
    </section>
  );
};

// ===== STATS BAR =====

const StatsBar = () => {
  const cards = [
    { value: 15, suffix: '%', label: 'Des athlètes sont des heavy sweaters' },
    { value: 900, suffix: 'mg', label: 'Sodium par dose' },
    { value: 90, suffix: 's', label: "Délai d'action TRP" },
    { value: 0, suffix: '', label: 'Concurrent européen direct', special: 'ZÉRO' },
  ];

  return (
    <section style={{ background: 'var(--bg2)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }} className="stats-grid">
        {cards.map((c, i) => {
          const [ref, inView] = useInView();
          return (
            <div
              key={i} ref={ref}
              style={{
                padding: '48px 40px', textAlign: 'center',
                borderRight: i < cards.length - 1 ? '1px solid var(--border)' : 'none',
                cursor: 'default', transition: 'background 0.2s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--accent-glow)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(40px, 4vw, 56px)', color: 'var(--accent)', lineHeight: 1, marginBottom: 12 }}>
                {c.special ? c.special : (
                  inView ? <AnimatedCounter to={c.value} suffix={c.suffix} duration={1500} /> : <span>0{c.suffix}</span>
                )}
              </div>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)', lineHeight: 1.5 }}>
                {c.label}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

// ===== PROBLEM SECTION =====

const ProblemSection = () => {
  const [ref, inView] = useInView();

  return (
    <section style={{ background: 'var(--bg)', padding: '120px 40px', overflow: 'hidden' }} id="problem">
      <div ref={ref} style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '40% 60%', gap: 80, alignItems: 'center' }} className="problem-grid">

        {/* Left: visual placeholder */}
        <div style={{
          position: 'relative', height: 520,
          opacity: inView ? 1 : 0,
          transform: inView ? 'translateY(0)' : 'translateY(40px)',
          transition: 'opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1)',
        }}>
          {/* Duotone photo placeholder */}
          <div style={{
            position: 'absolute', inset: 0,
            background: 'var(--card)',
            border: '1px solid var(--border)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16,
            overflow: 'hidden',
          }}>
            {/* Diagonal stripes */}
            <div style={{
              position: 'absolute', inset: 0, opacity: 0.04,
              backgroundImage: 'repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 1px, transparent 0, transparent 50%)',
              backgroundSize: '8px 8px',
            }} />
            <div style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
              <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--border)', margin: '0 auto 16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5" stroke="var(--muted)" strokeWidth="1.5"/><path d="M4 24c0-5.523 4.477-10 10-10s10 4.477 10 10" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </div>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', color: 'var(--muted)', textTransform: 'uppercase' }}>Athlète en effort — photo à venir</div>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.1em', color: 'var(--muted)', opacity: 0.5, marginTop: 6 }}>Traitement duotone orange / bleu nuit</div>
            </div>
            {/* Orange overlay effect */}
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '40%', background: 'linear-gradient(to top, rgba(255,107,53,0.08), transparent)', pointerEvents: 'none' }} />
          </div>

          {/* Orange accent line */}
          <div style={{
            position: 'absolute', bottom: -1, left: 0,
            width: inView ? '60%' : '0%', height: 2, background: 'var(--accent)',
            transition: 'width 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s',
          }} />
        </div>

        {/* Right: copy */}
        <div>
          <div style={{
            fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em',
            textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 24,
            opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(12px)',
            transition: 'opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s',
          }}>Le problème</div>

          <h2 style={{
            fontFamily: "'Syne', sans-serif", fontWeight: 800,
            fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 0.9, letterSpacing: '-0.02em',
            color: 'var(--white)', marginBottom: 36,
            opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(20px)',
            transition: 'opacity 0.6s cubic-bezier(0.16,1,0.3,1) 0.3s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.3s',
          }}>
            Vous transpirez plus.<br />
            <span style={{ color: 'var(--accent)' }}>Vous crampez plus.</span>
          </h2>

          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300,
            fontSize: 17, lineHeight: 1.75, color: 'var(--muted)', marginBottom: 32,
            opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(16px)',
            transition: 'opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s',
          }}>
            Vous avez tout essayé : pastilles de sel, boissons iso, magnésium, étirements préventifs. Vous crampez quand même. Au km 35, dans le dernier round, dans la dernière côte.
          </p>

          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 400,
            fontSize: 17, lineHeight: 1.75, color: 'var(--white)', marginBottom: 40,
            opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(16px)',
            transition: 'opacity 0.5s ease 0.65s, transform 0.5s ease 0.65s',
          }}>
            Vous êtes le <span style={{ color: 'var(--accent)', fontWeight: 600 }}>1 sur 7</span>. Et le marché vous a oublié.
          </p>

          {/* Pull quote */}
          <div style={{
            borderLeft: '2px solid var(--accent)', paddingLeft: 20,
            opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(24px)',
            transition: 'opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s',
          }}>
            <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontStyle: 'italic', fontWeight: 300, fontSize: 16, lineHeight: 1.6, color: 'var(--muted)', marginBottom: 8 }}>
              "67% des athlètes d'endurance crampent. Pour 1 sur 7, c'est récurrent et invalidant."
            </p>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)', opacity: 0.6 }}>
              — Schwellnus, Br J Sports Med
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Export all to window
Object.assign(window, {
  useInView, useReducedMotion, AnimatedCounter, RevealOnScroll, SalvoButton,
  CustomCursor, Loader, Nav, ParticleCanvas, HeroSection, StatsBar, ProblemSection,
});