/* ============ D3 Final — composants enrichis ============ */

/* ----- Charts ----- */
const D3LineChart = ({ h = 100, accent }) =>
<svg width="100%" height={h} viewBox="0 0 320 100" preserveAspectRatio="none">
    <defs>
      <linearGradient id="d3grad" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor={accent || 'var(--accent)'} stopOpacity="0.35" />
        <stop offset="100%" stopColor={accent || 'var(--accent)'} stopOpacity="0" />
      </linearGradient>
    </defs>
    {[20, 40, 60, 80].map((y) => <line key={y} x1="0" x2="320" y1={y} y2={y} stroke="currentColor" strokeWidth="0.5" opacity="0.08" />)}
    <path d="M0 82 L 32 78 L 64 72 L 96 60 L 128 64 L 160 48 L 192 42 L 224 32 L 256 22 L 288 16 L 320 8 L 320 100 L 0 100 Z" fill="url(#d3grad)" />
    <path d="M0 82 L 32 78 L 64 72 L 96 60 L 128 64 L 160 48 L 192 42 L 224 32 L 256 22 L 288 16 L 320 8" stroke={accent || 'var(--accent)'} strokeWidth="2" fill="none" strokeLinecap="round" />
    <circle cx="320" cy="8" r="4" fill={accent || 'var(--accent)'} />
    <circle cx="320" cy="8" r="8" fill={accent || 'var(--accent)'} opacity="0.25">
      <animate attributeName="r" values="6;12;6" dur="2s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.4;0;0.4" dur="2s" repeatCount="indefinite" />
    </circle>
  </svg>;


const D3Bars = ({ h = 60, accent }) =>
<svg width="100%" height={h} viewBox="0 0 200 60" preserveAspectRatio="none">
    {[28, 42, 35, 55, 48, 62, 52, 70, 60, 78, 68, 85].map((v, i) =>
  <rect key={i} x={i * 16 + 4} y={60 - v * 0.55} width={9} height={v * 0.55}
  fill={i === 11 ? accent || 'var(--accent)' : 'currentColor'}
  opacity={i === 11 ? 1 : 0.25} rx="2" />
  )}
  </svg>;


const D3Spark = ({ accent }) =>
<svg width="60" height="20" viewBox="0 0 60 20">
    <path d="M0 14 L 8 12 L 16 9 L 24 11 L 32 6 L 40 8 L 48 4 L 60 1"
  stroke={accent || 'var(--accent)'} strokeWidth="1.5" fill="none" strokeLinecap="round" />
  </svg>;


/* ----- Logo ----- */
const D3Logo = ({ small }) =>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <div style={{
    width: small ? 24 : 30, height: small ? 24 : 30, borderRadius: 8,
    background: 'linear-gradient(135deg, var(--accent) 0%, oklch(0.65 0.2 240) 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontWeight: 800, fontSize: small ? 13 : 16, color: '#fff',
    letterSpacing: '-0.05em',
    boxShadow: '0 4px 12px oklch(0.55 0.22 280 / 0.3)'
  }}>7</div>
    <div style={{ fontWeight: 700, fontSize: small ? 15 : 17, letterSpacing: '-0.02em' }}>MEDIAS</div>
  </div>;


/* ----- Floating mini-card ----- */
const FloatCard = ({ animClass, style, children }) =>
<div className={"tcard " + (animClass || '')} style={{
  padding: 14, boxShadow: '0 20px 40px rgba(0,0,0,0.08)',
  background: 'rgba(255,255,255,0.85)',
  ...style
}}>{children}</div>;


/* ============ NAV ============ */
const D3Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav-sticky" + (scrolled ? ' scrolled' : '')}>
      <div className="row between center" style={{ padding: '16px 32px', maxWidth: 1280, margin: '0 auto' }}>
        <D3Logo />
        <div className="row" style={{ gap: 4, padding: 4, background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(8px)', borderRadius: 999, border: '1px solid var(--border)' }}>
          {['Méthode', 'Cas clients', 'Résultats', 'Ressources', 'FAQ'].map((l, i) =>
          <a key={i} href="#" style={{ padding: '8px 14px', fontSize: 13, color: 'var(--text-2)', textDecoration: 'none', borderRadius: 999 }}>{l}</a>
          )}
        </div>
        <div className="row center" style={{ gap: 10 }}>
          <a href="#" style={{ fontSize: 13, color: 'var(--text-2)', textDecoration: 'none' }}>
</a>
          <button className="tbtn tbtn-primary">Réserver un appel <span>→</span></button>
        </div>
      </div>
    </nav>);
};

