// Home — sections lourdes (hi-fi) :
//   HomeCards (7 cartes à jouer, pièce maîtresse)
//   HomeDomain7 (section dédiée nouveauté)
//   HomeTestimonial
//   HomeCTA

// ============================================
// 7 CARTES À JOUER (style trading cards hi-fi)
// ============================================
// Pictogrammes Lean — remplacent les symboles de jeu de cartes
const LEAN_ICONS = {
  performance: (c, s) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" 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>,
  continu:     (c, s) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14l-4.64 4.36A9 9 0 0 1 3.51 15"/></svg>,
  amenagement: (c, s) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>,
  equipement:  (c, s) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>,
  competences: (c, s) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  domaines:    (c, s) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>,
  outils:      (c, s) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
};

function HomeCards({ navigate, openModal }) {
  const allCards = [...SERVICES, { id: '__compose__' }];
  const doubled = [...allCards, ...allCards];
  const outerRef = useRef(null);
  const pausedRef = useRef(false);

  useEffect(() => {
    const el = outerRef.current;
    if (!el || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let raf;
    function step() {
      if (!pausedRef.current) {
        el.scrollLeft += 0.8;
        if (el.scrollLeft >= el.scrollWidth / 2) el.scrollLeft = 0;
      }
      raf = requestAnimationFrame(step);
    }
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, []);

  function scrollCards(dir) {
    pausedRef.current = true;
    outerRef.current.scrollBy({ left: dir * 300, behavior: 'smooth' });
    setTimeout(() => { pausedRef.current = false; }, 2000);
  }

  return (
    <section id="home-cards" style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-2)', height: '100vh', display: 'flex', flexDirection: 'column', paddingTop: 80, paddingBottom: 24 }}>
      <div className="bg-glow" style={{ right: '-25%', top: '20%', width: 800, height: 800 }}></div>
      <div className="bg-glow" style={{ left: '-25%', bottom: '0%', width: 700, height: 700, background: 'radial-gradient(closest-side, rgba(251,220,116,0.18), transparent 70%)' }}></div>

      {/* Header + CTA en ligne (flex row) */}
      <div className="container" style={{ position: 'relative', zIndex: 2, marginBottom: 16, flexShrink: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24 }}>
          <div>
            <Reveal><Eyebrow>NOTRE OFFRE · 7 EXPERTISES</Eyebrow></Reveal>
            <Reveal>
              <h2 className="display display-l" style={{ margin: '14px 0 0' }}>
                7 expertises,<br/>
                <span className="italic-accent">une combinaison sur mesure</span>
              </h2>
            </Reveal>
          </div>
          {/* CTA compact — inline droite, plus d'absolu */}
          <div style={{ flexShrink: 0, width: 240, padding: '16px 20px', background: 'rgba(255,255,255,0.95)', border: '1px solid var(--line-2)', borderRadius: 18, boxShadow: '0 8px 32px rgba(16,30,142,0.10)' }}>
            <h3 className="display" style={{ fontSize: 15, margin: '0 0 6px', lineHeight: 1.2 }}>
              Quelles expertises <span className="italic-accent">choisir</span> ?
            </h3>
            <p style={{ color: 'var(--muted)', fontSize: 11, margin: '0 0 12px', lineHeight: 1.5 }}>
              On vient voir votre entreprise 2&nbsp;h gratuitement et on vous dit honnêtement quelles expertises ont du sens chez vous.
            </p>
            <a className="btn btn-primary" href="#contact" onClick={(e) => {e.preventDefault(); typeof navigate === 'function' && navigate('contact');}}
               style={{ fontSize: 11, padding: '8px 14px', display: 'inline-flex', gap: 5 }}>
              Demander une visite
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          </div>
        </div>
      </div>

      {/* Carrousel — prend tout l'espace restant */}
      <div style={{ position: 'relative', zIndex: 2, flex: 1, minHeight: 0, paddingTop: 48 }}>
        <button className="cards-nav-btn cards-nav-left" onClick={() => scrollCards(-1)} aria-label="Précédent">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
        </button>
        <div ref={outerRef} className="cards-outer"
          onMouseEnter={() => { pausedRef.current = true; }}
          onMouseLeave={() => { pausedRef.current = false; }}
          onTouchStart={() => { pausedRef.current = true; }}
          onTouchEnd={() => { pausedRef.current = false; }}
        >
          <div className="cards-track">
            {doubled.map((s, i) =>
              s.id === '__compose__'
                ? <div key={i} style={{ flexShrink: 0, width: 'clamp(220px, 20vw, 280px)' }}><ComposeSlot navigate={navigate} /></div>
                : <div key={i} style={{ flexShrink: 0, width: 'clamp(220px, 20vw, 280px)' }}>
                    <PlayingCard svc={s} idx={i % SERVICES.length} onClick={() => {
                      if (openModal) { openModal(s.id); return; }
                      navigate(s.id);
                    }} />
                  </div>
            )}
          </div>
        </div>
        <button className="cards-nav-btn cards-nav-right" onClick={() => scrollCards(1)} aria-label="Suivant">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
        </button>
      </div>


      <style>{`
        .cards-outer {
          overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none;
        }
        .cards-outer::-webkit-scrollbar { display: none; }
        .cards-track {
          display: flex; gap: 16px; width: max-content; padding: 8px 0 28px;
        }
        .cards-nav-btn {
          position: absolute; top: 50%; transform: translateY(-50%);
          z-index: 10; background: rgba(255,255,255,0.95);
          border: 1px solid var(--line-2); border-radius: 50%;
          width: 44px; height: 44px; cursor: pointer;
          box-shadow: 0 4px 16px rgba(16,30,142,0.14);
          display: flex; align-items: center; justify-content: center;
          transition: background 180ms, border-color 180ms, box-shadow 180ms;
        }
        .cards-nav-btn:hover {
          background: var(--electric); border-color: var(--electric);
          box-shadow: 0 6px 20px rgba(94,76,255,0.35);
        }
        .cards-nav-btn:hover svg { stroke: #fff; }
        .cards-nav-left { left: 12px; }
        .cards-nav-right { right: 12px; }
        @media (max-width: 600px) { .cards-nav-btn { display: none; } }
        @media (max-width: 900px) { .cards-footer { grid-template-columns: 1fr !important; } }
        @media (prefers-reduced-motion: reduce) { .cards-outer { overflow-x: auto; } }
      `}</style>
    </section>);
}

// --- Une carte ---
function PlayingCard({ svc, idx, onClick }) {
  const ref = useRef(null);
  function onMove(e) {
    const r = ref.current.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    ref.current.style.setProperty('--rx', (-y * 8).toFixed(2) + 'deg');
    ref.current.style.setProperty('--ry', (x * 10).toFixed(2) + 'deg');
    ref.current.style.setProperty('--mx', (e.clientX - r.left) / r.width * 100 + '%');
    ref.current.style.setProperty('--my', (e.clientY - r.top) / r.height * 100 + '%');
  }
  function onLeave() {
    if (!ref.current) return;
    ref.current.style.setProperty('--rx', '0deg');
    ref.current.style.setProperty('--ry', '0deg');
  }

  const isNew = svc.isNew;

  return (
    <div
      ref={ref}
      className="playing-card"
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      onClick={onClick}
      role="button"
      tabIndex={0}
      style={{
        position: 'relative',
        background: isNew ?
        'linear-gradient(160deg, #fff 0%, #f4f1ff 100%)' :
        '#fff',
        border: '1px solid ' + (isNew ? 'var(--electric)' : 'var(--line-2)'),
        borderRadius: 22,
        padding: 18,
        cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
        minHeight: 460,
        transformStyle: 'preserve-3d',
        transition: 'transform 280ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 280ms, border-color 280ms',
        transform: 'rotate(var(--tilt, 0deg)) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))',
        boxShadow: '0 6px 18px rgba(16,30,142,0.06)',
        '--tilt': idx % 2 === 0 ? '-0.6deg' : '0.5deg'
      }}>
      {/* Glow follow */}
      <span style={{
        position: 'absolute', inset: 0,
        borderRadius: 22, pointerEvents: 'none',
        background: 'radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(94,76,255,0.18), transparent 50%)',
        opacity: 0, transition: 'opacity 240ms'
      }} className="card-glow"></span>

      {/* NEW ribbon */}
      {isNew &&
      <span style={{
        position: 'absolute', top: -10, left: -10,
        background: 'var(--electric)', color: '#fff',
        fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.15em',
        padding: '6px 12px', borderRadius: 6,
        transform: 'rotate(-6deg)',
        boxShadow: '0 6px 18px rgba(94,76,255,0.4)',
        zIndex: 3
      }}>
          NOUVELLE · 2026
        </span>
      }

      {/* Top: num + suit */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 12, borderBottom: '1px dashed var(--line-2)', marginBottom: 14
      }}>
        <span style={{
          fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: 'var(--muted)'
        }}>CARTE {svc.num}</span>
        <span style={{ display: 'flex', alignItems: 'center', color: isNew ? '#fff' : svc.suitColor }}>
          {LEAN_ICONS[svc.id] && LEAN_ICONS[svc.id](isNew ? '#fff' : svc.suitColor, 22)}
        </span>
      </div>

      {/* Illustration */}
      <div style={{
        position: 'relative',
        aspectRatio: '4/3',
        background: isNew ?
        'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)' :
        'linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%)',
        border: '1px solid var(--line-2)',
        borderRadius: 14,
        marginBottom: 14,
        overflow: 'hidden'
      }}>
        {/* Pattern */}
        <span style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'radial-gradient(circle at 1px 1px, ' + (isNew ? 'rgba(255,255,255,0.18)' : 'rgba(16,30,142,0.18)') + ' 1px, transparent 0)',
          backgroundSize: '14px 14px',
          opacity: 0.7
        }}></span>
        {/* Big background icon */}
        <span style={{
          position: 'absolute', right: -8, bottom: -8,
          opacity: isNew ? 0.2 : 0.1,
          transform: 'scale(5)', transformOrigin: 'bottom right',
          pointerEvents: 'none',
        }}>
          {LEAN_ICONS[svc.id] && LEAN_ICONS[svc.id](isNew ? '#fff' : svc.suitColor, 24)}
        </span>
        {/* Titre dans la vignette */}
        <span style={{
          position: 'absolute', left: 18, top: 14, right: 18,
          fontFamily: 'var(--f-display)', fontSize: 20, fontWeight: 700,
          color: isNew ? '#fff' : 'var(--deep)',
          letterSpacing: '-0.03em', lineHeight: 1.2
        }}>{svc.title}</span>
      </div>

      {/* Blurb */}
      <p style={{ color: 'var(--muted)', fontSize: 14, lineHeight: 1.55, margin: 0, flex: 1 }}>
        {svc.blurb}
      </p>

      {/* Chips */}
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 14, paddingTop: 14, borderTop: '1px dashed var(--line-2)' }}>
        {svc.chips.map((c) =>
        <span key={c} style={{
          fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'var(--muted)',
          padding: '3px 8px', border: '1px solid var(--line-2)', borderRadius: 999,
          background: '#fff'
        }}>{c}</span>
        )}
      </div>

      {/* Stats: jauge / duree */}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, gap: 8, alignItems: 'flex-end' }}>
        <ImpactGauge accent={svc.suitColor} />
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.14em' }}>DURÉE TYPE</div>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 13, color: svc.suitColor, marginTop: 2 }}>{svc.duree}</div>
        </div>
      </div>

      {/* See more link */}
      <div style={{
        marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--electric)'
      }}>
        Voir l&rsquo;expertise
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ transition: 'transform 220ms' }} className="card-arrow"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
      </div>

      <style>{`
        .playing-card:hover { box-shadow: 0 30px 60px rgba(16,30,142,0.18) !important; border-color: var(--electric) !important; }
        .playing-card:hover .card-glow { opacity: 1; }
        .playing-card:hover .card-arrow { transform: translateX(4px); }
      `}</style>
    </div>);

}

