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

/* ---------- useInView (replaces framer-motion's whileInView) ---------- */
const useInView = (threshold = 0.2) => {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          obs.disconnect();
        }
      },
      { threshold, rootMargin: '0px 0px -80px 0px' }
    );
    obs.observe(node);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, inView];
};

/* ---------- SectionWithMockup: text + a JSX mockup (e.g. phone) ---------- */
const SectionWithMockup = ({ title, description, mockup, reverseLayout = false }) => {
  const [ref, inView] = useInView(0.15);

  const baseT = {
    transition: 'opacity .7s ease, transform .7s ease',
    opacity: inView ? 1 : 0,
    transform: inView ? 'translateY(0)' : 'translateY(50px)',
  };
  const textT  = { ...baseT, transitionDelay: '0s' };
  const mockT  = { ...baseT, transitionDelay: '.2s' };

  return (
    <section ref={ref} style={{
      position: 'relative', padding: '140px 24px', overflow: 'hidden',
    }}>
      <div className="mockup-grid" style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* Text */}
        <div style={{
          ...textT,
          gridColumn: reverseLayout ? 2 : 1,
          gridRow: 1,
          maxWidth: 480,
          justifySelf: reverseLayout ? 'end' : 'start',
        }}>
          <h2 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(30px, 3.6vw, 44px)',
            lineHeight: 1.15, letterSpacing: -1, margin: '0 0 18px', fontWeight: 600,
            color: 'var(--ink)', textWrap: 'balance',
          }}>{title}</h2>
          <p style={{
            color: '#868f97', fontSize: 15.5, lineHeight: 1.65, margin: 0,
            textWrap: 'pretty',
          }}>{description}</p>
        </div>

        {/* Mockup slot — JSX renders the phone */}
        <div style={{
          ...mockT,
          gridColumn: reverseLayout ? 1 : 2,
          gridRow: 1,
          position: 'relative',
          justifySelf: 'center',
          display: 'flex', justifyContent: 'center',
        }}>
          {/* ambient glow behind phone */}
          <div style={{
            position: 'absolute',
            width: 460, height: 460, borderRadius: '50%',
            background: 'radial-gradient(closest-side, rgba(155,93,240,0.28), transparent 70%)',
            top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
            filter: 'blur(20px)', zIndex: 0, pointerEvents: 'none',
          }}/>
          {mockup}
        </div>
      </div>

      {/* Bottom hairline gradient */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, width: '100%', height: 1,
        background: 'radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 100%)',
        pointerEvents: 'none',
      }}/>
    </section>
  );
};

/* ---------- PhoneMockup: realistic FoxBot Pro mobile dashboard in JSX ---------- */
const PhoneMockup = ({ variant = 'dashboard', tilt = 0 }) => {
  return (
    <div style={{
      width: 320, height: 660,
      position: 'relative', zIndex: 1,
      transform: tilt ? `rotate(${tilt}deg)` : 'none',
      transition: 'transform .8s ease',
    }}>
      {/* Outer bezel */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(160deg, #1a1a2e 0%, #0a0a14 100%)',
        borderRadius: 46,
        padding: 8,
        boxShadow:
          '0 50px 100px -20px rgba(0,0,0,0.85), ' +
          '0 0 0 1.5px rgba(255,255,255,0.10), ' +
          '0 0 0 7px #06060C, ' +
          '0 0 0 8.5px rgba(255,255,255,0.06)',
      }}>
        {/* Screen */}
        <div style={{
          position: 'relative',
          width: '100%', height: '100%',
          background: 'var(--bg)',
          borderRadius: 38,
          overflow: 'hidden',
          fontFamily: 'var(--sans)',
        }}>
          {/* Status bar */}
          <div style={{
            position: 'relative', zIndex: 10,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '14px 24px 4px',
            fontSize: 14, fontWeight: 600,
            color: 'var(--ink)',
          }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ letterSpacing: -0.3 }}>11:34</span>
              {/* notification crossed bell */}
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                <path d="M3 13h10M8 2v1.5M5 3.5L11 11.5M11 3.5a3 3 0 0 1 1 2.3v3.2l1 2H6"
                  stroke="var(--ink)" strokeWidth="1.3" strokeLinecap="round" opacity="0.7"/>
              </svg>
            </span>
            <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <svg width="16" height="11" viewBox="0 0 16 11" fill="var(--ink)">
                <rect x="0"  y="8" width="3" height="3" rx="0.5"/>
                <rect x="4"  y="5" width="3" height="6" rx="0.5"/>
                <rect x="8"  y="2" width="3" height="9" rx="0.5"/>
                <rect x="12" y="0" width="3" height="11" rx="0.5"/>
              </svg>
              <svg width="14" height="11" viewBox="0 0 14 11" fill="var(--ink)" opacity="0.95">
                <path d="M7 9.2 4 6.2c1.6-1.6 4.4-1.6 6 0L7 9.2zM7 9.2 1 3.2c3.3-3.3 8.7-3.3 12 0L7 9.2z" opacity="0.55"/>
              </svg>
              {/* battery */}
              <div style={{
                position: 'relative', display: 'inline-flex', alignItems: 'center',
                padding: '1px 5px 1px 4px',
                border: '1px solid rgba(255,255,255,0.50)', borderRadius: 4,
                fontSize: 9, fontWeight: 700, color: 'var(--ink)', letterSpacing: 0,
                minWidth: 28, height: 13, justifyContent: 'flex-end',
              }}>
                <span style={{ position: 'absolute', left: 1, top: 1, bottom: 1, width: '70%', background: 'var(--ink)', borderRadius: 2, opacity: 0.55 }}/>
                <span style={{ position: 'relative', zIndex: 1 }}>22</span>
                <span style={{ position: 'absolute', right: -3, top: '50%', transform: 'translateY(-50%)', width: 2, height: 5, background: 'rgba(255,255,255,0.5)', borderRadius: 1 }}/>
              </div>
            </span>
          </div>

          {/* App header */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '14px 20px 8px',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 9,
              background: 'rgba(155,93,240,0.08)',
              border: '1px solid rgba(155,93,240,0.30)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <img src="/static/guide-assets/foxbot-logo.png" width="18" height="18" alt=""/>
            </div>
            <h3 style={{
              margin: 0, fontFamily: 'var(--display)', fontSize: 22, fontWeight: 600,
              letterSpacing: -0.6, color: 'var(--ink)', flex: 1,
            }}>{variant === 'dashboard' ? 'Dashboard' : 'Signaux'}</h3>
            {/* PAPER pill (orange like real app) */}
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '4px 9px',
              background: 'rgba(242,169,59,0.10)',
              border: '1px solid rgba(242,169,59,0.32)',
              borderRadius: 999,
              fontFamily: 'var(--mono)', fontSize: 9.5, fontWeight: 700,
              color: '#F2A93B', letterSpacing: 0.5,
            }}>
              <span style={{ width: 5, height: 5, background: '#F2A93B', borderRadius: '50%' }}/>
              PAPER
            </span>
            {/* bell button */}
            <button style={{
              width: 30, height: 30, borderRadius: 8,
              background: 'var(--bg-1)',
              border: '1px solid var(--line)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              padding: 0, cursor: 'pointer',
            }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="var(--ink-2)" strokeWidth="1.4">
                <path d="M4 12V8a4 4 0 1 1 8 0v4l1 2H3l1-2z" strokeLinejoin="round"/>
                <path d="M7 14a1.5 1.5 0 0 0 2 0" strokeLinecap="round"/>
              </svg>
            </button>
          </div>

          {variant === 'dashboard' && <PhoneDashboardScreen/>}
          {variant === 'signaux'   && <PhoneSignauxScreen/>}

          {/* Bottom nav — 5 tabs, active gets purple top indicator */}
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            padding: '8px 8px 14px',
            background: 'linear-gradient(180deg, transparent, rgba(6,6,12,0.92) 40%)',
            zIndex: 15,
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(5,1fr)',
              padding: '4px 4px',
              borderTop: '1px solid rgba(255,255,255,0.05)',
            }}>
              {[
                { l: 'HOME',    active: variant === 'dashboard' },
                { l: 'TRADING', active: false },
                { l: 'SIGNAUX', active: variant === 'signaux' },
                { l: 'CHARTS',  active: false },
                { l: 'PLUS',    active: false },
              ].map((t, i) => (
                <div key={i} style={{
                  position: 'relative',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
                  padding: '6px 0 2px',
                  color: t.active ? 'var(--accent-2)' : 'var(--ink-3)',
                  fontSize: 9.5, fontFamily: 'var(--mono)', fontWeight: 500, letterSpacing: 0.6,
                }}>
                  {t.active && <div style={{
                    position: 'absolute', top: -5, left: '25%', right: '25%', height: 2.5,
                    background: 'var(--accent-2)', borderRadius: 2,
                    boxShadow: '0 0 8px rgba(181,131,248,0.55)',
                  }}/>}
                  <NavIcon name={t.l} active={t.active}/>
                  <span>{t.l}</span>
                </div>
              ))}
            </div>
            {/* home indicator */}
            <div style={{
              width: 110, height: 4, margin: '6px auto 0',
              background: 'var(--ink)', opacity: 0.4, borderRadius: 2,
            }}/>
          </div>
        </div>
      </div>
    </div>
  );
};

const NavIcon = ({ name, active }) => {
  const c = active ? 'var(--accent-2)' : 'var(--ink-3)';
  if (name === 'HOME') return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinejoin="round">
      <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z"/>
    </svg>
  );
  if (name === 'TRADING') return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12l3-3 3 4 4-7 4 9 4-5"/>
    </svg>
  );
  if (name === 'SIGNAUX') return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill={active ? c : 'none'} stroke={c} strokeWidth="1.6" strokeLinejoin="round">
      <path d="M13 2 4 14h7l-2 8 9-12h-7l2-8z"/>
    </svg>
  );
  if (name === 'CHARTS') return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round">
      <path d="M3 20h18M6 16V9M11 16V5M16 16v-5M21 16v-7"/>
    </svg>
  );
  if (name === 'PLUS') return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
      <circle cx="6"  cy="12" r="1.8"/>
      <circle cx="12" cy="12" r="1.8"/>
      <circle cx="18" cy="12" r="1.8"/>
    </svg>
  );
  return null;
};

