// js/sections-desktop.jsx — Desktop sections for Equilys site

function NavBar({ current = 'accueil' }) {
  return (
    <nav className="eq-navbar" style={{
      position: 'sticky', top: 0, zIndex: 5,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 64px', background: 'var(--eq-bg)',
      borderBottom: '1px solid var(--eq-line-soft)',
      backdropFilter: 'blur(8px)'
    }}>
      <a href="index.html" style={{
        display: 'inline-flex', alignItems: 'center', gap: 14,
        padding: '6px 22px 6px 8px',
        background: '#F4EFE2',
        border: '1px solid rgba(244,239,226,0.5)',
        borderRadius: 999,
        boxShadow: '0 12px 30px -14px rgba(0,0,0,0.45)',
        textDecoration: 'none'
      }}>
        <LogoMark size={48} />
        <span style={{
          fontFamily: 'var(--eq-font-display)', fontSize: 20, letterSpacing: '0.32em',
          textTransform: 'uppercase', fontWeight: 500, color: '#2A3D4D'
        }}>Equilys</span>
      </a>
      <div className="eq-nav-links" style={{ display: 'flex', gap: 36 }}>
        <NavLink href="index.html" active={current === 'accueil'}>Accueil</NavLink>
        <NavLink href="index.html#presentation" active={current === 'presentation'}>Présentation</NavLink>
        <NavLink href="index.html#methode" active={current === 'methode'}>Méthode</NavLink>
        <NavLink href="index.html#accompagnements" active={current === 'accompagnements'}>Accompagnements</NavLink>
        <NavLink href="index.html#contact" active={current === 'contact'}>Contact</NavLink>
      </div>
      <a href="index.html#contact" className="eq-nav-cta" style={{ textDecoration: 'none' }}>
        <Button size="sm" variant="ghost" icon={<Arrow />}>Prendre rendez-vous</Button>
      </a>    </nav>);

}

// ── HERO · variant "Ensō animé" ────────────────────────────────────────────
function HeroEnso({ logoSize = 580 }) {
  return (
    <section style={{
      position: 'relative', padding: '120px 64px 140px',
      overflow: 'hidden', minHeight: 720
    }}>
      {/* corner ornaments */}
      <div style={{ position: 'absolute', top: 40, left: 0, color: 'var(--eq-gold)' }}>
        <CircuitOrnament width={280} height={280} color="var(--eq-gold)" opacity={0.35} />
      </div>
      <div style={{ position: 'absolute', bottom: 'var(--eq-smoke-d-hero, -40px)', right: -40, color: 'var(--eq-ink-soft)', lineHeight: "2.6", width: "459px", height: "409px", fontSize: "93px" }}>
        <BrushSplash width={420} height={420} color="var(--eq-ink-soft)" opacity={0.12} />
      </div>

      <div style={{
        position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 80, alignItems: 'center', maxWidth: 1280, margin: '0 auto'
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <Eyebrow>Coaching · Magnétisme · Patrimoine</Eyebrow>
          <h1 style={{
            margin: 0, fontFamily: 'var(--eq-font-display)',
            fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
            fontSize: 76, lineHeight: 1.02, color: 'var(--eq-ink)',
            textTransform: 'var(--eq-display-case)', textWrap: 'balance'
          }}>
            Cultiver l’équilibre,<br />
            <span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>incarner</span> la maîtrise.
          </h1>
          <p style={{ margin: 0, fontSize: 17, lineHeight: 1.65, color: 'var(--eq-ink-soft)',
            maxWidth: 480 }}>Un accompagnement qui réunit le geste martial, le souffle, l’énergie et la stratégie patrimoniale — pour aligner votre vie intérieure et vos actions du quotidien.


          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 12 }}>
            <a href="programme.html" style={{ textDecoration: 'none' }}>
              <Button variant="primary" size="lg" icon={<Arrow color="var(--eq-bg)" />}>
                Découvrir l’accompagnement
              </Button>
            </a>
            <a href="index.html#contact" onClick={(e) => {
              const el = document.getElementById('contact');
              if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
            }} style={{ textDecoration: 'none' }}>
              <Button variant="ghost" size="lg">Réserver un appel</Button>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 28, marginTop: 28, paddingTop: 28,
            borderTop: '1px solid var(--eq-line)' }}>
            <Stat value="12" label="semaines d’accompagnement" sub="Programme phare" />
            <Stat value="5" label="disciplines unifiées" sub="Méthode Equilys" />
            <Stat value="1" label="suivi sur mesure" sub="Cadre confidentiel" />
          </div>
        </div>

        {/* Logo Equilys — ses propres pointillés tournent lentement sur le hero */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center',
          position: 'relative', width: logoSize, height: logoSize, margin: '0 auto' }}>
          <LogoMark size={logoSize} spinning
          style={{ animation: 'eq-fade-in 1.4s ease-out both, eq-logo-spin var(--eq-logo-spin-dur, 120s) linear infinite' }} />
        </div>
      </div>

      {/* pillar strip at bottom */}
      <div style={{
        position: 'relative', maxWidth: 1280, margin: '80px auto 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 28, borderTop: '1px solid var(--eq-line)',
        fontFamily: 'var(--eq-font-mono)', fontSize: 11, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: 'var(--eq-ink-soft)'
      }}>
        <span>Alignement</span>
        <span style={{ color: 'var(--eq-gold)' }}>·</span>
        <span>Équilibre</span>
        <span style={{ color: 'var(--eq-gold)' }}>·</span>
        <span>Performance</span>
        <span style={{ color: 'var(--eq-gold)' }}>·</span>
        <span>Patrimoine</span>
      </div>

      <style>{`
        @keyframes eq-rotate { to { transform: translate(-50%,-50%) rotate(360deg); } }
        @keyframes eq-rotate-rev { to { transform: translate(-50%,-50%) rotate(-360deg); } }
        @keyframes eq-logo-spin { to { transform: rotate(360deg); } }
      `}</style>
    </section>);

}

