// SOMUM — Homepage refonte mai 2026
// 8 sections: Hero 3-portes · Logos · 3 portes persona · DP · Témoignages · Offres · Jennifer · CTA final

function HomeHero({ lang, T, a }) {
  const isMobile = useIsMobile();
  const t = COPY[lang];
  const tagline = t.tagline;
  const sub = lang === 'fr'
    ? 'L\'experte des relations humaines coopératives — pour les familles, les écoles et les entreprises. Une méthode unique : la Discipline Positive.'
    : 'The expert in cooperative human relationships — for families, schools and companies. One unique method: Positive Discipline.';

  return (
    <section style={{ background: T.cream, padding: isMobile ? '48px 20px 56px' : '72px 48px 88px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 40 : 72, alignItems: 'center' }}>
        <div>
          <div className="v1-eyebrow" style={{ marginBottom: 28, color: a.color }}>
            <span className="v1-rule" style={{ background: a.color, opacity: 1 }}></span>
            {lang === 'fr' ? 'Coaching · Formations · Conférences · Luxembourg' : 'Coaching · Training · Talks · Luxembourg'}
          </div>
          <h1 className="v1-serif" style={{ fontSize: isMobile ? 38 : 76, lineHeight: 1.04, letterSpacing: '-0.028em', fontWeight: 500, margin: '0 0 24px', textWrap: 'balance' }}>
            {lang === 'fr' ? (
              <React.Fragment>
                Mieux <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>comprendre</em>.<br/>
                Mieux <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>communiquer</em>.<br/>
                Mieux <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>coopérer</em>.
              </React.Fragment>
            ) : (
              <React.Fragment>
                <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>Understand</em> better.<br/>
                <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>Communicate</em> better.<br/>
                <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>Cooperate</em> better.
              </React.Fragment>
            )}
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: T.inkSoft, maxWidth: 560, margin: '0 0 36px', textWrap: 'pretty' }}>{sub}</p>

          {/* 3 portes d'entrée — main differentiator */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
            <div className="v1-mono" style={{ fontSize: 11, color: T.inkSoft, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 4 }}>
              {lang === 'fr' ? 'Je suis' : 'I am'}
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {[
                { id: 'parents',     emoji: '🏠', label: lang === 'fr' ? 'Un parent' : 'A parent',     href: 'parents.html' },
                { id: 'ecoles',      emoji: '🏫', label: lang === 'fr' ? 'Une école' : 'A school',     href: 'ecoles.html' },
                { id: 'entreprises', emoji: '🏢', label: lang === 'fr' ? 'Une entreprise' : 'A company', href: 'entreprises.html' },
              ].map((p) => {
                const c = PERSONAS[p.id];
                return (
                  <a key={p.id} href={p.href} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 22px', borderRadius: 999, background: 'white', border: `1.5px solid ${c.color}28`, color: T.ink, fontWeight: 600, fontSize: 14, textDecoration: 'none', transition: 'all .2s ease', cursor: 'pointer' }}>
                    <span style={{ fontSize: 18 }}>{p.emoji}</span>
                    {p.label}
                    <span style={{ color: c.color }}>→</span>
                  </a>
                );
              })}
            </div>
          </div>
        </div>

        <div style={{ position: 'relative', display: isMobile ? 'none' : 'block' }}>
          <div style={{ aspectRatio: '4 / 5', borderRadius: 8, border: '8px solid white', boxShadow: '0 30px 60px -30px rgba(9,93,111,0.32)', overflow: 'hidden', background: T.creamSoft }}>
            <img src="assets/jennifer.jpg" alt="Jennifer Van Vaerenberg, fondatrice SOMUM" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div style={{ position: 'absolute', bottom: -24, left: -24, background: T.ink, color: T.cream, padding: '20px 24px', borderRadius: 6, transform: 'rotate(-2deg)', maxWidth: 240, boxShadow: '0 24px 48px -20px rgba(28,28,26,0.4)' }}>
            <div className="v1-serif" style={{ fontSize: 32, fontWeight: 400, lineHeight: 1, color: T.copperSoft, fontStyle: 'italic' }}>"</div>
            <div className="v1-serif" style={{ fontSize: 14.5, fontStyle: 'italic', lineHeight: 1.45, marginTop: -4 }}>
              {lang === 'fr' ? 'Les relations humaines, ça ne s\'improvise pas. Ça se travaille.' : 'Human relationships are not improvised. They are practised.'}
            </div>
            <div className="v1-mono" style={{ fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: T.tealPale, marginTop: 12, opacity: 0.85 }}>Jennifer · {lang === 'fr' ? 'Fondatrice' : 'Founder'}</div>
          </div>
          <div style={{ position: 'absolute', top: -16, right: -16, background: 'white', padding: '14px 18px', borderRadius: 12, boxShadow: '0 16px 32px -16px rgba(9,93,111,0.25)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 999, background: T.tealMist, color: T.teal, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icons.spark(18)}</div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.2 }}>{lang === 'fr' ? 'Certifiée Discipline Positive©' : 'Certified in Positive Discipline©'}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustedStrip({ lang, T }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '32px 20px' : '40px 48px', borderTop: `1px solid ${T.outline}30`, borderBottom: `1px solid ${T.outline}30`, background: T.creamSoft }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 16 : 56 }}>
        <div className="v1-mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.inkSoft, lineHeight: 1.5, maxWidth: 130, flex: '0 0 auto' }}>
          {lang === 'fr' ? 'Ils m\'ont fait confiance' : 'Trusted by'}
        </div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: isMobile ? 16 : 28, justifyContent: 'center' }}>
          {CLIENT_LOGOS.map((l, i) => <LogoMark key={i} label={l.name} src={l.src} height={48} />)}
        </div>
      </div>
    </section>
  );
}

function PersonaDoorsSection({ lang, T, a }) {
  const isMobile = useIsMobile();
  const c = PERSONA_COPY[lang];
  const doors = [
    { id: 'parents', emoji: '🏠', tone: lang === 'fr' ? 'chaleureux' : 'warm',     href: 'parents.html',     ...c.parents },
    { id: 'ecoles', emoji: '🏫', tone: lang === 'fr' ? 'professionnel' : 'professional', href: 'ecoles.html', ...c.ecoles },
    { id: 'entreprises', emoji: '🏢', tone: lang === 'fr' ? 'corporate' : 'corporate', href: 'entreprises.html', ...c.entreprises },
  ];

  return (
    <section style={{ padding: isMobile ? '64px 20px' : '120px 48px', background: T.cream }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 720, margin: '0 auto 64px' }}>
          <div className="v1-eyebrow" style={{ marginBottom: 20 }}>
            {lang === 'fr' ? '3 publics, une méthode' : '3 audiences, one method'}
          </div>
          <h2 className="v1-serif" style={{ fontSize: isMobile ? 32 : 52, lineHeight: 1.08, letterSpacing: '-0.022em', fontWeight: 500, margin: '0 0 16px' }}>
            {lang === 'fr' ? 'Trois portes d\'entrée. Une seule promesse.' : 'Three doors. One promise.'}
          </h2>
          <p style={{ fontSize: 17, color: T.inkSoft, lineHeight: 1.6, margin: 0 }}>
            {lang === 'fr' ? 'Que vous soyez parent, équipe pédagogique ou direction d\'entreprise — la Discipline Positive transforme les relations.' : 'Parent, school team or company leadership — Positive Discipline transforms relationships.'}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 24 }}>
          {doors.map((d, i) => {
            const persona = PERSONAS[d.id];
            return (
              <a key={i} href={d.href} style={{ background: 'white', borderRadius: 24, padding: 36, border: `1px solid ${T.outline}40`, textDecoration: 'none', color: T.ink, display: 'flex', flexDirection: 'column', minHeight: isMobile ? 'auto' : 460, transition: 'all .25s ease', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: persona.color }}></div>
                <div style={{ width: 56, height: 56, borderRadius: 14, background: persona.soft, color: persona.color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24, fontSize: 28 }}>{d.emoji}</div>
                <div className="v1-mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: persona.color, marginBottom: 12, fontWeight: 600 }}>
                  {String(i + 1).padStart(2, '0')} · {d.kicker.replace(/^[^\s]+\s/, '')}
                </div>
                <h3 className="v1-serif" style={{ fontSize: 26, lineHeight: 1.15, fontWeight: 500, margin: '0 0 14px', letterSpacing: '-0.012em' }}>{d.promise}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: T.inkSoft, margin: '0 0 20px' }}>
                  {d.benefits[0]}.
                </p>
                <div style={{ flex: 1 }}></div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 20, paddingTop: 20, borderTop: `1px solid ${T.outline}40` }}>
                  {d.pains.slice(0, 3).map((p, j) => (
                    <div key={j} style={{ fontSize: 12.5, color: T.inkSoft, display: 'flex', gap: 8, alignItems: 'flex-start', lineHeight: 1.45 }}>
                      <span style={{ color: persona.color, marginTop: 1 }}>·</span>
                      <span>{p}</span>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: persona.color, fontSize: 13.5, fontWeight: 600 }}>
                  {d.ctaPrimary}{Icons.arrow(14)}
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function DisciplinePositiveSection({ lang, T, a }) {
  const isMobile = useIsMobile();
  const pillars = [
    { icon: Icons.heart(22),     t: lang === 'fr' ? 'Bienveillance' : 'Kindness',     d: lang === 'fr' ? 'Respect mutuel et écoute active.' : 'Mutual respect and active listening.' },
    { icon: Icons.scale(22),     t: lang === 'fr' ? 'Fermeté' : 'Firmness',           d: lang === 'fr' ? 'Cadre clair, limites tenues avec respect.' : 'Clear frame, limits held with respect.' },
    { icon: Icons.handshake(22), t: lang === 'fr' ? 'Coopération' : 'Cooperation',   d: lang === 'fr' ? 'Solutions construites ensemble, pas imposées.' : 'Solutions built together, never imposed.' },
    { icon: Icons.spark(22),     t: lang === 'fr' ? 'Compétences' : 'Skills',         d: lang === 'fr' ? 'Outils concrets pour la vie : émotions, conflits, autonomie.' : 'Concrete life skills: emotions, conflicts, autonomy.' },
  ];

  return (
    <section style={{ padding: isMobile ? '64px 20px' : '120px 48px', background: T.creamMed }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '5fr 7fr', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
        <div>
          <div className="v1-eyebrow" style={{ marginBottom: 20, color: a.color }}><span className="v1-rule" style={{ background: a.color, opacity: 1 }}></span>{lang === 'fr' ? 'La méthode' : 'The method'}</div>
          <h2 className="v1-serif" style={{ fontSize: isMobile ? 30 : 52, lineHeight: 1.08, letterSpacing: '-0.022em', fontWeight: 500, margin: '0 0 24px', textWrap: 'balance' }}>
            {lang === 'fr' ? 'La Discipline Positive,' : 'Positive Discipline,'}<br/>
            <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>{lang === 'fr' ? 'c\'est quoi ?' : 'what is it?'}</em>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: T.inkSoft, margin: '0 0 28px', maxWidth: 460 }}>
            {lang === 'fr'
              ? 'Une approche éducative et relationnelle développée aux États-Unis et validée par les neurosciences. Ni laxiste, ni autoritaire — bienveillante ET ferme.'
              : 'An educational and relational approach developed in the US and validated by neuroscience. Neither lax nor authoritarian — kind AND firm.'}
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: T.inkSoft, margin: '0 0 28px', maxWidth: 460 }}>
            {lang === 'fr'
              ? 'Elle s\'applique à toutes les relations humaines : parent-enfant, enseignant-élève, manager-équipe.'
              : 'It applies to all human relationships: parent-child, teacher-student, manager-team.'}
          </p>
          <a href="methode.html" className="v1-link" style={{ fontSize: 14 }}>
            {lang === 'fr' ? 'Découvrir la méthode complète' : 'Discover the full method'} {Icons.arrow(14)}
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {pillars.map((p, i) => (
            <div key={i} style={{ background: 'white', borderRadius: 18, padding: 28, border: `1px solid ${T.outline}30` }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: a.soft, color: a.color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>{p.icon}</div>
              <div className="v1-serif" style={{ fontSize: 22, fontWeight: 500, margin: '0 0 8px', letterSpacing: '-0.01em' }}>{p.t}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: T.inkSoft }}>{p.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection({ lang, T, a }) {
  const isMobile = useIsMobile();
  const all = TESTIMONIALS[lang];
  const items = [
    all.find(x => x.p === 'parents'),
    all.find(x => x.p === 'ecoles'),
    all.find(x => x.p === 'entreprises'),
  ];

  return (
    <section style={{ padding: isMobile ? '64px 20px' : '120px 48px', background: T.cream }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'end', justifyContent: 'space-between', marginBottom: 56, gap: 32 }}>
          <div>
            <div className="v1-eyebrow" style={{ marginBottom: 20 }}><span className="v1-rule"></span>{lang === 'fr' ? 'Ils témoignent' : 'They testify'}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 48, lineHeight: 1.1, letterSpacing: '-0.022em', fontWeight: 500, margin: 0, textWrap: 'balance' }}>
              {lang === 'fr' ? 'Ce qu\'ils disent de SOMUM.' : 'What they say about SOMUM.'}
            </h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flex: '0 0 auto' }}>
            <div style={{ display: 'flex', gap: 2, color: '#f5b301' }}>
              {[1,2,3,4,5].map(i => <span key={i}>{Icons.star(14)}</span>)}
            </div>
            <a href="https://www.google.com/search?q=SoMum+Coaching+Avis" target="_blank" rel="noopener" className="v1-link" style={{ fontSize: 13 }}>
              {lang === 'fr' ? 'Voir les avis Google' : 'See Google reviews'} {Icons.arrow(13)}
            </a>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 24 }}>
          {items.map((tm, i) => {
            const c = PERSONAS[tm.p];
            const pLabel = tm.p === 'parents' ? (lang === 'fr' ? 'Parent' : 'Parent') : tm.p === 'ecoles' ? (lang === 'fr' ? 'École' : 'School') : (lang === 'fr' ? 'Entreprise' : 'Company');
            return (
              <div key={i} style={{ background: 'white', borderRadius: 20, padding: 32, border: `1px solid ${T.outline}40`, position: 'relative', display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 999, background: c.soft, color: c.color, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', marginBottom: 20 }}>
                  · {pLabel}
                </div>
                <div style={{ color: c.color, opacity: 0.3, marginBottom: 8 }}>{Icons.quote(32)}</div>
                <p className="v1-serif" style={{ fontSize: 18, lineHeight: 1.5, fontWeight: 400, margin: '0 0 24px', letterSpacing: '-0.005em', flex: 1 }}>"{tm.q}"</p>
                <div style={{ borderTop: `1px solid ${T.outline}50`, paddingTop: 18 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{tm.a}</div>
                  <div className="v1-mono" style={{ fontSize: 10.5, letterSpacing: '0.1em', color: T.inkSoft, marginTop: 4, textTransform: 'uppercase' }}>{tm.r} · {tm.city}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function OffersSection({ lang, T, a }) {
  const isMobile = useIsMobile();
  const c = PERSONA_COPY[lang];
  const offers = [
    { p: 'parents',     t: c.parents.offers[0].t,     d: c.parents.offers[0].d,     price: c.parents.offers[0].price,     href: 'parents.html',     cta: lang === 'fr' ? 'Réserver mon appel' : 'Book my call' },
    { p: 'parents',     t: c.parents.offers[1].t,     d: c.parents.offers[1].d,     price: c.parents.offers[1].price,     href: 'parents.html',     cta: lang === 'fr' ? 'Voir le calendrier' : 'See schedule' },
    { p: 'ecoles',      t: c.ecoles.offers[0].t,      d: c.ecoles.offers[0].d,      price: c.ecoles.offers[0].price,      href: 'ecoles.html',      cta: lang === 'fr' ? 'Demander un devis' : 'Request a quote' },
    { p: 'entreprises', t: c.entreprises.offers[1].t, d: c.entreprises.offers[1].d, price: c.entreprises.offers[1].price, href: 'entreprises.html', cta: lang === 'fr' ? 'Diagnostic RH' : 'HR diagnostic' },
  ];

  return (
    <section style={{ padding: isMobile ? '64px 20px' : '120px 48px', background: T.creamSoft }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'end', justifyContent: 'space-between', marginBottom: 48, gap: 32 }}>
          <div>
            <div className="v1-eyebrow" style={{ marginBottom: 20 }}><span className="v1-rule"></span>{lang === 'fr' ? 'Offres en bref' : 'Offerings'}</div>
            <h2 className="v1-serif" style={{ fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.022em', fontWeight: 500, margin: 0, maxWidth: '20ch' }}>
              {lang === 'fr' ? 'Coaching, formations, conférences.' : 'Coaching, training, talks.'}
            </h2>
          </div>
          <p style={{ fontSize: 16, color: T.inkSoft, maxWidth: 360, lineHeight: 1.6, margin: 0 }}>
            {lang === 'fr' ? 'Du coaching individuel aux programmes en entreprise — chaque format suit la même méthode.' : 'From solo coaching to corporate programmes — every format follows the same method.'}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 16 }}>
          {offers.map((o, i) => {
            const persona = PERSONAS[o.p];
            return (
              <a key={i} href={o.href} style={{ background: 'white', borderRadius: 18, padding: 28, border: `1px solid ${T.outline}40`, textDecoration: 'none', color: T.ink, display: 'flex', flexDirection: 'column', minHeight: 280, transition: 'all .2s ease' }}>
                <div className="v1-mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: persona.color, marginBottom: 14, fontWeight: 600 }}>{persona.label_fr === 'Parents' && lang === 'fr' ? 'Parents' : persona.label_fr === 'Écoles' && lang === 'fr' ? 'Écoles' : persona.label_fr === 'Entreprises' && lang === 'fr' ? 'Entreprises' : persona.label_en}</div>
                <h3 className="v1-serif" style={{ fontSize: 22, fontWeight: 500, margin: '0 0 10px', letterSpacing: '-0.01em', lineHeight: 1.2 }}>{o.t}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: T.inkSoft, margin: '0 0 20px', flex: 1 }}>{o.d}</p>
                <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: T.ink, marginBottom: 14, textTransform: 'uppercase' }}>{o.price}</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: persona.color, fontSize: 13, fontWeight: 600 }}>{o.cta}{Icons.arrow(13)}</div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function JenniferMiniSection({ lang, T, a }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '64px 20px' : '120px 48px', background: T.cream }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '5fr 7fr', gap: isMobile ? 40 : 80, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div style={{ borderRadius: 8, overflow: 'hidden', border: `8px solid white`, boxShadow: '0 30px 60px -30px rgba(9,93,111,0.25)' }}>
            <img src="assets/jennifer.jpg" alt="Jennifer" style={{ width: '100%', display: 'block', aspectRatio: '4/5', objectFit: 'cover' }} />
          </div>
          <div style={{ position: 'absolute', bottom: -22, right: -22, background: 'white', padding: '16px 20px', borderRadius: 12, boxShadow: '0 20px 40px -20px rgba(9,93,111,0.25)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 38, height: 38, borderRadius: 999, background: a.soft, color: a.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icons.spark(18)}</div>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 600, lineHeight: 1.2 }}>{lang === 'fr' ? 'Certifiée Discipline Positive©' : 'Certified Positive Discipline©'}</div>
              <div className="v1-mono" style={{ fontSize: 9.5, letterSpacing: '0.12em', color: T.inkSoft, textTransform: 'uppercase', marginTop: 2 }}>{lang === 'fr' ? 'Famille · École · Entreprise' : 'Family · School · Company'}</div>
            </div>
          </div>
        </div>
        <div>
          <div className="v1-eyebrow" style={{ marginBottom: 20, color: a.color }}><span className="v1-rule" style={{ background: a.color, opacity: 1 }}></span>{lang === 'fr' ? 'Qui je suis' : 'Who I am'}</div>
          <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 48, lineHeight: 1.1, letterSpacing: '-0.022em', fontWeight: 500, margin: '0 0 28px', textWrap: 'balance' }}>
            {lang === 'fr' ? 'Jennifer Van Vaerenberg.' : 'Jennifer Van Vaerenberg.'}<br/>
            <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>{lang === 'fr' ? 'Coach, formatrice, conférencière.' : 'Coach, trainer, speaker.'}</em>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: T.inkSoft, margin: '0 0 20px', maxWidth: 560 }}>
            {lang === 'fr'
              ? 'Mère, formatrice certifiée et passionnée par les neurosciences relationnelles. J\'accompagne celles et ceux qui veulent transformer leurs relations — durablement et avec respect.'
              : 'Mother, certified trainer, passionate about relational neuroscience. I support those who want to transform their relationships — durably and with respect.'}
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: T.inkSoft, margin: '0 0 32px', maxWidth: 560 }}>
            {lang === 'fr'
              ? 'Ma mission : faire de la Discipline Positive un standard d\'éducation, de pédagogie et de management au Luxembourg et au-delà.'
              : 'My mission: make Positive Discipline a standard for education, pedagogy and management in Luxembourg and beyond.'}
          </p>
          <a href="about.html" className="v1-btn-outline">
            {lang === 'fr' ? 'Lire le parcours complet' : 'Read the full story'} {Icons.arrow(14)}
          </a>
        </div>
      </div>
    </section>
  );
}

function FinalCTASection({ lang, T, a }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 20px 64px' : '60px 48px 100px', background: T.cream }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ background: T.teal, color: T.cream, borderRadius: 32, padding: isMobile ? '36px 24px' : '80px 64px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 32 : 64, alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -100, right: -100, width: 400, height: 400, borderRadius: '50%', background: `radial-gradient(circle, ${T.copper}30, transparent 60%)` }}></div>
          <div style={{ position: 'absolute', bottom: -150, left: -50, width: 300, height: 300, borderRadius: '50%', background: 'rgba(184, 221, 226, 0.08)' }}></div>
          <div style={{ position: 'relative' }}>
            <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.tealPale, marginBottom: 24 }}>{lang === 'fr' ? 'Premier pas' : 'First step'}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 30 : 52, lineHeight: 1.08, letterSpacing: '-0.022em', fontWeight: 500, margin: '0 0 24px', textWrap: 'balance' }}>
              {lang === 'fr' ? 'Prêts à transformer vos relations ?' : 'Ready to transform your relationships?'}
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, opacity: 0.85, margin: 0, maxWidth: 540 }}>
              {lang === 'fr' ? 'Commençons par un appel découverte gratuit. 30 minutes, sans engagement, pour comprendre votre situation et vérifier que nous sommes alignés.' : 'Let\'s start with a free discovery call. 30 minutes, no commitment, to understand your situation and check we are aligned.'}
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
            <a href={SOMUM_BOOKING.parents} target="_blank" rel="noopener" style={{ background: T.copper, color: 'white', padding: '20px 32px', borderRadius: 999, border: 'none', fontWeight: 600, fontSize: 15, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 12, textDecoration: 'none', boxShadow: '0 12px 32px rgba(242,140,122,0.4)' }}>
              {lang === 'fr' ? 'Réserver mon appel découverte' : 'Book my discovery call'} {Icons.arrow(16)}
            </a>
            <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.14em', opacity: 0.7, textTransform: 'uppercase' }}>
              {lang === 'fr' ? '30 min · gratuit · sans engagement' : '30 min · free · no commitment'}
            </div>
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(252,249,245,0.15)', width: '100%' }}>
              <div className="v1-mono" style={{ fontSize: 10, letterSpacing: '0.18em', opacity: 0.55, textTransform: 'uppercase', marginBottom: 8 }}>
                {lang === 'fr' ? 'Ou écrivez-moi' : 'Or write to me'}
              </div>
              <a href="mailto:somumlux@gmail.com" style={{ color: T.cream, fontSize: 14, textDecoration: 'none', opacity: 0.9 }}>somumlux@gmail.com</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ lang = 'fr', accent = 'teal' }) {
  const T = SOMUM_TOKENS;
  const a = _accentTriple(accent);
  return (
    <SitePage lang={lang} accent={accent} activePage="home">
      <HomeHero lang={lang} T={T} a={a} />
      <TrustedStrip lang={lang} T={T} />
      <PersonaDoorsSection lang={lang} T={T} a={a} />
      <DisciplinePositiveSection lang={lang} T={T} a={a} />
      <TestimonialsSection lang={lang} T={T} a={a} />
      <OffersSection lang={lang} T={T} a={a} />
      <JenniferMiniSection lang={lang} T={T} a={a} />
      <FinalCTASection lang={lang} T={T} a={a} />
    </SitePage>
  );
}

window.HomePage = HomePage;