/* Mobile dashboard screen — matches the real FoxBot Pro mobile UI */
const PhoneDashboardScreen = () => {
  const [pnl, setPnl] = useState(1842.40);
  useEffect(() => {
    const id = setInterval(() => setPnl(p => +(p + (Math.random() - 0.4) * 1.2).toFixed(2)), 1600);
    return () => clearInterval(id);
  }, []);

  // sparkline behind P&L
  const spark = useMemo(() => {
    const w = 280, h = 80;
    const pts = []; let y = h * 0.7;
    for (let i = 0; i <= 40; i++) {
      const x = (i / 40) * w;
      y -= 0.4 + Math.sin(i / 3) * 0.7 + Math.random() * 0.3;
      pts.push(`${x.toFixed(1)},${Math.max(8, y).toFixed(1)}`);
    }
    return 'M' + pts.join(' L');
  }, []);

  return (
    <div style={{ padding: '6px 16px 96px' }}>
      {/* Hero P&L card */}
      <div style={{
        position: 'relative',
        background:
          'radial-gradient(120% 100% at 100% 0%, rgba(221,85,168,0.16), transparent 50%), ' +
          'radial-gradient(120% 100% at 0% 100%, rgba(155,93,240,0.20), transparent 50%), ' +
          'linear-gradient(180deg, rgba(255,255,255,0.03), transparent), ' +
          'var(--bg-1)',
        border: '1px solid rgba(155,93,240,0.28)',
        borderRadius: 16, padding: '14px 16px 14px',
        marginBottom: 14, overflow: 'hidden',
        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Mono c="var(--ink-3)">P&L TOTAL · 30J</Mono>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontSize: 9.5, fontFamily: 'var(--mono)', fontWeight: 600, letterSpacing: 0.5, color: 'var(--green)',
          }}>
            <span style={{ width: 6, height: 6, background: 'var(--green)', borderRadius: '50%', boxShadow: '0 0 6px var(--green)' }}/>
            LIVE
          </span>
        </div>
        <div style={{
          fontFamily: 'var(--display)',
          fontSize: 36, fontWeight: 600, letterSpacing: -1.4,
          marginTop: 6,
          background: 'linear-gradient(135deg, #B583F8 0%, #DD55A8 100%)',
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          fontVariantNumeric: 'tabular-nums', lineHeight: 1,
        }}>+€{pnl.toLocaleString('fr-FR', { minimumFractionDigits: 2 })}</div>
        {/* chips row */}
        <div style={{ display: 'flex', gap: 6, marginTop: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '3px 8px', borderRadius: 6,
            background: 'rgba(11,207,130,0.10)',
            border: '1px solid rgba(11,207,130,0.28)',
            color: 'var(--green)', fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 600,
          }}>↑ +18.42%</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '3px 8px', borderRadius: 6,
            background: 'rgba(155,93,240,0.10)',
            border: '1px solid rgba(155,93,240,0.28)',
            color: 'var(--accent-2)', fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 600,
          }}>⚡ 3 positions</span>
          <span style={{ marginLeft: 'auto',
            padding: '3px 8px', borderRadius: 999,
            border: '1px solid var(--line)', color: 'var(--ink-2)',
            fontFamily: 'var(--mono)', fontSize: 10.5,
          }}>Capital <span style={{ color: 'var(--ink)' }}>€10K</span></span>
        </div>
        {/* sparkline subtle in background */}
        <svg viewBox="0 0 280 80" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, width: '100%', height: 60, opacity: 0.5, zIndex: -1 }} preserveAspectRatio="none">
          <defs>
            <linearGradient id="phone-spark2" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="#DD55A8" stopOpacity="0.35"/>
              <stop offset="1" stopColor="#9B5DF0" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d={`${spark} L280,80 L0,80 Z`} fill="url(#phone-spark2)"/>
          <path d={spark} fill="none" stroke="#DD55A8" strokeWidth="1.2" opacity="0.7"/>
        </svg>
      </div>

      {/* KPI 2x2 */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 14 }}>
        {[
          { l: 'WIN RATE',   v: '67.4', u: '%',   c: 'var(--ink)',      sub: '60W · 29L', bar: { v: 67.4, c: 'var(--green)' } },
          { l: 'TRADES JOUR',v: '4',    u: '/ jour', c: 'var(--ink)',   sub: '7J 23 · 30J 89', spark: true },
          { l: 'DRAWDOWN',   v: '-1.24',u: '%',   c: 'var(--red)',      sub: 'max -4.82%', bar: { v: 25, c: 'var(--red)' } },
          { l: 'POSITIONS',  v: '3',    u: 'actives', c: 'var(--ink)',  sub: <>Exposition <span style={{ color: 'var(--accent-2)' }}>€2 420</span></> },
        ].map((k, i) => (
          <div key={i} style={{
            background: 'var(--bg-1)',
            border: '1px solid var(--line)',
            borderRadius: 12, padding: 12,
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
          }}>
            <Mono c="var(--ink-4)">{k.l}</Mono>
            <div style={{ marginTop: 6, display: 'flex', alignItems: 'baseline', gap: 3 }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 22, fontWeight: 600, color: k.c, letterSpacing: -0.4 }}>{k.v}</span>
              {k.u && <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-3)' }}>{k.u}</span>}
            </div>
            {k.bar && (
              <div style={{ height: 2, background: 'rgba(255,255,255,0.05)', borderRadius: 1, marginTop: 6, overflow: 'hidden' }}>
                <div style={{ width: k.bar.v + '%', height: '100%', background: k.bar.c }}/>
              </div>
            )}
            {k.spark && (
              <svg viewBox="0 0 80 14" style={{ width: '100%', height: 12, marginTop: 5 }} preserveAspectRatio="none">
                <path d="M0 10 L12 8 L24 10 L36 5 L48 7 L60 3 L72 6 L80 4" fill="none" stroke="var(--accent-2)" strokeWidth="1.2"/>
              </svg>
            )}
            <div style={{ fontSize: 9.5, color: 'var(--ink-3)', marginTop: 5, fontFamily: 'var(--mono)' }}>{k.sub}</div>
          </div>
        ))}
      </div>

      {/* Opportunités */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <h4 style={{ fontFamily: 'var(--display)', fontSize: 17, fontWeight: 600, margin: 0, color: 'var(--ink)', letterSpacing: -0.3 }}>Opportunités</h4>
        <span style={{ fontSize: 11, color: 'var(--accent-2)', fontWeight: 500 }}>Voir tout</span>
      </div>
      <div style={{
        background: 'var(--bg-1)', border: '1px solid var(--line)',
        borderRadius: 12, padding: '10px 12px',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: '#9945FF',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 10, fontWeight: 700, color: '#fff',
        }}>SOL</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>SOL/USDT</div>
          <div style={{ fontSize: 9.5, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>Cassure ATH · momentum</div>
        </div>
        <div style={{
          padding: '3px 7px', borderRadius: 5,
          background: 'rgba(11,207,130,0.10)',
          color: 'var(--green)', fontSize: 9.5, fontFamily: 'var(--mono)', fontWeight: 700, letterSpacing: 0.4,
        }}>↑ LONG</div>
        <div style={{
          padding: '3px 7px', borderRadius: 999,
          background: 'rgba(155,93,240,0.16)',
          border: '1px solid rgba(155,93,240,0.32)',
          color: 'var(--accent-2)', fontSize: 10.5, fontFamily: 'var(--mono)', fontWeight: 700,
        }}>9.7</div>
      </div>
    </div>
  );
};

/* Mobile signaux screen — matches real production */
const PhoneSignauxScreen = () => {
  const signals = [
    { pair: 'BTC/USDT', dir: 'LONG',  dirArrow: '↑', dirC: 'var(--green)', chg: '+3.84%', chgC: 'var(--green)', score: '9.4', scoreC: 'var(--green)', icon: '₿', iconBg: '#F7931A' },
    { pair: 'ETH/USDT', dir: 'SHORT', dirArrow: '↓', dirC: 'var(--red)',   chg: '-1.42%', chgC: 'var(--red)',   score: '8.2', scoreC: 'var(--accent-2)', icon: 'ETH', iconBg: '#627EEA' },
    { pair: 'SOL/USDT', dir: 'LONG',  dirArrow: '↑', dirC: 'var(--green)', chg: '+5.62%', chgC: 'var(--green)', score: '9.7', scoreC: 'var(--green)', icon: 'SOL', iconBg: '#9945FF' },
    { pair: 'XAU/USDT', dir: 'SHORT', dirArrow: '↓', dirC: 'var(--red)',   chg: '-0.60%', chgC: 'var(--red)',   score: '7.4', scoreC: 'var(--accent-2)', icon: 'XAU', iconBg: '#C2A633' },
  ];

  return (
    <div style={{ padding: '4px 16px 96px' }}>
      {/* Big Scanner button — purple→magenta gradient */}
      <button style={{
        width: '100%',
        padding: '14px 16px',
        background: 'linear-gradient(135deg, #B583F8 0%, #9B5DF0 50%, #DD55A8 100%)',
        border: 'none',
        borderRadius: 16,
        color: '#fff', fontWeight: 600, fontSize: 14, letterSpacing: -0.2,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        boxShadow: '0 12px 28px -10px rgba(155,93,240,0.6), inset 0 1px 0 rgba(255,255,255,0.25)',
        marginBottom: 16, cursor: 'pointer',
      }}>
        <span style={{ fontSize: 16 }}>⚡</span> Scanner BTC · ETH · SOL · XAU
      </button>

      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 14, overflow: 'hidden' }}>
        {[
          { l: 'Tous',    c: '4', active: true },
          { l: 'LONG',    c: '2', active: false },
          { l: 'SHORT',   c: '2', active: false },
          { l: '≥ 8/10',  c: '3', active: false },
        ].map((c, i) => (
          <div key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '6px 10px', borderRadius: 999,
            fontSize: 10.5, fontFamily: 'var(--mono)', fontWeight: 500,
            background: 'transparent',
            border: `1px solid ${c.active ? 'rgba(155,93,240,0.40)' : 'var(--line)'}`,
            color: c.active ? 'var(--accent-2)' : 'var(--ink-3)',
            whiteSpace: 'nowrap',
          }}>
            <span>{c.l}</span>
            <span style={{
              padding: '1px 5px', borderRadius: 4,
              background: c.active ? 'rgba(155,93,240,0.20)' : 'var(--bg-1)',
              color: c.active ? 'var(--accent-2)' : 'var(--ink-3)',
              fontSize: 9.5, fontWeight: 700,
            }}>{c.c}</span>
          </div>
        ))}
      </div>

      {/* Signal cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {signals.map((s, i) => (
          <div key={i} style={{
            background: 'var(--bg-1)',
            border: '1px solid var(--line)',
            borderRadius: 12, padding: 12,
            display: 'flex', alignItems: 'center', gap: 10,
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.025)',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: s.iconBg, color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: s.icon.length > 1 ? 9 : 13, fontWeight: 700, flexShrink: 0,
            }}>{s.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{s.pair}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
                <span style={{
                  padding: '2px 6px', borderRadius: 5,
                  background: s.dirC === 'var(--green)' ? 'rgba(11,207,130,0.10)' : 'rgba(244,81,110,0.10)',
                  border: `1px solid ${s.dirC === 'var(--green)' ? 'rgba(11,207,130,0.30)' : 'rgba(244,81,110,0.30)'}`,
                  color: s.dirC, fontSize: 9, fontFamily: 'var(--mono)', fontWeight: 700, letterSpacing: 0.4,
                }}>{s.dirArrow} {s.dir}</span>
                <span style={{ fontSize: 10.5, fontFamily: 'var(--mono)', color: s.chgC, fontWeight: 500 }}>{s.chg}</span>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '3px 9px', borderRadius: 999,
                background: s.scoreC === 'var(--green)' ? 'rgba(11,207,130,0.10)' : 'rgba(155,93,240,0.14)',
                border: `1px solid ${s.scoreC === 'var(--green)' ? 'rgba(11,207,130,0.30)' : 'rgba(155,93,240,0.32)'}`,
                color: s.scoreC, fontFamily: 'var(--mono)', fontWeight: 700, fontSize: 11,
              }}>
                <span style={{ width: 5, height: 5, background: s.scoreC, borderRadius: '50%' }}/>
                {s.score}
                <span style={{ color: 'var(--ink-3)', fontWeight: 500 }}>/10</span>
              </div>
              <svg width="11" height="6" viewBox="0 0 11 6" fill="none">
                <path d="M1 1l4.5 4L10 1" stroke="var(--ink-4)" strokeWidth="1.4" strokeLinecap="round"/>
              </svg>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ---------- Shader background (Three.js radial lines, tinted Foxbot) ---------- */
const ShaderAnimation = ({ opacity = 0.55 }) => {
  const containerRef = useRef(null);
  const stateRef = useRef({ rafId: null, renderer: null, uniforms: null, onResize: null });

  useEffect(() => {
    const container = containerRef.current;
    if (!container || !window.THREE) return;
    const THREE = window.THREE;

    container.innerHTML = '';

    const camera = new THREE.Camera();
    camera.position.z = 1;
    const scene = new THREE.Scene();
    const geometry = new THREE.PlaneBufferGeometry(2, 2);

    const uniforms = {
      time: { type: 'f', value: 1.0 },
      resolution: { type: 'v2', value: new THREE.Vector2() },
    };

    const vertexShader = `
      void main() { gl_Position = vec4(position, 1.0); }
    `;

    // Adapted: same radial-line maths, but the final colour is mixed
    // through a Foxbot warm-orange ramp so it matches the brand.
    const fragmentShader = `
      precision highp float;
      uniform vec2 resolution;
      uniform float time;

      float random(in float x) { return fract(sin(x) * 1e4); }

      void main(void) {
        vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);

        vec2 fMosaicScal = vec2(4.0, 2.0);
        vec2 vScreenSize = vec2(256.0, 256.0);
        uv.x = floor(uv.x * vScreenSize.x / fMosaicScal.x) / (vScreenSize.x / fMosaicScal.x);
        uv.y = floor(uv.y * vScreenSize.y / fMosaicScal.y) / (vScreenSize.y / fMosaicScal.y);

        float t = time * 0.06 + random(uv.x) * 0.4;
        float lineWidth = 0.0008;

        vec3 raw = vec3(0.0);
        for (int j = 0; j < 3; j++) {
          for (int i = 0; i < 5; i++) {
            raw[j] += lineWidth * float(i*i) /
              abs(fract(t - 0.01 * float(j) + float(i) * 0.01) * 1.0 - length(uv));
          }
        }

        // Compress into a single luminance signal, then tint cool / purple.
        float k = clamp((raw.r + raw.g + raw.b) / 3.0, 0.0, 2.5);
        vec3 deep   = vec3(0.024, 0.024, 0.047);    // bg-base
        vec3 ember  = vec3(0.290, 0.140, 0.470);    // dim purple
        vec3 flame  = vec3(0.608, 0.365, 0.940);    // accent-500
        vec3 hot    = vec3(0.867, 0.333, 0.659);    // accent-mag

        vec3 col = mix(deep, ember, smoothstep(0.0, 0.35, k));
        col      = mix(col,  flame, smoothstep(0.35, 0.9, k));
        col      = mix(col,  hot,   smoothstep(0.9, 1.6, k));

        gl_FragColor = vec4(col, 1.0);
      }
    `;

    const material = new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    container.appendChild(renderer.domElement);
    renderer.domElement.style.display = 'block';
    renderer.domElement.style.width = '100%';
    renderer.domElement.style.height = '100%';

    const onResize = () => {
      const r = container.getBoundingClientRect();
      renderer.setSize(r.width, r.height);
      uniforms.resolution.value.x = renderer.domElement.width;
      uniforms.resolution.value.y = renderer.domElement.height;
    };
    onResize();
    window.addEventListener('resize', onResize);

    const animate = () => {
      stateRef.current.rafId = requestAnimationFrame(animate);
      uniforms.time.value += 0.05;
      renderer.render(scene, camera);
    };
    animate();

    stateRef.current = { rafId: stateRef.current.rafId, renderer, uniforms, onResize };

    return () => {
      if (stateRef.current.rafId) cancelAnimationFrame(stateRef.current.rafId);
      window.removeEventListener('resize', onResize);
      renderer.dispose();
      if (renderer.domElement.parentNode) renderer.domElement.parentNode.removeChild(renderer.domElement);
    };
  }, []);

  return (
    <div
      ref={containerRef}
      aria-hidden="true"
      style={{
        position: 'absolute', inset: 0,
        opacity,
        pointerEvents: 'none',
        // fade out toward the bottom so it bleeds into the page
        WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 35%, #000 40%, transparent 85%)',
        maskImage: 'radial-gradient(ellipse 70% 70% at 50% 35%, #000 40%, transparent 85%)',
      }}
    />
  );
};

/* ---------- Brand mark: real FoxBot Pro logo ---------- */
const FoxMark = ({ size = 28 }) => (
  <img
    src="/static/guide-assets/foxbot-logo.png"
    alt="FoxBot Pro"
    width={size}
    height={size}
    style={{
      width: size, height: size, display: 'block', objectFit: 'contain',
      filter: 'drop-shadow(0 0 12px rgba(155,93,240,0.45))',
    }}
  />
);

/* ---------- Tiny pieces ---------- */
const Mono = ({ children, c }) => (
  <span style={{ fontFamily: 'var(--mono)', color: c || 'var(--ink-3)', fontSize: 12, letterSpacing: 0.2 }}>{children}</span>
);

const Pill = ({ children, color = 'orange' }) => {
  const map = {
    orange: { bg: 'var(--accent-soft)', bd: 'var(--accent-line)', fg: 'var(--accent-2)' },
    green:  { bg: 'var(--green-soft)',  bd: 'rgba(11,207,130,0.28)', fg: 'var(--green)' },
    blue:   { bg: 'var(--blue-soft)',   bd: 'rgba(181,131,248,0.28)', fg: 'var(--blue)' },
    ghost:  { bg: 'transparent', bd: 'var(--line-2)', fg: 'var(--ink-2)' },
  }[color];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: map.bg, border: `1px solid ${map.bd}`, color: map.fg,
      fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: 0.4, textTransform: 'uppercase',
    }}>{children}</span>
  );
};