// ── HERO · variant "Éditorial typo XL" ─────────────────────────────────────
function HeroEditorial() {
  return (
    <section style={{ position: 'relative', padding: '120px 64px 100px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 60, right: 40, opacity: 0.5 }}>
        <Enso size={220} color="var(--eq-ink)" accent="var(--eq-gold)" strokeW={1.6} />
      </div>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <Eyebrow style={{ marginBottom: 36 }}>Equilys · Tanguy Tillant-Michaud</Eyebrow>
        <h1 style={{
          margin: 0, fontFamily: 'var(--eq-font-display)',
          fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
          fontSize: 132, lineHeight: 0.94, color: 'var(--eq-ink)',
          textTransform: 'var(--eq-display-case)'
        }}>
          Cultiver<br />
          l’<span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>équilibre</span>,<br />
          incarner la maîtrise.
        </h1>
        <div style={{ display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-end', marginTop: 60, gap: 60 }}>
          <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: 'var(--eq-ink-soft)',
            maxWidth: 460 }}>
            Magnétisme, PNL, Qi Gong, Wing Chun, gestion de patrimoine —
            réunis dans un même cadre pour que vos décisions, votre corps et
            votre énergie marchent dans la même direction.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Button variant="gold" size="lg" icon={<Arrow color="var(--eq-ink-on-gold)" />}>
              Programme 12 semaines
            </Button>
            <Button variant="link">Voir la méthode</Button>
          </div>
        </div>
      </div>
    </section>);

}

// ── HERO · variant "Manifeste / colonne" ───────────────────────────────────
function HeroManifesto() {
  return (
    <section style={{ position: 'relative', padding: '110px 64px 110px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', alignItems: 'center', opacity: 0.25 }}>
        <VerticalAxis height={520} color="var(--eq-ink)" accent="var(--eq-gold)" points={9} />
      </div>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1fr auto 1fr', gap: 60, alignItems: 'center',
        position: 'relative' }}>
        <div style={{ textAlign: 'right' }}>
          <Eyebrow style={{ justifyContent: 'flex-end' }}>Le corps</Eyebrow>
          <h2 style={{ margin: '16px 0 8px', fontFamily: 'var(--eq-font-display)',
            fontSize: 56, lineHeight: 1, color: 'var(--eq-ink)',
            fontWeight: 'var(--eq-display-weight)',
            textTransform: 'var(--eq-display-case)' }}>
            Wing Chun.<br />Qi Gong.
          </h2>
          <p style={{ margin: 0, fontSize: 14.5, color: 'var(--eq-ink-soft)', lineHeight: 1.65 }}>
            Le geste qui structure, le souffle qui régule.
          </p>
        </div>
        <div style={{ width: 280, textAlign: 'center', display: 'flex',
          flexDirection: 'column', alignItems: 'center', gap: 18 }}>
          <LogoMark size={200} style={{ animation: 'eq-fade-in 1.4s ease-out both' }} />
          <GoldRule width={180} />
          <h1 style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 28,
            fontStyle: 'italic', color: 'var(--eq-ink)', fontWeight: 400,
            letterSpacing: '0.02em' }}>
            Équilibre.
          </h1>
          <Button variant="primary" size="md" icon={<Arrow color="var(--eq-bg)" />}>
            Commencer
          </Button>
        </div>
        <div>
          <Eyebrow>L’esprit</Eyebrow>
          <h2 style={{ margin: '16px 0 8px', fontFamily: 'var(--eq-font-display)',
            fontSize: 56, lineHeight: 1, color: 'var(--eq-ink)',
            fontWeight: 'var(--eq-display-weight)',
            textTransform: 'var(--eq-display-case)' }}>
            PNL.<br />Magnétisme.
          </h2>
          <p style={{ margin: 0, fontSize: 14.5, color: 'var(--eq-ink-soft)', lineHeight: 1.65 }}>
            Le mental qui s’aligne, l’énergie qui circule.
          </p>
        </div>
      </div>
      <div style={{ maxWidth: 1180, margin: '80px auto 0', textAlign: 'center' }}>
        <p style={{ margin: 0, fontSize: 13, color: 'var(--eq-ink-muted)',
          fontFamily: 'var(--eq-font-mono)', letterSpacing: '0.22em',
          textTransform: 'uppercase' }}>
          Et la gestion de patrimoine, pour que tout cela tienne dans la vie réelle.
        </p>
      </div>
    </section>);

}

