// 3 hero variants for MLS Conseil
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ---- Shared mock dashboard pieces --------------------------------------
function TresorerieChart({ accent = '#C9A961', height = 180, width = 360 }) {
  // Sample treasury values (€k) over months
  const values = [12, 15, 13, 18, 16, 22, 20, 26, 24, 30, 28, 34];
  const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
  const { d, pts } = buildPath(values, width, height, 16, 18);
  // area
  const last = pts[pts.length - 1],first = pts[0];
  const areaD = `${d} L ${last[0]} ${height - 8} L ${first[0]} ${height - 8} Z`;
  return (
    <svg viewBox={`0 0 ${width} ${height}`} width="100%" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="trArea" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="0.28" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[0.25, 0.5, 0.75].map((p, i) =>
      <line key={i} x1="16" x2={width - 16} y1={18 + (height - 36) * p} y2={18 + (height - 36) * p}
      stroke="#1B2A4E" strokeOpacity="0.08" strokeDasharray="3 4" />
      )}
      <path d={areaD} fill="url(#trArea)" />
      <path d={d} fill="none" stroke={accent} strokeWidth="2.2" strokeLinecap="round" />
      {/* point */}
      <circle cx={pts[8][0]} cy={pts[8][1]} r="5" fill="#fff" stroke={accent} strokeWidth="2.5" />
      {/* tooltip */}
      <g transform={`translate(${pts[8][0] + 10}, ${pts[8][1] - 34})`}>
        <rect width="92" height="34" rx="8" fill="#14223D" />
        <text x="10" y="14" fill="#C9A961" fontSize="9" fontFamily="Geist Mono, monospace" letterSpacing="0.08em">SEPTEMBRE</text>
        <text x="10" y="27" fill="#F4EEE2" fontSize="12" fontWeight="600">+ 24 380 €</text>
      </g>
      {/* x labels */}
      {months.map((m, i) =>
      <text key={i} x={pts[i][0]} y={height - 2} textAnchor="middle"
      fontSize="9" fill="#4A5878" fontFamily="Geist Mono, monospace" letterSpacing="0.06em">{m}</text>
      )}
    </svg>);

}

function DashboardCard({ accent = '#C9A961', float = true }) {
  return (
    <div style={{
      background: '#FBF7EE',
      borderRadius: 22,
      boxShadow: '0 30px 60px -20px #14223d44, 0 12px 24px -8px #14223d22',
      border: '1px solid #1B2A4E14',
      padding: 22,
      width: '100%', maxWidth: 460,
      transform: float ? 'rotate(-1.2deg)' : 'none'
    }}>
      {/* header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: '#4A5878', textTransform: 'uppercase', marginBottom: 6 }}>Plan de trésorerie · 2026</div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', color: '#14223D' }}>
            Solde projeté <span style={{ color: accent }}>+ 84 600&nbsp;€</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['12M', '6M', '3M'].map((t, i) =>
          <div key={t} style={{
            padding: '4px 9px', borderRadius: 6, fontSize: 10.5,
            background: i === 0 ? '#14223D' : 'transparent',
            color: i === 0 ? '#F4EEE2' : '#4A5878',
            border: i === 0 ? 'none' : '1px solid #1B2A4E22',
            fontWeight: 500
          }}>{t}</div>
          )}
        </div>
      </div>
      <TresorerieChart accent={accent} height={170} width={420} />
      {/* legend rows */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14, paddingTop: 14, borderTop: '1px solid #1B2A4E14' }}>
        <div>
          <div className="mono" style={{ fontSize: 9.5, color: '#4A5878', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Encaissements</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: '#2F6B4F', marginTop: 2 }}>+ 142 300 €</div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 9.5, color: '#4A5878', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Décaissements</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: '#C46A5C', marginTop: 2 }}>− 57 700 €</div>
        </div>
      </div>
    </div>);

}

