// js/sections-mobile.jsx — Mobile sections for Equilys site (390px design width)
// Aligned with the desktop version while preserving mobile-first readability.
// The "MobileMethod" deliberately keeps its vertical narrative layout —
// the user explicitly asked to keep it as-is.

function MobileNav({ current = 'accueil' }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    ['Accueil', 'index.html#accueil'],
    ['Présentation', 'index.html#presentation'],
    ['Méthode', 'index.html#methode'],
    ['Accompagnements', 'index.html#accompagnements'],
    ['Contact', 'index.html#contact']
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: 'var(--eq-bg)',
      borderBottom: '1px solid var(--eq-line-soft)'
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 20px'
      }}>
        {/* Cream pill — logo + EQUILYS, mirrors desktop NavBar */}
        <a href="index.html" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '4px 16px 4px 6px',
          background: '#F4EFE2',
          border: '1px solid rgba(244,239,226,0.5)',
          borderRadius: 999,
          boxShadow: '0 10px 24px -14px rgba(0,0,0,0.45)',
          textDecoration: 'none'
        }}>
          <LogoMark size={32} />
          <span style={{
            fontFamily: 'var(--eq-font-display)', fontSize: 15,
            letterSpacing: '0.32em', textTransform: 'uppercase',
            fontWeight: 500, color: '#2A3D4D'
          }}>Equilys</span>
        </a>
        <button onClick={() => setOpen(o => !o)} aria-label="Menu" style={{
          appearance: 'none', border: '1px solid var(--eq-line)', background: 'transparent',
          padding: 0, width: 38, height: 38, borderRadius: 99, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--eq-ink)'
        }}>
          {open ? (
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
            </svg>
          ) : (
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
              <path d="M0 1h14M0 5h14M0 9h14" stroke="currentColor" strokeWidth="1.2" />
            </svg>
          )}
        </button>
      </div>
      {/* Dropdown menu */}
      {open && (
        <nav style={{
          borderTop: '1px solid var(--eq-line-soft)',
          padding: '10px 20px 18px',
          display: 'flex', flexDirection: 'column', gap: 2,
          background: 'var(--eq-bg)'
        }}>
          {items.map(([label, href]) => {
            const isActive = current === label.toLowerCase();
            return (
              <a key={label} href={href} onClick={(e) => {
                setOpen(false);
                if (href.includes('#')) {
                  const id = href.split('#')[1];
                  const el = document.getElementById(id);
                  if (el) {
                    e.preventDefault();
                    setTimeout(() => {
                      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }, 60);
                  }
                  // Si l'élément n'existe pas on est sur une autre page, navigation normale
                }
              }} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '13px 4px', textDecoration: 'none',
                color: isActive ? 'var(--eq-gold)' : 'var(--eq-ink)',
                fontFamily: 'var(--eq-font-display)', fontSize: 20,
                borderBottom: '1px solid var(--eq-line-soft)'
              }}>
                {label}
                <Arrow color={isActive ? 'var(--eq-gold)' : 'var(--eq-ink-soft)'} />
              </a>
            );
          })}
        </nav>
      )}
    </header>);

}