// ── Section: Présentation (Tanguy) ─────────────────────────────────────────
function PresentationSection() {
  return (
    <section id="presentation" style={{
      padding: 'var(--eq-section-pad) 64px', background: 'var(--eq-surface)',
      borderTop: '1px solid var(--eq-line-soft)', borderBottom: '1px solid var(--eq-line-soft)', backgroundColor: "rgb(41, 51, 72)"
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center'
      }}>
        <div style={{ position: 'relative' }}>
          <PlaceholderImage height={520} caption="portrait — Tanguy" radius={2} />
          <div style={{ position: 'absolute', bottom: -24, right: -24,
            padding: '14px 18px', background: 'var(--eq-bg)',
            border: '1px solid var(--eq-line)', borderRadius: 2,
            display: 'flex', gap: 14, alignItems: 'center', backgroundColor: "rgb(244, 239, 226)" }}>
            <LogoMark size={84} />
            <div>
              <div style={{ fontFamily: 'var(--eq-font-display)', fontSize: 18,
                letterSpacing: '0.04em', color: "rgb(127, 144, 163)" }}>Tanguy Tillant-Michaud</div>
              <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                letterSpacing: '0.22em', textTransform: 'uppercase', color: "rgb(127, 144, 163)"
              }}>Fondateur · Equilys</div>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          <Eyebrow>Présentation</Eyebrow>
          <h2 style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 48,
            lineHeight: 1.08, fontWeight: 'var(--eq-display-weight)',
            letterSpacing: 'var(--eq-display-tracking)',
            textTransform: 'var(--eq-display-case)' }}>
            Une <span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>discipline</span> du
            quotidien, pas une promesse miracle.
          </h2>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'var(--eq-ink-soft)' }}>
            Je m’appelle Tanguy. J’accompagne celles et ceux qui veulent
            reconnecter leur intuition à leurs décisions concrètes —
            qu’elles soient corporelles, mentales, énergétiques ou patrimoniales.
          </p>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'var(--eq-ink-soft)' }}>Equilys est né d’une conviction simple : on ne tient pas une vie sur un seul pilier. Le geste ancre, le souffle régule, la PNL ré-écrit, le magnétisme libère, le patrimoine structure. Réunis, ils dessinent un équilibre.




          </p>
        </div>
      </div>

      {/* Certifications — full-width row aligned at the bottom of the section */}
      <div style={{ maxWidth: 1180, margin: '80px auto 0', paddingTop: 40,
        borderTop: '1px solid var(--eq-line)',
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24 }}>
        {[
        ['Magnétisme', 'Certifié — école de M. Balbo Thierry'],
        ['PNL', 'Praticien certifié — Com-C France'],
        ['Wing Chun', 'Shen wing chun · Sifu Ben Norynberg'],
        ['Qi Gong', 'École shen wing chun'],
        ['Patrimoine', 'Master Gestion de Patrimoine']].
        map(([k, v]) =>
        <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--eq-gold)' }}>{k}</span>
          <span style={{ fontSize: 13, color: 'var(--eq-ink-soft)', lineHeight: 1.5 }}>{v}</span>
        </div>
        )}
      </div>
    </section>);

}