function EcheanceCard({ accent = '#C9A961' }) {
  const items = [
  { label: 'TVA · 3ᵉ trimestre', date: '24 oct.', tag: 'À régler', warn: true, amount: '1 280 €' },
  { label: 'URSSAF · micro-BIC', date: '31 oct.', tag: 'Préparé', warn: false, amount: '612 €' },
  { label: 'Acompte IS', date: '15 déc.', tag: 'À planifier', warn: false, amount: '2 400 €' }];

  return (
    <div style={{
      background: '#14223D', color: '#F4EEE2',
      borderRadius: 18, padding: 20,
      width: 320,
      boxShadow: '0 20px 40px -12px #14223d55',
      transform: 'rotate(2deg)'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C9A961' }}>Échéances suivies</div>
        <div style={{
          width: 22, height: 22, borderRadius: '50%',
          border: '1px solid #F4EEE233',
          display: 'grid', placeItems: 'center'
        }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#F4EEE2" strokeWidth="2" strokeLinecap="round" /></svg>
        </div>
      </div>
      {items.map((it, i) =>
      <div key={i} style={{
        display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 10,
        alignItems: 'center',
        padding: '11px 0',
        borderTop: i === 0 ? 'none' : '1px solid #F4EEE218'
      }}>
          <div style={{
          width: 30, height: 30, borderRadius: 8,
          background: it.warn ? '#C46A5C22' : '#C9A96122',
          color: it.warn ? '#E8917C' : accent,
          display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600
        }}>
            {it.warn ? '!' : '✓'}
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 500 }}>{it.label}</div>
            <div style={{ fontSize: 11, color: '#F4EEE299', marginTop: 1 }}>{it.date} · {it.tag}</div>
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: accent }}>{it.amount}</div>
        </div>
      )}
    </div>);

}

// ---- NAV ---------------------------------------------------------------
function Nav({ onCTA }) {
  const [scrolled, setScrolled] = useStateH(false);
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 0' : '22px 0',
      background: scrolled ? '#F4EEE2EE' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid #1B2A4E14' : '1px solid transparent',
      transition: 'all .25s ease'
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Logo />
        <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }} className="nav-links">
          {[
          ['Services', '#services'],
          ['Conformité', '#conformite'],
          ['Pourquoi nous', '#pourquoi'],
          ['Témoignages', '#temoignages']].
          map(([l, h]) =>
          <a key={l} href={h} style={{ textDecoration: 'none', fontSize: 14, color: '#14223D', fontWeight: 450, letterSpacing: '-0.005em' }}>{l}</a>
          )}
        </nav>
        <PrimaryButton size="sm" onClick={onCTA}>Prendre RDV</PrimaryButton>
      </div>
    </header>);

}

