// ── Logos strip + Method + UseCases + Testimonial + CTA + Footer ──

function Mk2LogosStrip() {
  const logos = ['AXA', 'BNP Paribas', 'Decathlon', 'Renault', 'SNCF', 'L\'Oréal'];
  return (
    <section style={{ padding: '48px 0 16px' }}>
      <div className="mk2-container">
        <div className="mk2-eyebrow" style={{ textAlign: 'center', marginBottom: 24 }}>
          Ils nous font confiance
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${logos.length}, 1fr)`,
          gap: 32, alignItems: 'center', opacity: 0.55,
        }}>
          {logos.map(l => (
            <div key={l} style={{
              fontFamily: 'var(--mk2-serif)', fontSize: 22, fontWeight: 500,
              textAlign: 'center', color: 'var(--mk2-text)',
              fontVariationSettings: '"opsz" 48',
              letterSpacing: '-0.01em',
            }}>{l}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Mk2Method() {
  const steps = [
    { n: '01', t: 'Scénarisez', d: 'Décrivez la situation en quelques phrases. Miikaa génère le cadre, la persona, les objectifs pédagogiques — vous gardez la main sur chaque détail.' },
    { n: '02', t: 'Pratiquez', d: 'Vos équipes rejoignent une visioconférence avec l\'IA. Elle écoute, reformule, relance, temporise. L\'expérience se rapproche d\'un vrai face-à-face.' },
    { n: '03', t: 'Progressez', d: 'À la fin, un rapport humain : ce qui a été dit, ce qui a été perçu, ce qui peut s\'améliorer. Intégrable à votre LMS ou votre ATS.' },
  ];
  return (
    <section id="methode" style={{ padding: '120px 0', background: 'var(--mk2-canvas-2)' }}>
      <div className="mk2-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, marginBottom: 72 }}>
          <div>
            <div className="mk2-eyebrow" style={{ marginBottom: 14 }}>La méthode</div>
            <h2 className="mk2-h2" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)' }}>
              Trois étapes,<br/>
              <span className="mk2-italic" style={{ color: 'var(--mk2-ember)' }}>pas une de plus.</span>
            </h2>
          </div>
          <p className="mk2-body" style={{ fontSize: 18, alignSelf: 'end', maxWidth: 520 }}>
            Nous avons travaillé avec des formateurs, des DRH et des apprenants pour garder Miikaa simple, utile et respectueux du temps de chacun.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {steps.map(s => (
            <div key={s.n} style={{ borderTop: '1px solid var(--mk2-hair-strong)', paddingTop: 24 }}>
              <div style={{
                fontFamily: 'var(--mk2-serif)', fontStyle: 'italic', fontSize: 14,
                color: 'var(--mk2-ember)', marginBottom: 12,
              }}>{s.n}</div>
              <h3 className="mk2-h3" style={{ fontSize: 22, marginBottom: 10 }}>{s.t}</h3>
              <p className="mk2-body" style={{ fontSize: 15 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Mk2UseCases({ onCTA }) {
  const items = [
    {
      tag: 'eLearning & LMS',
      h: 'Des modules SCORM qui font pratiquer, pas seulement cliquer.',
      body: 'Intégrez des simulations conversationnelles dans Moodle, 360Learning, Docebo. L\'apprenant pratique en autonomie, le formateur garde la visibilité.',
      bullets: ['Export SCORM 1.2, 2004, xAPI, cmi5', 'Suivi des compétences en temps réel', 'Pas de migration de plateforme'],
      cta: 'Voir la démo eLearning',
      accentBg: 'var(--mk2-clay)',
      img: 'assets/app-scenarios.png',
      imgCaption: 'Bibliothèque de scénarios',
    },
    {
      tag: 'Recrutement & RH',
      h: 'Un assessment center virtuel, reproductible et sans biais.',
      body: 'Faites passer des mises en situation identiques à tous vos candidats. Obtenez une mesure comparable de leurs savoir-être — plus juste, plus rapide.',
      bullets: ['Évaluation standardisée par poste', 'Rapport candidat détaillé', 'Intégrable dans votre ATS / SIRH'],
      cta: 'Voir la démo RH',
      accentBg: 'var(--mk2-paper)',
      img: 'assets/app-personas.png',
      imgCaption: 'Personas IA par profil candidat',
    },
    {
      tag: 'Management & Leadership',
      h: 'Entraînez vos managers aux conversations qui comptent.',
      body: 'Feedback, entretien annuel, gestion de conflit, prospection. Vos managers s\'exercent dans un cadre sûr, avant de le faire en vrai.',
      bullets: ['Scénarios managériaux sur-mesure', 'Mesure de l\'empathie et de l\'assertivité', 'Parcours progressif par équipe'],
      cta: 'Voir la démo Management',
      accentBg: 'var(--mk2-canvas-2)',
      img: 'assets/app-manager.png',
      imgCaption: 'Tableau de bord manager',
    },
  ];
  return (
    <section id="useCases" style={{ padding: '120px 0' }}>
      <div className="mk2-container">
        <div style={{ textAlign: 'center', marginBottom: 72, maxWidth: 720, margin: '0 auto 72px' }}>
          <div className="mk2-eyebrow" style={{ marginBottom: 14 }}>Pour qui ?</div>
          <h2 className="mk2-h2" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)' }}>
            Un même moteur,{' '}
            <span className="mk2-italic" style={{ color: 'var(--mk2-ember)' }}>trois usages</span>{' '}
            très concrets.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          {items.map((it, i) => {
            const imgFirst = i % 2 === 1;
            const Copy = (
              <div style={{ padding: '56px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div className="mk2-eyebrow" style={{ marginBottom: 12 }}>{it.tag}</div>
                <h3 className="mk2-h2" style={{ fontSize: 'clamp(26px, 2.6vw, 34px)', marginBottom: 14 }}>{it.h}</h3>
                <p className="mk2-body" style={{ marginBottom: 22, fontSize: 15 }}>{it.body}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 26px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {it.bullets.map((b, j) => (
                    <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, color: 'var(--mk2-text-2)' }}>
                      <Mk2Check size={16} style={{ color: 'var(--mk2-ember)', marginTop: 2, flexShrink: 0 }}/>
                      {b}
                    </li>
                  ))}
                </ul>
                <button className="mk2-btn mk2-btn-primary" onClick={() => onCTA?.(it.tag)} style={{ alignSelf: 'flex-start' }}>
                  {it.cta} <Mk2Arrow size={15}/>
                </button>
              </div>
            );
            const Shot = (
              <div style={{
                position: 'relative',
                padding: '48px 24px',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                perspective: '1800px',
                overflow: 'hidden',
              }}>
                {/* Subtle accent orb */}
                <div aria-hidden style={{
                  position: 'absolute',
                  [imgFirst ? 'left' : 'right']: '-15%',
                  top: '10%',
                  width: 280, height: 280, borderRadius: '50%',
                  background: `radial-gradient(circle, ${i === 0 ? 'rgba(200,90,60,0.22)' : i === 1 ? 'rgba(61,90,108,0.18)' : 'rgba(107,127,94,0.22)'}, transparent 70%)`,
                  filter: 'blur(20px)',
                  pointerEvents: 'none',
                }}/>
                <div style={{
                  transform: `rotateY(${imgFirst ? 10 : -10}deg) rotateX(3deg)`,
                  transformOrigin: imgFirst ? 'left center' : 'right center',
                  width: '108%',
                  filter: 'drop-shadow(0 40px 50px rgba(63,48,30,.25))',
                }}>
                  <div style={{
                    background: '#fff',
                    border: '1px solid var(--mk2-hair)',
                    borderRadius: 12,
                    overflow: 'hidden',
                  }}>
                    <div style={{
                      height: 28,
                      background: 'linear-gradient(180deg, #FBF8F3, #F2EBDF)',
                      borderBottom: '1px solid var(--mk2-hair)',
                      display: 'flex', alignItems: 'center', gap: 6, padding: '0 12px',
                    }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#E8746B' }}/>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#E8C06B' }}/>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#7FB27E' }}/>
                      <span style={{
                        marginLeft: 'auto', fontSize: 10, color: 'var(--mk2-muted)',
                        fontFamily: 'var(--mk2-mono)',
                      }}>{it.imgCaption}</span>
                    </div>
                    <img src={it.img} alt={it.imgCaption} style={{ width: '100%', display: 'block' }}/>
                  </div>
                </div>
              </div>
            );
            return (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1.1fr',
                gap: 0,
                background: it.accentBg,
                border: '1px solid var(--mk2-hair)',
                borderRadius: 'var(--mk2-r-xl)',
                overflow: 'hidden',
                minHeight: 420,
              }}>
                {imgFirst ? <>{Shot}{Copy}</> : <>{Copy}{Shot}</>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Mk2Testimonial() {
  return (
    <section style={{ padding: '120px 0', background: 'var(--mk2-canvas-2)' }}>
      <div className="mk2-container" style={{ maxWidth: 960 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 48, alignItems: 'center' }}>
          <div style={{ width: 180, height: 220, borderRadius: 'var(--mk2-r-lg)', overflow: 'hidden', flexShrink: 0 }}>
            <img src="assets/portrait-lionel.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
          <div>
            <Mk2Quote size={28} style={{ color: 'var(--mk2-ember)', marginBottom: 16 }}/>
            <p className="mk2-display" style={{
              fontSize: 'clamp(24px, 2.6vw, 34px)', lineHeight: 1.3,
              letterSpacing: '-0.015em', marginBottom: 24,
            }}>
              Pour la première fois, nos recruteurs évaluent les candidats sur ce qu'ils <span className="mk2-italic" style={{ color: 'var(--mk2-ember)' }}>font</span>,
              pas sur ce qu'ils racontent. On gagne trois semaines par embauche.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>Claire Dubreuil</div>
                <div className="mk2-caption">Head of Talent · Groupe Arva</div>
              </div>
              <div style={{ width: 1, height: 28, background: 'var(--mk2-hair-strong)' }}/>
              <div style={{ display: 'flex', gap: 2 }}>
                {Array.from({ length: 5 }).map((_, i) => (
                  <Mk2Star key={i} size={14} style={{ color: 'var(--mk2-amber)', fill: 'var(--mk2-amber)' }}/>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Mk2CTABand({ onCTA }) {
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="mk2-container">
        <div style={{
          background: 'var(--mk2-ink)',
          color: 'var(--mk2-text-dark)',
          borderRadius: 'var(--mk2-r-xl)',
          padding: '80px 64px',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -60, right: -60, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle, rgba(200,90,60,.35), transparent 70%)' }}/>
          <div style={{ position: 'relative', maxWidth: 680 }}>
            <h2 className="mk2-display" style={{
              fontSize: 'clamp(36px, 4.5vw, 56px)',
              color: 'var(--mk2-text-dark)', marginBottom: 24,
            }}>
              Offrez-vous 30 minutes{' '}
              <span className="mk2-italic" style={{ color: 'var(--mk2-ember-soft)' }}>pour voir.</span>
            </h2>
            <p style={{ color: 'var(--mk2-muted-dark)', fontSize: 18, lineHeight: 1.65, marginBottom: 36, maxWidth: 560 }}>
              Une démo personnalisée, avec un scénario issu de votre métier. Pas de commercial agressif, pas de slides creux — juste la plateforme, vos cas d'usage, et vos questions.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="mk2-btn mk2-btn-ember" onClick={() => onCTA?.()} style={{ padding: '14px 28px', fontSize: 15 }}>
                Réserver ma démo <Mk2Arrow size={15}/>
              </button>
              <button className="mk2-btn" style={{
                background: 'transparent', color: 'var(--mk2-text-dark)',
                border: '1px solid rgba(246,241,234,.2)', padding: '14px 24px', fontSize: 15,
              }}>
                Nous écrire <Mk2Chat size={14}/>
              </button>
            </div>
            <div style={{ marginTop: 24, color: 'var(--mk2-muted-dark)', fontSize: 13 }}>
              Sans engagement · Réponse humaine sous 24 h
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Mk2Footer({ onNav }) {
  const navLink = (id, label) => (
    <a key={id} href={`#${id}`}
      onClick={e => { e.preventDefault(); onNav?.(id); }}
      style={{ display: 'block', color: 'var(--mk2-text-dark)', fontSize: 14, textDecoration: 'none', padding: '4px 0', fontWeight: 450, transition: 'color .18s' }}
      onMouseEnter={e => e.currentTarget.style.color = 'var(--mk2-ember-soft)'}
      onMouseLeave={e => e.currentTarget.style.color = 'var(--mk2-text-dark)'}
    >{label}</a>
  );

  return (
    <footer style={{ background: 'var(--mk2-ink-2)', color: 'var(--mk2-text-dark)', padding: '80px 0 40px' }}>
      <div className="mk2-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48 }}>
          {/* Marque */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, cursor: 'pointer' }}
              onClick={() => onNav?.('home')}>
              <Mk2Mark size={56} color="var(--mk2-text-dark)"/>
              <span className="mk2-display" style={{ fontSize: 28, color: 'var(--mk2-text-dark)' }}>miikaa</span>
            </div>
            <p style={{ color: 'var(--mk2-muted-dark)', fontSize: 14, lineHeight: 1.7, maxWidth: 300 }}>
              La simulation IA conversationnelle qui forme et évalue comme un humain exigeant — disponible 24/7.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
              <a href="mailto:contact@miikaa.io" style={{ fontSize: 12, color: 'var(--mk2-muted-dark)', textDecoration: 'none' }}>contact@miikaa.io</a>
            </div>
          </div>

          {/* Solution */}
          <div>
            <div className="mk2-eyebrow" style={{ marginBottom: 16, color: 'var(--mk2-muted-dark)' }}>Solution</div>
            {navLink('solution', 'Fonctionnalités')}
            {navLink('methode', 'Méthode')}
            {navLink('useCases', 'Pour qui ?')}
            {navLink('scenarios', 'Catalogue de scénarios')}
          </div>

          {/* Informations */}
          <div>
            <div className="mk2-eyebrow" style={{ marginBottom: 16, color: 'var(--mk2-muted-dark)' }}>Informations</div>
            {navLink('faq', 'FAQ')}
            {navLink('contact', 'Contact')}
            <a href="#" style={{ display: 'block', color: 'var(--mk2-text-dark)', fontSize: 14, textDecoration: 'none', padding: '4px 0', fontWeight: 450 }}>Mentions légales</a>
            <a href="#" style={{ display: 'block', color: 'var(--mk2-text-dark)', fontSize: 14, textDecoration: 'none', padding: '4px 0', fontWeight: 450 }}>Confidentialité</a>
          </div>

          {/* Intégrations */}
          <div>
            <div className="mk2-eyebrow" style={{ marginBottom: 16, color: 'var(--mk2-muted-dark)' }}>Intégrations</div>
            {['SCORM 1.2 & 2004', 'xAPI / Tin Can', 'Moodle', '360Learning', 'Workday', 'RGPD & AI Act'].map(l => (
              <span key={l} style={{ display: 'block', color: 'var(--mk2-muted-dark)', fontSize: 13, padding: '3px 0' }}>{l}</span>
            ))}
          </div>
        </div>

        <div style={{
          marginTop: 64, paddingTop: 24,
          borderTop: '1px solid rgba(246,241,234,.1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          color: 'var(--mk2-muted-dark)', fontSize: 13,
          flexWrap: 'wrap', gap: 12,
        }}>
          <span>© 2026 Miikaa — Tous droits réservés</span>
          <span style={{ fontFamily: 'var(--mk2-serif-italic)', fontStyle: 'italic' }}>Conçu en France, avec soin. 🇫🇷</span>
        </div>
      </div>
    </footer>
  );
}

window.Mk2LogosStrip = Mk2LogosStrip;
window.Mk2Method = Mk2Method;
window.Mk2UseCases = Mk2UseCases;
window.Mk2Testimonial = Mk2Testimonial;
window.Mk2CTABand = Mk2CTABand;
window.Mk2Footer = Mk2Footer;