// ── Section: Méthode — variante "Parcours narratif" ────────────────────────
const METHOD_STEPS = [
{ kicker: '01 · Le corps', title: 'S’ancrer', body: 'Wing Chun et Qi Gong pour reposer le système nerveux, retrouver une assise corporelle stable et faire baisser le bruit.', pillar: 'Geste · Souffle' },
{ kicker: '02 · L’esprit', title: 'Clarifier', body: 'PNL et magnétisme pour défaire les boucles mentales, libérer les blocages énergétiques et préciser ce qui compte vraiment.', pillar: 'Mental · Énergie' },
{ kicker: '03 · La trajectoire', title: 'Ancrer', body: 'Stratégie patrimoniale et habitudes du quotidien — pour que les décisions tiennent dans la vie réelle, pas seulement en séance.', pillar: 'Vie · Patrimoine' }];


function MethodNarrative() {
  return (
    <section id="methode" style={{ padding: 'var(--eq-section-pad) 64px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <SectionHead
          eyebrow="La méthode Equilys"
          title="Trois mouvements, un même équilibre."
          intro="Un parcours qui descend du geste vers la stratégie, sans jamais oublier qu’un corps calme prend de meilleures décisions." />
        
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
          marginTop: 80, position: 'relative' }}>
          {/* connector line */}
          <div style={{ position: 'absolute', top: 30, left: '10%', right: '10%', height: 1,
            background: 'var(--eq-line)' }} />
          {METHOD_STEPS.map((s, i) =>
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 22,
            position: 'relative', padding: '0 8px' }}>
              <div style={{
              position: 'relative', width: 60, height: 60, borderRadius: '50%',
              background: 'var(--eq-bg)', border: '1px solid var(--eq-line)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--eq-font-display)', fontSize: 22, color: 'var(--eq-gold)',
              zIndex: 1
            }}>
                <span style={{ position: 'absolute', inset: 6, borderRadius: '50%',
                border: '1px solid var(--eq-gold)' }} />
                {i + 1}
              </div>
              <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--eq-ink-muted)' }}>{s.kicker}</div>
              <h3 style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 34,
              lineHeight: 1.05, color: 'var(--eq-ink)',
              fontWeight: 'var(--eq-display-weight)',
              letterSpacing: 'var(--eq-display-tracking)',
              textTransform: 'var(--eq-display-case)' }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.65,
              color: 'var(--eq-ink-soft)' }}>{s.body}</p>
              <Badge tone="soft" style={{ alignSelf: 'flex-start' }}>{s.pillar}</Badge>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Section: Méthode — variante "Circulaire" ───────────────────────────────
