// Body sections for MLS Conseil landing
const { useState: useStateS, useRef: useRefS, useEffect: useEffectS } = React;

// ==========================================================
// SERVICES — 3 blocs
// ==========================================================
function Services({ accent = '#C9A961' }) {
  const services = [
  {
    tag: 'A · Administratif',
    title: 'Accompagnement administratif',
    lede: 'On structure, on classe, on suit. Vous récupérez du temps et une vraie visibilité.',
    bullets: ['Organisation des documents', 'Suivi des tâches récurrentes', 'Structuration de l\'activité', 'Gain de temps mesurable'],
    visual: 'docs'
  },
  {
    tag: 'B · Trésorerie',
    title: 'Gestion financière',
    featured: true,
    lede: 'Le plan de trésorerie au cœur de l\'accompagnement : anticiper plutôt que subir.',
    bullets: ['Plan de trésorerie sur 12 mois', 'Encaissements & décaissements', 'Éviter les tensions cash', 'Décisions sereines'],
    visual: 'chart'
  },
  {
    tag: 'C · Micro-entreprise',
    title: 'Micro-entreprises & TPE',
    lede: 'Factures, seuils, calendrier 2026/2027 : on garde un œil pour vous.',
    bullets: ['Contrôle des factures', 'Suivi des seuils', 'Facturation électronique 2026/27', 'Anticipation des obligations'],
    visual: 'invoice'
  },
  {
    tag: 'D · Sous-traitance cabinet',
    title: 'Révision comptable',
    lede: 'Sous-traitance de révision pour cabinets comptables : sociétés, EI, SCI. Dossiers livrés prêts pour le bilan.',
    bullets: ['Sociétés (SAS, SARL, SASU…)', 'Entreprises individuelles', 'SCI à l\'IR ou à l\'IS', 'Dossiers de révision complets'],
    visual: 'review'
  }];

  return (
    <Section id="services" bg="transparent" py={140} label="01 · Services">
      <div style={{ display: 'grid', gridTemplateColumns: 'auto auto', alignItems: 'end', gap: 40, marginBottom: 60 }}>
        <h2 style={{
          fontSize: 'clamp(36px, 4.5vw, 64px)', fontWeight: 600, letterSpacing: '-0.035em',
          lineHeight: 1.0, margin: 0, color: '#14223D', maxWidth: 720
        }}>
          Quatre métiers,{' '}
          <span className="serif" style={{ color: '#A8884A', fontWeight: 400, fontSize: '1.05em' }}>une seule logique</span> :
          <br />vous décharger de la gestion.
        </h2>
        <p style={{ fontSize: 16, color: '#4A5878', lineHeight: 1.55, margin: '0 0 8px', maxWidth: 360, textAlign: 'right' }}>
          Choisissez le périmètre dont vous avez besoin. Nous adaptons l'accompagnement à votre rythme et à votre structure.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {services.map((s, i) =>
        <ServiceCard key={i} service={s} accent={accent} />
        )}
      </div>
    </Section>);

}

function ServiceCard({ service, accent }) {
  const [hover, setHover] = useStateS(false);
  const featured = service.featured;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: featured ? '#14223D' : '#FBF7EE',
        color: featured ? '#F4EEE2' : '#14223D',
        border: featured ? 'none' : '1px solid #1B2A4E14',
        borderRadius: 22,
        padding: 28,
        boxShadow: hover ? '0 20px 40px -10px #14223d33' : '0 4px 14px -4px #14223d10',
        transform: hover ? 'translateY(-4px)' : 'none',
        transition: 'all .3s cubic-bezier(.2,.8,.2,1)',
        display: 'flex', flexDirection: 'column',
        position: 'relative', overflow: 'hidden',
        minHeight: 480
      }}>
      {featured &&
      <div style={{ position: 'absolute', right: -30, top: -30, width: 140, height: 140,
        background: `radial-gradient(circle, ${accent}55 0%, transparent 70%)` }} />
      }
      <div className="mono" style={{
        fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
        color: featured ? accent : '#4A5878', marginBottom: 20
      }}>{service.tag}</div>

      <h3 style={{
        fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.1,
        margin: '0 0 12px',
        color: featured ? '#F4EEE2' : '#14223D'
      }}>{service.title}</h3>

      <p style={{
        fontSize: 14.5, lineHeight: 1.55, margin: '0 0 24px',
        color: featured ? '#F4EEE2BB' : '#4A5878'
      }}>{service.lede}</p>

      {/* Visual */}
      <ServiceVisual kind={service.visual} accent={accent} dark={featured} />

      <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {service.bullets.map((b, j) =>
        <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5,
          color: featured ? '#F4EEE2DD' : '#14223D' }}>
            <span style={{
            width: 18, height: 18, borderRadius: '50%',
            background: featured ? `${accent}33` : '#1B2A4E0F',
            color: featured ? accent : '#A8884A',
            display: 'grid', placeItems: 'center', flexShrink: 0
          }}>
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>
            <span>{b}</span>
          </li>
        )}
      </ul>
    </div>);

}

