// SALVO — Part 2: Science, Product, Athletes, Pricing, Form, CTA, Footer, App

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

// ===== SCIENCE HORIZONTAL SCROLL =====

const ScienceSection = () => {
  const outerRef = useRef(null);
  const trackRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [activePanel, setActivePanel] = useState(0);
  const isMobile = window.innerWidth < 768;

  useEffect(() => {
    if (isMobile) return;
    const handleScroll = () => {
      const outer = outerRef.current;
      if (!outer) return;
      const rect = outer.getBoundingClientRect();
      const scrolled = -rect.top;
      const total = rect.height - window.innerHeight;
      const p = Math.max(0, Math.min(1, scrolled / total));
      setProgress(p);
      setActivePanel(Math.min(3, Math.floor(p * 4)));
      if (trackRef.current) {
        const maxTranslate = -(trackRef.current.scrollWidth - window.innerWidth);
        trackRef.current.style.transform = `translateX(${p * maxTranslate}px)`;
      }
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const panels = [
    {
      tag: "01 — L'ancien modèle",
      title: "L'ANCIEN MODÈLE\nA ÉCHOUÉ",
      body: "Depuis 30 ans, la science du sport vous a dit que les crampes viennent de la déshydratation et des déficits électrolytiques. C'est faux.",
      stat: "Niveaux d'électrolytes identiques entre athlètes qui crampent et ceux qui ne crampent pas.",
      source: "Schwellnus et al., 2008",
      visual: (
        <div style={{ position: 'relative', width: '100%', height: 180, marginBottom: 32 }}>
          {/* Two bar charts side by side */}
          {[['Crampes', 142], ['Pas de crampes', 138]].map(([label, val], i) => {
            const [ref, inView] = useInView();
            return (
              <div key={i} ref={ref} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 8, marginRight: 48 }}>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em' }}>{val} mEq/L</div>
                <div style={{ width: 48, background: 'var(--border)', position: 'relative', height: 120, overflow: 'hidden' }}>
                  <div style={{
                    position: 'absolute', bottom: 0, width: '100%',
                    height: inView ? `${(val / 160) * 100}%` : '0%',
                    background: i === 0 ? 'var(--accent)' : 'var(--muted)',
                    transition: 'height 1s cubic-bezier(0.16,1,0.3,1) 0.3s',
                    opacity: 0.7,
                  }} />
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em', textAlign: 'center', maxWidth: 80 }}>{label}</div>
              </div>
            );
          })}
          <div style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', fontFamily: "'DM Mono', monospace", fontSize: 9, color: 'var(--accent)', letterSpacing: '0.1em', maxWidth: 140, lineHeight: 1.6 }}>
            Aucune différence<br />significative (p=0.82)
          </div>
        </div>
      ),
    },
    {
      tag: "02 — Le vrai mécanisme",
      title: "LES CRAMPES\nVIENNENT DES NERFS",
      body: "Les crampes d'effort ne viennent pas du muscle. Elles viennent d'un motoneurone α en état d'hyperexcitabilité — un neurone qui tire sans s'arrêter.",
      stat: "Le muscle reçoit un signal continu. Il se contracte. Il ne peut pas s'arrêter.",
      source: "Schwellnus, 2009 — Altered Neuromuscular Control Hypothesis",
      visual: (
        <div style={{ position: 'relative', width: '100%', height: 180, marginBottom: 32, display: 'flex', alignItems: 'center', gap: 8 }}>
          {/* Neuron impulse visual */}
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} style={{
              flex: 1, height: 3, background: 'var(--accent)',
              borderRadius: 2, opacity: 0.3,
              animation: `neuronFire 0.4s ease-in-out ${i * 60}ms infinite`,
            }} />
          ))}
          <div style={{ position: 'absolute', bottom: -24, left: 0, right: 0, fontFamily: "'DM Mono', monospace", fontSize: 9, color: 'var(--muted)', letterSpacing: '0.12em', textTransform: 'uppercase', textAlign: 'center' }}>
            Motoneurone α — hyperexcitabilité
          </div>
        </div>
      ),
    },
    {
      tag: "03 — La solution TRP",
      title: "LES CANAUX TRP\nCOUPENT LE SIGNAL",
      body: "Activés en bouche, les agonistes TRP envoient un signal inhibiteur via le nerf vague. Le motoneurone se calme. La crampe cède en 60-90 secondes.",
      stat: "3 agonistes TRP. Un signal. Zéro compromis.",
      source: "MacAuley & Best, 2007 — Bean & Strichartz, MIT",
      visual: (
        <div style={{ display: 'flex', gap: 20, marginBottom: 32 }}>
          {[
            { name: 'Capsaïcine', sub: 'Piment', color: '#FF6B35' },
            { name: 'Gingérols', sub: 'Gingembre', color: '#FF8C5A' },
            { name: 'Cinnam.', sub: 'Cannelle', color: '#FFA875' },
          ].map((ing, i) => {
            const [ref, inView] = useInView();
            return (
              <div key={i} ref={ref} style={{
                flex: 1, padding: '20px 16px', textAlign: 'center',
                border: `1px solid ${inView ? ing.color : 'var(--border)'}`,
                background: inView ? `rgba(255,107,53,0.06)` : 'transparent',
                transition: `border-color 0.5s ease ${i * 200}ms, background 0.5s ease ${i * 200}ms`,
              }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: inView ? ing.color : 'var(--border)', margin: '0 auto 12px', transition: `background 0.5s ease ${i * 200}ms`, opacity: inView ? 1 : 0.3 }} />
                <div style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 500, fontSize: 13, color: 'var(--white)', marginBottom: 4 }}>{ing.name}</div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.1em', color: 'var(--muted)', textTransform: 'uppercase' }}>{ing.sub}</div>
              </div>
            );
          })}
        </div>
      ),
    },
    {
      tag: "04 — La validation",
      title: "VALIDATION :\n$86.4M D'IPO NASDAQ",
      body: "Flex Pharma a levé $86.4M en IPO sur le Nasdaq avec Hotshot — basé sur le même mécanisme TRP. Prouvé. Breveté. SALVO va plus loin : double action électrolytique.",
      stat: "SALVO = mécanisme TRP + 900mg sodium. Hotshot n'a pas de sodium. Nous, oui.",
      source: "Flex Pharma IPO 2015 — NASDAQ: FLKS",
      visual: (
        <div style={{ marginBottom: 32 }}>
          <div style={{ display: 'flex', gap: 24, marginBottom: 24 }}>
            {[
              { label: 'IPO Nasdaq', val: '$86.4M' },
              { label: 'Mécanisme TRP', val: 'Breveté' },
              { label: 'Double action', val: 'SALVO only' },
            ].map((item, i) => (
              <div key={i} style={{ flex: 1, padding: '16px', background: 'var(--card)', border: '1px solid var(--border)', textAlign: 'center' }}>
                <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 18, color: i === 2 ? 'var(--accent)' : 'var(--white)', marginBottom: 6 }}>{item.val}</div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)' }}>{item.label}</div>
              </div>
            ))}
          </div>
          <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, color: 'var(--accent)', letterSpacing: '0.1em', borderLeft: '2px solid var(--accent)', paddingLeft: 12, lineHeight: 1.6 }}>
            Flex Pharma prouve le mécanisme.<br />SALVO va plus loin.
          </div>
        </div>
      ),
    },
  ];

  if (isMobile) {
    return (
      <section id="science" style={{ background: 'var(--bg2)', padding: '80px 24px' }}>
        <div style={{ marginBottom: 48, textAlign: 'center' }}>
          <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>La science</div>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 36, color: 'var(--white)', lineHeight: 0.9 }}>Le mécanisme TRP</h2>
        </div>
        {panels.map((p, i) => (
          <RevealOnScroll key={i} delay={i * 100} y={24}>
            <div style={{ marginBottom: 60, paddingBottom: 60, borderBottom: i < panels.length - 1 ? '1px solid var(--border)' : 'none' }}>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16 }}>{p.tag}</div>
              {p.visual}
              <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 28, color: 'var(--white)', lineHeight: 0.9, marginBottom: 16, whiteSpace: 'pre-line' }}>{p.title}</h3>
              <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300, fontSize: 15, lineHeight: 1.7, color: 'var(--muted)', marginBottom: 16 }}>{p.body}</p>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: 'var(--white)', lineHeight: 1.5, borderLeft: '2px solid var(--accent)', paddingLeft: 12, marginBottom: 12 }}>{p.stat}</div>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.12em', color: 'var(--muted)', opacity: 0.6 }}>— {p.source}</div>
            </div>
          </RevealOnScroll>
        ))}
      </section>
    );
  }

  return (
    <section id="science" ref={outerRef} style={{ height: '500vh', position: 'relative' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', overflow: 'hidden', background: 'var(--bg2)' }}>
        {/* Header */}
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, padding: '32px 60px', zIndex: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--border)' }}>
          <div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6 }}>La science</div>
            <h2 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 28, color: 'var(--white)', lineHeight: 1 }}>Le mécanisme TRP</h2>
          </div>
          {/* Progress dots */}
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            {panels.map((_, i) => (
              <div key={i} style={{
                width: i === activePanel ? 24 : 6, height: 6, borderRadius: 3,
                background: i === activePanel ? 'var(--accent)' : 'var(--border)',
                transition: 'all 0.3s ease',
              }} />
            ))}
          </div>
        </div>

        {/* Track */}
        <div ref={trackRef} style={{ display: 'flex', height: '100%', willChange: 'transform' }}>
          {panels.map((p, i) => (
            <div key={i} style={{
              minWidth: '100vw', height: '100%', padding: '120px 80px 60px',
              display: 'flex', flexDirection: 'column', justifyContent: 'center',
              borderRight: '1px solid var(--border)',
            }}>
              <div style={{ maxWidth: 640 }}>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20 }}>{p.tag}</div>
                {p.visual}
                <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 3.5vw, 52px)', color: 'var(--white)', lineHeight: 0.9, marginBottom: 24, whiteSpace: 'pre-line' }}>{p.title}</h3>
                <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300, fontSize: 17, lineHeight: 1.75, color: 'var(--muted)', marginBottom: 24 }}>{p.body}</p>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: 'var(--white)', lineHeight: 1.6, borderLeft: '2px solid var(--accent)', paddingLeft: 16, marginBottom: 16 }}>{p.stat}</div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.12em', fontStyle: 'italic', color: 'var(--muted)', opacity: 0.6 }}>— {p.source}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Progress bar */}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'var(--border)' }}>
          <div style={{ height: '100%', background: 'var(--accent)', width: `${progress * 100}%`, transition: 'width 0.05s linear' }} />
        </div>

        {/* Scroll cue */}
        <div style={{ position: 'absolute', bottom: 24, right: 60, fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', color: 'var(--muted)', textTransform: 'uppercase', opacity: progress > 0.95 ? 0 : 0.5, transition: 'opacity 0.3s' }}>
          Continuez à défiler →
        </div>
      </div>
    </section>
  );
};