function MethodCircular() {
  const pillars = [
  { label: 'Magnétisme', angle: -90 },
  { label: 'PNL', angle: -18 },
  { label: 'Patrimoine', angle: 54 },
  { label: 'Wing Chun / Sport', angle: 126 },
  { label: 'Qi Gong', angle: 198 }];

  const R = 230;
  return (
    <section id="methode" style={{ padding: 'var(--eq-section-pad) 64px',
      background: 'var(--eq-surface)',
      borderTop: '1px solid var(--eq-line-soft)',
      borderBottom: '1px solid var(--eq-line-soft)', backgroundColor: "rgb(41, 51, 72)" }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
        <div style={{ position: 'relative', width: 520, height: 520, margin: '0 auto' }}>
          <svg width="520" height="520" viewBox="0 0 520 520" style={{ position: 'absolute', inset: 0 }}>
            <circle cx="260" cy="260" r={R} fill="none" stroke="var(--eq-line)" strokeWidth="1" />
            <circle cx="260" cy="260" r={R - 40} fill="none" stroke="var(--eq-gold)" strokeWidth="0.6"
            strokeDasharray="2 6" opacity="0.7" />
          </svg>
          <div style={{ position: 'absolute', inset: '50% auto auto 50%',
            transform: 'translate(-50%,-50%)' }}>
            <LogoMark size={360} />
          </div>
          {pillars.map((p, i) => {
            const rad = p.angle * Math.PI / 180;
            const x = 260 + R * Math.cos(rad);
            const y = 260 + R * Math.sin(rad);
            return (
              <div key={i} style={{
                position: 'absolute', left: x, top: y, transform: 'translate(-50%,-50%)',
                background: 'var(--eq-bg)', border: '1px solid var(--eq-line)',
                padding: '10px 16px', borderRadius: 99,
                fontFamily: 'var(--eq-font-mono)', fontSize: 11, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: 'var(--eq-ink)',
                whiteSpace: 'nowrap'
              }}>{p.label}</div>);

          })}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <Eyebrow>La méthode Equilys</Eyebrow>
          <h2 style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 52,
            lineHeight: 1.05, fontWeight: 'var(--eq-display-weight)',
            letterSpacing: 'var(--eq-display-tracking)',
            textTransform: 'var(--eq-display-case)' }}>
            Cinq disciplines, un seul centre.
          </h2>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'var(--eq-ink-soft)' }}>
            Chaque pilier travaille un plan différent — corps, mental, énergie,
            geste, stratégie. Le centre n’est pas une technique : c’est l’endroit
            où vous redevenez disponible à vos propres choix.
          </p>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex',
            flexDirection: 'column', gap: 14 }}>
            {[
            ['Magnétisme', 'Prendre soin de son capital santé.'],
            ['PNL', 'Reprogrammer les boucles et définir des objectifs.'],
            ['Wing Chun / Sport', 'Structurer le corps, libérer l’esprit.'],
            ['Qi Gong', 'Réguler le souffle, calmer le système.'],
            ['Patrimoine', 'Aligner la stratégie avec la vie réelle.']].
            map(([k, v]) =>
            <li key={k} style={{ display: 'flex', gap: 16, alignItems: 'baseline',
              borderBottom: '1px solid var(--eq-line-soft)',
              paddingBottom: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: 99,
                background: 'var(--eq-gold)', flex: '0 0 auto',
                transform: 'translateY(-2px)' }} />
                <span style={{ minWidth: 140, fontFamily: 'var(--eq-font-display)',
                fontSize: 18, color: 'var(--eq-ink)' }}>{k}</span>
                <span style={{ fontSize: 14, color: 'var(--eq-ink-soft)' }}>{v}</span>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

// ── Section: Offres / Accompagnements ─────────────────────────────────────
function OffersSection() {
  return (
    <section id="accompagnements" style={{ padding: 'var(--eq-section-pad) 64px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          eyebrow="Accompagnements"
          title="Choisir son point d’entrée."
          intro="Un programme complet pour transformer durablement, ou une séance ciblée pour démarrer en douceur. Tout commence par un échange." />
        
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 22,
          marginTop: 80, alignItems: 'stretch' }}>
          <ServiceCard
            kicker="Programme phare"
            title="Programme Equilys"
            price="À partir de 700 €"
            href="programme.html"
            body="Un parcours sur mesure qui réunit les cinq disciplines. Séances individuelles, pratique guidée, lectures, ajustements patrimoniaux. Pour transformer en profondeur, pas en surface."
            cta="En savoir plus"
            highlighted
            icon={<LogoMark size={52} />} />
          
          <ServiceCard
            kicker="Séance · 45–60 min"
            title="Magnétisme"
            price="60 €"
            href="magnetisme.html"
            body="Libérer les tensions, relancer la circulation énergétique, soulager certains maux et affections. Revigorer son énergie physique et psychique."
            icon={<IconCircle size={48}><svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <circle cx="11" cy="11" r="8" stroke="currentColor" strokeWidth="1.2" />
              <circle cx="11" cy="11" r="3" stroke="currentColor" strokeWidth="1.2" />
              <circle cx="11" cy="11" r="1" fill="currentColor" />
            </svg></IconCircle>} />
          
          <ServiceCard
            kicker="Séance · 60 min"
            title="Coaching PNL"
            price="80 €"
            href="pnl.html"
            body="Identifier les schémas qui freinent, ré-écrire les croyances, ancrer de nouvelles ressources sur un objectif précis."
            icon={<IconCircle size={48}><svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <path d="M4 11h14M11 4v14" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
              <circle cx="11" cy="11" r="3" stroke="currentColor" strokeWidth="1.2" />
            </svg></IconCircle>} />
          
          <ServiceCard
            kicker="Qi Gong · Wing Chun · Sport"
            title="Pratiques corporelles"
            price="—"
            body="Des séances inspirées des arts martiaux chinois. Respiration, posture, écoute de soi et disciplines sportives."
            comingSoon
            icon={<IconCircle size={48}><svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <path d="M4 18c4-2 6-6 7-14 1 8 3 12 7 14" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" fill="none" />
            </svg></IconCircle>} />
          
        </div>
      </div>
    </section>);

}

// ── Section: Preuves (témoignages + diplômes) ─────────────────────────────
function ProofSection() {
  return (
    <section style={{ padding: 'var(--eq-section-pad) 64px',
      background: 'var(--eq-ink)', color: "rgb(139, 156, 175)", backgroundColor: "rgb(41, 51, 72)" }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center',
          gap: 18, textAlign: 'center' }}>
          <Eyebrow color="var(--eq-gold)" style={{ color: 'rgba(241,236,223,0.7)' }}>
            Preuves · Parcours
          </Eyebrow>
          <h2 style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 52,
            lineHeight: 1.08,
            fontWeight: 'var(--eq-display-weight)',
            letterSpacing: 'var(--eq-display-tracking)',
            textTransform: 'var(--eq-display-case)', color: "rgb(255, 255, 255)" }}>
            Une posture, des fondations.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
          marginTop: 64 }}>
          {[
          { t: 'En 12 semaines, j’ai retrouvé un cap. Sur ma santé, mais aussi sur la façon dont je structure mon entreprise.', a: 'Camille R.', r: 'Dirigeante · Lyon' },
          { t: 'Le mélange du geste, du souffle et du travail mental change tout. Rien ne s’oublie, parce qu’on le pratique avec le corps.', a: 'Julien M.', r: 'Cadre · Paris' },
          { t: 'Je suis arrivé pragmatique, je repars apaisé — sans avoir eu à choisir entre les deux. C’est rare.', a: 'Sophie L.', r: 'Consultante · Bordeaux' }].
          map((q, i) =>
          <div key={i} style={{
            padding: '28px 28px 24px',
            border: '1px solid rgba(241,236,223,0.12)', borderRadius: 4,
            display: 'flex', flexDirection: 'column', gap: 18, background: "rgb(244, 239, 226)"
          }}>
              <span style={{ fontFamily: 'var(--eq-font-display)', fontSize: 40, lineHeight: 0.5,
              color: 'var(--eq-gold)' }}>“</span>
              <p style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontStyle: 'italic',
              fontSize: 17, lineHeight: 1.55, color: 'var(--eq-bg)' }}>{q.t}</p>
              <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span style={{ fontSize: 13, color: 'var(--eq-bg)' }}>{q.a}</span>
                <span style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'rgba(241,236,223,0.55)' }}>{q.r}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Section: Contact (CTA + coordonnées + Calendly placeholder) ────────────
