// Proof.jsx — bandeau de stats + scénario d'usage type (étude de cas pilote).

const proofStyles = {
  section: {
    background: 'var(--ink-900)',
    color: 'var(--paper)',
    padding: '96px 0',
    position: 'relative',
    overflow: 'hidden',
  },
  pattern: {
    position: 'absolute',
    inset: 0,
    backgroundImage: 'url("08_assets-marque/design-system/assets/section-Résultats-background.jpeg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    opacity: 0.10,
    pointerEvents: 'none',
  },
  inner: { position: 'relative' },
  statsRow: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 0,
    borderTop: '1px solid rgba(246,244,238,.14)',
    borderBottom: '1px solid rgba(246,244,238,.14)',
    marginBottom: 72,
  },
  stat: {
    padding: '32px 24px',
    borderRight: '1px solid rgba(246,244,238,.14)',
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  statLast: { borderRight: 'none' },
  statNum: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 'clamp(32px, 4.5vw, 56px)',
    fontWeight: 600,
    lineHeight: 1,
    letterSpacing: '-0.025em',
    color: 'var(--amber-500)',
  },
  statLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    color: 'var(--mist-200)',
  },
  caseGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1.1fr',
    gap: 56,
    alignItems: 'center',
  },
  caseTag: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'var(--amber-500)',
    marginBottom: 20,
  },
  quote: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 'clamp(22px, 2.6vw, 32px)',
    lineHeight: 1.3,
    letterSpacing: '-0.012em',
    color: 'var(--paper)',
    margin: '0 0 20px',
    fontWeight: 500,
    textWrap: 'balance',
  },
  note: {
    fontSize: 14,
    lineHeight: 1.6,
    color: 'var(--mist-200)',
    maxWidth: 460,
  },
  // Right panel: case-study card
  panel: {
    background: 'var(--paper)',
    color: 'var(--ink-900)',
    padding: 32,
    border: '1px solid var(--ink-900)',
    boxShadow: '6px 6px 0 0 var(--amber-500)',
  },
  panelHead: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 24,
    paddingBottom: 16,
    borderBottom: '1px solid rgba(42, 26, 7,.10)',
    gap: 12,
    flexWrap: 'wrap',
  },
  panelTitle: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600, fontSize: 18, margin: 0,
  },
  metricRow: {
    display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 16, marginBottom: 24,
  },
  metricBlock: { display: 'flex', flexDirection: 'column', gap: 4 },
  metricNum: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 32, fontWeight: 600, lineHeight: 1, letterSpacing: '-0.02em',
    color: 'var(--ink-900)',
    fontVariantNumeric: 'tabular-nums',
  },
  metricLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
    color: 'var(--mist-500)',
  },
  bullets: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  bullet: { display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, lineHeight: 1.5, color: 'var(--mist-700)' },
};

const STATS = [
  { num: '37 h', label: 'Récupérées / mois — propositions' },
  { num: '68 %', label: 'Demandes traitées sans humain' },
  { num: '41 h', label: 'Récupérées / mois — back-office' },
  { num: '100 %', label: 'Vous gardez le code' },
];

// Compteur animé (A3) — parse le nombre de tête, garde le suffixe.
const CountUp = ({ value, active }) => {
  const str = String(value);                 // garde contre value non-string
  const m = str.match(/^(\d+)(.*)$/);
  const target = m ? parseInt(m[1], 10) : 0;
  const suffix = m ? m[2] : str;
  const hasNum = !!m;
  const [n, setN] = React.useState(0);
  const done = React.useRef(false);

  React.useEffect(() => {
    if (!active || done.current || !hasNum) return;
    done.current = true;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setN(target); return; }
    let raf;
    const dur = 1100, t0 = performance.now();
    const tick = (t) => {
      const p = Math.min((t - t0) / dur, 1);
      const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
      setN(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);   // annule au démontage
  }, [active, target, hasNum]);

  return <>{n}{suffix}</>;
};