// ===== PRODUCT SECTION =====

const ProductSection = () => {
  const [ref, inView] = useInView();
  const sachetRef = useRef(null);
  const [angle, setAngle] = useState(0);

  useEffect(() => {
    let raf;
    let start = null;
    const animate = (ts) => {
      if (!start) start = ts;
      const elapsed = ts - start;
      setAngle((elapsed / 15000) * 360);
      raf = requestAnimationFrame(animate);
    };
    raf = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(raf);
  }, []);

  const specs = [
    { label: '30 ML', sub: 'Format shot', pos: { top: '8%', right: '-10%' } },
    { label: 'TRP × 3', sub: 'Capsaïcine · Gingérols · Cinnam.', pos: { top: '32%', right: '-18%' } },
    { label: '900MG', sub: 'Sodium', pos: { bottom: '22%', right: '-14%' } },
    { label: '200MG', sub: 'Potassium', pos: { bottom: '8%', left: '-12%' } },
    { label: 'ZÉRO SUCRE', sub: 'Formule pure', pos: { top: '32%', left: '-18%' } },
    { label: '60-90s', sub: 'Onset TRP', pos: { top: '8%', left: '-10%' } },
  ];

  return (
    <section id="product" style={{ background: 'var(--bg)', padding: '120px 40px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <RevealOnScroll y={16}>
          <div style={{ textAlign: 'center', marginBottom: 80 }}>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>Produit</div>
            <h2 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--white)', lineHeight: 0.9 }}>
              Anatomie d'un<br /><span style={{ color: 'var(--accent)' }}>shot SALVO</span>
            </h2>
          </div>
        </RevealOnScroll>

        {/* Sachet + floating specs */}
        <div ref={ref} style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 500 }}>
          {/* Specs */}
          {specs.map((spec, i) => (
            <div key={i} style={{
              position: 'absolute', ...spec.pos,
              opacity: inView ? 1 : 0,
              transform: inView ? 'translateY(0)' : 'translateY(10px)',
              transition: `opacity 0.5s ease ${i * 120 + 400}ms, transform 0.5s ease ${i * 120 + 400}ms`,
              textAlign: Object.keys(spec.pos).includes('right') ? 'right' : 'left',
            }}>
              <div style={{ fontFamily: "'DM Mono', monospace", fontWeight: 500, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>{spec.label}</div>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.08em', color: 'var(--muted)', marginTop: 3 }}>{spec.sub}</div>
              {/* Connector line */}
              <div style={{
                position: 'absolute', top: '50%',
                [Object.keys(spec.pos).includes('right') ? 'left' : 'right']: '-20px',
                width: 16, height: 1, background: 'rgba(255,107,53,0.3)',
              }} />
            </div>
          ))}

          {/* Sachet SVG */}
          <div ref={sachetRef} style={{ transform: `rotateY(${angle}deg)`, transformStyle: 'preserve-3d', perspective: 800, zIndex: 2 }}>
            <svg width="140" height="280" viewBox="0 0 100 200" fill="none" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="sachBody" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="#E05A28"/>
                  <stop offset="40%" stopColor="#FF6B35"/>
                  <stop offset="100%" stopColor="#CC4A1F"/>
                </linearGradient>
                <linearGradient id="sachTop" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="#CC4A1F"/>
                  <stop offset="50%" stopColor="#E05A28"/>
                  <stop offset="100%" stopColor="#B83A15"/>
                </linearGradient>
              </defs>
              {/* Body */}
              <path d="M12 38 Q5 38 5 48 L5 185 Q5 195 14 195 L86 195 Q95 195 95 185 L95 48 Q95 38 88 38 Z" fill="url(#sachBody)"/>
              {/* Top crimp */}
              <path d="M18 38 L82 38 L76 12 Q62 6 50 6 Q38 6 24 12 Z" fill="url(#sachTop)"/>
              {/* Tear notch */}
              <path d="M82 26 L87 20 L92 26" fill="none" stroke="rgba(0,0,0,0.3)" strokeWidth="1.5" strokeLinecap="round"/>
              {/* Horizontal seal lines */}
              <line x1="5" y1="48" x2="95" y2="48" stroke="rgba(0,0,0,0.12)" strokeWidth="2"/>
              <line x1="5" y1="180" x2="95" y2="180" stroke="rgba(0,0,0,0.12)" strokeWidth="2"/>
              {/* Center logo area */}
              <rect x="18" y="75" width="64" height="68" rx="4" fill="rgba(0,0,0,0.12)"/>
              {/* Brand text */}
              <text x="50" y="117" textAnchor="middle" fontFamily="'Syne'" fontWeight="800" fontSize="17" fill="white" letterSpacing="-0.5">SALVO</text>
              {/* Tagline */}
              <text x="50" y="132" textAnchor="middle" fontFamily="'DM Mono'" fontSize="5" fill="rgba(255,255,255,0.65)" letterSpacing="2">FIRE WHEN READY</text>
              {/* Shot details */}
              <text x="50" y="156" textAnchor="middle" fontFamily="'DM Mono'" fontSize="5" fill="rgba(255,255,255,0.45)" letterSpacing="1.5">ANTI-CRAMPE · 30ML</text>
              {/* Shine */}
              <path d="M20 50 Q24 100 22 175" stroke="rgba(255,255,255,0.12)" strokeWidth="3" strokeLinecap="round" fill="none"/>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== ATHLETES SECTION =====

const AthletesSection = () => {
  const communities = ['HYROX', 'UTMB', 'IRONMAN', 'Tour de France Amateur', 'Tennis Pro Circuit', 'CrossFit Open', 'Triathlon France', 'Trail Blanc'];
  const testimonials = [
    { name: 'Laurent M.', sport: 'Trail Ultra', text: 'Au km 72 de l\'UTMB, la crampe habituelle. J\'ai pris SALVO. 90 secondes plus tard, j\'avançais encore.', placeholder: true },
    { name: 'Sarah K.', sport: 'HYROX', text: 'La chaleur du platform fait tout. J\'ai arrêté de cramper dans les sleds. Rien d\'autre n\'avait marché.', placeholder: true },
    { name: 'Pierre D.', sport: 'Triathlon Ironman', text: 'Le vélo et la course enchaînés — mes mollets lâchaient toujours à T2. Plus depuis SALVO.', placeholder: true },
  ];

  return (
    <section id="athletes" style={{ background: 'var(--bg2)', padding: '100px 0', overflow: 'hidden' }}>
      <RevealOnScroll y={16}>
        <div style={{ textAlign: 'center', marginBottom: 56, padding: '0 40px' }}>
          <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>Communauté</div>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(36px, 4vw, 52px)', color: 'var(--white)', lineHeight: 0.9 }}>
            Built with <span style={{ color: 'var(--accent)' }}>athletes</span>
          </h2>
        </div>
      </RevealOnScroll>

      {/* Marquee */}
      <div style={{ overflow: 'hidden', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', padding: '18px 0', marginBottom: 72 }}>
        <div className="marquee-track" style={{ display: 'flex', gap: 64, width: 'max-content', animation: 'marquee 30s linear infinite' }}>
          {[...communities, ...communities].map((c, i) => (
            <span key={i} style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 14, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)', whiteSpace: 'nowrap' }}>
              {c} <span style={{ color: 'var(--accent)', marginLeft: 16, opacity: 0.4 }}>·</span>
            </span>
          ))}
        </div>
      </div>

      {/* Testimonials */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="testimonial-grid">
        {testimonials.map((t, i) => (
          <RevealOnScroll key={i} delay={i * 100} y={20}>
            <div style={{
              background: 'var(--card)', border: '1px solid var(--border)', padding: '32px',
              transition: 'border-color 0.2s, transform 0.2s, box-shadow 0.2s',
              cursor: 'default',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,107,53,0.3)'; e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.3)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 24 }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="var(--muted)" strokeWidth="1.2"/><path d="M2 18c0-4.418 3.582-8 8-8s8 3.582 8 8" stroke="var(--muted)" strokeWidth="1.2" strokeLinecap="round"/></svg>
                </div>
                <div>
                  <div style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 500, fontSize: 14, color: 'var(--white)' }}>{t.name}</div>
                  <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)' }}>{t.sport}</div>
                </div>
              </div>
              <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontStyle: 'italic', fontWeight: 300, fontSize: 15, lineHeight: 1.7, color: 'var(--muted)', marginBottom: 16 }}>"{t.text}"</p>
              {t.placeholder && (
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.1em', color: 'var(--muted)', opacity: 0.4, textTransform: 'uppercase' }}>Testimonial early athletes program</div>
              )}
            </div>
          </RevealOnScroll>
        ))}
      </div>
    </section>
  );
};

// ===== PRICING SECTION =====

const PricingSection = ({ onSelect }) => {
  const packs = [
    { name: 'Découverte', shots: 6, price: 19, per: '3.17', desc: 'Testez le mécanisme TRP avant votre prochaine course.', cta: 'Sélectionner' },
    { name: 'Abonnement', shots: 18, price: 49, per: '2.72', desc: 'Le pack de l\'athlète régulier. Renouvelable. Annulable.', cta: 'Sélectionner', featured: true },
    { name: 'Équipe', shots: 36, price: 89, per: '2.47', desc: 'Pour les clubs, les staffs, les athlètes qui ne transigent pas.', cta: 'Sélectionner' },
  ];

  return (
    <section id="pricing" style={{ background: 'var(--bg)', padding: '100px 40px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <RevealOnScroll y={16}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>Pré-commande</div>
            <h2 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(36px, 4vw, 52px)', color: 'var(--white)', lineHeight: 0.9 }}>
              Choisissez votre pack
            </h2>
          </div>
        </RevealOnScroll>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'start' }} className="pricing-grid">
          {packs.map((pack, i) => (
            <RevealOnScroll key={i} delay={i * 120} y={24}>
              <div style={{
                background: 'var(--card)',
                border: pack.featured ? '1px solid var(--accent)' : '1px solid var(--border)',
                padding: pack.featured ? '36px 28px' : '32px 28px',
                transform: pack.featured ? 'scale(1.04)' : 'scale(1)',
                boxShadow: pack.featured ? '0 0 48px rgba(255,107,53,0.1)' : 'none',
                position: 'relative', transition: 'border-color 0.2s, transform 0.2s, box-shadow 0.2s',
                cursor: 'default',
              }}
              onMouseEnter={e => {
                if (!pack.featured) {
                  e.currentTarget.style.borderColor = 'rgba(255,107,53,0.3)';
                  e.currentTarget.style.transform = 'translateY(-4px)';
                  e.currentTarget.style.boxShadow = '0 16px 48px rgba(0,0,0,0.3)';
                } else {
                  e.currentTarget.style.boxShadow = '0 0 64px rgba(255,107,53,0.18)';
                }
              }}
              onMouseLeave={e => {
                if (!pack.featured) {
                  e.currentTarget.style.borderColor = 'var(--border)';
                  e.currentTarget.style.transform = 'scale(1)';
                  e.currentTarget.style.boxShadow = 'none';
                } else {
                  e.currentTarget.style.boxShadow = '0 0 48px rgba(255,107,53,0.1)';
                }
              }}
              >
                {pack.featured && (
                  <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', background: 'var(--accent)', color: 'var(--bg)', fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.2em', textTransform: 'uppercase', padding: '4px 14px', whiteSpace: 'nowrap' }}>
                    Le plus populaire
                  </div>
                )}
                <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 18, color: 'var(--white)', marginBottom: 8 }}>{pack.name}</div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 24 }}>{pack.shots} shots</div>

                <div style={{ marginBottom: 24 }}>
                  <span style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 48, color: pack.featured ? 'var(--accent)' : 'var(--white)', lineHeight: 1 }}>€{pack.price}</span>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.1em', color: 'var(--muted)', marginLeft: 8 }}>€{pack.per}/shot</span>
                </div>

                <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: 'var(--muted)', marginBottom: 28, minHeight: 48 }}>{pack.desc}</p>

                <SalvoButton
                  variant={pack.featured ? 'primary' : 'ghost'}
                  onClick={() => onSelect(pack.name)}
                  style={{ width: '100%', justifyContent: 'center', padding: '13px 0' }}
                >
                  {pack.cta}
                </SalvoButton>
              </div>
            </RevealOnScroll>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== FORM SECTION =====