/* ============ HERO ============ */
const D3Hero = () =>
<section style={{ padding: '80px 32px 100px', position: 'relative' }}>
    <div className="col center text-c" style={{ gap: 28, maxWidth: 920, margin: '0 auto', position: 'relative', zIndex: 3 }}>
      <span className="tag tag-dot">Agence de growth marketing</span>
      <h1 style={{ fontSize: 96, lineHeight: 0.98, letterSpacing: '-0.045em', fontWeight: 500, margin: 0 }}>
        Scale ton business<br />
        avec une <span className="serif" style={{ fontWeight: 400 }}>stratégie</span><br />
        simple & <span className="shine">efficace</span>.
      </h1>
      <p style={{ fontSize: 19, color: 'var(--text-2)', maxWidth: 600, lineHeight: 1.5, margin: 0 }}>
        Pour entrepreneurs, freelances et infopreneurs.<br />
        Pas de blabla — on installe le système qui fait passer ton business à la vitesse supérieure.
      </p>
      <div className="row center" style={{ gap: 12, marginTop: 8 }}>
        <button className="tbtn tbtn-primary tbtn-lg">Réserver un appel <span>→</span></button>
        <button className="tbtn tbtn-ghost tbtn-lg">Voir la méthode</button>
      </div>
      <div className="row center" style={{ gap: 24, marginTop: 12, fontSize: 13, color: 'var(--text-3)' }}>
        <span className="row center" style={{ gap: 6 }}>
          <span style={{ color: 'var(--accent)' }}>★★★★★</span> 4,9/5
        </span>
        <span>·</span>
        <span>+120 entrepreneurs accompagnés</span>
        <span>·</span>
        <span>1er appel gratuit</span>
      </div>
    </div>

    {/* Floating cards */}
    <FloatCard animClass="float-1" style={{ position: 'absolute', top: 120, left: 60, width: 220 }}>
      <div className="row between">
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>MRR · live</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>+24%</span>
      </div>
      <div style={{ fontSize: 30, fontWeight: 600, marginTop: 4, letterSpacing: '-0.02em' }}>€18,4k</div>
      <D3LineChart h={48} />
    </FloatCard>

    <FloatCard animClass="float-2" style={{ position: 'absolute', top: 280, right: 70, width: 200 }}>
      <div className="row between">
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase' }}>Leads · 90j</span>
        <span style={{ fontSize: 11, color: 'var(--accent)' }}>+212%</span>
      </div>
      <div style={{ fontSize: 30, fontWeight: 600, marginTop: 4, letterSpacing: '-0.02em' }}>342</div>
      <D3Bars h={42} />
    </FloatCard>

    <FloatCard animClass="float-3" style={{ position: 'absolute', top: 480, left: 110, padding: 12 }}>
      <div className="row" style={{ gap: 10, alignItems: 'center' }}>
        <div style={{ width: 32, height: 32, borderRadius: 16, background: 'linear-gradient(135deg, var(--accent-soft), oklch(0.92 0.08 200))' }} />
        <div>
          <div style={{ fontSize: 12, fontWeight: 600 }}>Coach Business · cas #03</div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>★★★★★ · 6 mois</div>
        </div>
      </div>
    </FloatCard>

    <FloatCard animClass="float-2" style={{ position: 'absolute', top: 460, right: 100, padding: 14, width: 180 }}>
      <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase' }}>NPS · score</div>
      <div className="row" style={{ alignItems: 'baseline', gap: 6, marginTop: 4 }}>
        <div style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.02em' }}>72</div>
        <D3Spark />
      </div>
    </FloatCard>

    {/* scroll indicator */}
    <div className="col center scroll-ind" style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', gap: 8, color: 'var(--text-3)' }}>
      <span className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>scroll</span>
      <span style={{ fontSize: 16 }}>↓</span>
    </div>
  </section>;