function MobileHero() {
  return (
    <section id="accueil" style={{ position: 'relative', padding: '40px 24px 56px', overflow: 'hidden' }}>
      {/* Corner ornaments — match desktop */}
      <div style={{ position: 'absolute', top: 20, left: -40, color: 'var(--eq-gold)' }}>
        <CircuitOrnament width={180} height={180} color="var(--eq-gold)" opacity={0.30} />
      </div>
      <div style={{ position: 'absolute', bottom: 'var(--eq-smoke-m-hero, -30px)', right: -50 }}>
        <BrushSplash width={260} height={260} color="var(--eq-ink-soft)" />
      </div>

      <div style={{ position: 'relative' }}>
        <Eyebrow>Coaching · Magnétisme · Patrimoine</Eyebrow>
        <h1 style={{
          margin: '20px 0 0', fontFamily: 'var(--eq-font-display)',
          fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
          fontSize: 44, lineHeight: 1.02, color: 'var(--eq-ink)',
          textTransform: 'var(--eq-display-case)'
        }}>
          Cultiver l’<span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>équilibre</span>,
          incarner la maîtrise.
        </h1>
        <p style={{ margin: '20px 0 0', fontSize: 15, lineHeight: 1.65, color: 'var(--eq-ink-soft)' }}>
          Un accompagnement qui réunit le geste martial, le souffle, l’énergie et
          la stratégie patrimoniale — pour aligner votre vie intérieure et votre
          trajectoire concrète.
        </p>

        {/* Logo + spinning dotted orbits */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center',
          position: 'relative', width: 280, height: 280, margin: '40px auto' }}>
          <LogoMark size={260} spinning
            style={{ animation: 'eq-fade-in 1.4s ease-out both, eq-logo-spin var(--eq-logo-spin-dur, 120s) linear infinite',
                     position: 'relative', zIndex: 1 }} />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <a href="programme.html" style={{ textDecoration: 'none' }}>
            <Button variant="primary" size="lg" fullWidth 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" fullWidth>Réserver un appel</Button>
          </a>
        </div>

        {/* Stats row — mirrors desktop */}
        <div style={{ marginTop: 32, paddingTop: 24,
          borderTop: '1px solid var(--eq-line)',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          <MobileStat value="12" label="semaines" sub="Programme phare" />
          <MobileStat value="5" label="disciplines" sub="Méthode Equilys" />
          <MobileStat value="1" label="sur mesure" sub="Cadre confidentiel" />
        </div>

        {/* Pillars strip */}
        <div style={{ marginTop: 28, paddingTop: 18, borderTop: '1px solid var(--eq-line)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--eq-font-mono)', fontSize: 9.5, letterSpacing: '0.16em',
          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>
      </div>
    </section>);

}

function MobileStat({ value, label, sub }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      <span style={{
        fontFamily: 'var(--eq-font-display)', fontSize: 32, lineHeight: 1,
        fontWeight: 'var(--eq-display-weight)', color: 'var(--eq-ink)',
        letterSpacing: 'var(--eq-display-tracking)'
      }}>{value}</span>
      <span style={{ fontSize: 11.5, color: 'var(--eq-ink-soft)' }}>{label}</span>
      <span style={{ fontSize: 9, color: 'var(--eq-ink-muted)',
        fontFamily: 'var(--eq-font-mono)', letterSpacing: '0.14em',
        textTransform: 'uppercase' }}>{sub}</span>
    </div>);

}

function MobilePresentation() {
  return (
    <section id="presentation" style={{ padding: '72px 24px', background: 'var(--eq-surface)',
      borderTop: '1px solid var(--eq-line-soft)',
      borderBottom: '1px solid var(--eq-line-soft)',
      backgroundColor: "rgb(41, 51, 72)" }}>
      <Eyebrow>Présentation</Eyebrow>
      <h2 style={{ margin: '18px 0 24px', fontFamily: 'var(--eq-font-display)',
        fontSize: 34, 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>

      {/* Portrait + floating logo badge — mirrors desktop */}
      <div style={{ position: 'relative', marginBottom: 36 }}>
        <PlaceholderImage height={320} caption="portrait — Tanguy" />
        <div style={{ position: 'absolute', bottom: -22, right: -8,
          padding: '10px 14px', background: '#F4EFE2',
          border: '1px solid rgba(244,239,226,0.5)', borderRadius: 2,
          display: 'flex', gap: 12, alignItems: 'center',
          boxShadow: '0 16px 36px -16px rgba(0,0,0,0.45)' }}>
          <LogoMark size={48} />
          <div>
            <div style={{ fontFamily: 'var(--eq-font-display)', fontSize: 15,
              color: '#2A3D4D' }}>Tanguy Tillant-Michaud</div>
            <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 9.5,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'rgba(42,61,77,0.55)' }}>Fondateur · Equilys</div>
          </div>
        </div>
      </div>

      <p style={{ margin: 0, fontSize: 15, 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: '16px 0 0', fontSize: 15, 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 structure, le souffle régule, la PNL ré-écrit, le
        magnétisme libère, le patrimoine ancre. Réunis, ils dessinent un équilibre.
      </p>

      {/* Certifications détaillées — sous la présentation, comme sur desktop */}
      <div style={{ marginTop: 32, paddingTop: 28, borderTop: '1px solid var(--eq-line)',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '18px 20px' }}>
        {[
          ['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: 5 }}>
            <span style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 9.5,
              letterSpacing: '0.20em', textTransform: 'uppercase',
              color: 'var(--eq-gold)' }}>{k}</span>
            <span style={{ fontSize: 12.5, color: 'var(--eq-ink-soft)', lineHeight: 1.5 }}>{v}</span>
          </div>
        ))}
      </div>
    </section>);

}

function MobileMethod() {
  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 SIZE = 320, C = SIZE / 2, R = 132;
  return (
    <section id="methode" style={{ padding: '72px 24px', background: 'var(--eq-surface)',
      borderTop: '1px solid var(--eq-line-soft)',
      borderBottom: '1px solid var(--eq-line-soft)',
      backgroundColor: 'rgb(41, 51, 72)' }}>
      <Eyebrow>La méthode Equilys</Eyebrow>
      <h2 style={{ margin: '18px 0 24px', fontFamily: 'var(--eq-font-display)',
        fontSize: 34, 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 0 36px', fontSize: 15, 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>

      {/* Roue des disciplines — version mobile */}
      <div style={{ position: 'relative', width: SIZE, height: SIZE, margin: '0 auto 40px' }}>
        <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} style={{ position: 'absolute', inset: 0 }}>
          <circle cx={C} cy={C} r={R} fill="none" stroke="var(--eq-line)" strokeWidth="1" />
          <circle cx={C} cy={C} r={R - 26} 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={150} />
        </div>
        {pillars.map((p, i) => {
          const rad = p.angle * Math.PI / 180;
          const x = C + R * Math.cos(rad);
          const y = C + 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: '6px 10px', borderRadius: 99,
              fontFamily: 'var(--eq-font-mono)', fontSize: 8.5, letterSpacing: '0.12em',
              textTransform: 'uppercase', color: 'var(--eq-ink)',
              whiteSpace: 'nowrap'
            }}>{p.label}</div>);
        })}
      </div>

      {/* Liste des disciplines */}
      <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: 12, alignItems: 'baseline',
            borderBottom: '1px solid var(--eq-line-soft)', paddingBottom: 12 }}>
            <span style={{ width: 7, height: 7, borderRadius: 99,
              background: 'var(--eq-gold)', flex: '0 0 auto',
              transform: 'translateY(-1px)' }} />
            <span style={{ minWidth: 96, fontFamily: 'var(--eq-font-display)',
              fontSize: 16, color: 'var(--eq-ink)' }}>{k}</span>
            <span style={{ fontSize: 13.5, color: 'var(--eq-ink-soft)', lineHeight: 1.5 }}>{v}</span>
          </li>
        ))}
      </ul>
    </section>);

}