// ============================================================
// VARIANT 1 — "Sereinement" (référence finance, dashboard flottant)
// ============================================================
function HeroV1({ accent = '#C9A961', onCTA }) {
  return (
    <div style={{
      position: 'relative',
      background: `radial-gradient(120% 80% at 90% 10%, ${accent}33 0%, transparent 50%),
                   radial-gradient(80% 60% at 10% 90%, #E8B86E22 0%, transparent 60%),
                   linear-gradient(180deg, #F4EEE2 0%, #EFE7D5 100%)`,
      padding: '120px 0 140px',
      overflow: 'hidden'
    }}>
      {/* Decorative numerals */}
      <div className="serif" style={{
        position: 'absolute', right: -40, top: 40,
        fontSize: 320, color: '#14223D08', lineHeight: 0.8, pointerEvents: 'none',
        userSelect: 'none'
      }}>2026</div>

      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 40, alignItems: 'center', position: 'relative' }}>
        <div>
          <Pill>Conseils et accompagnement</Pill>
          <h1 style={{
            fontSize: 'clamp(44px, 6vw, 84px)',
            fontWeight: 600,
            letterSpacing: '-0.035em',
            lineHeight: 0.98,
            margin: '24px 0 24px',
            color: '#14223D'
          }}>
            Gérez{' '}
            <span className="serif" style={{
              fontWeight: 400,
              color: '#A8884A',
              fontSize: '1.05em',
              display: 'inline-block'
            }}>sereinement</span>
            <br />
            votre entreprise.
          </h1>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: '#4A5878',
            maxWidth: 480, margin: '0 0 36px'
          }}>
            Accompagnement administratif, plan de trésorerie, conformité.<br />
            <span style={{ color: '#14223D', fontWeight: 500 }}>MLS Conseil simplifie le quotidien</span> des dirigeants, indépendants et TPE.
          </p>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <PrimaryButton size="lg" onClick={onCTA}>Prendre RDV gratuit</PrimaryButton>
            <GhostButton onClick={onCTA}>Être rappelé sous 24h</GhostButton>
          </div>

          {/* trust strip */}
          <div style={{ display: 'flex', gap: 28, marginTop: 56, paddingTop: 28, borderTop: '1px solid #1B2A4E14' }}>
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: '#14223D', letterSpacing: '-0.02em' }}>20+</div>
              <div style={{ fontSize: 12, color: '#4A5878', marginTop: 2 }}>dirigeants accompagnés</div>
            </div>
            <div style={{ width: 1, background: '#1B2A4E1F' }} />
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: '#14223D', letterSpacing: '-0.02em' }}>2 ans</div>
              <div style={{ fontSize: 12, color: '#4A5878', marginTop: 2 }}>d'expérience cabinet</div>
            </div>
            <div style={{ width: 1, background: '#1B2A4E1F' }} />
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: '#14223D', letterSpacing: '-0.02em', display: 'flex', alignItems: 'center', gap: 6 }}>
                4,8
                <svg 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: 12, color: '#4A5878', marginTop: 2 }}>note moyenne clients</div>
            </div>
          </div>
        </div>

        {/* Right: floating dashboard stack */}
        <div style={{ position: 'relative', minHeight: 520 }}>
          <div style={{ position: 'absolute', right: -30, top: 30, zIndex: 1 }}>
            <DashboardCard accent={accent} />
          </div>
          <div style={{ position: 'absolute', right: 60, bottom: -40, zIndex: 2 }}>
            <EcheanceCard accent={accent} />
          </div>
          {/* badge */}
          <div style={{
            position: 'absolute', left: -10, top: 80, zIndex: 3,
            background: '#FBF7EE', border: '1px solid #1B2A4E14',
            padding: '10px 14px', borderRadius: 14,
            display: 'flex', alignItems: 'center', gap: 10,
            boxShadow: '0 12px 24px -8px #14223d22', transform: 'rotate(-3deg)'
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: '#2F6B4F22', color: '#2F6B4F',
              display: 'grid', placeItems: 'center'
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: '#14223D' }}>Conformité 2026</div>
              <div style={{ fontSize: 10.5, color: '#4A5878', marginTop: 1 }}>Facturation électronique anticipée</div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ============================================================