function ServiceVisual({ kind, accent, dark }) {
  if (kind === 'docs') {
    return (
      <div style={{
        background: '#1B2A4E08', borderRadius: 14, padding: 14,
        border: '1px solid #1B2A4E14'
      }}>
        {[
        { n: '2026-008', l: 'Bilan trimestriel', s: 'Classé', tone: '#2F6B4F' },
        { n: '2026-007', l: 'URSSAF · attestation', s: 'Reçu', tone: accent },
        { n: '2026-006', l: 'Bail commercial', s: 'Archivé', tone: '#4A5878' }].
        map((d, i) =>
        <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 10, padding: '8px 0',
          borderTop: i === 0 ? 'none' : '1px solid #1B2A4E14', alignItems: 'center' }}>
            <div style={{ width: 24, height: 30, borderRadius: 4, background: '#FBF7EE', border: `1px solid #1B2A4E22`,
            display: 'grid', placeItems: 'center', fontSize: 8, color: '#4A5878' }} className="mono">PDF</div>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 500, color: '#14223D' }}>{d.l}</div>
              <div className="mono" style={{ fontSize: 9.5, color: '#4A5878', letterSpacing: '0.06em' }}>{d.n}</div>
            </div>
            <div style={{
            fontSize: 10, padding: '3px 8px', borderRadius: 999,
            background: `${d.tone}22`, color: d.tone, fontWeight: 500
          }}>{d.s}</div>
          </div>
        )}
      </div>);

  }
  if (kind === 'chart') {
    return (
      <div style={{
        background: '#F4EEE211', borderRadius: 14, padding: 14,
        border: '1px solid #F4EEE222'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', color: accent }}>PROJECTION 12M</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: '#F4EEE2' }}>+ 84 600 €</div>
        </div>
        <TresorerieChart accent={accent} height={100} width={300} />
      </div>);

  }
  if (kind === 'invoice') {
    return (
      <div style={{
        background: '#1B2A4E08', borderRadius: 14, padding: 14,
        border: '1px solid #1B2A4E14',
        display: 'flex', flexDirection: 'column', gap: 10
      }}>
        <div style={{
          padding: '10px 12px', borderRadius: 10, background: '#FBF7EE',
          border: '1px solid #1B2A4E14',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, alignItems: 'center'
        }}>
          <div>
            <div style={{ fontSize: 11, color: '#4A5878' }}>Facture #2026-042</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#14223D' }}>Client Atelier B.</div>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, color: '#14223D' }}>1 240 €</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div style={{ flex: 1, height: 8, background: '#1B2A4E14', borderRadius: 999, overflow: 'hidden', position: 'relative' }}>
            <div style={{ width: '68%', height: '100%', background: accent, borderRadius: 999 }} />
            <div style={{ position: 'absolute', left: '68%', top: -4, width: 2, height: 16, background: '#14223D' }} />
          </div>
          <div style={{ fontSize: 11, color: '#4A5878' }} className="mono">68% · 188K€</div>
        </div>
        <div style={{ fontSize: 10.5, color: '#4A5878', display: 'flex', justifyContent: 'space-between' }}>
          <span>Seuil micro-BIC</span>
          <span>188 700 € / 277 000 €</span>
        </div>
      </div>);

  }
  if (kind === 'review') {
    const lignes = [
      { c: '411', l: 'Clients', s: 'Lettré', ok: true },
      { c: '401', l: 'Fournisseurs', s: 'Lettré', ok: true },
      { c: '512', l: 'Banque', s: 'Rapproché', ok: true },
      { c: '445', l: 'TVA', s: 'À justifier', ok: false }];
    return (
      <div style={{
        background: '#1B2A4E08', borderRadius: 14, padding: 14,
        border: '1px solid #1B2A4E14'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', color: '#4A5878', textTransform: 'uppercase' }}>Dossier · SCI Loones</div>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.08em', color: '#A8884A' }}>EX. 2026</div>
        </div>
        {lignes.map((l, i) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 10,
          padding: '7px 0', alignItems: 'center',
          borderTop: i === 0 ? 'none' : '1px solid #1B2A4E14'
        }}>
            <div className="mono" style={{
            fontSize: 10, fontWeight: 600, color: '#14223D',
            background: '#FBF7EE', padding: '3px 6px', borderRadius: 4,
            border: '1px solid #1B2A4E14', letterSpacing: '0.04em'
          }}>{l.c}</div>
            <div style={{ fontSize: 12, color: '#14223D', fontWeight: 500 }}>{l.l}</div>
            <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            fontSize: 10, padding: '3px 7px', borderRadius: 999,
            background: l.ok ? '#2F6B4F22' : `${accent}33`,
            color: l.ok ? '#2F6B4F' : '#A8884A', fontWeight: 500
          }}>
              {l.ok ?
            <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" /></svg> :

            <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2.5" /><path d="M12 8v4M12 16h.01" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" /></svg>
            }
              {l.s}
            </div>
          </div>
        )}
      </div>);

  }
  return null;
}