function ContactSection() {
  return (
    <section id="contact" style={{ padding: 'var(--eq-section-pad) 64px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '20%', left: -80, opacity: 0.4 }}>
        <CircuitOrnament width={260} height={260} color="var(--eq-gold)" opacity={0.5} />
      </div>
      <div style={{ position: 'absolute', bottom: 'var(--eq-smoke-d-contact, -200px)', right: -40, lineHeight: "2.6", width: "462px", fontSize: "103px" }}>
        <BrushSplash width={420} height={420} color="var(--eq-ink-soft)" opacity={0.10} />
      </div>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          <Eyebrow>Premier échange · Sans engagement</Eyebrow>
          <h2 style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 56,
            lineHeight: 1.05, fontWeight: 'var(--eq-display-weight)',
            letterSpacing: 'var(--eq-display-tracking)',
            textTransform: 'var(--eq-display-case)' }}>
            Un appel de <span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>20 min</span> pour
            voir si nous sommes alignés.
          </h2>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'var(--eq-ink-soft)' }}>
            On parle de ce qui vous amène, on regarde si la méthode vous correspond,
            et on choisit ensemble le point d’entrée le plus juste. Aucune promesse,
            aucun engagement.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 6 }}>
            <a href="mailto:tanguy.equilys@gmail.com" style={{ textDecoration: 'none' }}>
              <Button variant="primary" size="lg" icon={<Arrow color="var(--eq-bg)" />}>
                Écrire un mot
              </Button>
            </a>
            <a href="tel:+33658548104" style={{ textDecoration: 'none' }}>
              <Button variant="ghost" size="lg">Appeler</Button>
            </a>
          </div>
        </div>
        <div style={{ padding: 0, background: 'var(--eq-surface)',
          border: '1px solid var(--eq-line)', borderRadius: 4,
          display: 'flex', flexDirection: 'column',
          overflow: 'hidden' }}>
          {/* Letterhead strip — cream bg makes the dark logo readable */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 18,
            padding: '24px 30px',
            background: '#F4EFE2', color: '#2A3D4D',
            borderBottom: '1px solid rgba(42,61,77,0.12)'
          }}>
            <LogoMark size={72} />
            <div>
              <div style={{ fontFamily: 'var(--eq-font-display)', fontSize: 22,
                color: '#2A3D4D' }}>Tanguy Tillant-Michaud</div>
              <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'rgba(42,61,77,0.55)', marginTop: 4 }}>Fondateur · Equilys</div>
            </div>
          </div>
          {/* Coordonnées body */}
          <div style={{ padding: '30px 30px 30px',
            display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <ContactRow label="Téléphone" value="06 58 54 81 04" />
              <ContactRow label="Courriel" value="tanguy.equilys@gmail.com" />
              <ContactRow label="Cabinet" value="Chambéry & Aix-les-Bains · présentiel et visio" />
            </div>
            <div style={{ borderTop: '1px solid var(--eq-line)', paddingTop: 22 }}>
              <p style={{ margin: 0, fontStyle: 'italic', fontFamily: 'var(--eq-font-display)',
                fontSize: 17, color: 'var(--eq-gold)', textAlign: 'center' }}>
                « Cultiver l’équilibre, incarner la maîtrise. »
            </p>
          </div>
          </div>
        </div>
      </div>
    </section>);

}