function MobileOffers() {
  return (
    <section id="accompagnements" style={{ padding: '72px 24px', background: 'var(--eq-surface)',
      borderTop: '1px solid var(--eq-line-soft)',
      borderBottom: '1px solid var(--eq-line-soft)',
      backgroundColor: "rgb(41, 51, 72)" }}>
      <Eyebrow>Accompagnements</Eyebrow>
      <h2 style={{ margin: '18px 0 14px', fontFamily: 'var(--eq-font-display)',
        fontSize: 34, lineHeight: 1.05,
        fontWeight: 'var(--eq-display-weight)',
        letterSpacing: 'var(--eq-display-tracking)',
        textTransform: 'var(--eq-display-case)' }}>
        Choisir son point d’entrée.
      </h2>
      <p style={{ margin: '0 0 32px', fontSize: 14.5, lineHeight: 1.65,
        color: 'var(--eq-ink-soft)' }}>
        Un programme complet pour transformer durablement, ou une séance ciblée
        pour démarrer en douceur. Tout commence par un échange.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <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."
          cta="En savoir plus"
          highlighted
          icon={<LogoMark size={48} />} />
        
        <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>
    </section>);

}

function MobileProof() {
  const testimonials = [
    { 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' }
  ];
  return (
    <section style={{ padding: '72px 24px',
      background: 'var(--eq-ink)', color: "rgb(139, 156, 175)",
      backgroundColor: "rgb(41, 51, 72)" }}>
      <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column',
        alignItems: 'center', gap: 12 }}>
        <Eyebrow style={{ color: 'rgba(241,236,223,0.7)' }}>Preuves · Parcours</Eyebrow>
        <h2 style={{ margin: 0, fontFamily: 'var(--eq-font-display)',
          fontSize: 34, lineHeight: 1.05, color: '#FFFFFF',
          fontWeight: 'var(--eq-display-weight)',
          letterSpacing: 'var(--eq-display-tracking)',
          textTransform: 'var(--eq-display-case)' }}>
          Une posture, des fondations.
        </h2>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 32 }}>
        {testimonials.map((q, i) => (
          <div key={i} style={{
            padding: '24px 22px',
            border: '1px solid rgba(241,236,223,0.12)', borderRadius: 4,
            display: 'flex', flexDirection: 'column', gap: 12,
            background: '#F4EFE2'
          }}>
            <span style={{ fontFamily: 'var(--eq-font-display)', fontSize: 32, lineHeight: 0.5,
              color: 'var(--eq-gold)' }}>“</span>
            <p style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontStyle: 'italic',
              fontSize: 15.5, lineHeight: 1.55, color: '#2A3D4D' }}>{q.t}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontSize: 12.5, color: '#2A3D4D' }}>{q.a}</span>
              <span style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 9.5,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'rgba(42,61,77,0.55)' }}>{q.r}</span>
            </div>
          </div>
        ))}
      </div>
    </section>);

}