// ==========================================================
// FOCUS CONFORMITÉ — facturation électronique 2026/2027
// ==========================================================
function Conformite({ accent = '#C9A961' }) {
  const [now] = useStateS(() => new Date());
  const milestones = [
  { date: '1ᵉʳ sept. 2026', label: 'Réception obligatoire des factures électroniques (toutes entreprises)', status: 'next' },
  { date: '1ᵉʳ sept. 2026', label: 'Émission obligatoire — grandes entreprises & ETI', status: 'next' },
  { date: '1ᵉʳ sept. 2027', label: 'Émission obligatoire — PME, TPE & micro-entreprises', status: 'after' }];


  return (
    <Section id="conformite" bg="transparent" py={120} label="02 · Conformité">
      <div style={{
        background: '#14223D', color: '#F4EEE2',
        borderRadius: 32, padding: '60px 60px 70px',
        position: 'relative', overflow: 'hidden'
      }}>
        {/* big serif decoration */}
        <div className="serif" style={{
          position: 'absolute', right: 40, top: -40, fontSize: 360, color: `${accent}1F`,
          lineHeight: 0.8, pointerEvents: 'none', userSelect: 'none'
        }}>2026</div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, position: 'relative' }}>
          <div>
            <Pill dark>Micro-entreprise · TPE</Pill>
            <h2 style={{
              fontSize: 'clamp(34px, 4.2vw, 56px)', fontWeight: 600, letterSpacing: '-0.03em',
              lineHeight: 1.05, margin: '18px 0 22px', color: '#F4EEE2'
            }}>
              Ne soyez pas{' '}
              <span className="serif" style={{ color: accent, fontWeight: 400, fontSize: '1.05em' }}>pris au dépourvu.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: '#F4EEE2BB', maxWidth: 480, margin: '0 0 28px' }}>
              La réforme de la facturation électronique entre en vigueur en 2026, puis 2027. On regarde votre situation, on planifie, on outille — sans jargon.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
              'Vérification de la conformité de vos factures',
              'Identification des seuils à surveiller',
              'Calendrier personnalisé 2026/2027',
              'Choix de la plateforme de dématérialisation'].
              map((t, i) =>
              <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5, color: '#F4EEE2DD' }}>
                  <span style={{
                  width: 24, height: 24, borderRadius: '50%',
                  background: `${accent}22`, color: accent,
                  display: 'grid', placeItems: 'center', flexShrink: 0
                }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                  {t}
                </li>
              )}
            </ul>
            <div style={{ marginTop: 36 }}>
              <PrimaryButton light size="md">Faire un diagnostic gratuit</PrimaryButton>
            </div>
          </div>

          {/* Right — calendar timeline */}
          <div>
            <div style={{
              background: '#F4EEE208', border: '1px solid #F4EEE218',
              borderRadius: 22, padding: 28
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
                <div>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', color: accent, marginBottom: 4 }}>CALENDRIER · RÉFORME</div>
                  <div style={{ fontSize: 18, fontWeight: 600, color: '#F4EEE2' }}>Facturation électronique</div>
                </div>
                <div style={{
                  padding: '5px 11px', borderRadius: 999, background: `${accent}22`,
                  color: accent, fontSize: 11, fontWeight: 500
                }}>Vous êtes là</div>
              </div>

              {/* Timeline */}
              <div style={{ position: 'relative', paddingLeft: 28 }}>
                <div style={{ position: 'absolute', left: 8, top: 4, bottom: 4, width: 2, background: '#F4EEE222' }} />
                {/* current marker */}
                <div style={{
                  position: 'absolute', left: 0, top: 0,
                  display: 'flex', alignItems: 'center', gap: 12
                }}>
                  <div style={{ width: 18, height: 18, borderRadius: '50%', background: accent, border: '4px solid #14223D' }} />
                </div>
                <div style={{ paddingBottom: 28 }}>
                  <div className="mono" style={{ fontSize: 11, color: '#F4EEE2AA', letterSpacing: '0.1em' }}>AUJOURD'HUI · MAI 2026</div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: '#F4EEE2', marginTop: 2 }}>Phase de préparation</div>
                </div>

                {milestones.map((m, i) =>
                <div key={i} style={{ position: 'relative', paddingBottom: i === milestones.length - 1 ? 0 : 28 }}>
                    <div style={{
                    position: 'absolute', left: -28, top: 4,
                    width: 14, height: 14, borderRadius: '50%',
                    background: '#14223D',
                    border: `2px solid ${m.status === 'next' ? accent : '#F4EEE244'}`
                  }} />
                    <div className="mono" style={{ fontSize: 11, color: m.status === 'next' ? accent : '#F4EEE299', letterSpacing: '0.08em' }}>{m.date}</div>
                    <div style={{ fontSize: 13.5, color: '#F4EEE2DD', marginTop: 4, lineHeight: 1.45 }}>{m.label}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>);

}

// ==========================================================
// BÉNÉFICES
// ==========================================================
function Benefices({ accent = '#C9A961' }) {
  const items = [
  { kpi: '-30%', label: 'de charge mentale', detail: 'Plus à porter seul l\'administratif et les échéances.', icon: 'brain' },
  { kpi: '12 mois', label: 'de trésorerie anticipée', detail: 'Vous voyez venir les tensions, vous ajustez.', icon: 'chart' },
  { kpi: '100%', label: 'de documents suivis', detail: 'Bilans, contrats, factures : tout est à sa place.', icon: 'docs' },
  { kpi: '2026/27', label: 'conformité sereine', detail: 'Réforme de facturation prête. Avant l\'échéance.', icon: 'shield' }];

  return (
    <Section bg="#FBF7EE" py={120} label="03 · Bénéfices" id="benefices">
      <div style={{ maxWidth: 800, marginBottom: 60 }}>
        <h2 style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 600, letterSpacing: '-0.035em',
          lineHeight: 1.0, margin: 0, color: '#14223D' }}>
          Concrètement, ce que vous{' '}
          <span className="serif" style={{ color: '#A8884A', fontWeight: 400, fontSize: '1.05em' }}>récupérez.</span>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
        {items.map((b, i) =>
        <BeneficeCard key={i} b={b} accent={accent} />
        )}
      </div>
    </Section>);

}