function ContactRow({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
      <span style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'var(--eq-ink-muted)' }}>{label}</span>
      <span style={{ fontSize: 14, color: 'var(--eq-ink)' }}>{value}</span>
    </div>);

}

// ── Footer ─────────────────────────────────────────────────────────────────
// Resolve a footer link label to a destination URL.
function footerHref(label) {
  const map = {
    'Accueil': 'index.html#accueil',
    'Présentation': 'index.html#presentation',
    'Méthode': 'index.html#methode',
    'Accompagnements': 'index.html#accompagnements',
    'Contact': 'index.html#contact',
    'Magnétisme': 'magnetisme.html',
    'Coaching PNL': 'pnl.html',
    'Mentions légales': 'mentions-legales.html',
    'Politique de confidentialité': 'confidentialite.html',
    'tanguy.equilys@gmail.com': 'mailto:tanguy.equilys@gmail.com',
    '06 58 54 81 04': 'tel:+33658548104'
  };
  return map[label] || '#';
}

function Footer() {
  return (
    <footer style={{ padding: '44px 64px 28px', background: 'var(--eq-surface-alt)',
      borderTop: '1px solid var(--eq-line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <LogoMark size={40} />
            <span style={{ fontFamily: 'var(--eq-font-display)', fontSize: 22,
              letterSpacing: '0.28em', textTransform: 'uppercase' }}>Equilys</span>
          </div>
          <p style={{ margin: 0, fontSize: 13.5, color: 'var(--eq-ink-soft)', maxWidth: 320,
            lineHeight: 1.6 }}>
            Cultiver l’équilibre, incarner la maîtrise. Coaching, magnétisme,
            arts internes et stratégie patrimoniale à Chambéry et Aix-les-Bains.
          </p>
        </div>
        {[
        ['Navigation', ['Accueil', 'Présentation', 'Méthode', 'Accompagnements', 'Contact']],
        ['Pratique', ['Magnétisme', 'Coaching PNL', 'Wing Chun (à venir)', 'Qi Gong (à venir)']],
        ['Equilys', ['tanguy.equilys@gmail.com', '06 58 54 81 04', 'Mentions légales', 'Politique de confidentialité']]].
        map(([title, links]) =>
        <div key={title}>
            <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--eq-ink-muted)', marginBottom: 16 }}>{title}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex',
            flexDirection: 'column', gap: 8 }}>
              {links.map((l) =>
            <li key={l}><a href={footerHref(l)} className="eq-link" style={{ color: 'var(--eq-ink-soft)', fontSize: 13.5,
                textDecoration: 'none', position: 'relative', paddingBottom: 2 }}>{l}</a></li>
            )}
            </ul>
          </div>
        )}
      </div>
      <div style={{ maxWidth: 1280, margin: '48px auto 0', paddingTop: 24,
        borderTop: '1px solid var(--eq-line)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
        fontSize: 11.5, color: 'var(--eq-ink-muted)',
        fontFamily: 'var(--eq-font-mono)', letterSpacing: '0.14em',
        textTransform: 'uppercase' }}>
        <span>© 2026 Equilys · Tanguy Tillant-Michaud</span>
        <a href="mentions-legales.html" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '9px 16px', borderRadius: 2,
          border: '1px solid var(--eq-line)', color: 'var(--eq-ink-soft)',
          textDecoration: 'none', fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
          letterSpacing: '0.18em', textTransform: 'uppercase'
        }}>Mentions légales <Arrow /></a>
      </div>
    </footer>);

}