const Proof = () => {
  const statsRef = React.useRef(null);
  const [statsActive, setStatsActive] = React.useState(false);

  React.useEffect(() => {
    if (!statsRef.current || !('IntersectionObserver' in window)) { setStatsActive(true); return; }
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) { setStatsActive(true); io.disconnect(); }
    }, { threshold: 0.4 });
    io.observe(statsRef.current);
    return () => io.disconnect();
  }, []);

  return (
    <section style={proofStyles.section} id="preuves">
      <div style={proofStyles.pattern} />
      <div className="b2a-container" style={proofStyles.inner}>
        <p className="b2a-eyebrow" style={{ color: 'var(--mist-200)' }}>// 02 — Les chiffres</p>
        <div ref={statsRef} style={proofStyles.statsRow} className="b2a-grid-4 b2a-reveal">
          {STATS.map((s, i) => (
            <div key={i} style={{ ...proofStyles.stat, ...(i === STATS.length - 1 ? proofStyles.statLast : {}) }}>
              <div style={proofStyles.statNum}><CountUp value={s.num.replace(' ', ' ')} active={statsActive} /></div>
              <div style={proofStyles.statLabel}>{s.label}</div>
            </div>
          ))}
        </div>
      <div style={proofStyles.caseGrid} className="b2a-grid-2 b2a-reveal">
        <div>
          <div style={proofStyles.caseTag}>● &nbsp; SCÉNARIO TYPE · CABINET CONSEIL · 18 PERSONNES</div>
          <p style={proofStyles.quote}>
            « 15 propositions par mois, rédigées à la main : 45 heures.
            Avec le générateur : 7,5 heures. 37 heures récupérées, chaque mois. »
          </p>
          <p style={proofStyles.note}>
            Ce scénario est basé sur notre étude de cas pilote pour le générateur de
            propositions — calculs détaillés disponibles sur demande lors de votre appel.
          </p>
        </div>
        <div style={proofStyles.panel}>
          <div style={proofStyles.panelHead}>
            <h4 style={proofStyles.panelTitle}>Générateur de propositions — projection</h4>
            <span style={{ color: 'var(--blue-700)', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.08em' }}>
              ● &nbsp;BASÉ SUR ÉTUDE DE CAS
            </span>
          </div>
          <div style={proofStyles.metricRow} className="b2a-grid-4" >
            <div style={proofStyles.metricBlock}>
              <div style={proofStyles.metricNum}>37 h</div>
              <div style={proofStyles.metricLabel}>Récupérées / mois</div>
            </div>
            <div style={proofStyles.metricBlock}>
              <div style={proofStyles.metricNum}>+28 %</div>
              <div style={proofStyles.metricLabel}>Taux de conversion</div>
            </div>
            <div style={proofStyles.metricBlock}>
              <div style={proofStyles.metricNum}>4j → 40min</div>
              <div style={proofStyles.metricLabel}>Délai de proposition</div>
            </div>
            <div style={proofStyles.metricBlock}>
              <div style={proofStyles.metricNum}>5,3 mois</div>
              <div style={proofStyles.metricLabel}>Retour sur investissement</div>
            </div>
          </div>
          <ul style={proofStyles.bullets}>
            <li style={proofStyles.bullet}>
              <Icon name="check" size={14} color="var(--blue-700)" style={{ marginTop: 2, flexShrink: 0 }} />
              Génération de texte personnalisée par IA (API Claude)
            </li>
            <li style={proofStyles.bullet}>
              <Icon name="check" size={14} color="var(--blue-700)" style={{ marginTop: 2, flexShrink: 0 }} />
              Calcul automatique des taxes, totaux et ROI
            </li>
            <li style={proofStyles.bullet}>
              <Icon name="check" size={14} color="var(--blue-700)" style={{ marginTop: 2, flexShrink: 0 }} />
              Mise en page à votre charte, prête à signer
            </li>
          </ul>
        </div>
      </div>
      </div>
    </section>
  );
};

window.Proof = Proof;