function BeneficeCard({ b, accent }) {
  const [hover, setHover] = useStateS(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#F4EEE2',
        border: '1px solid #1B2A4E14',
        borderRadius: 18, padding: 24,
        minHeight: 240,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        transition: 'all .3s', transform: hover ? 'translateY(-3px)' : 'none',
        boxShadow: hover ? '0 14px 32px -10px #14223d22' : 'none'
      }}>
      <div>
        <BeneficeIcon kind={b.icon} accent={accent} />
        <div style={{
          fontSize: 36, fontWeight: 600, letterSpacing: '-0.03em',
          color: '#14223D', marginTop: 18, marginBottom: 4
        }}>{b.kpi}</div>
        <div style={{ fontSize: 14, color: '#4A5878', fontWeight: 500 }}>{b.label}</div>
      </div>
      <div style={{ fontSize: 13, color: '#4A5878', lineHeight: 1.5, marginTop: 18,
        paddingTop: 16, borderTop: '1px solid #1B2A4E14' }}>{b.detail}</div>
    </div>);

}

function BeneficeIcon({ kind, accent }) {
  const c = '#14223D';
  return (
    <div style={{
      width: 42, height: 42, borderRadius: 12,
      background: `${accent}22`, color: c,
      display: 'grid', placeItems: 'center'
    }}>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        {kind === 'brain' && <path d="M9 4a3 3 0 00-3 3v1a3 3 0 00-2 3v1a3 3 0 002 3v1a3 3 0 003 3M15 4a3 3 0 013 3v1a3 3 0 012 3v1a3 3 0 01-2 3v1a3 3 0 01-3 3M9 4v16M15 4v16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />}
        {kind === 'chart' && <path d="M3 19V5M3 19h18M7 15l4-4 3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />}
        {kind === 'docs' && <path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5zM14 3v5h5M9 13h6M9 17h4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />}
        {kind === 'shield' && <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />}
      </svg>
    </div>);

}

// ==========================================================
// POURQUOI MLS CONSEIL
// ==========================================================
function Pourquoi({ accent = '#C9A961' }) {
  const reasons = [
  { n: '01', t: 'Entreprise de proximité', d: 'Vous parlez toujours à la même personne. Pas de plateforme, pas de chatbot.' },
  { n: '02', t: 'Rigueur + pédagogie', d: 'On ne se contente pas de faire. On vous explique pour que vous gardiez la main.' },
  { n: '03', t: 'Réactivité', d: 'Réponse sous 48h ouvrées. Échéances suivies en amont, jamais dans l\'urgence.' },
  { n: '04', t: 'Adapté aux petites structures', d: 'Indépendants, micro-entrepreneurs, TPE. Notre cœur de métier, pas une exception.' }];

  return (
    <Section id="pourquoi" bg="transparent" py={120} label="04 · Pourquoi MLS">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'flex-start' }}>
        <div style={{ position: 'sticky', top: 120 }}>
          <h2 style={{
            fontSize: 'clamp(36px, 4.5vw, 60px)', fontWeight: 600, letterSpacing: '-0.035em',
            lineHeight: 1.0, margin: '0 0 22px', color: '#14223D'
          }}>
            Pourquoi nous choisir{' '}
            <span className="serif" style={{ color: '#A8884A', fontWeight: 400, fontSize: '1.05em' }}>plutôt qu'un autre.</span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: '#4A5878', maxWidth: 420 }}>MLS Conseil n'est pas une entreprise de conseil de plus. C'est un binôme de gestion qui prend en charge ce qui vous fait perdre du temps, sans vous imposer son outil ni son tempo.

          </p>
          <div style={{
            marginTop: 32, padding: 20,
            background: '#FBF7EE', borderRadius: 14, border: '1px solid #1B2A4E14'
          }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: '#4A5878', textTransform: 'uppercase', marginBottom: 8 }}>Notre engagement</div>
            <div style={{ fontSize: 15, color: '#14223D', lineHeight: 1.5 }}>
              Premier rendez-vous offert. Devis clair. Sans engagement.
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {reasons.map((r, i) =>
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32,
            padding: '32px 0',
            borderTop: i === 0 ? '1px solid #1B2A4E22' : 'none',
            borderBottom: '1px solid #1B2A4E22'
          }}>
              <div className="mono" style={{
              fontSize: 12, letterSpacing: '0.18em',
              color: accent, fontWeight: 500, marginTop: 6
            }}>{r.n}</div>
              <div>
                <h3 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 10px', color: '#14223D' }}>
                  {r.t}
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: '#4A5878', margin: 0 }}>{r.d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </Section>);

}