const Btn = ({ children, primary, onClick, href, size = 'md' }) => {
  const pad = size === 'lg' ? '15px 26px' : '11px 18px';
  const fs = size === 'lg' ? 15 : 14;
  const base = {
    position: 'relative',
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: pad, borderRadius: 999, fontSize: fs, fontWeight: 600,
    cursor: 'pointer', border: '1px solid',
    transition: 'transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease',
    fontFamily: 'var(--sans)', letterSpacing: -0.1,
    isolation: 'isolate', overflow: 'hidden', whiteSpace: 'nowrap',
    textDecoration: 'none',
  };
  const styles = primary ? {
    ...base,
    background: 'linear-gradient(180deg, #B583F8 0%, #9B5DF0 100%)',
    borderColor: 'rgba(255,255,255,0.12)',
    color: '#FFFFFF',
    boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.32), 0 14px 36px -10px rgba(155,93,240,0.6)',
  } : {
    ...base, background: 'rgba(255,255,255,0.02)', borderColor: 'rgba(255,255,255,0.12)', color: 'var(--ink)',
    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
  };
  const Tag = href ? 'a' : 'button';
  return <Tag href={href} onClick={onClick} className={primary ? 'btn-primary' : 'btn-secondary'} style={styles}>
    {children}
  </Tag>;
};

const Section = ({ id, eyebrow, kicker, title, sub, children, max = 1180 }) => {
  const [ref, inView] = useInView(0.12);
  return (
    <section ref={ref} id={id} style={{
      padding: '120px 24px', position: 'relative',
      opacity: inView ? 1 : 0,
      transform: inView ? 'translateY(0)' : 'translateY(40px)',
      transition: 'opacity .8s ease, transform .8s ease',
    }}>
      <div style={{ maxWidth: max, margin: '0 auto' }}>
        {(eyebrow || kicker) && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
            {kicker && <Mono c="var(--ink-4)">{kicker}</Mono>}
            {eyebrow && <Pill color="orange">{eyebrow}</Pill>}
          </div>
        )}
        {title && <h2 style={{
          fontFamily: 'var(--display)', fontSize: 'clamp(34px, 5vw, 56px)',
          lineHeight: 1.02, letterSpacing: -1.4, margin: '0 0 18px', fontWeight: 600,
          textWrap: 'balance', maxWidth: 900,
        }}>{title}</h2>}
        {sub && <p style={{
          color: 'var(--ink-2)', fontSize: 19, lineHeight: 1.5, maxWidth: 640, margin: '0 0 60px',
          textWrap: 'pretty',
        }}>{sub}</p>}
        {children}
      </div>
    </section>
  );
};