// VARIANT 2 — "Contrôle" (centré éditorial, cartes sous le titre)
// ============================================================
function HeroV2({ accent = '#C9A961', onCTA }) {
  return (
    <div style={{
      position: 'relative',
      background: `linear-gradient(180deg, #FBF7EE 0%, #F4EEE2 100%)`,
      padding: '110px 0 100px',
      overflow: 'hidden',
      borderTop: '1px solid #1B2A4E14'
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px', textAlign: 'center', position: 'relative' }}>
        <Pill>Spécialiste micro-entreprises & TPE</Pill>
        <h1 style={{
          fontSize: 'clamp(48px, 7vw, 96px)',
          fontWeight: 600,
          letterSpacing: '-0.04em',
          lineHeight: 0.96,
          margin: '28px auto 28px',
          color: '#14223D',
          maxWidth: 950
        }}>
          Reprenez le{' '}
          <span style={{ position: 'relative', display: 'inline-block' }}>
            <span className="serif" style={{
              fontWeight: 400, color: '#A8884A', fontSize: '1.05em'
            }}>contrôle</span>
            <svg viewBox="0 0 200 14" preserveAspectRatio="none" style={{
              position: 'absolute', left: '-2%', bottom: -6, width: '104%', height: 14
            }}>
              <path d="M2 9 Q 60 2, 110 7 T 198 5" stroke={accent} strokeWidth="2.5" fill="none" strokeLinecap="round" />
            </svg>
          </span>
          {' '}de votre gestion.
        </h1>
        <p style={{
          fontSize: 19, lineHeight: 1.5, color: '#4A5878',
          maxWidth: 620, margin: '0 auto 40px'
        }}>
          De l'organisation administrative à la trésorerie prévisionnelle, un cabinet de proximité qui vous parle clairement.
        </p>
        <div style={{ display: 'flex', gap: 18, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
          <PrimaryButton size="lg" onClick={onCTA}>Prendre RDV gratuit</PrimaryButton>
          <GhostButton onClick={onCTA}>Être rappelé sous 24h</GhostButton>
        </div>

        {/* Mini dashboard row */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
          marginTop: 80,
          textAlign: 'left'
        }}>
          {[
          { kpi: '+ 84 600 €', label: 'Solde de trésorerie projeté · 12 mois', tag: 'TRÉSORERIE', tone: accent, chart: true },
          { kpi: '24 oct.', label: 'Prochaine échéance TVA suivie', tag: 'CONFORMITÉ', tone: '#14223D', chart: false },
          { kpi: '8 / 12', label: 'Documents administratifs structurés', tag: 'ADMINISTRATIF', tone: '#2F6B4F', chart: 'progress' }].
          map((c, i) =>
          <div key={i} style={{
            background: '#FBF7EE',
            border: '1px solid #1B2A4E14',
            borderRadius: 16, padding: 20,
            boxShadow: '0 4px 16px -6px #14223d10'
          }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: c.tone, marginBottom: 10 }}>{c.tag}</div>
              <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', color: '#14223D', marginBottom: 8 }}>{c.kpi}</div>
              <div style={{ fontSize: 13, color: '#4A5878', lineHeight: 1.45, minHeight: 38 }}>{c.label}</div>
              {c.chart === true &&
            <div style={{ marginTop: 12, marginLeft: -8, marginRight: -8 }}>
                  <TresorerieChart accent={accent} height={70} width={300} />
                </div>
            }
              {c.chart === 'progress' &&
            <div style={{ marginTop: 18 }}>
                  <div style={{ height: 6, background: '#1B2A4E14', borderRadius: 999, overflow: 'hidden' }}>
                    <div style={{ width: '66%', height: '100%', background: '#2F6B4F' }} />
                  </div>
                </div>
            }
              {c.chart === false &&
            <div style={{ marginTop: 18, display: 'flex', gap: 6 }}>
                  {[0, 1, 2, 3, 4, 5, 6].map((d) =>
              <div key={d} style={{
                flex: 1, height: 24, borderRadius: 4,
                background: d === 2 ? '#C9A961' : '#1B2A4E14',
                position: 'relative'
              }}>
                      {d === 2 && <div style={{ position: 'absolute', inset: '-2px', border: '1.5px solid #14223D', borderRadius: 5 }} />}
                    </div>
              )}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </div>);

}

// ============================================================
// VARIANT 3 — "Clarté" (asymétrique, photo placeholder + stat overlay)
// ============================================================
function HeroV3({ accent = '#C9A961', onCTA }) {
  return (
    <div style={{
      position: 'relative',
      background: '#14223D',
      color: '#F4EEE2',
      padding: '120px 0 140px',
      overflow: 'hidden'
    }}>
      {/* Soft glow */}
      <div style={{ position: 'absolute', right: '-10%', top: '-20%', width: '60%', height: '80%',
        background: `radial-gradient(circle, ${accent}1F 0%, transparent 60%)`, pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 60, alignItems: 'center', position: 'relative' }}>
        <div>
          <Pill dark icon={<span style={{ width: 6, height: 6, borderRadius: '50%', background: accent }} />}>Pour dirigeants & indépendants</Pill>
          <h1 style={{
            fontSize: 'clamp(44px, 6.4vw, 88px)',
            fontWeight: 500,
            letterSpacing: '-0.035em',
            lineHeight: 1.0,
            margin: '24px 0 28px',
            color: '#F4EEE2'
          }}>
            Pilotez avec{' '}
            <span className="serif" style={{
              color: accent, fontWeight: 400, fontSize: '1.05em'
            }}>clarté.</span>
            <br />
            Agissez avec confiance.
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.55, color: '#F4EEE2BB',
            maxWidth: 520, margin: '0 0 40px'
          }}>Un binôme de gestion qui maîtrise l'administratif, anticipe la trésorerie et sécurise votre conformité 

          </p>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <PrimaryButton light size="lg" onClick={onCTA}>Prendre RDV gratuit</PrimaryButton>
            <GhostButton light onClick={onCTA}>Être rappelé sous 24h</GhostButton>
          </div>
          {/* meta row */}
          <div style={{ display: 'flex', gap: 16, marginTop: 56, fontSize: 13, color: '#F4EEE299', flexWrap: 'wrap' }}>
            {['Sans engagement', 'Premier RDV offert'].map((t) =>
            <div key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke={accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                {t}
              </div>
            )}
          </div>
        </div>

        {/* Right: portrait placeholder + floating stat card */}
        <div style={{ position: 'relative', minHeight: 540 }}>
          <div style={{
            background: `linear-gradient(180deg, ${accent}AA 0%, #C46A5C 100%)`,
            borderRadius: 28,
            aspectRatio: '4/5',
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0 30px 60px -20px #00000077'
          }}>
            {/* Abstract figure placeholder */}
            <svg viewBox="0 0 400 500" style={{ width: '100%', height: '100%', display: 'block' }}>
              <defs>
                <linearGradient id="figG" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#14223D" stopOpacity="0.3" />
                  <stop offset="1" stopColor="#14223D" stopOpacity="0.7" />
                </linearGradient>
              </defs>
              {/* shoulders / body */}
              <path d="M 50 500 Q 50 360 200 340 Q 350 360 350 500 Z" fill="url(#figG)" />
              {/* head */}
              <circle cx="200" cy="240" r="78" fill="#14223D" opacity="0.55" />
              {/* light highlight */}
              <ellipse cx="160" cy="220" rx="22" ry="30" fill="#F4EEE2" opacity="0.18" />
              <text x="200" y="475" textAnchor="middle" fontFamily="Geist Mono, monospace"
              fontSize="11" fill="#F4EEE2" opacity="0.6" letterSpacing="0.16em">PORTRAIT — DIRIGEANT</text>
            </svg>
          </div>

          {/* Stat overlay — small dashboard */}
          <div style={{
            position: 'absolute', left: -40, bottom: 40,
            background: '#FBF7EE', color: '#14223D',
            borderRadius: 16, padding: 18,
            width: 260,
            boxShadow: '0 30px 50px -15px #00000088'
          }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: '#4A5878', textTransform: 'uppercase', marginBottom: 8 }}>TRÉSORERIE · CA TRIMESTRE</div>
            <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', display: 'flex', alignItems: 'baseline', gap: 8 }}>
              + 24 380 €
              <span style={{ fontSize: 11, color: '#2F6B4F', fontWeight: 500, letterSpacing: 0 }}>↑ vs T-1</span>
            </div>
            <div style={{ marginTop: 12, marginLeft: -6, marginRight: -6 }}>
              <TresorerieChart accent={accent} height={60} width={260} />
            </div>
          </div>

          {/* Top-right pill quote */}
          <div style={{
            position: 'absolute', right: -10, top: 30,
            background: '#F4EEE2', color: '#14223D',
            padding: '14px 16px', borderRadius: 16,
            width: 220,
            boxShadow: '0 20px 40px -12px #00000044',
            transform: 'rotate(2deg)'
          }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
              {[0, 1, 2, 3, 4].map((i) =>
              <svg key={i} width="11" height="11" 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 className="serif" style={{ fontSize: 15, lineHeight: 1.35, color: '#14223D' }}>
              « Enfin une vraie visibilité sur la trésorerie. »
            </div>
            <div style={{ fontSize: 11, color: '#4A5878', marginTop: 8 }}>Camille L. · Architecte indépendante</div>
          </div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { HeroV1, HeroV2, HeroV3, Nav, DashboardCard, EcheanceCard, TresorerieChart });