// --- Jauge de potentiel (speedometer rouge → orange → vert) ---
function ImpactGauge({ accent = 'var(--electric)' }) {
  const [t, setT] = useState(0);
  const [hover, setHover] = useState(false);
  useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = () => { setT((performance.now() - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Auto idle: petit "rev" subtil entre -65° et -35°
  // Hover: l'aiguille fonce vers 76° (vert)
  const idle = -50 + 15 * Math.sin(t * 1.4);
  const angle = hover ? 76 : idle;
  const gid = React.useId();

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ cursor: 'pointer', userSelect: 'none' }}>
      <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.14em', marginBottom: 4 }}>
        POTENTIEL
      </div>
      <svg width="74" height="46" viewBox="0 0 100 60" style={{ display: 'block' }}>
        <defs>
          <linearGradient id={`g-${gid}`} x1="10" y1="50" x2="90" y2="50" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#e63946" />
            <stop offset="0.35" stopColor="#f4a261" />
            <stop offset="0.65" stopColor="#f9c74f" />
            <stop offset="1" stopColor="#2a9d8f" />
          </linearGradient>
        </defs>
        {/* Arc background */}
        <path d="M 12 50 A 38 38 0 0 1 88 50" fill="none" stroke="rgba(0,0,0,0.08)" strokeWidth="9" strokeLinecap="round" />
        {/* Arc colorée */}
        <path d="M 12 50 A 38 38 0 0 1 88 50" fill="none" stroke={`url(#g-${gid})`} strokeWidth="7" strokeLinecap="round" />
        {/* Ticks */}
        {[-90, -45, 0, 45, 90].map((deg) => {
          const a = (deg * Math.PI) / 180;
          const x1 = 50 + 32 * Math.sin(a);
          const y1 = 50 - 32 * Math.cos(a);
          const x2 = 50 + 27 * Math.sin(a);
          const y2 = 50 - 27 * Math.cos(a);
          return <line key={deg} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,0.85)" strokeWidth="1.5" strokeLinecap="round" />;
        })}
        {/* Needle */}
        <g style={{ transformOrigin: '50px 50px', transform: `rotate(${angle}deg)`, transition: hover ? 'transform 700ms cubic-bezier(0.34,1.56,0.64,1)' : 'transform 200ms ease-out' }}>
          <line x1="50" y1="50" x2="50" y2="16" stroke={accent} strokeWidth="2.6" strokeLinecap="round" />
          <circle cx="50" cy="16" r="2" fill={accent} />
        </g>
        {/* Pivot */}
        <circle cx="50" cy="50" r="4" fill="var(--text)" />
        <circle cx="50" cy="50" r="1.5" fill="#fff" />
      </svg>
    </div>
  );
}