/* ---------- Header ---------- */
const Header = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      background: scrolled ? 'rgba(10,9,8,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(160%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(160%)' : 'none',
      transition: 'all .2s ease',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '16px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <FoxMark size={26} />
          <span style={{ fontFamily: 'var(--display)', fontSize: 16, fontWeight: 600, letterSpacing: -0.3 }}>FoxBot Pro</span>
          <Mono c="var(--ink-4)">v2.4</Mono>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }} className="nav-desktop">
          {['Fonctionnalités','Stratégies','Tarifs','FAQ'].map((l, i) => (
            <a key={i} href={`#${['features','strategies','pricing','faq'][i]}`}
              style={{ color: 'var(--ink-2)', fontSize: 14, fontWeight: 500 }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="/app" style={{ color: 'var(--ink-2)', fontSize: 14, fontWeight: 500, padding: '11px 4px' }}>Connexion</a>
          <Btn primary href="/app">Démarrer →</Btn>
        </div>
      </div>
    </header>
  );
};

/* ---------- Hero ---------- */
const Hero = () => {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      minHeight: '100vh',
      padding: '120px 24px 80px',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}>
      {/* shader backdrop — full bleed */}
      <div style={{
        position: 'absolute', inset: 0,
        pointerEvents: 'none',
      }}>
        <ShaderAnimation opacity={0.6}/>
      </div>
      {/* cool vignette to anchor the type */}
      <div style={{
        position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: 1100, height: 1100, borderRadius: '50%',
        background: 'radial-gradient(closest-side, rgba(155,93,240,0.22), transparent 70%)',
        pointerEvents: 'none', mixBlendMode: 'screen',
      }}/>
      <div style={{ maxWidth: 1180, margin: '0 auto', position: 'relative', width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
          <Pill color="ghost">
            <span style={{ width: 6, height: 6, background: 'var(--green)', borderRadius: '50%', boxShadow: '0 0 8px var(--green)' }}/>
            Signaux haute conviction · 10 paires OKX · 50+ à venir
          </Pill>
        </div>
        <h1 style={{
          fontFamily: 'var(--display)',
          fontSize: 'clamp(48px, 8.4vw, 112px)',
          lineHeight: 1.02, letterSpacing: -3.5, fontWeight: 600,
          textAlign: 'center', margin: '0 auto 36px', maxWidth: 1100,
          textWrap: 'balance',
        }}>
          Le trading crypto<br/>
          <span style={{ color: 'var(--ink-3)' }}>avec un </span>
          <span style={{
            background: 'linear-gradient(135deg, #B583F8 0%, #9B5DF0 50%, #DD55A8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
          }}>copilote intelligent.</span>
        </h1>
        <p style={{
          textAlign: 'center', color: 'var(--ink-2)', fontSize: 20, lineHeight: 1.55,
          margin: '0 auto 52px', maxWidth: 640, textWrap: 'pretty',
        }}>
          FoxBot Pro analyse les marchés OKX en continu, repère les opportunités
          et vous alerte sur Telegram. Vous validez, vous exécutez : manuellement
          ou en semi-auto. Le bot suggère, vous décidez.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 22 }}>
          <Btn primary size="lg" href="/app">Démarrer · Gratuit pendant la beta</Btn>
          <Btn size="lg" href="#features">Voir les performances</Btn>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
          <Mono>· Vos clés, votre exchange</Mono>
        </div>
      </div>

      {/* scroll cue */}
      <div style={{
        position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        color: 'var(--ink-4)',
        animation: 'scroll-cue 2.4s ease-in-out infinite',
      }}>
        <Mono c="var(--ink-4)">SCROLL</Mono>
        <span style={{
          width: 1, height: 38,
          background: 'linear-gradient(180deg, transparent, var(--ink-3) 50%, transparent)',
        }}/>
      </div>
    </section>
  );
};

/* ---------- Animated dashboard preview ---------- */
const DashboardPreview = () => {
  const [pnl, setPnl] = useState(8.19);
  useEffect(() => {
    const id = setInterval(() => setPnl(p => +(p + (Math.random() - 0.45) * 0.04).toFixed(2)), 1400);
    return () => clearInterval(id);
  }, []);

  // Generate the equity-curve path
  const path = useMemo(() => {
    const w = 1100, h = 200;
    const pts = [];
    let y = h * 0.85;
    for (let i = 0; i <= 60; i++) {
      const x = (i / 60) * w;
      y -= 0.6 + Math.sin(i / 4) * 0.8 + Math.random() * 0.4;
      pts.push(`${x.toFixed(1)},${Math.max(20, y).toFixed(1)}`);
    }
    return 'M' + pts.join(' L');
  }, []);

  return (
    <div style={{
      marginTop: 80, position: 'relative',
      borderRadius: 18, overflow: 'hidden',
      background: 'linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%)',
      border: '1px solid var(--line)',
      boxShadow: '0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset',
    }}>
      {/* chrome bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 20px', borderBottom: '1px solid var(--line)', background: 'var(--bg-1)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <FoxMark size={20}/>
          <Mono c="var(--ink-2)">galfox.org/dashboard</Mono>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Pill color="green"><span style={{ width:6,height:6,background:'var(--green)',borderRadius:'50%' }}/>Bot actif</Pill>
          <Pill color="ghost">OKX · live</Pill>
        </div>
      </div>

      {/* metrics */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderBottom: '1px solid var(--line)' }}>
        {[
          { label: 'P&L 7J', val: `+${pnl}%`, c: 'var(--green)', accent: 'var(--green-soft)' },
          { label: 'WIN RATE', val: '64.2%', c: 'var(--ink)' },
          { label: 'TRADES', val: '128', c: 'var(--ink)' },
          { label: 'SHARPE', val: '1.84', c: 'var(--blue)' },
        ].map((m, i) => (
          <div key={i} style={{
            padding: '22px 24px',
            borderRight: i < 3 ? '1px solid var(--line)' : 'none',
            position: 'relative',
          }}>
            {m.accent && <div style={{ position:'absolute', top:0, left:0, right:0, height:1, background:m.c, opacity: 0.5 }}/>}
            <Mono c="var(--ink-4)">{m.label}</Mono>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 26, fontWeight: 500, color: m.c, marginTop: 6 }}>{m.val}</div>
          </div>
        ))}
      </div>

      {/* equity curve */}
      <div style={{ padding: '20px 24px', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ fontWeight: 500, fontSize: 14 }}>Performance · 7 jours</span>
          <Pill color="green">+{pnl}%</Pill>
        </div>
        <svg viewBox="0 0 1100 200" style={{ width: '100%', height: 160 }} preserveAspectRatio="none">
          <defs>
            <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="#9B5DF0" stopOpacity="0.40"/>
              <stop offset="1" stopColor="#9B5DF0" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d={`${path} L1100,200 L0,200 Z`} fill="url(#g)"/>
          <path d={path} fill="none" stroke="#B583F8" strokeWidth="2"/>
        </svg>
      </div>

      {/* trades row */}
      <div style={{ borderTop: '1px solid var(--line)', padding: '14px 24px', display: 'flex', gap: 18, overflow: 'hidden' }}>
        {[
          { p:'BTC-USDT', d:'LONG', v:'+2.04%', c:'var(--green)' },
          { p:'ETH-USDT', d:'SHORT', v:'+1.20%', c:'var(--green)' },
          { p:'SOL-USDT', d:'LONG', v:'-2.35%', c:'var(--red)' },
          { p:'BNB-USDT', d:'LONG', v:'+2.68%', c:'var(--green)' },
          { p:'XRP-USDT', d:'SHORT', v:'+0.96%', c:'var(--green)' },
        ].map((t, i) => (
          <div key={i} style={{ display:'flex', alignItems:'center', gap: 10, fontFamily:'var(--mono)', fontSize: 12 }}>
            <span style={{ color: 'var(--ink-2)' }}>{t.p}</span>
            <span style={{ color: 'var(--ink-4)' }}>{t.d}</span>
            <span style={{ color: t.c }}>{t.v}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const KpiStrip = () => (
  <div style={{
    marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
    background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden',
  }}>
    {[
      { v: '2.4M $', l: 'Volume traité (30j)' },
      { v: '+18.6%', l: 'P&L moyen Pro · 90j' },
      { v: '<200ms', l: 'Latence ordre OKX' },
      { v: '4 320', l: 'Bots déployés' },
    ].map((k, i) => (
      <div key={i} style={{ background: 'var(--bg-1)', padding: '24px 22px' }}>
        <div style={{ fontFamily:'var(--display)', fontSize: 32, fontWeight: 600, letterSpacing: -1 }}>{k.v}</div>
        <Mono c="var(--ink-3)">{k.l}</Mono>
      </div>
    ))}
  </div>
);

/* ---------- Features (BentoGrid pattern) ---------- */
const Features = () => {
  // Mini equity-curve for the Performance card
  const perfPath = useMemo(() => {
    const pts = []; let y = 80;
    for (let i = 0; i <= 60; i++) {
      const x = (i / 60) * 320;
      y -= 0.35 + Math.sin(i / 4) * 0.9 + Math.random() * 0.4;
      pts.push(`${x.toFixed(1)},${Math.max(6, y).toFixed(1)}`);
    }
    return 'M' + pts.join(' L');
  }, []);

  const items = [
    {
      tag: '01',
      icon: <IconTrend/>,
      title: 'Moteur Performance',
      meta: 'Backtests à venir',
      status: 'LIVE',
      statusColor: 'var(--green)',
      description: 'EMA9/21, RSI14, MACD, breakout, momentum. Trois profils de risque testés sur 24 mois de données OKX, mode simulation avant capital réel.',
      tags: ['EMA', 'MACD', 'RSI'],
      colSpan: 2, persistentHover: true,
      visual: (
        <svg viewBox="0 0 320 88" style={{ width: '100%', height: 56 }} preserveAspectRatio="none">
          <defs>
            <linearGradient id="bento-perf" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="#DD55A8" stopOpacity="0.32"/>
              <stop offset="1" stopColor="#9B5DF0" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d={`${perfPath} L320,88 L0,88 Z`} fill="url(#bento-perf)"/>
          <path d={perfPath} fill="none" stroke="#DD55A8" strokeWidth="1.6"/>
        </svg>
      ),
    },
    {
      tag: '02',
      icon: <IconShield/>,
      title: 'Clés API blindées',
      meta: 'AES-256',
      status: 'SOC2-ready',
      statusColor: 'var(--ink-2)',
      description: 'Permissions Read + Trade uniquement, jamais Withdraw. Vos clés chiffrées au repos, déchiffrées en RAM le temps d\'un appel.',
      tags: ['Read', 'Trade', '✕ Withdraw'],
      visual: null,
    },
    {
      tag: '03',
      icon: <IconBolt/>,
      title: 'Branché en 4 minutes',
      meta: 'Setup guidé',
      status: 'Telegram',
      statusColor: 'var(--accent-2)',
      description: 'Onboarding en 4 étapes : clés API OKX, bot Telegram, choix de stratégie, lancement. Alertes en temps réel sur chaque trade.',
      tags: ['Onboarding', 'Alertes', 'Health 60s'],
      colSpan: 2,
      visual: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            { t: '14:32', m: 'SIGNAL · LONG BTC-USDT @ 62 840', primary: true },
            { t: '14:55', m: 'TP atteint · +2.04%' },
          ].map((a, i) => (
            <div key={i} style={{
              display: 'flex', gap: 10, alignItems: 'center',
              padding: '8px 11px',
              background: a.primary ? 'rgba(155,93,240,0.10)' : 'var(--bg)',
              border: a.primary ? '1px solid rgba(155,93,240,0.28)' : '1px solid var(--line)',
              borderLeft: `3px solid ${a.primary ? 'var(--accent-2)' : 'var(--ink-4)'}`,
              borderRadius: 8,
              fontFamily: 'var(--mono)', fontSize: 11, lineHeight: 1.3,
            }}>
              <span style={{ color: 'var(--ink-4)' }}>{a.t}</span>
              <span style={{ color: a.primary ? 'var(--ink)' : 'var(--ink-2)' }}>{a.m}</span>
            </div>
          ))}
        </div>
      ),
    },
    {
      tag: '04',
      icon: <IconLayers/>,
      title: 'Backtests',
      meta: 'À venir',
      status: 'À VENIR',
      statusColor: 'var(--accent-2)',
      description: 'Toutes les courbes brutes seront consultables : drawdown, win rate, profit factor. Pas de chiffres marketés, jamais.',
      tags: ['CSV', 'Data', 'Open'],
      visual: null,
    },
  ];

  return (
    <Section id="features" eyebrow="Trois piliers" kicker="// 01 · CE QUI FAIT FOXBOT PRO"
      title="Performance, sécurité, simplicité. Aucun compromis."
      sub="Votre bot tourne sur l'infrastructure que vous attendez d'un outil financier sérieux. Sans le jargon.">
      <div className="features-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 12,
      }}>
        {items.map((it, i) => <BentoCard key={i} {...it}/>)}
      </div>
    </Section>
  );
};

