// SOMUM — La Méthode (Discipline Positive deep-dive)

function MethodePage({ lang = 'fr' }) {
  const T = SOMUM_TOKENS;
  const isMobile = useIsMobile();
  const fr = lang === 'fr';

  const pillars = fr ? [
    { n: '01', t: 'Bienveillance ET fermeté', d: 'Ni autoritarisme, ni laxisme. Une troisième voie : respecter l\'enfant ET poser un cadre clair.', icon: Icons.scale },
    { n: '02', t: 'Sentiment d\'appartenance', d: 'Tout être humain a besoin de se sentir relié et utile. Sans cela : comportements perturbateurs, démotivation, retrait.', icon: Icons.heart },
    { n: '03', t: 'Coopération plutôt qu\'obéissance', d: 'Les enfants — comme les adultes — coopèrent quand ils sentent qu\'on les comprend et qu\'on les implique.', icon: Icons.handshake },
    { n: '04', t: 'L\'erreur comme apprentissage', d: 'L\'erreur n\'est plus punie : elle devient une opportunité d\'apprendre, de réparer, de grandir.', icon: Icons.spark },
  ] : [
    { n: '01', t: 'Kindness AND firmness', d: 'Neither authoritarian nor permissive. A third way: respect the child AND hold a clear frame.', icon: Icons.scale },
    { n: '02', t: 'Sense of belonging', d: 'Every human needs to feel connected and useful. Without that: disruptive behaviour, disengagement, withdrawal.', icon: Icons.heart },
    { n: '03', t: 'Cooperation over obedience', d: 'Children — like adults — cooperate when they feel understood and involved.', icon: Icons.handshake },
    { n: '04', t: 'Mistakes as learning', d: 'Mistakes are no longer punished: they become opportunities to learn, repair, grow.', icon: Icons.spark },
  ];

  const lineage = fr ? [
    { y: '1870s', t: 'Alfred Adler', d: 'Le sentiment d\'appartenance comme moteur du comportement humain.' },
    { y: '1920s', t: 'Rudolf Dreikurs', d: 'Application aux familles et aux écoles — démocratie éducative.' },
    { y: '1981', t: 'Jane Nelsen & Lynn Lott', d: 'Codification de la méthode "Positive Discipline" aux États-Unis.' },
    { y: '2014+', t: 'France & Luxembourg', d: 'Diffusion européenne — formation de formateurs certifiés.' },
    { y: '2024', t: 'SOMUM', d: 'Adaptation aux trois sphères : famille, école, entreprise.' },
  ] : [
    { y: '1870s', t: 'Alfred Adler', d: 'Belonging as the driver of human behaviour.' },
    { y: '1920s', t: 'Rudolf Dreikurs', d: 'Applied to families and schools — educational democracy.' },
    { y: '1981', t: 'Jane Nelsen & Lynn Lott', d: '"Positive Discipline" method codified in the US.' },
    { y: '2014+', t: 'France & Luxembourg', d: 'European diffusion — certified trainer programmes.' },
    { y: '2024', t: 'SOMUM', d: 'Adapted to three spheres: family, school, company.' },
  ];

  const proof = fr ? [
    { stat: '30+', d: 'années de pratique à travers le monde' },
    { stat: '50+', d: 'pays où la méthode est enseignée' },
    { stat: '100%', d: 'compatible avec les neurosciences' },
  ] : [
    { stat: '30+', d: 'years practiced worldwide' },
    { stat: '50+', d: 'countries teaching the method' },
    { stat: '100%', d: 'aligned with neuroscience' },
  ];

  const misconceptions = fr ? [
    { wrong: '"C\'est de la permissivité."', right: 'Non — la fermeté est aussi importante que la bienveillance. On pose un cadre.' },
    { wrong: '"C\'est gentil, mais ça ne marche pas avec les ados."', right: 'C\'est l\'âge où la méthode brille le plus : elle redonne du sens et du lien.' },
    { wrong: '"En entreprise, ça reste un truc de famille."', right: 'Adler et Dreikurs travaillaient avec des écoles. SOMUM a adapté l\'approche au management.' },
    { wrong: '"Il faut renoncer à l\'autorité."', right: 'Au contraire — on devient une autorité légitime, pas autoritaire.' },
  ] : [
    { wrong: '"It\'s permissive."', right: 'No — firmness matters as much as kindness. A clear frame is held.' },
    { wrong: '"Sounds nice, but won\'t work with teens."', right: 'That\'s where the method shines — it restores meaning and connection.' },
    { wrong: '"In a company it\'s still a family thing."', right: 'Adler and Dreikurs worked with schools. SOMUM adapted it to management.' },
    { wrong: '"You give up authority."', right: 'On the contrary — you become a legitimate authority, not an authoritarian one.' },
  ];

  return (
    <SitePage lang={lang} accent="teal" activePage="methode">
      {/* HERO */}
      <section style={{ background: T.cream, padding: isMobile ? '48px 20px 56px' : '72px 48px 96px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <div className="v1-eyebrow" style={{ marginBottom: 28, justifyContent: 'center' }}>
            <span className="v1-rule"></span>
            {fr ? 'La méthode' : 'The method'}
            <span className="v1-rule"></span>
          </div>
          <h1 className="v1-serif" style={{ fontSize: isMobile ? 36 : 84, lineHeight: 1.02, letterSpacing: '-0.03em', fontWeight: 500, margin: '0 0 28px', textWrap: 'balance' }}>
            {fr ? 'La ' : 'A method called '}<em style={{ fontStyle: 'italic', color: T.teal, fontWeight: 400 }}>Discipline Positive</em>{fr && '.'}
          </h1>
          <p style={{ fontSize: isMobile ? 16 : 21, lineHeight: 1.55, color: T.inkSoft, maxWidth: 720, margin: '0 auto', textWrap: 'balance' }}>
            {fr
              ? 'Une approche éducative et relationnelle développée depuis plus de 30 ans, fondée sur les travaux d\'Alfred Adler et validée par les neurosciences.'
              : 'An educational and relational approach developed for over 30 years, rooted in Alfred Adler\'s work and validated by neuroscience.'}
          </p>
        </div>
      </section>

      {/* PROOF */}
      <section style={{ padding: isMobile ? '40px 20px' : '60px 48px', background: T.creamMed, borderTop: `1px solid ${T.outline}40`, borderBottom: `1px solid ${T.outline}40` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 48 }}>
          {proof.map((p, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div className="v1-serif" style={{ fontSize: isMobile ? 40 : 72, fontWeight: 500, color: T.teal, lineHeight: 1, letterSpacing: '-0.03em' }}>{p.stat}</div>
              <div style={{ fontSize: 14.5, color: T.inkSoft, marginTop: 12, lineHeight: 1.5 }}>{p.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PILLARS */}
      <section style={{ padding: isMobile ? '56px 20px' : '110px 48px', background: T.cream }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <div className="v1-eyebrow" style={{ marginBottom: 20 }}><span className="v1-rule"></span>{fr ? 'Les 4 piliers' : 'The 4 pillars'}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 52, lineHeight: 1.08, letterSpacing: '-0.025em', fontWeight: 500, margin: 0, textWrap: 'balance' }}>
              {fr ? 'Quatre principes simples — et tout change.' : 'Four simple principles — and everything changes.'}
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 24 }}>
            {pillars.map((p, i) => (
              <div key={i} style={{ background: 'white', borderRadius: 24, padding: isMobile ? 24 : 40, border: `1px solid ${T.outline}40`, display: 'flex', gap: 24 }}>
                <div style={{ flex: '0 0 auto' }}>
                  <div style={{ width: 56, height: 56, borderRadius: 14, background: T.tealMist, color: T.teal, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>{p.icon(28)}</div>
                  <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: T.teal, fontWeight: 600, textAlign: 'center' }}>{p.n}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <h3 className="v1-serif" style={{ fontSize: 26, fontWeight: 500, margin: '0 0 12px', letterSpacing: '-0.012em', lineHeight: 1.18 }}>{p.t}</h3>
                  <p style={{ fontSize: 15.5, lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LINEAGE / TIMELINE */}
      <section style={{ padding: isMobile ? '56px 20px' : '110px 48px', background: T.creamSoft }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ marginBottom: 56 }}>
            <div className="v1-eyebrow" style={{ marginBottom: 20 }}><span className="v1-rule"></span>{fr ? 'D\'où vient la méthode' : 'Where it comes from'}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 44, lineHeight: 1.1, letterSpacing: '-0.022em', fontWeight: 500, margin: 0, textWrap: 'balance', maxWidth: '20ch' }}>
              {fr ? 'Une lignée de plus de 150 ans.' : 'A lineage spanning 150 years.'}
            </h2>
          </div>
          <div style={{ position: 'relative', paddingLeft: 32 }}>
            <div style={{ position: 'absolute', left: 11, top: 8, bottom: 8, width: 1, background: T.outline }}></div>
            {lineage.map((l, i) => (
              <div key={i} style={{ position: 'relative', paddingBottom: 36, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '110px 1fr', gap: 32, alignItems: 'baseline' }}>
                <div style={{ position: 'absolute', left: 5, top: 8, width: 13, height: 13, borderRadius: 999, background: T.teal, border: `3px solid ${T.creamSoft}` }}></div>
                <div className="v1-mono" style={{ fontSize: 12, letterSpacing: '0.1em', color: T.teal, fontWeight: 600, paddingLeft: 24 }}>{l.y}</div>
                <div>
                  <div className="v1-serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 6, letterSpacing: '-0.01em' }}>{l.t}</div>
                  <div style={{ fontSize: 15, color: T.inkSoft, lineHeight: 1.55 }}>{l.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* THREE SPHERES */}
      <section style={{ padding: isMobile ? '56px 20px' : '110px 48px', background: T.cream }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ marginBottom: 56, textAlign: 'center', maxWidth: 800, margin: '0 auto 56px' }}>
            <div className="v1-eyebrow" style={{ marginBottom: 20, justifyContent: 'center' }}><span className="v1-rule"></span>{fr ? 'Trois sphères, une méthode' : 'Three spheres, one method'}<span className="v1-rule"></span></div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 44, lineHeight: 1.1, letterSpacing: '-0.022em', fontWeight: 500, margin: 0, textWrap: 'balance' }}>
              {fr ? 'La même approche, adaptée à chaque contexte.' : 'The same approach, adapted to each context.'}
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20 }}>
            {[
              { id: 'parents', label: fr ? 'À la maison' : 'At home', text: fr ? 'Pour parents qui veulent allier respect et cadre clair.' : 'For parents who want both respect and a clear frame.', href: 'parents.html' },
              { id: 'ecoles', label: fr ? 'À l\'école' : 'At school', text: fr ? 'Pour équipes pédagogiques qui veulent transformer le climat.' : 'For teaching teams who want to shift the climate.', href: 'ecoles.html' },
              { id: 'entreprises', label: fr ? 'Au travail' : 'At work', text: fr ? 'Pour managers qui veulent un leadership humain et engageant.' : 'For managers who want human, engaging leadership.', href: 'entreprises.html' },
            ].map((s, i) => {
              const p = PERSONAS[s.id];
              return (
                <a key={i} href={s.href} style={{ background: 'white', borderRadius: 24, padding: isMobile ? 24 : 36, border: `1px solid ${T.outline}40`, textDecoration: 'none', color: T.ink, transition: 'transform 0.2s', display: 'block' }}>
                  <div style={{ width: 48, height: 48, borderRadius: 12, background: p.soft, color: p.color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>{Icons.compass(24)}</div>
                  <h3 className="v1-serif" style={{ fontSize: 24, fontWeight: 500, margin: '0 0 10px', letterSpacing: '-0.012em' }}>{s.label}</h3>
                  <p style={{ fontSize: 14.5, lineHeight: 1.6, color: T.inkSoft, margin: '0 0 24px' }}>{s.text}</p>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: p.color }}>
                    {fr ? 'Découvrir' : 'Explore'} {Icons.arrow(13)}
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* MISCONCEPTIONS */}
      <section style={{ padding: isMobile ? '56px 20px' : '110px 48px', background: T.tealMist }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ marginBottom: 56 }}>
            <div className="v1-eyebrow" style={{ marginBottom: 20, color: T.teal }}><span className="v1-rule" style={{ background: T.teal, opacity: 1 }}></span>{fr ? 'Idées reçues' : 'Misconceptions'}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 44, lineHeight: 1.1, letterSpacing: '-0.022em', fontWeight: 500, margin: 0, textWrap: 'balance', maxWidth: '24ch' }}>
              {fr ? 'Ce que la Discipline Positive n\'est pas.' : 'What Positive Discipline is not.'}
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {misconceptions.map((m, i) => (
              <div key={i} style={{ background: 'white', borderRadius: 16, padding: isMobile ? '20px 20px' : '28px 32px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.5fr', gap: isMobile ? 16 : 32, alignItems: 'center', border: `1px solid ${T.outline}40` }}>
                <div className="v1-serif" style={{ fontSize: isMobile ? 17 : 20, fontStyle: 'italic', color: T.inkSoft, fontWeight: 400 }}>{m.wrong}</div>
                <div style={{ fontSize: 15, lineHeight: 1.55, color: T.ink, paddingLeft: isMobile ? 16 : 32, borderLeft: `3px solid ${T.teal}` }}>{m.right}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: isMobile ? '56px 20px' : '90px 48px', background: T.cream }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 48, lineHeight: 1.08, letterSpacing: '-0.025em', fontWeight: 500, margin: '0 0 20px', textWrap: 'balance' }}>
            {fr ? 'Curieux·se ? Réservez 30 minutes.' : 'Curious? Book 30 minutes.'}
          </h2>
          <p style={{ fontSize: isMobile ? 16 : 17, lineHeight: 1.6, color: T.inkSoft, margin: '0 0 32px', maxWidth: 580, marginInline: 'auto' }}>
            {fr ? 'Un appel découverte gratuit pour explorer si la méthode vous correspond — à la maison, à l\'école ou en entreprise.' : 'A free discovery call to explore if the method fits — at home, school or work.'}
          </p>
          <a href={SOMUM_BOOKING.parents} target="_blank" rel="noopener" style={{ background: T.teal, color: 'white', padding: '18px 32px', borderRadius: 999, fontWeight: 600, fontSize: 15, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            {fr ? 'Réserver mon appel' : 'Book my call'} {Icons.arrow(15)}
          </a>
        </div>
      </section>
    </SitePage>
  );
}

window.MethodePage = MethodePage;