// ==========================================================
// CHIFFRES CLÉS
// ==========================================================
function Stats({ accent = '#C9A961' }) {
  const stats = [
  { n: '20+', l: 'dirigeants accompagnés' },
  { n: '2 ans', l: 'd\'expérience' },
  { n: '48h', l: 'délai de réponse moyen' },
  { n: '4,8 / 5', l: 'note clients' }];

  return (
    <div style={{ background: '#14223D', color: '#F4EEE2', padding: '60px 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {stats.map((s, i) =>
        <div key={i} style={{
          display: 'flex', flexDirection: 'column', gap: 6,
          paddingLeft: i === 0 ? 0 : 24,
          borderLeft: i === 0 ? 'none' : '1px solid #F4EEE222'
        }}>
            <div style={{ fontSize: 'clamp(36px, 4.5vw, 54px)', fontWeight: 600, letterSpacing: '-0.035em', color: '#F4EEE2' }}>
              {s.n}
            </div>
            <div style={{ fontSize: 14, color: '#F4EEE2AA', letterSpacing: '-0.005em' }}>{s.l}</div>
          </div>
        )}
      </div>
    </div>);

}

// ==========================================================
// TÉMOIGNAGES
// ==========================================================
function Temoignages({ accent = '#C9A961' }) {
  const quotes = [
  {
    t: `On a enfin une vision claire de la trésorerie sur 12 mois. Les rendez-vous trimestriels sont devenus le seul moment où je m'occupe de gestion — le reste du temps, je peux vraiment piloter mon activité.`,
    n: 'Camille L.',
    r: 'Architecte indépendante · Lyon',
    tone: accent
  },
  {
    t: `Très concret, pour 50€ par mois pour ma micro, je suis plus serein et bien accompagné.`,
    n: 'Mehdi R.',
    r: 'Atelier B. · Menuiserie (TPE 4 sal.)',
    tone: '#2F6B4F'
  },
  {
    t: `En micro-entreprise je ne savais pas qu'il fallait des mentions légales sur ma facture et je ne savais pas que les seuils s'appréciaient mensuellement.`,
    n: 'Sarah V.',
    r: 'Coach professionnelle',
    tone: '#C46A5C'
  }];

  return (
    <Section id="temoignages" bg="transparent" py={120} label="05 · Témoignages">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 50, alignItems: 'end' }}>
        <h2 style={{
          fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 600, letterSpacing: '-0.035em',
          lineHeight: 1.0, margin: 0, color: '#14223D'
        }}>
          Ils nous font{' '}
          <span className="serif" style={{ color: '#A8884A', fontWeight: 400, fontSize: '1.05em' }}>confiance.</span>
        </h2>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, justifyContent: 'flex-end' }}>
          <div style={{ display: 'flex', gap: 4 }}>
            {[0, 1, 2, 3, 4].map((i) =>
            <svg key={i} width="20" height="20" viewBox="0 0 24 24" fill={accent}><path d="M12 2l3 7 7 .5-5.5 4.8L18 22l-6-3.5L6 22l1.5-7.7L2 9.5 9 9z" /></svg>
            )}
          </div>
          <div style={{ fontSize: 15, color: '#14223D' }}><strong>4,9 / 5</strong> · 47 avis vérifiés</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {quotes.map((q, i) =>
        <div key={i} style={{
          background: '#FBF7EE',
          border: '1px solid #1B2A4E14',
          borderRadius: 22, padding: 28,
          display: 'flex', flexDirection: 'column', gap: 20
        }}>
            <svg width="32" height="22" viewBox="0 0 32 22" fill={q.tone} style={{ opacity: 0.3 }}>
              <path d="M0 22V12C0 5 4 0 12 0v4c-3 1-5 3-5 7h5v11H0zm17 0V12c0-7 4-12 12-12v4c-3 1-5 3-5 7h5v11H17z" />
            </svg>
            <p className="serif" style={{ fontSize: 19, lineHeight: 1.45, color: '#14223D', margin: 0, fontStyle: 'normal' }}>
              {q.t}
            </p>
            <div style={{ marginTop: 'auto', paddingTop: 18, borderTop: '1px solid #1B2A4E14',
            display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
              width: 40, height: 40, borderRadius: '50%',
              background: `linear-gradient(135deg, ${q.tone}, ${q.tone}88)`,
              color: '#FBF7EE', display: 'grid', placeItems: 'center',
              fontWeight: 600, fontSize: 14
            }}>{q.n.split(' ').map((w) => w[0]).join('')}</div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: '#14223D' }}>{q.n}</div>
                <div style={{ fontSize: 12, color: '#4A5878', marginTop: 2 }}>{q.r}</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </Section>);

}

Object.assign(window, { Services, Conformite, Benefices, Pourquoi, Stats, Temoignages });