const BentoCard = ({ tag, icon, title, meta, status, statusColor, description, tags, visual, colSpan, persistentHover }) => {
  return (
    <div className={persistentHover ? 'bento-card bento-hover-on' : 'bento-card'} style={{
      gridColumn: colSpan === 2 ? 'span 2' : 'span 1',
      position: 'relative',
      padding: 22,
      borderRadius: 16,
      overflow: 'hidden',
      background: 'var(--bg-1)',
      border: '1px solid var(--line)',
      display: 'flex', flexDirection: 'column', gap: 14,
      minHeight: 230,
      transition: 'transform .25s ease, border-color .25s ease, box-shadow .25s ease',
      cursor: 'default',
    }}>
      {/* dotted hover background */}
      <div className="bento-dots" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at center, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '4px 4px',
        opacity: persistentHover ? 1 : 0,
        transition: 'opacity .3s ease',
        pointerEvents: 'none',
      }}/>
      {/* gradient ring overlay */}
      <div className="bento-ring" style={{
        position: 'absolute', inset: 0, borderRadius: 16,
        padding: 1,
        background: 'linear-gradient(135deg, transparent 0%, rgba(155,93,240,0.20) 50%, transparent 100%)',
        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
        WebkitMaskComposite: 'xor', maskComposite: 'exclude',
        opacity: persistentHover ? 1 : 0,
        transition: 'opacity .3s ease',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'rgba(155,93,240,0.08)',
          border: '1px solid rgba(155,93,240,0.20)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--accent-2)',
        }}>{icon}</div>
        <span style={{
          padding: '4px 10px', borderRadius: 999,
          background: 'rgba(255,255,255,0.05)',
          color: statusColor,
          fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 600, letterSpacing: 0.6,
        }}>{status}</span>
      </div>

      <div style={{ position: 'relative' }}>
        <Mono c="var(--ink-4)">// {tag}</Mono>
        <h3 style={{
          margin: '6px 0 4px',
          fontFamily: 'var(--display)', fontSize: 19, fontWeight: 600,
          letterSpacing: -0.4, color: 'var(--ink)',
        }}>
          {title}
          <span style={{ marginLeft: 8, fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--ink-3)', fontWeight: 400 }}>{meta}</span>
        </h3>
        <p style={{
          margin: 0, color: 'var(--ink-2)', fontSize: 13.5, lineHeight: 1.55,
        }}>{description}</p>
      </div>

      {visual && <div style={{ position: 'relative' }}>{visual}</div>}

      <div style={{
        position: 'relative', marginTop: 'auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
      }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {tags.map((t, i) => (
            <span key={i} style={{
              padding: '3px 9px', borderRadius: 6,
              background: 'rgba(255,255,255,0.04)',
              color: 'var(--ink-3)',
              fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 500,
            }}>#{t}</span>
          ))}
        </div>
        <span className="bento-cta" style={{
          fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent-2)',
          opacity: persistentHover ? 1 : 0,
          transition: 'opacity .3s ease',
          whiteSpace: 'nowrap',
        }}>Explorer →</span>
      </div>
    </div>
  );
};

/* Inline icons (matches lucide-react look) */
const IconTrend = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
    <polyline points="16 7 22 7 22 13"/>
  </svg>
);
const IconShield = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    <path d="M9 12l2 2 4-4"/>
  </svg>
);
const IconBolt = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
    <path d="M13 2 3 14h7l-2 8 10-12h-7l2-8z"/>
  </svg>
);
const IconLayers = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polygon points="12 2 2 7 12 12 22 7 12 2"/>
    <polyline points="2 17 12 22 22 17"/>
    <polyline points="2 12 12 17 22 12"/>
  </svg>
);


/* ---------- Strategies ---------- */
const Strategies = () => {
  const items = [
    {
      name: 'Safe',
      tag: 'CONSERVATEUR',
      risk: '1–2',                       // % risk per trade (hero metric)
      tagline: 'Préservation du capital. Petits trades, stop serré.',
      desc: 'Trend following lent sur EMA9/21 daily. Peu d\'ordres, drawdown plafonné. Idéal pour démarrer ou amortir un portefeuille existant.',
      stats: { win: 'À venir', dd: 'À venir', sharpe: 'À venir', mode: 'Spot' },
      curve: 'flat',
      colorStops: ['#8AE0B9', '#0BCF82'],   // green-ish (only for the curve)
      accentLabel: 'low',
    },
    {
      name: 'Normal',
      tag: 'RECOMMANDÉ',
      risk: '3–5',
      tagline: 'Le profil par défaut. Équilibre rendement / risque.',
      desc: 'Breakout + momentum H1. Rééquilibrage actif, R/R minimal 1.5, multi-paires. Le sweet-spot pour 70% des traders Pro.',
      stats: { win: 'À venir', dd: 'À venir', sharpe: 'À venir', mode: 'Spot · Futures ×3' },
      curve: 'wave',
      colorStops: ['#B583F8', '#DD55A8'],
      accentLabel: 'mid',
      featured: true,
    },
    {
      name: 'Avancé',
      tag: 'AGRESSIF',
      risk: '8–15',
      tagline: 'Scalping court terme. Hauts rendements, drawdown élevé.',
      desc: 'Scalping M5, MACD divergence, levier ×10 capé. Réservé aux comptes Pro avec audit. À ne jamais lancer sans 30 jours de simulation.',
      stats: { win: 'À venir', dd: 'À venir', sharpe: 'À venir', mode: 'Futures ×10' },
      curve: 'spiky',
      colorStops: ['#FF8AC1', '#DD55A8'],
      accentLabel: 'high',
    },
  ];

  return (
    <Section id="strategies" eyebrow="Stratégies" kicker="// 02 · CE QUE TOURNE LE BOT"
      title="Trois profils. Vous choisissez l'agressivité."
      sub="Chaque stratégie a son cadre de risque et son profil de volatilité propre. Vous basculez à chaud sans perdre vos positions ouvertes. Backtests publiés au lancement.">
      <div className="strategies-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20,
        alignItems: 'stretch',
      }}>
        {items.map((s, i) => <StrategyCard key={i} {...s}/>)}
      </div>
    </Section>
  );
};

const StrategyCard = ({ name, tag, risk, tagline, desc, stats, curve, colorStops, featured, accentLabel }) => {
  const spotRef = useCursorSpotlight();
  const card = (
    <div style={{
      position: 'relative',
      padding: 28, borderRadius: 22,
      background: featured
        ? 'linear-gradient(160deg, rgba(181,131,248,0.10) 0%, rgba(155,93,240,0.04) 40%, rgba(13,13,23,0.92) 100%)'
        : 'linear-gradient(160deg, rgba(255,255,255,0.025) 0%, rgba(13,13,23,0.85) 100%)',
      border: featured ? 'none' : '1px solid rgba(255,255,255,0.07)',
      backdropFilter: 'blur(18px) saturate(140%)',
      WebkitBackdropFilter: 'blur(18px) saturate(140%)',
      boxShadow: featured
        ? '0 30px 70px -30px rgba(155,93,240,0.45), inset 0 0 0 1px rgba(181,131,248,0.18)'
        : '0 20px 50px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04)',
      display: 'flex', flexDirection: 'column',
      minHeight: 460,
      zIndex: 1,
      overflow: 'hidden',
    }}>
      {/* Top: name + tag */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            position: 'relative', width: 10, height: 10, borderRadius: '50%',
            background: colorStops[1],
            boxShadow: `0 0 14px ${colorStops[1]}, 0 0 4px ${colorStops[1]}`,
          }}>
            <span style={{
              position: 'absolute', inset: -2, borderRadius: '50%',
              background: colorStops[1], opacity: 0.4,
              animation: 'strategy-pulse 2s ease-out infinite',
            }}/>
          </span>
          <h3 style={{
            margin: 0, fontFamily: 'var(--display)', fontSize: 28, fontWeight: 600,
            letterSpacing: -0.8, color: 'var(--ink)',
          }}>{name}</h3>
        </div>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 700, letterSpacing: 0.6,
          color: 'var(--ink-3)',
        }}>{tag}</span>
      </div>

      <p style={{ color: 'var(--ink-2)', fontSize: 13.5, lineHeight: 1.5, margin: '14px 0 0' }}>{tagline}</p>

      {/* Hero metric: max risk per trade */}
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, margin: '24px 0 16px', position: 'relative', zIndex: 2 }}>
        <span style={{
          fontFamily: 'var(--display)', fontSize: 56, fontWeight: 300, letterSpacing: -2.5,
          lineHeight: 0.9,
          background: `linear-gradient(180deg, ${colorStops[0]} 0%, ${colorStops[1]} 100%)`,
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
        }}>{risk}<span style={{ fontSize: 28, marginLeft: 2 }}>%</span></span>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)',
          textTransform: 'uppercase', letterSpacing: 0.6,
        }}>RISQUE / TRADE</span>
      </div>

      {/* Mini risk-curve visualization */}
      <StrategyCurve kind={curve} colorStops={colorStops}/>

      <p style={{ color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.55, margin: '20px 0 22px', flex: 1 }}>{desc}</p>

      {/* Stats grid */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12,
        paddingTop: 18, borderTop: '1px solid var(--line)',
        position: 'relative', zIndex: 2,
      }}>
        {[
          { l: 'Win',      v: stats.win    },
          { l: 'Drawdown', v: stats.dd     },
          { l: 'Sharpe',   v: stats.sharpe },
          { l: 'Marché',   v: stats.mode   },
        ].map((kv, i) => (
          <div key={i}>
            <Mono c="var(--ink-4)">{kv.l}</Mono>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)',
              marginTop: 5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{kv.v}</div>
          </div>
        ))}
      </div>
    </div>
  );

  if (!featured) return card;
  return (
    <div ref={spotRef} style={{ position: 'relative', borderRadius: 22 }}>
      <div className="conic-halo"/>
      <div className="conic-glow"/>
      {card}
      {/* cursor-following spotlight overlay */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: 22,
        pointerEvents: 'none', zIndex: 2,
        background: 'radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(181,131,248,0.16), transparent 60%)',
        opacity: 'var(--spot, 0)',
        transition: 'opacity .4s ease',
      }}/>
    </div>
  );
};