/* ============ LOGOS marquee ============ */
const D3Logos = () => {
  const logos = ['acme.io', 'lumen.studio', 'atlas/co', 'voyage.fm', 'kapsule', 'northbound', 'dial.app', 'echelon'];
  const all = [...logos, ...logos];
  return (
    <section style={{ padding: '40px 0 60px' }}>
      <div className="col center" style={{ gap: 24 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
          Plus de 120 entrepreneurs ont scalé avec 7MEDIAS
        </span>
        <div style={{ width: '100%', overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)' }}>
          <div className="marquee">
            {all.map((l, i) =>
            <div key={i} className="row center" style={{ gap: 8, fontSize: 18, fontWeight: 600, color: 'var(--text-2)', letterSpacing: '-0.02em', opacity: 0.65, flexShrink: 0 }}>
                <div style={{ width: 18, height: 18, borderRadius: 5, background: 'currentColor', opacity: 0.5 }} />
                {l}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

/* ============ PROCESS ============ */
const D3Process = () =>
<section style={{ padding: '100px 32px', position: 'relative' }}>
    <div className="col center text-c" style={{ gap: 16, marginBottom: 64 }}>
      <span className="tag tag-dot">02 · méthode</span>
      <h2 style={{ fontSize: 64, fontWeight: 500, letterSpacing: '-0.035em', margin: 0, lineHeight: 1.05 }}>
        3 étapes. <span className="serif" style={{ fontWeight: 400 }}>Pas une de plus.</span>
      </h2>
      <p style={{ fontSize: 17, color: 'var(--text-2)', maxWidth: 580, margin: 0 }}>
        De l'audit aux premiers résultats : un parcours cadré, mesurable, sans détour.
      </p>
    </div>

    <div className="row" style={{ gap: 16, maxWidth: 1180, margin: '0 auto', position: 'relative' }}>
      {/* connector line */}
      <div style={{ position: 'absolute', top: 70, left: '16%', right: '16%', height: 1, background: 'linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent)', opacity: 0.4, zIndex: 0 }} />

      {[
    { n: '01', t: 'Audit Express', d: '90 minutes de diagnostic complet. On scanne tes offres, ton acquisition, tes tunnels, tes automatisations. Tout passe au crible.', m: 'Jour 1', deliv: ['Scan complet du business', 'Identification des goulots', '3 leviers prioritaires'] },
    { n: '02', t: "Plan d'action", d: 'Une page, un plan. Positionnement, offres, acquisition, automatisations — cadré, mesurable, scalable. Pas un PDF de 80 slides.', m: 'Semaine 1', deliv: ['Stratégie sur une page', 'Roadmap 90 jours', 'KPIs définis'] },
    { n: '03', t: 'Exécution', d: 'On installe avec toi. Tunnels, contenus, séquences, dashboard tracking. On reste jusqu\'aux premiers résultats concrets.', m: 'Semaine 2 → 12', deliv: ['Système installé', 'Automations en place', 'Dashboard live'] }].
    map((s, i) =>
    <div key={i} className="tcard tcard-hover" style={{ flex: 1, padding: 32, position: 'relative', zIndex: 1 }}>
          <div className="row between center" style={{ marginBottom: 24 }}>
            <div style={{
          width: 52, height: 52, borderRadius: 16,
          background: 'linear-gradient(135deg, var(--accent) 0%, oklch(0.65 0.2 240) 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontFamily: 'Geist Mono', fontWeight: 600, fontSize: 14,
          boxShadow: '0 6px 16px oklch(0.55 0.22 280 / 0.3)'
        }}>{s.n}</div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.m}</span>
          </div>
          <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 12 }}>{s.t}</div>
          <p style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.6, margin: '0 0 20px' }}>{s.d}</p>
          <div className="col" style={{ gap: 8, paddingTop: 16, borderTop: '1px dashed var(--border)' }}>
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>Livrables</span>
            {s.deliv.map((d, j) =>
        <div key={j} className="row" style={{ gap: 8, fontSize: 13, color: 'var(--text-2)', alignItems: 'center' }}>
                <span style={{ color: 'var(--accent)', fontWeight: 600 }}>✓</span>
                {d}
              </div>
        )}
          </div>
        </div>
    )}
    </div>
  </section>;


/* ============ VERTICALS ============ */
const D3Verticals = () =>
<section style={{ padding: '100px 32px' }}>
    <div className="row between" style={{ maxWidth: 1180, margin: '0 auto 48px', alignItems: 'flex-end' }}>
      <div>
        <span className="tag tag-dot">03 · cas d'usage</span>
        <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.035em', margin: '20px 0 12px', lineHeight: 1.05 }}>
          Une méthode. <span className="serif" style={{ fontWeight: 400 }}>Six</span> verticales.
        </h2>
        <p style={{ fontSize: 16, color: 'var(--text-2)', margin: 0, maxWidth: 480 }}>
          La méthode est sectoriellement agnostique. Voici comment elle s'applique selon ton terrain de jeu.
        </p>
      </div>
      <a href="#" className="row center" style={{ gap: 6, fontSize: 14, color: 'var(--accent)', textDecoration: 'none', fontWeight: 500 }}>
        Voir tous les cas →
      </a>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, maxWidth: 1180, margin: '0 auto' }}>
      {[
    { tag: 'Coaching', t: 'Coachs & consultants', m: '+212%', l: 'leads qualifiés / 90j', d: 'Refonte offre core, ouverture LinkedIn, automation discovery.', case: 'cas #03' },
    { tag: 'Infoproduit', t: 'Infopreneurs', m: 'x4', l: 'tunnel evergreen', d: 'Restructuration du funnel, séquences email, paid acquisition.', case: 'cas #07' },
    { tag: 'Agence', t: 'Freelances & agences', m: 'x2', l: 'MRR / 6 mois', d: 'Productisation des offres, retainers, automation onboarding.', case: 'cas #11' },
    { tag: 'E-commerce', t: 'Marques DTC', m: '-38%', l: 'CAC organique', d: 'Stratégie contenu organique, retention loops, upsells.', case: 'cas #15' },
    { tag: 'SaaS', t: 'Founders early-stage', m: '€100k', l: 'ARR en 4 mois', d: 'Positionnement, ICP serré, sales-led growth, motion outbound.', case: 'cas #18' },
    { tag: 'Local', t: 'Services locaux', m: '30j', l: 'pipeline plein', d: 'Lead magnets locaux, SEO local, séquences nurture.', case: 'cas #22' }].
    map((c, i) =>
    <div key={i} className="tcard tcard-hover" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="row between center">
            <span className="tag">{c.tag}</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase' }}>{c.case}</span>
          </div>
          <div>
            <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>{c.t}</div>
            <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5, margin: 0 }}>{c.d}</p>
          </div>
          <div style={{ paddingTop: 16, borderTop: '1px dashed var(--border)' }}>
            <div className="row" style={{ gap: 10, alignItems: 'baseline' }}>
              <div style={{ fontSize: 44, fontWeight: 500, letterSpacing: '-0.04em', color: 'var(--accent)', lineHeight: 1 }}>{c.m}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase' }}>{c.l}</div>
            </div>
          </div>
        </div>
    )}
    </div>
  </section>;