// ── METHOD · variant "Vertical narratif" (style mobile, version desktop) ──
// Trois mouvements alignés sur une colonne unique avec connecteur central.
function MethodVertical() {
  return (
    <section id="methode" style={{ padding: 'var(--eq-section-pad) 64px', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 80, right: -60, color: 'var(--eq-ink-soft)' }}>
        <BrushSplash width={360} height={360} color="var(--eq-ink-soft)" opacity={0.10} />
      </div>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80,
          alignItems: 'start', marginBottom: 64 }}>
          <div>
            <Eyebrow>La méthode Equilys</Eyebrow>
            <h2 style={{ margin: '18px 0 0', fontFamily: 'var(--eq-font-display)',
              fontSize: 48, lineHeight: 1.04,
              fontWeight: 'var(--eq-display-weight)',
              letterSpacing: 'var(--eq-display-tracking)',
              textTransform: 'var(--eq-display-case)' }}>
              Trois <span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>mouvements</span>,<br />un même équilibre.
            </h2>
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 16.5, lineHeight: 1.7,
            color: 'var(--eq-ink-soft)', maxWidth: 560 }}>
            Chaque accompagnement suit la même cadence : on observe, on dénoue,
            puis on incarne. Trois temps qui s’enchaînent au rythme de la personne,
            et qui se rejouent à chaque étape du parcours.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 36, position: 'relative',
          maxWidth: 880, margin: '0 auto' }}>
          <div style={{ position: 'absolute', left: 27, top: 56, bottom: 56, width: 1,
            background: 'var(--eq-line)' }} />
          {METHOD_STEPS.map((s, i) =>
          <div key={i} style={{ display: 'flex', gap: 36, alignItems: 'flex-start' }}>
              <div style={{ position: 'relative', width: 56, height: 56, borderRadius: '50%',
              background: 'var(--eq-bg)', border: '1px solid var(--eq-line)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--eq-font-display)', fontSize: 22,
              color: 'var(--eq-gold)', flex: '0 0 auto', zIndex: 1 }}>
                <span style={{ position: 'absolute', inset: 5, borderRadius: '50%',
                border: '1px solid var(--eq-gold)' }} />
                {i + 1}
              </div>
              <div style={{ flex: 1, paddingTop: 6, display: 'grid',
              gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'baseline' }}>
                <div>
                  <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 11,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'var(--eq-ink-muted)' }}>{s.kicker}</div>
                  <h3 style={{ margin: '10px 0 0', fontFamily: 'var(--eq-font-display)',
                  fontSize: 30, lineHeight: 1.1,
                  fontWeight: 'var(--eq-display-weight)',
                  letterSpacing: 'var(--eq-display-tracking)',
                  textTransform: 'var(--eq-display-case)' }}>{s.title}</h3>
                </div>
                <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.7,
                color: 'var(--eq-ink-soft)' }}>{s.body}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  NavBar, HeroEnso, HeroEditorial, HeroManifesto,
  PresentationSection, MethodNarrative, MethodCircular, MethodVertical,
  OffersSection, ProofSection, ContactSection, Footer
});