const StrategyCurve = ({ kind, colorStops }) => {
  const path = useMemo(() => {
    const w = 320, h = 64, pts = []; let y = h * 0.78;
    const seed = (i) => {
      if (kind === 'flat')  return 0.2 + Math.sin(i / 6) * 0.18 + (Math.random() - 0.5) * 0.18;
      if (kind === 'wave')  return 0.45 + Math.sin(i / 3) * 0.65 + (Math.random() - 0.5) * 0.35;
      if (kind === 'spiky') return 0.9  + Math.sin(i / 2) * 1.4  + (Math.random() - 0.5) * 1.2;
      return 0;
    };
    for (let i = 0; i <= 32; i++) {
      const x = (i / 32) * w;
      y -= seed(i);
      pts.push(`${x.toFixed(1)},${Math.max(4, Math.min(h - 2, y)).toFixed(1)}`);
    }
    return 'M' + pts.join(' L');
  }, [kind]);
  const gid = `strategy-curve-${kind}`;
  return (
    <div style={{ position: 'relative' }}>
      <svg viewBox="0 0 320 64" style={{ width: '100%', height: 64 }} preserveAspectRatio="none">
        <defs>
          <linearGradient id={gid} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={colorStops[1]} stopOpacity="0.35"/>
            <stop offset="100%" stopColor={colorStops[0]} stopOpacity="0"/>
          </linearGradient>
        </defs>
        {/* faint horizontal gridlines */}
        {[16, 32, 48].map((y, i) => (
          <line key={i} x1="0" y1={y} x2="320" y2={y} stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
        ))}
        <path d={`${path} L320,64 L0,64 Z`} fill={`url(#${gid})`}/>
        <path d={path} fill="none" stroke={colorStops[1]} strokeWidth="1.6"/>
      </svg>
    </div>
  );
};

const KV = ({ k, v, c }) => (
  <div>
    <Mono c="var(--ink-4)">{k}</Mono>
    <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: c, marginTop: 4 }}>{v}</div>
  </div>
);

/* ---------- Pricing (glassy + scoped shader background) ---------- */
const PricingShader = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const gl = canvas.getContext('webgl');
    if (!gl) return;

    const vert = `attribute vec2 aPosition; void main(){ gl_Position = vec4(aPosition,0.0,1.0); }`;
    // Adapted from the source: same wavy concentric circles, but
    // the foreground colour is mapped onto Foxbot's warm orange palette.
    const frag = `
      precision highp float;
      uniform float iTime;
      uniform vec2 iResolution;

      mat2 rotate2d(float a){ float c=cos(a), s=sin(a); return mat2(c,-s,s,c); }
      float variation(vec2 v1, vec2 v2, float strength, float speed){
        return sin(dot(normalize(v1), normalize(v2)) * strength + iTime * speed) / 100.0;
      }
      float paintCircle(vec2 uv, vec2 center, float rad, float width){
        vec2 diff = center - uv;
        float len = length(diff);
        len += variation(diff, vec2(0.0, 1.0), 5.0, 2.0);
        len -= variation(diff, vec2(1.0, 0.0), 5.0, 2.0);
        return smoothstep(rad - width, rad, len) - smoothstep(rad, rad + width, len);
      }

      void main(){
        vec2 uv = gl_FragCoord.xy / iResolution.xy;
        // squeeze a touch to keep the rings inside a wide section
        uv.x *= 1.5; uv.x -= 0.25;

        float mask = 0.0;
        float radius = 0.35;
        vec2 center = vec2(0.5);
        mask += paintCircle(uv, center, radius, 0.035);
        mask += paintCircle(uv, center, radius - 0.018, 0.010);
        mask += paintCircle(uv, center, radius + 0.018, 0.005);

        // rotating cool gradient (purple → magenta)
        vec2 v = rotate2d(iTime * 0.6) * (uv - 0.5);
        float k = clamp(0.5 + v.x * 0.9 - v.y * 0.6, 0.0, 1.0);
        vec3 ember = vec3(0.290, 0.140, 0.470);   // dim purple
        vec3 flame = vec3(0.608, 0.365, 0.940);   // accent-500
        vec3 hot   = vec3(0.867, 0.333, 0.659);   // accent-mag
        vec3 fg = mix(ember, flame, smoothstep(0.0, 0.55, k));
        fg      = mix(fg,    hot,   smoothstep(0.65, 1.0, k));

        vec3 bg = vec3(0.024, 0.024, 0.047);                 // bg-base
        vec3 col = mix(bg, fg, clamp(mask, 0.0, 1.0));
        // crisp inner highlight, like the demo
        col = mix(col, vec3(0.96, 0.94, 1.00), paintCircle(uv, center, radius, 0.003));

        gl_FragColor = vec4(col, 1.0);
      }
    `;

    const compile = (type, src) => {
      const sh = gl.createShader(type);
      gl.shaderSource(sh, src);
      gl.compileShader(sh);
      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(sh));
      }
      return sh;
    };

    const program = gl.createProgram();
    gl.attachShader(program, compile(gl.VERTEX_SHADER, vert));
    gl.attachShader(program, compile(gl.FRAGMENT_SHADER, frag));
    gl.linkProgram(program);
    gl.useProgram(program);

    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW);
    const aPos = gl.getAttribLocation(program, 'aPosition');
    gl.enableVertexAttribArray(aPos);
    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

    const uTime = gl.getUniformLocation(program, 'iTime');
    const uRes  = gl.getUniformLocation(program, 'iResolution');

    let rafId;
    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const r = canvas.getBoundingClientRect();
      canvas.width = Math.max(1, Math.floor(r.width * dpr));
      canvas.height = Math.max(1, Math.floor(r.height * dpr));
      gl.viewport(0, 0, canvas.width, canvas.height);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    const render = (t) => {
      gl.uniform1f(uTime, t * 0.001);
      gl.uniform2f(uRes, canvas.width, canvas.height);
      gl.drawArrays(gl.TRIANGLES, 0, 6);
      rafId = requestAnimationFrame(render);
    };
    rafId = requestAnimationFrame(render);

    return () => {
      cancelAnimationFrame(rafId);
      ro.disconnect();
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      aria-hidden="true"
      style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        display: 'block', pointerEvents: 'none',
        WebkitMaskImage: 'radial-gradient(ellipse 42% 50% at 50% 60%, #000 25%, transparent 75%)',
        maskImage: 'radial-gradient(ellipse 42% 50% at 50% 60%, #000 25%, transparent 75%)',
      }}
    />
  );
};

const Pricing = () => {
  const pro = {
    name: 'Pro', price: '49,99', tagline: 'Tout FoxBot Pro. Signaux, alertes, semi-auto, multi-paires.',
    featured: true,
    features: [
      ['Signaux haute conviction sur 10 paires OKX (50+ à venir)', true],
      ['Alertes Telegram illimitées (entrée / TP / SL)', true],
      ['Trois profils de risque (Safe / Normal / Avancé)', true],
      ['Mode manuel ou semi-automatique au choix', true],
      ['Jusqu\'à 3 paires actives (8 à venir)', true],
      ['Mode simulation + replay historique 24 mois', true],
      ['Moteur de risque (auto-downgrade, RR ratio)', true],
      ['Health checks toutes les 60 secondes', true],
      ['Levier futures jusqu\'à ×10 (réservé Avancé)', true],
      ['Support prioritaire 24/7 par email + Telegram', true],
    ],
  };

  return (
    <section id="pricing" style={{
      position: 'relative', overflow: 'hidden',
      padding: '140px 24px 140px',
      background: 'radial-gradient(ellipse 80% 70% at 50% 50%, rgba(155,93,240,0.06), transparent 70%)',
    }}>
      <PricingShader/>
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', zIndex: 2 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: 70 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
            <Mono c="var(--ink-4)">// 03 · UN SEUL PLAN, TOUT INCLUS</Mono>
            <Pill color="orange">Tarifs</Pill>
          </div>
          <h2 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(34px, 4.4vw, 56px)',
            lineHeight: 1.08, letterSpacing: -1.4, margin: '0 0 18px', fontWeight: 400,
            textWrap: 'balance', maxWidth: 820,
            background: 'linear-gradient(135deg, #FFFFFF 0%, #B583F8 50%, #DD55A8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
          }}>
            Un plan. Toutes les fonctionnalités.<br/><span style={{ fontStyle: 'italic' }}>Gratuit pendant la beta.</span>
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 19, lineHeight: 1.5, maxWidth: 600, margin: 0 }}>
            Pas d'engagement, pas de paliers. Désinscription possible à tout moment. Tarifs en euros, TVA incluse.
          </p>
        </div>

        <div style={{
          display: 'flex', justifyContent: 'center',
          maxWidth: 480, margin: '0 auto',
        }}>
          <GlassyPricingCard plan={pro}/>
        </div>

        <p style={{ textAlign: 'center', color: 'var(--ink-3)', fontSize: 13, marginTop: 40 }}>
          Gratuit pendant la beta · Chiffrement AES-256 · Audit log · Pages légales en cours.
        </p>
      </div>
    </section>
  );
};