// --- Slot 8 : compose ---
function ComposeSlot({ navigate }) {
  return (
    <div
      onClick={() => navigate('contact')}
      role="button"
      tabIndex={0}
      style={{
        position: 'relative',
        background: 'rgba(94,76,255,0.04)',
        border: '2px dashed var(--line-2)',
        borderRadius: 22,
        padding: 24,
        cursor: 'pointer',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        textAlign: 'center',
        minHeight: 460,
        transition: 'background 240ms, border-color 240ms'
      }}
      onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(94,76,255,0.10)';e.currentTarget.style.borderColor = 'var(--electric)';}}
      onMouseLeave={(e) => {e.currentTarget.style.background = 'rgba(94,76,255,0.04)';e.currentTarget.style.borderColor = 'var(--line-2)';}}>
      <div style={{
        width: 80, height: 80, borderRadius: '50%',
        background: 'var(--yellow)', border: '1px solid var(--line-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--f-display)', fontSize: 48, fontWeight: 700,
        color: 'var(--deep)', lineHeight: 1,
        boxShadow: '0 12px 30px rgba(251,220,116,0.4)',
        marginBottom: 18
      }}>+</div>
      <h3 style={{
        fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 24,
        margin: '0 0 10px', letterSpacing: '-0.02em', lineHeight: 1.1
      }}>
        Votre besoin<br />hors programme ?
      </h3>
      <p style={{ color: 'var(--muted)', fontSize: 14, lineHeight: 1.55, margin: '0 0 14px', maxWidth: 220 }}>
        Robotique, reconversion d&rsquo;usine, ingénierie produit — Benoît intervient aussi sur ces domaines.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignSelf: 'stretch' }}>
        {['Robotique & automatisation', 'Reconversion d\'usine', 'Ingénierie produit'].map((x) =>
          <span key={x} style={{
            fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.1em',
            textTransform: 'uppercase', color: 'var(--muted)',
            padding: '4px 8px', border: '1px dashed var(--line-2)', borderRadius: 6, textAlign: 'left'
          }}>{x}</span>
        )}
      </div>
      <div style={{
        marginTop: 12,
        fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--muted)'
      }}>Mission sur mesure · Sur devis</div>
      <div style={{
        marginTop: 14,
        fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--electric)',
        display: 'flex', alignItems: 'center', gap: 6
      }}>
        Commencer <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
      </div>
    </div>);

}