/* ============ STATS ============ */
const D3Stats = () =>
<section style={{ padding: '60px 32px' }}>
    <div className="tcard" style={{ padding: '48px 56px', maxWidth: 1180, margin: '0 auto', background: 'linear-gradient(135deg, var(--text) 0%, oklch(0.2 0.05 280) 100%)', color: '#fff', borderRadius: 28, border: 'none', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -100, right: -100, width: 400, height: 400, background: 'radial-gradient(circle, oklch(0.55 0.22 280 / 0.4), transparent 70%)', filter: 'blur(40px)' }} />
      <div className="row between" style={{ alignItems: 'center', flexWrap: 'wrap', gap: 24, position: 'relative', zIndex: 2 }}>
        {[
      { v: '+120', l: 'entrepreneurs accompagnés' },
      { v: '6,2×', l: 'ROI moyen sur la méthode' },
      { v: '90j', l: 'avant les 1ers résultats' },
      { v: '4,9/5', l: 'satisfaction · 120 avis' }].
      map((s, i, a) =>
      <div key={i} className="col" style={{ flex: 1, gap: 8, paddingRight: i < a.length - 1 ? 24 : 0, borderRight: i < a.length - 1 ? '1px solid rgba(255,255,255,0.12)' : 'none' }}>
            <div style={{ fontSize: 64, fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 1, background: 'linear-gradient(135deg, #fff 0%, oklch(0.85 0.1 280) 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>{s.v}</div>
            <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.l}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


/* ============ TESTIMONIALS ============ */
const D3Testimonials = () =>
<section style={{ padding: '100px 32px' }}>
    <div className="col center text-c" style={{ gap: 16, marginBottom: 56 }}>
      <span className="tag tag-dot">04 · témoignages</span>
      <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.035em', margin: 0, lineHeight: 1.05 }}>
        Des résultats, <span className="serif" style={{ fontWeight: 400 }}>pas</span> des promesses.
      </h2>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, maxWidth: 1180, margin: '0 auto' }}>
      {[
    { q: "On a installé en 6 semaines ce que je tentais de monter depuis 18 mois. Chirurgical, pas un mot de trop.", a: 'Léa M.', r: 'Coach business · Paris', m: '+212%', ml: 'leads / 90j' },
    { q: "Premier 100k ARR en 4 mois après le passage en mode 7MEDIAS. Le système tient et tourne sans moi.", a: 'Karim D.', r: 'Founder SaaS · Lisbonne', m: '€100k', ml: 'ARR / 4 mois' },
    { q: "Mon CAC a chuté de 38% en 3 mois. Le dashboard m'a montré exactement où j'avais des fuites.", a: 'Sophie R.', r: 'Marque DTC · Lyon', m: '-38%', ml: 'CAC' }].
    map((t, i) =>
    <div key={i} className="tcard tcard-hover" style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div className="row between center">
            <div style={{ color: 'var(--accent)', fontSize: 14 }}>★★★★★</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase' }}>cas #{(i + 3).toString().padStart(2, '0')}</div>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.5, margin: 0, flex: 1 }}>« {t.q} »</p>
          <div className="row between center" style={{ paddingTop: 20, borderTop: '1px solid var(--border)' }}>
            <div className="row center" style={{ gap: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: 'linear-gradient(135deg, var(--accent-soft), oklch(0.9 0.08 200))', flexShrink: 0 }} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{t.a}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>{t.r}</div>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--accent)', letterSpacing: '-0.02em' }}>{t.m}</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--text-3)', textTransform: 'uppercase' }}>{t.ml}</div>
            </div>
          </div>
        </div>
    )}
    </div>
  </section>;