const GlassyPricingCard = ({ plan }) => {
  const featured = plan.featured;
  const spotRef = useCursorSpotlight();
  const cardStyles = {
    position: 'relative',
    borderRadius: 22, padding: 32,
    background: featured
      ? 'linear-gradient(160deg, rgba(181,131,248,0.18) 0%, rgba(155,93,240,0.06) 45%, rgba(13,13,23,0.85) 100%)'
      : 'linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
    border: featured ? 'none' : '1px solid rgba(255,255,255,0.10)',
    backdropFilter: 'blur(18px) saturate(140%)',
    WebkitBackdropFilter: 'blur(18px) saturate(140%)',
    boxShadow: featured
      ? '0 30px 80px -30px rgba(155,93,240,0.55), inset 0 0 0 1px rgba(181,131,248,0.20)'
      : '0 20px 60px -30px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04)',
    display: 'flex', flexDirection: 'column', flex: 1,
    zIndex: 1,
  };
  const content = (
    <>
      {featured && (
        <div style={{
          position: 'absolute', top: -14, right: 22,
          padding: '6px 14px',
          background: 'linear-gradient(180deg, #B583F8 0%, #9B5DF0 100%)', color: '#FFFFFF',
          borderRadius: 999, zIndex: 3,
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 600,
          boxShadow: '0 8px 20px -8px rgba(155,93,240,0.85)',
        }}>Le plus populaire</div>
      )}

      <h3 style={{
        fontFamily: 'var(--display)', fontSize: 48, margin: 0, fontWeight: 300,
        letterSpacing: -1.6, color: 'var(--ink)',
      }}>{plan.name}</h3>
      <p style={{ color: 'var(--ink-2)', fontSize: 14.5, margin: '6px 0 24px', lineHeight: 1.5 }}>{plan.tagline}</p>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 24 }}>
        <span style={{
          fontFamily: 'var(--display)', fontSize: 56, fontWeight: 300, letterSpacing: -2,
          color: featured ? 'var(--orange-2)' : 'var(--ink)',
        }}>{plan.price}€</span>
        <Mono c="var(--ink-3)">/ mois TTC</Mono>
      </div>

      <div style={{
        alignSelf: 'flex-start', marginBottom: 22,
        padding: '5px 12px', borderRadius: 999,
        background: 'rgba(155,93,240,0.10)', border: '1px solid rgba(155,93,240,0.28)',
        fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 600,
        letterSpacing: 0.6, color: 'var(--accent-2)',
      }}>GRATUIT PENDANT LA BETA</div>

      {/* shimmer divider */}
      <div style={{
        height: 1, marginBottom: 22,
        background: featured
          ? 'linear-gradient(90deg, transparent, rgba(181,131,248,0.55) 50%, transparent)'
          : 'linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent)',
      }}/>

      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
        {plan.features.map(([f, ok], i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, lineHeight: 1.45,
            color: ok ? 'var(--ink)' : 'var(--ink-4)',
          }}>
            <span style={{
              flexShrink: 0, width: 18, height: 18, borderRadius: '50%',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              background: ok ? 'var(--orange-soft)' : 'transparent',
              border: ok ? '1px solid var(--orange-line)' : '1px solid var(--line)',
              color: ok ? 'var(--orange-2)' : 'var(--ink-4)', fontSize: 11, fontWeight: 800,
              marginTop: 1,
            }}>{ok ? '✓' : '–'}</span>
            <span style={{ textDecoration: ok ? 'none' : 'line-through', textDecorationColor: 'var(--ink-4)' }}>{f}</span>
          </li>
        ))}
      </ul>

      <Btn primary={featured} size="lg">
        Démarrer · Gratuit pendant la beta →
      </Btn>
    </>
  );

  if (!featured) {
    return <div style={cardStyles}>{content}</div>;
  }
  // Featured: wrap with rotating conic-gradient halo + cursor spotlight
  return (
    <div ref={spotRef} style={{ position: 'relative', borderRadius: 22 }}>
      <div className="conic-halo"/>
      <div className="conic-glow"/>
      <div style={cardStyles}>
        {/* cursor-following spotlight overlay */}
        <div style={{
          position: 'absolute', inset: 0, borderRadius: 22,
          pointerEvents: 'none', zIndex: 2,
          background: 'radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(181,131,248,0.18), transparent 60%)',
          opacity: 'var(--spot, 0)',
          transition: 'opacity .4s ease',
        }}/>
        {content}
      </div>
    </div>
  );
};

/* ---------- FAQ ---------- */
const FAQ = () => {
  const items = [
    {
      q: 'FoxBot Pro peut-il vider mon compte OKX ?',
      a: 'Non. Au moment de connecter votre exchange, vous créez une clé API avec uniquement les permissions Read et Trade, jamais Withdraw. FoxBot Pro ne peut techniquement pas retirer un seul satoshi. Vous gardez vos fonds, sur votre compte, sous votre seule signature.',
    },
    {
      q: 'Quelles sont les performances réelles, pas marketées ?',
      a: 'FoxBot Pro est en beta : les chiffres de performance ne sont pas affichés tant que les backtests complets sur données OKX ne sont pas publiés. En attendant, le mode simulation vous laisse valider chaque stratégie sur du papier avant un seul euro de capital réel.',
    },
    {
      q: 'Comment mes clés API sont-elles stockées ?',
      a: 'Chiffrement AES-256-GCM au repos, dérivation par utilisateur, transmission TLS 1.3 uniquement. Les clés sont déchiffrées en RAM le temps d\'un appel API, jamais loggées. Architecture inspirée des outils de gestion de secrets type Vault.',
    },
    {
      q: 'Que se passe-t-il si OKX est down ou si ma latence explose ?',
      a: 'Health checks toutes les 60 secondes : si la latence dépasse 200ms ou si une stratégie ne valide plus, le bot s\'arrête seul et vous prévient sur Telegram. Les positions ouvertes restent protégées par leur stop-loss exchange, pas un stop logiciel.',
    },
    {
      q: 'Et si je veux annuler ?',
      a: 'Pas d\'engagement pendant la beta : vous pouvez arrêter quand vous voulez. Vos positions ouvertes restent telles quelles sur OKX, vous reprenez la main directement. Données conservées 30 jours puis purgées (RGPD).',
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <Section id="faq" eyebrow="FAQ" kicker="// 04 · QUESTIONS QU'ON SE POSE TOUS"
      title="On répond aux objections, pas aux fantasmes."
      sub="Si vous nous lisez avec méfiance, c'est sain. Voici les cinq questions qu'on entend le plus.">
      <div style={{ maxWidth: 880, margin: '0 auto', borderTop: '1px solid var(--line)' }}>
        {items.map((it, i) => (
          <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
            <button onClick={() => setOpen(open === i ? -1 : i)}
              style={{
                width: '100%', textAlign: 'left', padding: '24px 4px',
                background: 'transparent', border: 'none', cursor: 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                color: 'var(--ink)',
              }}>
              <span style={{ display:'flex', gap: 16, alignItems: 'center' }}>
                <Mono c="var(--ink-4)">{String(i+1).padStart(2,'0')}</Mono>
                <span style={{ fontSize: 18, fontWeight: 500, fontFamily: 'var(--display)', letterSpacing: -0.3 }}>{it.q}</span>
              </span>
              <span style={{
                width: 28, height: 28, borderRadius: '50%', border: '1px solid var(--line-2)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                transition: 'transform .2s', color: 'var(--ink-2)', flexShrink: 0,
              }}>+</span>
            </button>
            {open === i && (
              <div style={{
                padding: '0 4px 28px 56px', color: 'var(--ink-2)', fontSize: 15,
                lineHeight: 1.6, maxWidth: 720,
              }}>{it.a}</div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
};

/* ---------- Final CTA ---------- */
/* ---------- DitheringShader: Bayer 4×4 warp halftone (ports paper-design's effect) ---------- */
const DitheringShader = ({ speed = 0.2, color = [0.608, 0.365, 0.940] }) => {
  const canvasRef = useRef(null);
  const colorRef = useRef(color);
  const speedRef = useRef(speed);
  useEffect(() => { colorRef.current = color; }, [color]);
  useEffect(() => { speedRef.current = speed; }, [speed]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false });
    if (!gl) return;

    const vert = `attribute vec2 aPosition; void main(){ gl_Position = vec4(aPosition,0.0,1.0); }`;
    const frag = `
      precision highp float;
      uniform float iTime;
      uniform vec2  iResolution;
      uniform vec3  uColor;
      uniform float uSpeed;

      // Bayer 4x4 ordered-dither threshold (returns 0..15 / 16)
      float bayer4(vec2 p) {
        vec2 q = floor(mod(p, 4.0));
        int x = int(q.x);
        int y = int(q.y);
        float v = 0.0;
        if (x == 0 && y == 0) v = 0.0;
        else if (x == 1 && y == 0) v = 8.0;
        else if (x == 2 && y == 0) v = 2.0;
        else if (x == 3 && y == 0) v = 10.0;
        else if (x == 0 && y == 1) v = 12.0;
        else if (x == 1 && y == 1) v = 4.0;
        else if (x == 2 && y == 1) v = 14.0;
        else if (x == 3 && y == 1) v = 6.0;
        else if (x == 0 && y == 2) v = 3.0;
        else if (x == 1 && y == 2) v = 11.0;
        else if (x == 2 && y == 2) v = 1.0;
        else if (x == 3 && y == 2) v = 9.0;
        else if (x == 0 && y == 3) v = 15.0;
        else if (x == 1 && y == 3) v = 7.0;
        else if (x == 2 && y == 3) v = 13.0;
        else if (x == 3 && y == 3) v = 5.0;
        return v / 16.0;
      }

      void main() {
        // pixelate into 4×4 cells
        vec2 cellSize = vec2(4.0);
        vec2 cell = floor(gl_FragCoord.xy / cellSize);
        vec2 uv = cell * cellSize / iResolution.xy;

        // warp value field (animated)
        float t = iTime * uSpeed;
        vec2 p = uv * 3.2;
        float v1 = sin(p.x + sin(p.y * 1.3 + t));
        float v2 = cos(p.y + cos(p.x * 0.9 + t * 1.1));
        float wave = (v1 + v2) * 0.5;

        // radial pulse so the centre breathes
        float r = length(uv - vec2(0.5, 0.55));
        wave += sin(r * 8.0 - t * 1.3) * 0.45;
        wave -= r * 1.2;   // fade toward edges

        float value = clamp(0.5 + 0.5 * wave, 0.0, 1.0);

        // ordered dither
        float on = step(bayer4(cell), value);

        gl_FragColor = vec4(uColor * on, on * 0.9);
      }
    `;

    const compile = (type, src) => {
      const sh = gl.createShader(type);
      gl.shaderSource(sh, src);
      gl.compileShader(sh);
      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(sh));
      }
      return sh;
    };
    const program = gl.createProgram();
    gl.attachShader(program, compile(gl.VERTEX_SHADER, vert));
    gl.attachShader(program, compile(gl.FRAGMENT_SHADER, frag));
    gl.linkProgram(program);
    gl.useProgram(program);

    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW);
    const aPos = gl.getAttribLocation(program, 'aPosition');
    gl.enableVertexAttribArray(aPos);
    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

    const uTime  = gl.getUniformLocation(program, 'iTime');
    const uRes   = gl.getUniformLocation(program, 'iResolution');
    const uColor = gl.getUniformLocation(program, 'uColor');
    const uSpeed = gl.getUniformLocation(program, 'uSpeed');

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const r = canvas.getBoundingClientRect();
      canvas.width  = Math.max(1, Math.floor(r.width  * dpr));
      canvas.height = Math.max(1, Math.floor(r.height * dpr));
      gl.viewport(0, 0, canvas.width, canvas.height);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    let rafId;
    const render = (t) => {
      gl.uniform1f(uTime, t * 0.001);
      gl.uniform2f(uRes, canvas.width, canvas.height);
      gl.uniform3fv(uColor, colorRef.current);
      gl.uniform1f(uSpeed, speedRef.current);
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, 6);
      rafId = requestAnimationFrame(render);
    };
    rafId = requestAnimationFrame(render);

    return () => {
      cancelAnimationFrame(rafId);
      ro.disconnect();
    };
  }, []);

  return (
    <canvas ref={canvasRef} aria-hidden="true" style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      display: 'block', pointerEvents: 'none',
    }}/>
  );
};