function MobileContact() {
  return (
    <section id="contact" style={{ padding: '72px 24px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '10%', left: -50, opacity: 0.5 }}>
        <CircuitOrnament width={180} height={180} color="var(--eq-gold)" />
      </div>
      <div style={{ position: 'absolute', bottom: 'var(--eq-smoke-m-contact, -30px)', right: -50 }}>
        <BrushSplash width={240} height={240} color="var(--eq-ink-soft)" />
      </div>
      <div style={{ position: 'relative' }}>
        <Eyebrow>Premier échange · Sans engagement</Eyebrow>
        <h2 style={{ margin: '18px 0 18px', fontFamily: 'var(--eq-font-display)',
          fontSize: 36, 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 0 24px', fontSize: 15, 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', flexDirection: 'column', gap: 12 }}>
          <a href="mailto:tanguy.equilys@gmail.com" style={{ textDecoration: 'none' }}>
            <Button variant="primary" size="lg" fullWidth icon={<Arrow color="var(--eq-bg)" />}>
              Écrire un mot
            </Button>
          </a>
          <a href="tel:+33658548104" style={{ textDecoration: 'none' }}>
            <Button variant="ghost" size="lg" fullWidth>Appeler</Button>
          </a>
        </div>

        {/* Letterhead-style contact card — mirrors desktop */}
        <div style={{ marginTop: 32, background: 'var(--eq-surface)',
          border: '1px solid var(--eq-line)', borderRadius: 4,
          display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '20px 22px', background: '#F4EFE2',
            borderBottom: '1px solid rgba(42,61,77,0.12)'
          }}>
            <LogoMark size={52} />
            <div>
              <div style={{ fontFamily: 'var(--eq-font-display)', fontSize: 16,
                color: '#2A3D4D' }}>Tanguy Tillant-Michaud</div>
              <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 9.5,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'rgba(42,61,77,0.55)', marginTop: 4 }}>Fondateur · Equilys</div>
            </div>
          </div>
          <div style={{ padding: '22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ContactRow label="Téléphone" value="06 58 54 81 04" />
            <div style={{ height: 1, background: 'var(--eq-line)' }} />
            <ContactRow label="Courriel" value="tanguy.equilys@gmail.com" />
            <div style={{ height: 1, background: 'var(--eq-line)' }} />
            <ContactRow label="Cabinet" value="Chambéry & Aix-les-Bains · présentiel et visio" />
            <div style={{ borderTop: '1px solid var(--eq-line)', paddingTop: 18, marginTop: 4 }}>
              <p style={{ margin: 0, fontStyle: 'italic', fontFamily: 'var(--eq-font-display)',
                fontSize: 15, color: 'var(--eq-gold)', textAlign: 'center' }}>
                « Cultiver l’équilibre, incarner la maîtrise. »
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function MobileFooter() {
  return (
    <footer style={{ padding: '48px 24px 28px', background: 'var(--eq-surface-alt)',
      borderTop: '1px solid var(--eq-line)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <LogoMark size={36} />
        <span style={{ fontFamily: 'var(--eq-font-display)', fontSize: 18,
          letterSpacing: '0.28em', textTransform: 'uppercase' }}>Equilys</span>
      </div>
      <p style={{ margin: '14px 0 28px', fontSize: 13, color: 'var(--eq-ink-soft)',
        lineHeight: 1.6, maxWidth: 320 }}>
        Cultiver l’équilibre, incarner la maîtrise. Coaching, magnétisme,
        arts internes et stratégie patrimoniale.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {[
          ['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,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--eq-ink-muted)', marginBottom: 10 }}>{title}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex',
              flexDirection: 'column', gap: 6 }}>
              {links.map((l) => (
                <li key={l}><a href={footerHref(l)} onClick={(e) => {
                  const href = footerHref(l);
                  if (href && href.includes('#')) {
                    const id = href.split('#')[1];
                    const el = document.getElementById(id);
                    if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
                  }
                }} className="eq-link" style={{ color: 'var(--eq-ink-soft)', fontSize: 13,
                  textDecoration: 'none', position: 'relative', paddingBottom: 2 }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 32, paddingTop: 16, borderTop: '1px solid var(--eq-line)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8,
        fontSize: 10, color: 'var(--eq-ink-muted)',
        fontFamily: 'var(--eq-font-mono)', letterSpacing: '0.14em',
        textTransform: 'uppercase' }}>
        <span>© 2026 Equilys</span>
        <span>v.0.1 — Maquette</span>
      </div>
    </footer>);

}

Object.assign(window, {
  MobileNav, MobileHero, MobilePresentation, MobileMethod,
  MobileOffers, MobileProof, MobileContact, MobileFooter
});