// ============================================
// DOMAIN 7 — section dédiée (terminal hi-fi)
// ============================================
function HomeDomain7({ navigate }) {
  return (
    <section id="home-domain7" className="section-pad" style={{
      background: 'linear-gradient(180deg, var(--ink-2) 0%, #fff 100%)',
      borderTop: '1px solid var(--line)',
      position: 'relative', overflow: 'hidden'
    }}>
      <div className="bg-glow" style={{ left: '50%', top: '-30%', width: 900, height: 900, background: 'radial-gradient(closest-side, rgba(62,45,214,0.18), transparent 70%)' }}></div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 64, alignItems: 'center' }} className="d7-grid">
          {/* Discours */}
          <div>
            <Reveal>
              <span className="eyebrow" style={{ color: 'var(--electric)' }}>
                <span className="pulse" style={{ background: 'var(--electric)' }}></span>
                NOUVELLE CARTE · 2026
              </span>
            </Reveal>
            <Reveal>
              <h2 className="display display-l" style={{ margin: '20px 0 24px' }}>
                Automatisation <span className="italic-accent">&amp; outils numériques</span><br />
                qui font le sale boulot
              </h2>
            </Reveal>
            <Reveal>
              <p style={{ color: 'var(--muted)', fontSize: 17, lineHeight: 1.7, maxWidth: 540, margin: '0 0 32px' }}>
                On installe et on paramètre les outils qui correspondent à votre métier (ERP, planification, GMAO), on les connecte entre eux, et on automatise les tâches chronophages.
              </p>
            </Reveal>

            {/* Examples list */}
            <Reveal stagger>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                { label: 'Cadulis', desc: 'planif interventions + rapports terrain' },
                { label: 'Kizeo Forms', desc: 'formulaires terrain → zéro papier' },
                { label: 'SKELLO', desc: 'planning équipes + gestion du temps' },
                { label: 'EBP ↔ Pennylane', desc: 'connecteurs ERP sur mesure' }].
                map((x, i) =>
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: 'auto 1fr',
                  gap: 14, alignItems: 'center',
                  padding: '14px 18px',
                  background: '#fff', border: '1px solid var(--line-2)',
                  borderRadius: 14,
                }}>
                    <span style={{
                    fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--muted)',
                    letterSpacing: '0.1em'
                  }}>0{i + 1}</span>
                    <div>
                      <span style={{ fontFamily: 'var(--f-display)', fontWeight: 600, fontSize: 17, marginRight: 8 }}>{x.label}</span>
                      <span style={{ color: 'var(--muted)', fontSize: 14 }}>— {x.desc}</span>
                    </div>
                  </div>
                )}
              </div>
            </Reveal>

            <Reveal>
              <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
                <a className="btn btn-electric" href="#outils" onClick={(e) => {e.preventDefault();navigate('outils');}}>
                  Voir l&rsquo;expertise 07 <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
                </a>
                <a className="btn btn-ghost" href="#contact" onClick={(e) => {e.preventDefault();navigate('contact');}}>
                  En parler 30 min
                </a>
              </div>
            </Reveal>
          </div>

          {/* Terminal */}
          <Reveal>
            <TerminalPreview />
          </Reveal>
        </div>

        {/* Stack chips */}
        <Reveal>
          <div style={{
            marginTop: 56,
            padding: '20px 24px',
            border: '1px dashed var(--line-2)', borderRadius: 16,
            display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center',
            justifyContent: 'center',
            background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(8px)'
          }}>
            <span style={{
              fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--muted)'
            }}>stack typique →</span>
            {['EBP', 'Cadulis', 'Kizeo', 'SKELLO', 'Pennylane', 'Python', 'OCR / vision', 'API REST'].map((s) =>
            <span key={s} style={{
              fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: 'var(--text)',
              padding: '6px 12px', border: '1px solid var(--line-2)', borderRadius: 999,
              background: '#fff'
            }}>{s}</span>
            )}
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 980px) { .d7-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
      `}</style>
    </section>);

}

// Terminal scripted preview
function TerminalPreview() {
  const lines = [
  { t: '# bon de livraison fournisseur → ERP EBP', c: '#7a7a85' },
  { t: '# déclenchement : nouveau PDF dans /inbox', c: '#7a7a85' },
  { t: '$ watch /inbox/*.pdf', c: '#0f8a5b' },
  { t: '> BL_2026_0421.pdf détecté', c: '#a0a0aa' },
  { t: '> OCR... ✓ 14 lignes', c: '#fbdc74' },
  { t: '> mapping fournisseur ↔ ref interne', c: '#a0a0aa' },
  { t: '> push EBP... ✓ entrée stock OK', c: '#0f8a5b' },
  { t: '> sync Cadulis (planif récep)... ✓', c: '#0f8a5b' },
  { t: '// économisé : ~12 min · 14 lignes', c: '#fbdc74' },
  { t: '$ ./next', c: '#0f8a5b' }];

  const [n, setN] = useState(0);
  useEffect(() => {
    const i = setInterval(() => setN((x) => x < lines.length ? x + 1 : x), 320);
    return () => clearInterval(i);
  }, []);

  return (
    <div style={{
      background: '#0a0a17',
      borderRadius: 22,
      border: '1px solid rgba(94,76,255,0.3)',
      overflow: 'hidden',
      boxShadow: '0 30px 80px rgba(16,30,142,0.35), 0 0 80px rgba(94,76,255,0.15)',
      position: 'relative'
    }}>
      <div style={{
        padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5b35' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fbdc74' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#0f8a5b' }}></span>
          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, marginLeft: 12, color: 'rgba(255,255,255,0.5)' }}>
            agent_ocr.py — atelier-perf
          </span>
        </div>
        <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'rgba(255,255,255,0.5)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#0f8a5b', boxShadow: '0 0 10px #0f8a5b' }}></span>
          running
        </span>
      </div>

      <div style={{ padding: 24, fontFamily: 'var(--f-mono)', fontSize: 13, lineHeight: 1.8, minHeight: 360 }}>
        {lines.slice(0, n).map((l, i) =>
        <div key={i} style={{ color: l.c }}>
            {l.t}
          </div>
        )}
        {n >= lines.length &&
        <span style={{ color: '#fff', animation: 'blink 1s infinite' }}>_</span>
        }

        {/* Gain box */}
        {n >= lines.length &&
        <div style={{
          marginTop: 20,
          padding: 18,
          border: '1px dashed rgba(251,220,116,0.5)',
          borderRadius: 10,
          background: 'rgba(251,220,116,0.05)'
        }}>
            <div style={{ color: '#fbdc74', fontSize: 11, letterSpacing: '0.12em', marginBottom: 6 }}>
              // GAIN MENSUEL ESTIMÉ
            </div>
            <div style={{ fontFamily: 'var(--f-display)', fontSize: 56, color: '#fff', lineHeight: 1, fontWeight: 700 }}>
              ~28&nbsp;h
            </div>
            <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11, marginTop: 6 }}>
              sur 1 admin · 200 BL / mois
            </div>
          </div>
        }
      </div>
      <style>{`@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }`}</style>
    </div>);

}

// ============================================
// TEMOIGNAGE — Storyboard "Cadulis chez DP Flex"
// 4 étapes qui apparaissent séquentiellement au scroll
// ============================================
function HomeTestimonial() {
  const ref = useRef(null);
  const [active, setActive] = useState(-1);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          // Reveal steps one by one
          [0, 1, 2, 3].forEach((i) => {
            setTimeout(() => setActive((cur) => Math.max(cur, i)), 250 + i * 650);
          });
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const steps = [
    {
      tag: '10:27 · 17/11/2025',
      label: 'Appel entrant',
      title: 'Didier appelle DP Flex',
      body: 'Resp. maintenance · secteur nautisme. Intervention urgente sur site.',
      visual: 'phone'
    },
    {
      tag: 'Sur site · matin',
      label: 'Intervention',
      title: 'Guillaume part en intervention',
      body: 'Diagnostic, démontage, remplacement — le tout sur site, dans la même journée.',
      visual: 'wrench'
    },
    {
      tag: 'Cadulis',
      label: 'Rapport · nouvelle formule',
      title: 'Rapport saisi sur place',
      body: 'Photos, mesures, pièces changées. Le PDF part automatiquement chez le client.',
      visual: 'report'
    },
    {
      tag: 'Boîte mail · Didier',
      label: 'Réponse client',
      title: '« Merci, votre rapport "nouvelle formule" est très clair. »',
      body: 'Didier — Responsable maintenance · entreprise de nautisme',
      visual: 'email'
    }
  ];

  return (
    <section ref={ref} style={{
      padding: 'clamp(80px, 10vw, 140px) 0',
      background: 'var(--yellow)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(closest-side, rgba(255,255,255,0.4), transparent 70%)', pointerEvents: 'none' }}></div>

      <div className="container" style={{ position: 'relative' }}>
        {/* Header */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'end', marginBottom: 56 }} className="story-head">
          <div>
            <span className="eyebrow" style={{ color: 'var(--deep)' }}>
              <span className="pulse" style={{ background: 'var(--deep)' }}></span>
              CAS CLIENT · DP FLEX × ATELIER PERF
            </span>
            <h2 className="display display-l" style={{ margin: '20px 0 12px', maxWidth: 840 }}>
              Cadulis, déployé chez DP&nbsp;Flex<br />
              <span className="italic-accent" style={{
                color: 'var(--muted)',
                fontSize: '0.5em',
                fontWeight: 500,
                letterSpacing: '-0.01em',
                display: 'inline-block',
                marginTop: '0.35em'
              }}>Une journée racontée en 4 temps</span>
            </h2>
            <p style={{ color: 'var(--deep)', opacity: 0.75, fontSize: 16, lineHeight: 1.6, maxWidth: 620, margin: 0 }}>
              On a accompagné DP&nbsp;Flex sur le déploiement de Cadulis (rapports d&rsquo;intervention). Ce qu&rsquo;ils en font au quotidien, et le retour de leur client final.
            </p>
          </div>
          <div style={{
            padding: '14px 20px', background: '#fff',
            border: '1px solid var(--line-2)', borderRadius: 16,
            fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: 'var(--muted)',
            minWidth: 200, textAlign: 'center'
          }}>
            <div style={{ fontFamily: 'var(--f-display)', fontSize: 32, color: 'var(--deep)', letterSpacing: '-0.02em', marginBottom: 4 }}>17/11/25</div>
            une intervention
          </div>
        </div>

        {/* 4-step storyboard */}
        <div className="story-grid">
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <StoryCard step={s} idx={i} visible={active >= i} />
              {i < 3 && (
                <div className={`story-arrow ${active >= i + 1 ? 'is-on' : ''}`} aria-hidden="true">
                  <svg width="100%" height="20" viewBox="0 0 80 20" preserveAspectRatio="none">
                    <line x1="0" y1="10" x2="68" y2="10" stroke="currentColor" strokeWidth="2" strokeDasharray="4 6" />
                    <polyline points="62,4 72,10 62,16" fill="none" stroke="currentColor" strokeWidth="2" />
                  </svg>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Footer */}
        <div style={{
          marginTop: 56, padding: '20px 24px',
          background: 'rgba(255,255,255,0.65)', backdropFilter: 'blur(8px)',
          border: '1px dashed var(--line-2)', borderRadius: 16,
          display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'center',
          flexWrap: 'wrap'
        }}>
          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>
            outils déployés →
          </span>
          {['Cadulis', 'Personnalisation', 'EBP', 'Rapports PDF', 'Formation équipe'].map((s) =>
            <span key={s} style={{
              fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: 'var(--text)',
              padding: '6px 12px', border: '1px solid var(--line-2)', borderRadius: 999,
              background: '#fff'
            }}>{s}</span>
          )}
        </div>
      </div>

      <style>{`
        .story-grid {
          display: grid;
          grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr;
          gap: 0;
          align-items: stretch;
        }
        .story-arrow {
          display: flex; align-items: center; justify-content: center;
          color: var(--deep); opacity: 0.25;
          transition: opacity 500ms ease;
        }
        .story-arrow.is-on { opacity: 0.7; }
        @media (max-width: 1100px) {
          .story-grid { grid-template-columns: 1fr; gap: 16px; }
          .story-arrow { transform: rotate(90deg); height: 30px; }
          .story-arrow svg { width: 60px; }
        }
        @media (max-width: 900px) {
          .story-head { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 640px) {
          .story-card { min-height: auto !important; padding: 16px !important; }
          .story-visual { aspect-ratio: 4/1.6 !important; }
        }
      `}</style>
    </section>);

}

// --- Une étape du storyboard ---
function StoryCard({ step, idx, visible }) {
  return (
    <div className="story-card" style={{
      background: '#fff',
      border: '1px solid var(--line-2)',
      borderRadius: 20,
      padding: 22,
      position: 'relative',
      transform: visible ? 'translateY(0) scale(1)' : 'translateY(20px) scale(0.96)',
      opacity: visible ? 1 : 0,
      transition: 'transform 600ms cubic-bezier(0.2,0.7,0.2,1), opacity 500ms ease, box-shadow 400ms',
      boxShadow: visible ? '0 16px 40px rgba(16,30,142,0.12)' : '0 4px 12px rgba(16,30,142,0.04)',
      display: 'flex', flexDirection: 'column',
      minHeight: 320
    }}>
      {/* Step number */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 14, paddingBottom: 12, borderBottom: '1px dashed var(--line-2)'
      }}>
        <span style={{
          fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--muted)'
        }}>ÉTAPE 0{idx + 1}</span>
        <span style={{
          fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em',
          textTransform: 'uppercase',
          padding: '3px 8px', borderRadius: 999,
          background: 'var(--ink-2)', color: 'var(--deep)'
        }}>{step.tag}</span>
      </div>

      {/* Visual */}
      <StoryVisual kind={step.visual} />

      {/* Label */}
      <div style={{
        fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--electric)',
        marginTop: 16, marginBottom: 6
      }}>{step.label}</div>

      {/* Title */}
      <h3 style={{
        fontFamily: 'var(--f-display)', fontWeight: 600, fontSize: 18,
        lineHeight: 1.3, letterSpacing: '-0.01em',
        margin: '0 0 8px', textWrap: 'balance'
      }}>{step.title}</h3>

      {/* Body */}
      <p style={{ color: 'var(--muted)', fontSize: 13, lineHeight: 1.55, margin: 0 }}>
        {step.body}
      </p>
    </div>);
}

// --- Mini visuels pour chaque étape ---
function StoryVisual({ kind }) {
  const base = {
    aspectRatio: '4/2.4',
    background: 'linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%)',
    border: '1px solid var(--line-2)',
    borderRadius: 12,
    position: 'relative', overflow: 'hidden',
    padding: 14
  };

  if (kind === 'phone') {
    return (
      <div className="story-visual" style={base}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(16,30,142,0.15) 1px, transparent 0)',
          backgroundSize: '12px 12px', opacity: 0.5
        }}></div>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: 'var(--electric)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 0 4px rgba(94,76,255,0.18)',
            animation: 'ring 1.4s ease-in-out infinite'
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" />
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.12em' }}>+33 — APPEL EN COURS</div>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 600, fontSize: 14, color: 'var(--text)', marginTop: 2 }}>Didier · maintenance</div>
          </div>
        </div>
        <div style={{
          position: 'absolute', bottom: 12, left: 14, right: 14,
          padding: '6px 10px', borderRadius: 8,
          background: 'rgba(255,255,255,0.85)',
          fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--deep)',
          letterSpacing: '0.04em'
        }}> Un vérin hydraulique fuit.</div>
        <style>{`@keyframes ring { 0%,100% { box-shadow: 0 0 0 0 rgba(94,76,255,0.4); } 50% { box-shadow: 0 0 0 10px rgba(94,76,255,0); } }`}</style>
      </div>
    );
  }

  if (kind === 'wrench') {
    return (
      <div className="story-visual" style={{ ...base, background: 'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.2) 1px, transparent 0)',
          backgroundSize: '14px 14px', opacity: 0.6
        }}></div>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {['🔧', '⚙️', '🔩'].map((g, i) =>
              <span key={i} style={{ fontSize: 22, opacity: 0.9, animation: `bobX 2.5s ease-in-out ${i * 0.3}s infinite` }}>{g}</span>
            )}
          </div>
          <div>
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.12em' }}>GUILLAUME · DP FLEX</div>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 600, fontSize: 14, color: '#fff', marginTop: 2 }}>Sur le pont, à 11h12.</div>
          </div>
        </div>
        <style>{`@keyframes bobX { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }`}</style>
      </div>
    );
  }

  if (kind === 'report') {
    return (
      <div className="story-visual" style={{ ...base, background: '#fff', padding: 0, overflow: 'hidden' }}>
        {/* Top bar Cadulis */}
        <div style={{
          padding: '8px 12px', borderBottom: '1px solid var(--line-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          background: 'var(--ink-2)'
        }}>
          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em', color: 'var(--deep)', fontWeight: 600 }}>CADULIS</span>
          <span style={{
            fontFamily: 'var(--f-mono)', fontSize: 8, letterSpacing: '0.1em',
            padding: '2px 6px', borderRadius: 999, background: 'var(--yellow)', color: 'var(--deep)'
          }}>NOUVELLE FORMULE</span>
        </div>
        {/* Skeleton lines */}
        <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 5 }}>
          {[100, 70, 85, 60, 90].map((w, i) =>
            <div key={i} style={{ height: 6, width: `${w}%`, background: i === 0 ? 'var(--deep)' : 'var(--line-2)', borderRadius: 3, opacity: i === 0 ? 1 : 0.7 }}></div>
          )}
          <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
            <div style={{ width: 28, height: 22, background: 'var(--ink-2)', border: '1px solid var(--line-2)', borderRadius: 4 }}></div>
            <div style={{ width: 28, height: 22, background: 'var(--ink-2)', border: '1px solid var(--line-2)', borderRadius: 4 }}></div>
            <div style={{ flex: 1 }}></div>
            <span style={{ fontFamily: 'var(--f-mono)', fontSize: 8, color: 'var(--electric)', alignSelf: 'flex-end', letterSpacing: '0.08em' }}>PDF ✓</span>
          </div>
        </div>
      </div>
    );
  }

  if (kind === 'email') {
    return (
      <div className="story-visual" style={{ ...base, background: '#fff', padding: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--deep)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 11 }}>D</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--f-display)', fontSize: 12, fontWeight: 600, lineHeight: 1.2 }}>Didier</div>
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.05em' }}>→ guillaume@dpflex</div>
          </div>
          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--muted)' }}>18/11</span>
        </div>
        <div style={{
          fontFamily: 'var(--f-display)', fontSize: 13, lineHeight: 1.4,
          color: 'var(--text)', fontStyle: 'italic',
          paddingLeft: 10, borderLeft: '3px solid var(--yellow)'
        }}>
          « Merci pour l&rsquo;intervention du 17/11/2025 et votre rapport <span style={{ background: 'rgba(251,220,116,0.6)', padding: '0 3px' }}>nouvelle formule</span> très clair. »
        </div>
      </div>
    );
  }

  return <div className="story-visual" style={base}></div>;
}

// ============================================
// CTA FINAL
// ============================================
function HomeCTA({ navigate }) {
  return (
    <section className="section-pad-sm" style={{ background: 'var(--ink-2)' }}>
      <div className="container">
        <Reveal>
          <div style={{
            position: 'relative',
            borderRadius: 28,
            padding: 'clamp(40px, 5vw, 72px) clamp(48px, 8vw, 140px)',
            background: 'linear-gradient(135deg, var(--electric) 0%, var(--deep) 100%)',
            overflow: 'hidden',
            color: '#fff',
            textAlign: 'center'
          }}>
            <div className="bg-stars-light"></div>
            <div className="bg-glow" style={{ left: '50%', top: '-20%', width: 800, height: 800, transform: 'translateX(-50%)', background: 'radial-gradient(closest-side, rgba(251,220,116,0.35), transparent 70%)' }}></div>

            <div style={{ position: 'relative' }}>
              <span style={{ fontFamily: 'var(--f-mono)', fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', display: 'block', marginBottom: 20 }}>ON SE RENCONTRE ?</span>
              <h2 className="display display-xl" style={{ margin: '0 auto 20px', maxWidth: 900 }}>
                On vient voir votre <span style={{ color: 'var(--yellow)' }}>entreprise</span> ?
              </h2>
              <p style={{ color: 'rgba(255,255,255,0.82)', fontSize: 18, lineHeight: 1.6, margin: '0 auto 36px', maxWidth: 560 }}>
                Première visite gratuite, 2&nbsp;h sur place. On repart avec 3&nbsp;idées et vous avec un avis honnête.
              </p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <a className="btn" href="#contact" onClick={(e) => {e.preventDefault();navigate('contact');}} style={{
                  background: 'var(--yellow)', color: 'var(--text)'
                }}>
                  Demander une visite <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
                </a>
                <a className="btn" href="#contact" onClick={(e) => {e.preventDefault();navigate('contact');}} style={{
                  background: 'rgba(255,255,255,0.12)', color: '#fff',
                  border: '1px solid rgba(255,255,255,0.22)'
                }}>
                  Visio 30 min
                </a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ============================================
// ROUE 3D COVERFLOW — 7 cartes style Cyberscope sectionroue
// Rotation Y + profondeur Z, drag horizontal
// ============================================
function RoueCarousel({ navigate }) {
  const CARDS = [
    { id: 'performance', num: '01', title: 'Performance',           suit: '♦', color: 'var(--electric-2)', chips: ['Lean', 'KPI', 'QVCT'],     kpi: '−32% gaspillage',         desc: "Diagnostic complet, outils lean, management visuel. La performance devient mesurable et durable." },
    { id: 'continu',     num: '02', title: 'Amélioration continue', suit: '♠', color: 'var(--deep)',       chips: ['5S', 'Kaizen', 'QVCT'],    kpi: '+12 idées / équipe / mois', desc: "5S, Kaizen, résolution de problèmes et QVCT — une démarche qui dure au-delà du projet ponctuel." },
    { id: 'amenagement', num: '03', title: 'Aménagement',           suit: '♣', color: 'var(--deep)',       chips: ['Flux', 'Ergonomie'],        kpi: '−45% trajets opérateurs',  desc: "Repenser l'implantation, fluidifier les flux. −45% de trajets opérateurs en moyenne." },
    { id: 'equipement',  num: '04', title: 'Équipement',            suit: '♥', color: 'var(--electric-2)', chips: ['TPM', 'Maintenance'],       kpi: '+18% TRS machine',         desc: "Du cahier des charges à la TPM — choix, intégration et maintenance à vos côtés." },
    { id: 'competences', num: '05', title: 'Compétences',           suit: '★', color: 'var(--deep)',       chips: ['TWI', 'Formation'],         kpi: '×2 polyvalence moyenne',   desc: "Matrice de polyvalence, TWI, mentoring terrain. Vos équipes montent en autonomie." },
    { id: 'diagnostic',  num: '06', title: 'Diagnostic',            suit: '✦', color: 'var(--deep)',       chips: ['VSM', 'Swimlane'],          kpi: 'J+0 restitution',          desc: "VSM, Swimlane, analyse de flux. 2h sur site, 3 leviers identifiés. Zéro engagement." },
    { id: 'outils',      num: '07', title: 'Automatisation & Outils',           suit: '✺', color: 'var(--electric)',   chips: ['Cadulis', 'Kizeo', 'EBP', 'Skello'],     kpi: '−80% ressaisies',          desc: "Vous ressaisissez les mêmes données partout ? On supprime les doubles saisies avec les bons outils, bien connectés.", isNew: true },
  ];

  const [idx, setIdx] = useState(0);
  const dragRef = useRef(null);

  function goTo(i) { setIdx(Math.max(0, Math.min(CARDS.length - 1, i))); }

  function onPointerDown(e) {
    dragRef.current = { x: e.clientX, idx };
    e.currentTarget.setPointerCapture(e.pointerId);
  }
  function onPointerMove(e) {
    if (!dragRef.current) return;
    const dx = e.clientX - dragRef.current.x;
    if (Math.abs(dx) > 55) {
      goTo(dragRef.current.idx + (dx < 0 ? 1 : -1));
      dragRef.current = null;
    }
  }
  function onPointerUp() { dragRef.current = null; }

  const card = CARDS[idx];
  const CARD_W = 300; // px visuelle d'une carte

  return (
    <section style={{
      padding: 'clamp(60px, 8vw, 120px) 0',
      background: 'var(--deep)',
      borderTop: '1px solid rgba(255,255,255,0.08)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Halo central */}
      <div className="bg-glow" style={{ left: '50%', top: '40%', transform: 'translateX(-50%)', width: 900, height: 900, background: 'radial-gradient(closest-side, rgba(94,76,255,0.35), transparent 70%)' }}></div>
      <div className="bg-stars-light" style={{ opacity: 0.55 }}></div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>

        {/* Header */}
        <div style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow><span style={{ color: 'rgba(255,255,255,0.6)' }}>NOS 7 CARTES</span></Eyebrow>
            <h2 className="display display-l" style={{ margin: '20px 0 0', color: '#fff' }}>
              Choisissez votre <span className="italic-accent" style={{ color: 'var(--yellow)' }}>combinaison</span>
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => goTo(idx - 1)} style={{
              width: 48, height: 48, borderRadius: '50%',
              border: '1px solid rgba(255,255,255,0.2)', background: 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', cursor: 'pointer', opacity: idx === 0 ? 0.3 : 1,
              transition: 'opacity 200ms, background 200ms',
            }} onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
               onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            </button>
            <button onClick={() => goTo(idx + 1)} style={{
              width: 48, height: 48, borderRadius: '50%',
              background: 'var(--yellow)', color: 'var(--text)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', opacity: idx === CARDS.length - 1 ? 0.3 : 1,
              transition: 'opacity 200ms',
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
          </div>
        </div>

        {/* Roue 3D — perspective sur le conteneur */}
        <div
          style={{ perspective: '1100px', perspectiveOrigin: '50% 40%', height: 440, position: 'relative', cursor: 'grab' }}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerUp}
        >
          {CARDS.map((c, i) => {
            const offset = i - idx;
            const absOff = Math.abs(offset);
            if (absOff > 3) return null;

            const rotY   = offset * -42;          // rotation Y pour l'effet roue
            const transX = offset * 220;           // espacement horizontal
            const transZ = -absOff * 110;          // profondeur Z
            const scale  = 1 - absOff * 0.1;
            const opacity = absOff === 0 ? 1 : absOff === 1 ? 0.72 : absOff === 2 ? 0.4 : 0.18;
            const isActive = offset === 0;

            return (
              <div
                key={c.id}
                onClick={() => goTo(i)}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: '50%',
                  width: CARD_W,
                  marginLeft: -CARD_W / 2,
                  height: 420,
                  background: isActive
                    ? 'linear-gradient(160deg, #fff 0%, #f4f0ff 100%)'
                    : 'rgba(255,255,255,0.07)',
                  border: `1px solid ${isActive ? 'var(--yellow)' : 'rgba(255,255,255,0.15)'}`,
                  borderRadius: 22,
                  padding: 22,
                  cursor: isActive ? 'default' : 'pointer',
                  userSelect: 'none',
                  transform: `translateX(${transX}px) translateZ(${transZ}px) rotateY(${rotY}deg) scale(${scale})`,
                  opacity,
                  transition: 'all 520ms cubic-bezier(0.2, 0.7, 0.2, 1)',
                  boxShadow: isActive ? '0 32px 80px rgba(0,0,0,0.5), 0 0 60px rgba(251,220,116,0.2)' : 'none',
                  zIndex: 10 - absOff,
                  transformOrigin: 'center center',
                }}
              >
                {c.isNew && (
                  <span style={{ position: 'absolute', top: -10, left: -10, background: 'var(--electric)', color: '#fff', fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.15em', padding: '4px 10px', borderRadius: 5, transform: 'rotate(-5deg)', zIndex: 2 }}>NOUVELLE · 2026</span>
                )}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, paddingBottom: 12, borderBottom: '1px dashed rgba(16,30,142,0.15)' }}>
                  <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--muted)', textTransform: 'uppercase' }}>CARTE {c.num}</span>
                  <span style={{ fontFamily: 'serif', fontSize: 30, color: c.color, lineHeight: 1 }}>{c.suit}</span>
                </div>
                {/* Illustration */}
                <div style={{
                  aspectRatio: '4/3', borderRadius: 14, marginBottom: 14,
                  background: isActive ? 'linear-gradient(135deg, var(--deep), var(--electric))' : 'linear-gradient(135deg, #0d1a7a, #2218a0)',
                  position: 'relative', overflow: 'hidden',
                  display: 'flex', alignItems: 'flex-end', padding: 14,
                }}>
                  <span style={{ position: 'absolute', right: -6, bottom: -22, fontFamily: 'serif', fontSize: 110, opacity: 0.18, color: '#fff', lineHeight: 1, pointerEvents: 'none' }}>{c.suit}</span>
                  <span style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 48, color: '#fff', opacity: 0.85, letterSpacing: '-0.04em', lineHeight: 1 }}>{c.num}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.05, color: isActive ? 'var(--text)' : '#fff' }}>{c.title}</h3>
                <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', marginBottom: 10 }}>
                  {c.chips.map(ch => (
                    <span key={ch} style={{ fontFamily: 'var(--f-mono)', fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: isActive ? 'var(--muted)' : 'rgba(255,255,255,0.5)', padding: '2px 7px', border: `1px solid ${isActive ? 'var(--line-2)' : 'rgba(255,255,255,0.2)'}`, borderRadius: 999 }}>{ch}</span>
                  ))}
                </div>
                <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 16, color: isActive ? 'var(--electric)' : 'var(--yellow)', lineHeight: 1.2 }}>{c.kpi}</div>
              </div>
            );
          })}
        </div>

        {/* Dots */}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 32 }}>
          {CARDS.map((_, i) => (
            <button key={i} onClick={() => goTo(i)} style={{
              width: i === idx ? 28 : 8, height: 8, borderRadius: 999,
              background: i === idx ? 'var(--yellow)' : 'rgba(255,255,255,0.25)',
              transition: 'all 300ms', padding: 0, border: 0,
            }}/>
          ))}
        </div>

        {/* Contenu de la carte active */}
        <div style={{
          marginTop: 48, padding: 'clamp(28px, 4vw, 48px)',
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 28, backdropFilter: 'blur(12px)',
          display: 'grid', gridTemplateColumns: '1fr auto',
          gap: 24, alignItems: 'center',
        }} className="roue-content-bar">
          <div>
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--yellow)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8 }}>
              {card.num} · {card.title}
            </div>
            <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.8)', lineHeight: 1.7, margin: 0 }}>
              {card.desc}
            </p>
          </div>
          {card.id !== 'domaines' && (
            <a onClick={() => navigate(card.id)} style={{
              cursor: 'pointer', whiteSpace: 'nowrap',
              fontFamily: 'var(--f-mono)', fontSize: 11,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--yellow)',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '10px 20px',
              border: '1px solid rgba(251,220,116,0.4)', borderRadius: 999,
              transition: 'background 200ms',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(251,220,116,0.1)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              Voir l&rsquo;expertise
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          )}
        </div>
        <style>{`@media(max-width:640px){.roue-content-bar{grid-template-columns:1fr!important;}}`}</style>
      </div>
    </section>
  );
}

// ============================================
// RUCHE — carrousel honeycomb : secteurs / clients / partenaires
// ============================================
// Secteurs d'activité ciblés (remplace "Trois mondes")
const RUCHE_D = [
  { type: 'sector', label: 'Industrie',     sub: 'PME & sous-traitance'   },
  { type: 'sector', label: 'Artisanat',     sub: 'Ateliers & manufactures'},
  { type: 'sector', label: 'Agriculture',   sub: 'Exploitations & CUMA'   },
  { type: 'sector', label: 'Services',      sub: 'Terrain & intervention' },
  { type: 'sector', label: 'Commerce',      sub: 'Points de vente'        },
  { type: 'sector', label: 'Production',    sub: 'Lignes & ateliers'      },
  { type: 'sector', label: 'Maintenance',   sub: 'Préventive & curative'  },
  { type: 'sector', label: 'Ingénierie',    sub: 'BE & projets'           },
];
const RUCHE_C = [
  { type: 'client',  label: 'SADEV',          sector: 'Industrie'         },
  { type: 'partner', label: 'Proxinnov',        sector: 'Réseau adhérent'  },
  { type: 'client',  label: 'Cuma la trieuse', sector: 'Agriculture'      },
  { type: 'client',  label: 'DP Flex',         sector: 'Services'         },
  { type: 'client',  label: 'IRISO',           sector: 'Industrie'        },
];
const RUCHE_P = [
  { type: 'partner', label: 'Alméria',         sector: 'Informatique'        },
  { type: 'partner', label: 'Cadulis',          sector: 'Planification'      },
  { type: 'partner', label: 'Ouvre boites',     sector: 'Création entreprise'},
  { type: 'partner', label: 'Imprimerie IGO',   sector: 'Impression'         },
  { type: 'partner', label: 'Armaiti',          sector: 'Conseil Indus'      },
  { type: 'partner', label: 'GND',              sector: 'Ingénierie'         },
  { type: 'partner', label: 'COALEM',           sector: 'Coaching'           },
];

// Mélange déterministe : interleave les 3 familles
const RUCHE_ALL = (() => {
  const D = RUCHE_D, C = RUCHE_C, P = RUCHE_P;
  return [
    D[0], C[0], P[0],
    D[1], P[1], C[1],
    D[2], C[2], P[2],
    D[3], P[3], C[3],
    D[4], C[4], P[4],
    D[5], P[5], D[6],
    P[6], D[7],
  ];
})();

function StripPill({ cell }) {
  const cfg = {
    sector:  { bg:'rgba(255,255,255,0.93)', bd:'#3e2dd6',                dot:'#3e2dd6',              name:'#06061a',              sub:'rgba(6,6,26,0.50)'       },
    client:  { bg:'var(--yellow)',           bd:'transparent',            dot:'#06061a',              name:'#06061a',              sub:'rgba(6,6,26,0.50)'       },
    partner: { bg:'rgba(120,70,255,0.14)',   bd:'rgba(150,110,255,0.35)',dot:'#0e0450',              name:'#0e0450',              sub:'rgba(14,4,80,0.65)'       },
  };
  const c = cfg[cell.type] || cfg.partner;
  const text = cell.sub || cell.sector || '';
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:12, padding:'clamp(11px,1.4vh,16px) clamp(20px,2vw,28px)', borderRadius:999, flexShrink:0, background:c.bg, border:`1px solid ${c.bd}` }}>
      <span style={{ width:7, height:7, borderRadius:'50%', background:c.dot, flexShrink:0 }}/>
      <span style={{ fontFamily:'var(--f-display)', fontWeight:700, fontSize:'clamp(15px,1.6vw,19px)', color:c.name, whiteSpace:'nowrap' }}>{cell.label}</span>
      {text && <span style={{ fontFamily:'var(--f-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:c.sub, whiteSpace:'nowrap' }}>{text}</span>}
    </div>
  );
}

function HoneycombSection({ navigate }) {
  // Mixing manuel : ~3 secteurs + 2 clients + 2 partenaires par bande
  const D = RUCHE_D, C = RUCHE_C, P = RUCHE_P;
  const r1 = [D[0], C[0], P[0], D[2], C[2], P[1], D[4]];                // S C P S C P S
  const r2 = [D[1], P[2], C[3], D[3], C[1], P[3], D[5]];                // S P C S P C S  (C[1]=Proxinnov=partner inside)
  const r3 = [P[4], D[6], C[4], P[5], D[7], P[6]];         // P S C P S P

  return (
    <section style={{ background:'var(--ink)', borderTop:'1px solid var(--line)', position:'relative', overflow:'hidden', height:'100vh', display:'flex', flexDirection:'column' }}>
      <div className="bg-stars-light" style={{ opacity:0.10 }}/>

      {/* Header */}
      <div className="container" style={{ position:'relative', zIndex:2, paddingTop:'clamp(80px,10vh,100px)', paddingBottom:'clamp(16px,2vh,28px)', flexShrink:0 }}>
        <Reveal>
          <Eyebrow>ILS NOUS FONT CONFIANCE</Eyebrow>
          <div style={{ display:'flex', gap:16, marginTop:12, flexWrap:'wrap', alignItems:'center' }}>
            {[
              { label:'Secteur',    type:'sector'  },
              { label:'Client',     type:'client'  },
              { label:'Partenaire', type:'partner' },
            ].map(({ label, type }) => (
              <div key={type} style={{ display:'inline-flex', alignItems:'center', gap:7, padding:'5px 14px', borderRadius:999,
                background: type==='sector' ? 'rgba(255,255,255,0.93)' : type==='client' ? 'var(--yellow)' : 'rgba(120,70,255,0.14)',
                border: `1px solid ${type==='sector' ? '#3e2dd6' : type==='partner' ? 'rgba(150,110,255,0.35)' : 'transparent'}` }}>
                <span style={{ width:5, height:5, borderRadius:'50%', flexShrink:0,
                  background: type==='sector' ? '#3e2dd6' : type==='partner' ? '#0e0450' : '#06061a' }}/>
                <span style={{ fontFamily:'var(--f-mono)', fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase',
                  color: type==='partner' ? '#0e0450' : '#06061a' }}>{label}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      {/* 3 bandes — occupent tout l'espace vertical restant */}
      <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'space-evenly', position:'relative', zIndex:2 }}>
        <div className="strip-track strip-left">
          {[...r1,...r1].map((cell,i) => <StripPill key={i} cell={cell}/>)}
        </div>
        <div className="strip-track strip-right">
          {[...r2,...r2].map((cell,i) => <StripPill key={i} cell={cell}/>)}
        </div>
        <div className="strip-track strip-left">
          {[...r3,...r3].map((cell,i) => <StripPill key={i} cell={cell}/>)}
        </div>
      </div>

      {/* Footer CTA */}
      <div className="container" style={{ position:'relative', zIndex:2, paddingBottom:'clamp(36px,5vh,56px)', flexShrink:0, textAlign:'center' }}>
        <Reveal>
          <a href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }}
            style={{ fontFamily:'var(--f-mono)', fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--yellow)', textDecoration:'none' }}>
            Venez nous rejoindre →
          </a>
        </Reveal>
      </div>

      <style>{`
        .strip-track { display:flex; gap:14px; width:max-content; }
        .strip-left  { animation: strip-l 50s linear infinite; }
        .strip-right { animation: strip-r 42s linear infinite; }
        @keyframes strip-l { 0% { transform:translateX(0) }    100% { transform:translateX(-50%) } }
        @keyframes strip-r { 0% { transform:translateX(-50%) } 100% { transform:translateX(0)    } }
      `}</style>
    </section>
  );
}

Object.assign(window, { HomeCards, HomeDomain7, HomeTestimonial, HomeCTA, PlayingCard, ComposeSlot, TerminalPreview, StoryCard, StoryVisual, ImpactGauge, RoueCarousel, HoneycombSection });