/* ---------- Final CTA (dithering hero card) ---------- */
const FinalCTA = () => {
  const [hovered, setHovered] = useState(false);
  return (
    <section style={{ padding: '80px 24px 120px' }}>
      <div
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{
          maxWidth: 1280, margin: '0 auto',
          position: 'relative', overflow: 'hidden',
          borderRadius: 48,
          minHeight: 600,
          background:
            'radial-gradient(120% 80% at 50% 0%, rgba(155,93,240,0.10), transparent 65%), ' +
            'linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%)',
          border: '1px solid var(--line-2)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          padding: '80px 32px',
          textAlign: 'center',
        }}
      >
        {/* Dithering shader background */}
        <div style={{
          position: 'absolute', inset: 0,
          opacity: 0.5,
          mixBlendMode: 'screen',
          pointerEvents: 'none',
        }}>
          <DitheringShader
            color={[0.608, 0.365, 0.940]}
            speed={hovered ? 0.6 : 0.22}
          />
        </div>

        {/* corner logo */}
        <div style={{ position: 'absolute', top: 28, left: 32, zIndex: 2 }}>
          <FoxMark size={32}/>
        </div>

        <div style={{ position: 'relative', zIndex: 2, maxWidth: 880, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          {/* Pulsing pill */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 16px', borderRadius: 999,
            background: 'rgba(155,93,240,0.08)',
            border: '1px solid rgba(155,93,240,0.30)',
            backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
            color: 'var(--accent-2)',
            fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 500, letterSpacing: 0.4,
            marginBottom: 32,
          }}>
            <span style={{ position: 'relative', display: 'inline-block', width: 8, height: 8 }}>
              <span style={{
                position: 'absolute', inset: 0, borderRadius: '50%',
                background: 'var(--accent-2)',
                animation: 'cta-ping 1.6s ease-out infinite',
              }}/>
              <span style={{
                position: 'absolute', inset: 1.5, borderRadius: '50%',
                background: 'var(--accent-2)',
              }}/>
            </span>
            GRATUIT PENDANT LA BETA
          </div>

          {/* Headline */}
          <h2 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(48px, 8vw, 96px)',
            fontWeight: 600, letterSpacing: -3,
            lineHeight: 1.02,
            margin: '0 0 28px',
            color: 'var(--ink)',
            textWrap: 'balance',
          }}>
            Lancez votre bot<br/>
            <span style={{ color: 'rgba(245,243,255,0.55)' }}>en 4 minutes.</span>
          </h2>

          {/* Description */}
          <p style={{
            color: 'var(--ink-2)',
            fontSize: 20, lineHeight: 1.55,
            maxWidth: 580, margin: '0 0 44px',
            textWrap: 'pretty',
          }}>
            Sans engagement.
            Vos clés, votre capital, votre exchange. Gratuit pendant toute la beta.
          </p>

          {/* Big primary button */}
          <a href="#" style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            height: 60, padding: '0 36px',
            borderRadius: 999,
            background: 'linear-gradient(180deg, #B583F8 0%, #9B5DF0 100%)',
            color: '#FFFFFF',
            fontSize: 16, fontWeight: 600, letterSpacing: -0.2,
            border: '1px solid rgba(255,255,255,0.12)',
            boxShadow: '0 1px 0 rgba(255,255,255,0.22) inset, 0 18px 44px -10px rgba(155,93,240,0.65)',
            transition: 'transform .2s ease, box-shadow .2s ease',
            cursor: 'pointer',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px) scale(1.02)'; e.currentTarget.style.boxShadow = '0 1px 0 rgba(255,255,255,0.26) inset, 0 22px 56px -10px rgba(155,93,240,0.85)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0) scale(1)'; e.currentTarget.style.boxShadow = '0 1px 0 rgba(255,255,255,0.22) inset, 0 18px 44px -10px rgba(155,93,240,0.65)'; }}>
            <span>Démarrer maintenant</span>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="5" y1="12" x2="19" y2="12"/>
              <polyline points="12 5 19 12 12 19"/>
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
};

/* ---------- Footer ---------- */
const Footer = () => (
  <footer style={{ borderTop: '1px solid var(--line)', padding: '60px 24px 40px' }}>
    <div style={{ maxWidth: 1180, margin: '0 auto' }}>
      <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, marginBottom: 60 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <FoxMark size={26}/>
            <span style={{ fontFamily: 'var(--display)', fontSize: 18, fontWeight: 600 }}>FoxBot Pro</span>
          </div>
          <p style={{ color: 'var(--ink-3)', fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
            Trading algorithmique sur OKX. Outil destiné à un usage personnel et non-professionnel.
            Le trading comporte des risques de perte en capital.
          </p>
        </div>
        <FooterCol title="Produit" items={[
          'Fonctionnalités','Stratégies','Tarifs','Statut système','Changelog',
        ]}/>
        <FooterCol title="Ressources" items={[
          'Documentation','API','Backtests','Sécurité','Support',
        ]}/>
        <FooterCol title="Légal" items={[
          'Mentions légales','Conditions générales (CGV)','Politique de confidentialité','RGPD','Avertissement risque',
        ]}/>
      </div>
      <div style={{
        paddingTop: 24, borderTop: '1px solid var(--line)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
      }}>
        <Mono c="var(--ink-4)">© 2026 FoxBot Pro · Mentions légales en cours d'établissement</Mono>
        <Mono c="var(--ink-4)">⚠ Capital à risque. Performances passées ≠ résultats futurs.</Mono>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, items }) => (
  <div>
    <Mono c="var(--ink-4)" style={{ marginBottom: 16, display: 'block' }}>{title}</Mono>
    <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map((it, i) => (
        <li key={i}><a href="#" style={{ color: 'var(--ink-2)', fontSize: 14 }}>{it}</a></li>
      ))}
    </ul>
  </div>
);

/* ---------- Scroll progress bar (immersive top) ---------- */
const ScrollProgress = () => {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    let raf = 0;
    const update = () => {
      const h = document.documentElement;
      const total = h.scrollHeight - h.clientHeight;
      const p = total > 0 ? (h.scrollTop / total) * 100 : 0;
      setProgress(p);
      raf = 0;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 2.5,
      zIndex: 100, pointerEvents: 'none',
      background: 'rgba(255,255,255,0.025)',
    }}>
      <div style={{
        height: '100%', width: progress + '%',
        background: 'linear-gradient(90deg, #B583F8 0%, #DD55A8 100%)',
        boxShadow: '0 0 16px rgba(155,93,240,0.55)',
        transition: 'width .12s linear',
      }}/>
    </div>
  );
};

/* useCursorSpotlight: tracks mouse inside ref'd element, exposes --mx / --my CSS vars */
const useCursorSpotlight = () => {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', `${e.clientX - r.left}px`);
      el.style.setProperty('--my', `${e.clientY - r.top}px`);
      el.style.setProperty('--spot', '1');
    };
    const onLeave = () => el.style.setProperty('--spot', '0');
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, []);
  return ref;
};

/* ---------- Root ---------- */
const App = () => (
  <>
    <ScrollProgress/>
    <Header/>
    <main>
      <Hero/>
      <Features/>
      <Strategies/>
      <SectionWithMockup
        title={<>Des signaux haute conviction,<br/>scannés en temps réel.</>}
        description={<>
          Le moteur FoxBot Pro analyse en continu une dizaine de paires sur OKX (50+ à venir) et ne
          remonte que les setups validés sur 6 indicateurs techniques. Chaque
          signal arrive avec son entry, ses TP, son SL, son ratio R/R et un
          score de conviction sur 10.
          <br/><br/>
          Vous restez en contrôle&nbsp;: paper trade pour valider, ou réel quand
          vous êtes prêt.
        </>}
        mockup={<PhoneMockup variant="signaux" tilt={-4}/>}
      />
      <SectionWithMockup
        reverseLayout
        title={<>Un dashboard qui dit la vérité,<br/>pas du marketing.</>}
        description={<>
          P&amp;L, win rate, drawdown, courbe d'equity, positions ouvertes, top
          signaux du jour, tout sur un seul écran, sans filtres, sans
          chiffres gonflés.
          <br/><br/>
          Connecté à votre compte OKX réel ou en mode paper trading. Vous voyez exactement ce que voit le bot.
        </>}
        mockup={<PhoneMockup variant="dashboard" tilt={4}/>}
      />
      <Pricing/>
      <FAQ/>
      <FinalCTA/>
    </main>
    <Footer/>
  </>
);

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