const FormSection = ({ selectedPack, setSelectedPack }) => {
  const [form, setForm] = useState({ prenom: '', nom: '', email: '', pack: selectedPack || 'Abonnement', sport: '', pays: '', postal: '' });
  const [errors, setErrors] = useState({});
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if (selectedPack) setForm(f => ({ ...f, pack: selectedPack }));
  }, [selectedPack]);

  const validate = () => {
    const e = {};
    if (!form.prenom.trim()) e.prenom = 'Requis';
    if (!form.nom.trim()) e.nom = 'Requis';
    if (!form.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) e.email = 'Email invalide';
    if (!form.sport) e.sport = 'Requis';
    if (!form.pays.trim()) e.pays = 'Requis';
    return e;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) { setErrors(errs); return; }
    setErrors({});
    setLoading(true);
    setTimeout(() => { setLoading(false); setSuccess(true); }, 1800);
  };

  const Field = ({ label, id, type = 'text', value, onChange, error, children }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <label style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', color: error ? 'var(--accent)' : 'var(--muted)' }}>{label}</label>
      {children || (
        <input type={type} value={value} onChange={onChange} style={{
          background: 'var(--bg)', border: `1px solid ${error ? 'rgba(255,107,53,0.4)' : 'var(--border)'}`,
          color: 'var(--white)', fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15,
          padding: '12px 14px', outline: 'none', transition: 'border-color 0.2s',
          fontWeight: 300,
        }}
        onFocus={e => e.target.style.borderColor = 'rgba(255,107,53,0.4)'}
        onBlur={e => e.target.style.borderColor = error ? 'rgba(255,107,53,0.4)' : 'var(--border)'}
        />
      )}
      {error && <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, color: 'var(--accent)', letterSpacing: '0.1em' }}>{error}</span>}
    </div>
  );

  const selectStyle = { background: 'var(--bg)', border: '1px solid var(--border)', color: 'var(--white)', fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15, padding: '12px 14px', outline: 'none', width: '100%', fontWeight: 300, cursor: 'pointer' };

  return (
    <section id="preorder" style={{ background: 'var(--bg2)', padding: '100px 40px', position: 'relative' }}>
      {success && (
        <div style={{
          position: 'fixed', inset: 0, background: 'rgba(11,13,19,0.96)', zIndex: 2000,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24,
        }}>
          <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
            <circle cx="40" cy="40" r="38" stroke="var(--accent)" strokeWidth="1.5"/>
            <path d="M20 40 L34 54 L60 26" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="60" strokeDashoffset="0" style={{ animation: 'drawCheck 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s both' }}/>
          </svg>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 36, color: 'var(--white)', textAlign: 'center', lineHeight: 1 }}>
            Vous êtes dans<br /><span style={{ color: 'var(--accent)' }}>la première salve.</span>
          </h2>
          <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300, fontSize: 16, color: 'var(--muted)', textAlign: 'center', maxWidth: 420 }}>
            Confirmation envoyée à {form.email}. Livraison prévue Q4 2026.
          </p>
          <SalvoButton onClick={() => setSuccess(false)} variant="ghost">Retour à la page</SalvoButton>
        </div>
      )}

      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <RevealOnScroll y={16}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>Réservation</div>
            <h2 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4vw, 48px)', color: 'var(--white)', lineHeight: 0.9 }}>
              Rejoignez la première salve
            </h2>
          </div>
        </RevealOnScroll>

        <RevealOnScroll y={20} delay={100}>
          <form onSubmit={handleSubmit} style={{ background: 'var(--card)', border: '1px solid var(--border)', padding: '48px', display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="form-row">
              <Field label="Prénom" value={form.prenom} onChange={e => setForm(f => ({...f, prenom: e.target.value}))} error={errors.prenom} />
              <Field label="Nom" value={form.nom} onChange={e => setForm(f => ({...f, nom: e.target.value}))} error={errors.nom} />
            </div>

            <Field label="Email" type="email" value={form.email} onChange={e => setForm(f => ({...f, email: e.target.value}))} error={errors.email} />

            <Field label="Pack choisi" error={errors.pack}>
              <select value={form.pack} onChange={e => setForm(f => ({...f, pack: e.target.value}))} style={selectStyle}>
                <option value="Découverte">Découverte — 6 shots · €19</option>
                <option value="Abonnement">Abonnement — 18 shots · €49</option>
                <option value="Équipe">Équipe — 36 shots · €89</option>
              </select>
            </Field>

            <Field label="Sport principal" error={errors.sport}>
              <select value={form.sport} onChange={e => setForm(f => ({...f, sport: e.target.value}))} style={selectStyle}>
                <option value="">Sélectionner…</option>
                {['Trail', 'HYROX', 'Triathlon', 'Cyclisme', 'Tennis', 'CrossFit', 'Natation', 'Autre'].map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </Field>

            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20 }} className="form-row">
              <Field label="Pays" value={form.pays} onChange={e => setForm(f => ({...f, pays: e.target.value}))} error={errors.pays} />
              <Field label="Code postal" value={form.postal} onChange={e => setForm(f => ({...f, postal: e.target.value}))} error={errors.postal} />
            </div>

            <button type="submit" style={{
              width: '100%', background: loading ? 'var(--accent-dim)' : 'var(--accent)',
              color: 'var(--bg)', fontFamily: "'Syne', sans-serif", fontWeight: 700,
              fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
              padding: '16px', border: 'none', cursor: 'pointer',
              transition: 'background 0.2s, transform 0.2s', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}
            onMouseEnter={e => !loading && (e.currentTarget.style.background = 'var(--accent-dim)')}
            onMouseLeave={e => !loading && (e.currentTarget.style.background = 'var(--accent)')}
            >
              {loading ? (
                <span style={{ display: 'flex', gap: 6 }}>
                  {[0,1,2].map(i => <span key={i} style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--bg)', animation: `dotPulse 1s ease-in-out ${i * 200}ms infinite` }} />)}
                </span>
              ) : 'Réserver mon pack — sans engagement'}
            </button>

            <div style={{ textAlign: 'center', fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.1em', color: 'var(--muted)', lineHeight: 1.8 }}>
              Aucun prélèvement avant expédition · Annulable à tout moment · Livraison Q4 2026
            </div>
          </form>
        </RevealOnScroll>
      </div>
    </section>
  );
};

// ===== CTA BANNER =====

const CTABanner = ({ onReserve }) => {
  const [ref, inView] = useInView();

  return (
    <section style={{ background: 'var(--bg2)', padding: '100px 40px', borderTop: '1px solid var(--border)', overflow: 'hidden' }}>
      <div ref={ref} style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 40 }} className="cta-banner-inner">

        {/* Line trace animation */}
        <div style={{ position: 'absolute', left: 0, right: 0, height: 1, top: 0 }}>
          <div style={{ height: '100%', background: 'var(--accent)', width: inView ? '100%' : '0%', transition: 'width 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s' }} />
        </div>

        <div>
          <h2 style={{
            fontFamily: "'Syne', sans-serif", fontWeight: 800,
            fontSize: 'clamp(28px, 3.5vw, 48px)', color: 'var(--white)', lineHeight: 0.9, marginBottom: 16,
            opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(20px)',
            transition: 'opacity 0.6s ease, transform 0.6s ease',
          }}>
            La première salve<br /><span style={{ color: 'var(--accent)' }}>est ouverte.</span>
          </h2>
          <p style={{
            fontFamily: "'DM Mono', monospace", fontSize: 11, letterSpacing: '0.12em',
            color: 'var(--muted)', textTransform: 'uppercase',
            opacity: inView ? 1 : 0, transition: 'opacity 0.5s ease 0.2s',
          }}>
            250 athlètes fondateurs · Early bird €15
          </p>
        </div>

        <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(20px)', transition: 'opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s' }}>
          <SalvoButton onClick={onReserve} style={{ padding: '16px 40px', fontSize: 13 }}>
            Réserver ma place →
          </SalvoButton>
        </div>
      </div>
    </section>
  );
};

// ===== FOOTER =====

const Footer = () => {
  const cols = [
    { title: 'Produit', links: ['Le shot SALVO', 'La science TRP', 'Dosage & utilisation', 'FAQ'] },
    { title: 'Science', links: ['Mécanisme neuromusculaire', 'Agonistes TRP', 'Électrolytes', 'Études cliniques'] },
    { title: 'Entreprise', links: ['Notre mission', 'Équipe', 'Presse', 'Contact'] },
  ];

  return (
    <footer style={{ background: 'var(--bg)', borderTop: '1px solid var(--border)', padding: '60px 40px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 56, paddingBottom: 40, borderBottom: '1px solid var(--border)' }} className="footer-grid">
          {/* Brand col */}
          <div>
            <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 28, color: 'var(--accent)', marginBottom: 16, letterSpacing: '0.04em' }}>SALVO</div>
            <p style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300, fontSize: 14, lineHeight: 1.7, color: 'var(--muted)', maxWidth: 280 }}>
              Le premier shot anti-crampe européen à double action. Conçu pour le 1 sur 7.
            </p>
            <div style={{ marginTop: 20, fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)', opacity: 0.6 }}>
              Fire When Ready.
            </div>
          </div>

          {cols.map((col, i) => (
            <div key={i}>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>{col.title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.links.map(l => (
                  <a key={l} href="#" style={{
                    fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 300, fontSize: 14,
                    color: 'var(--muted)', textDecoration: 'none', transition: 'color 0.2s',
                  }}
                  onMouseEnter={e => e.target.style.color = 'var(--white)'}
                  onMouseLeave={e => e.target.style.color = 'var(--muted)'}
                  >{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 8, letterSpacing: '0.1em', color: 'var(--muted)', opacity: 0.4 }}>
            © 2026 SALVO. Tous droits réservés.
          </div>
          <p style={{ fontFamily: "'DM Mono', monospace", fontStyle: 'italic', fontSize: 8, letterSpacing: '0.05em', color: 'var(--muted)', opacity: 0.4, maxWidth: 680, lineHeight: 1.7, textAlign: 'right' }}>
            * « 1 athlète d'endurance sur 7 » — Estimation basée sur la prévalence des crampes d'effort récurrentes (Kantarowski 1990, Schwellnus 2008, Maughan & Shirreffs 2019). Les taux varient selon le sport, les conditions et le profil individuel.
          </p>
        </div>
      </div>
    </footer>
  );
};

// ===== APP =====

const App = () => {
  const [showLoader, setShowLoader] = useState(() => !sessionStorage.getItem('salvo_loaded'));
  const [selectedPack, setSelectedPack] = useState(null);

  const handleLoaderDone = () => {
    sessionStorage.setItem('salvo_loaded', '1');
    setShowLoader(false);
  };

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

  return (
    <div style={{ cursor: 'none' }}>
      <CustomCursor />
      {showLoader && <Loader onDone={handleLoaderDone} />}
      <div style={{ opacity: showLoader ? 0 : 1, transition: 'opacity 0.5s ease' }}>
        <Nav onReserve={() => scrollToForm()} />
        <HeroSection onReserve={() => scrollToForm()} />
        <StatsBar />
        <ProblemSection />
        <ScienceSection />
        <ProductSection />
        <AthletesSection />
        <PricingSection onSelect={(pack) => scrollToForm(pack)} />
        <FormSection selectedPack={selectedPack} setSelectedPack={setSelectedPack} />
        <CTABanner onReserve={() => scrollToForm()} />
        <Footer />
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);