/* ============ RESOURCES ============ */
const D3Resources = () =>
<section style={{ padding: '60px 32px 100px' }}>
    <div className="row between" style={{ maxWidth: 1180, margin: '0 auto 32px', alignItems: 'flex-end' }}>
      <div>
        <span className="tag tag-dot">05 · ressources</span>
        <h2 style={{ fontSize: 44, fontWeight: 500, letterSpacing: '-0.035em', margin: '20px 0 12px' }}>À lire avant l'appel.</h2>
        <p style={{ fontSize: 15, color: 'var(--text-2)', margin: 0 }}>Notre journal de bord stratégique, mis à jour chaque semaine.</p>
      </div>
      <a href="#" style={{ fontSize: 14, color: 'var(--accent)', textDecoration: 'none', fontWeight: 500 }}>Tous les articles →</a>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, maxWidth: 1180, margin: '0 auto' }}>
      {[
    { tag: 'Méthode', t: 'Le système des 90 jours : du diagnostic aux 1ers résultats', d: '5 min', date: '24 avr 26', grad: '135deg, oklch(0.92 0.10 280), oklch(0.92 0.08 200)' },
    { tag: 'Stratégie', t: 'La règle des 3 offres : pourquoi tu en as une de trop (et une qui te manque)', d: '7 min', date: '18 avr 26', grad: '135deg, oklch(0.92 0.08 200), oklch(0.92 0.10 50)' },
    { tag: 'Acquisition', t: 'Acquisition organique : pourquoi c\'est un mythe à 80%', d: '4 min', date: '11 avr 26', grad: '135deg, oklch(0.92 0.10 50), oklch(0.92 0.10 280)' }].
    map((a, i) =>
    <article key={i} className="tcard tcard-hover" style={{ overflow: 'hidden', padding: 0 }}>
          <div style={{ height: 180, background: `linear-gradient(${a.grad})`, position: 'relative' }}>
            <div style={{ position: 'absolute', bottom: 14, left: 14, fontFamily: 'Geist Mono', fontSize: 10, color: 'var(--text-2)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              7M / journal · #{String(i + 12).padStart(3, '0')}
            </div>
          </div>
          <div className="col" style={{ padding: 24, gap: 12 }}>
            <div className="row between center">
              <span className="tag">{a.tag}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{a.date}</span>
            </div>
            <h3 style={{ fontSize: 18, fontWeight: 600, lineHeight: 1.3, margin: 0, letterSpacing: '-0.01em' }}>{a.t}</h3>
            <div className="row between center" style={{ marginTop: 4 }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{a.d} · lecture</span>
              <span style={{ fontSize: 14, color: 'var(--accent)' }}>→</span>
            </div>
          </div>
        </article>
    )}
    </div>
  </section>;


/* ============ FAQ ============ */
const D3FAQ = () =>
<section style={{ padding: '0 32px 80px' }}>
    <div className="tcard" style={{ padding: 56, maxWidth: 1180, margin: '0 auto' }}>
      <div className="row" style={{ gap: 80, alignItems: 'flex-start' }}>
        <div style={{ flex: '0 0 320px' }}>
          <span className="tag tag-dot">06 · FAQ</span>
          <h2 style={{ fontSize: 44, fontWeight: 500, letterSpacing: '-0.035em', margin: '20px 0 16px', lineHeight: 1.05 }}>
            Questions <span className="serif" style={{ fontWeight: 400 }}>fréquentes</span>
          </h2>
          <p style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 20 }}>
            Tu n'as pas trouvé ta réponse ? Réserve un appel de 30 minutes, on en parle.
          </p>
          <button className="tbtn" style={{ background: 'transparent' }}>Nous contacter <span>→</span></button>
        </div>
        <div style={{ flex: 1 }}>
          {[
        ["C'est pour qui exactement ?", "Pour les entrepreneurs, freelances et infopreneurs entre 0 et 1M€ qui veulent passer un cap structurel. Tu as une offre qui marche déjà mais tu plafonnes ? C'est exactement notre terrain de jeu."],
        ["Combien de temps avant les premiers résultats ?", "Les premiers résultats apparaissent sous 90 jours. Le système est complètement installé en 6 à 12 semaines selon ton point de départ et ta capacité d'exécution."],
        ["Quel est l'investissement ?", "On en parle pendant l'appel — la méthode démarre à un budget accessible aux solos, et s'adapte à ton volume d'affaires. Pas de surprise, tout est cadré dès le 1er échange."],
        ["Est-ce que ça marche dans ma niche ?", "On a accompagné 6 verticales très différentes : coaching, infoproduit, agence, e-commerce, SaaS, services locaux. La méthode est sectoriellement agnostique — c'est le système qui scale, pas la niche."],
        ["Comment se passe l'onboarding ?", "Audit jour 1, plan semaine 1, kickoff exécution semaine 2. Tout est cadré dès le départ, avec un planning de 90 jours et des points hebdo. Pas de zone grise."],
        ["Et si ça ne marche pas ?", "On sécurise un cadre avec des KPIs précis dès l'audit. Si à 90 jours les objectifs ne sont pas atteints, on continue à exécuter sans frais additionnels jusqu'à les atteindre."]].
        map(([q, a], i) =>
        <details key={i} style={{ borderTop: i === 0 ? '1px solid var(--border)' : 'none', borderBottom: '1px solid var(--border)' }}>
              <summary style={{ padding: '20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 16, fontWeight: 500 }}>{q}</span>
                <span className="faq-plus" style={{ color: 'var(--accent)', fontSize: 22, lineHeight: 1, marginLeft: 16 }}>+</span>
              </summary>
              <p style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.6, margin: '0 0 20px', maxWidth: 580 }}>{a}</p>
            </details>
        )}
        </div>
      </div>
    </div>
  </section>;


/* ============ CTA ============ */
const D3CTA = () =>
<section style={{ padding: '0 32px 80px' }}>
    <div style={{
    padding: '96px 48px', maxWidth: 1180, margin: '0 auto',
    background: 'linear-gradient(135deg, var(--accent-soft) 0%, oklch(0.92 0.08 200) 50%, oklch(0.92 0.08 50) 100%)',
    borderRadius: 32, textAlign: 'center', position: 'relative', overflow: 'hidden',
    border: '1px solid var(--border)'
  }}>
      <div style={{ position: 'absolute', top: -100, left: -100, width: 400, height: 400, background: 'radial-gradient(circle, oklch(0.55 0.22 280 / 0.2), transparent 70%)', filter: 'blur(40px)' }} />
      <div style={{ position: 'absolute', bottom: -100, right: -100, width: 400, height: 400, background: 'radial-gradient(circle, oklch(0.55 0.22 200 / 0.2), transparent 70%)', filter: 'blur(40px)' }} />
      <div className="col center" style={{ gap: 24, position: 'relative', zIndex: 2 }}>
        <span className="tag tag-dot">prochaine étape</span>
        <h2 style={{ fontSize: 84, fontWeight: 500, letterSpacing: '-0.045em', margin: 0, lineHeight: 1, maxWidth: 800 }}>
          Prêt à <span className="serif" style={{ fontWeight: 400 }}>scaler</span> ?
        </h2>
        <p style={{ fontSize: 18, color: 'var(--text-2)', margin: 0, maxWidth: 540 }}>
          30 minutes pour comprendre où tu en es et ce qui peut bouger.<br />
          Gratuit, sans engagement, sans pitch déguisé.
        </p>
        <div className="row center" style={{ gap: 12, marginTop: 8 }}>
          <button className="tbtn tbtn-primary tbtn-lg">Réserver mon appel <span>→</span></button>
          <button className="tbtn tbtn-ghost tbtn-lg">Nous écrire</button>
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 8 }}>
          ↳ prochain créneau dispo · cette semaine
        </div>
      </div>
    </div>
  </section>;


/* ============ FOOTER ============ */
const D3Footer = () =>
<footer style={{ borderTop: '1px solid var(--border)', padding: '48px 32px 32px', background: 'rgba(255,255,255,0.4)', backdropFilter: 'blur(8px)' }}>
    <div className="row between" style={{ maxWidth: 1180, margin: '0 auto', alignItems: 'flex-start', gap: 40, flexWrap: 'wrap' }}>
      <div className="col" style={{ gap: 16, maxWidth: 320 }}>
        <D3Logo />
        <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5, margin: 0 }}>
          Scale ton business avec une stratégie simple & efficace. Pas de blabla.
        </p>
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Paris ⇄ Lisbonne · 2026</span>
      </div>
      {[
    { t: 'Produit', l: ['Méthode', 'Cas clients', 'Résultats', 'Tarifs'] },
    { t: 'Ressources', l: ['Journal', 'Guides', 'Newsletter', 'Podcast'] },
    { t: 'Société', l: ['À propos', 'Équipe', 'Contact', 'Carrières'] }].
    map((c, i) =>
    <div key={i} className="col" style={{ gap: 10 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>{c.t}</span>
          {c.l.map((l, j) =>
      <a key={j} href="#" style={{ fontSize: 13, color: 'var(--text)', textDecoration: 'none' }}>{l}</a>
      )}
        </div>
    )}
    </div>
    <div className="row between" style={{ maxWidth: 1180, margin: '40px auto 0', paddingTop: 24, borderTop: '1px solid var(--border)', fontSize: 11, color: 'var(--text-3)', fontFamily: 'Geist Mono', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
      <span>© 2026 7MEDIAS · v7.1.2</span>
      <div className="row" style={{ gap: 24 }}>
        <a href="#" style={{ color: 'inherit' }}>Mentions légales</a>
        <a href="#" style={{ color: 'inherit' }}>Confidentialité</a>
        <a href="#" style={{ color: 'inherit' }}>CGU</a>
      </div>
    </div>
  </footer>;


/* ============ APP ============ */
const D3FinalApp = () =>
<div className="d3-final">
    <div className="mesh-bg" />
    <div className="grain" />
    <D3Nav />
    <main>
      <D3Hero />
      <D3Logos />
      <D3Process />
      <D3Verticals />
      <D3Stats />
      <D3Testimonials />
      <D3Resources />
      <D3FAQ />
      <D3CTA />
      <D3Footer />
    </main>
  </div>;


window.D3FinalApp = D3FinalApp;