/* global React */
const { useState: useStateC } = React;

/* =========================================================
   COLLABORATIVE HOW-IT-WORKS
   Makes it crystal clear: this is a TEAM platform, not a solo MOOC.
========================================================= */
const Collaboratif = () => {
  const [active, setActive] = useStateC(0);

  const layers = [
  {
    role: 'Apprenant',
    icon: '🌱',
    title: '5 minutes par jour. À son rythme.',
    desc: "Un défi quotidien ancré dans son métier. Validé par ses pairs ou son manager. Pas de jargon, pas de pression.",
    bullets: ['Défi du jour personnalisé', 'Workspace équipe', 'Bibliothèque de prompts partagée']
  },
  {
    role: 'Manager',
    icon: '👥',
    title: 'Pilote la montée en compétences de son équipe.',
    desc: "Visibilité sur la progression collective, challenges d'équipe, validation des cas d'usage métier. Sans devenir DRH.",
    bullets: ['Tableau de bord équipe', 'Challenges collectifs', 'Validation des cas métier'],
    highlight: true
  },
  {
    role: 'Admin / RH',
    icon: '⚙️',
    title: 'Déploie sur toute l\'entreprise. Sereinement.',
    desc: "SSO, exports OPCO, suivi Qualiopi, certifications. Tout ce qu'il faut pour justifier le budget et rien de plus.",
    bullets: ['SSO & exports OPCO', 'Suivi Qualiopi', 'Certifications France Compétences']
  }];


  return (
    <section style={{ background: 'var(--blanc)' }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <span className="t-eyebrow" style={{ color: 'var(--accent)' }}>
            <span className="dot-accent"></span>Collaboratif par conception
          </span>
          <h2 className="t-h1" style={{ marginTop: 14, marginBottom: 16 }}>
            Une plateforme <span className="highlight-accent">qui forme l'entreprise entière</span> pas une formation individuelle de plus.
          </h2>
          <p className="t-body-lg">
            Apprenant, manager, admin : trois rôles, une seule plateforme. Les
            équipes progressent <strong style={{ color: 'var(--texte)', fontWeight: 600 }}>ensemble</strong>, sur des cas d'usage qui leur ressemblent.
          </p>
        </div>

        {/* Tab role switcher */}
        <div style={{
          display: 'inline-flex', padding: 4, background: 'var(--creme)', borderRadius: 999,
          marginBottom: 32, border: '1px solid var(--hairline)', gap: 2
        }}>
          {layers.map((l, i) =>
          <button key={l.role} onClick={() => setActive(i)} style={{
            padding: '10px 22px', borderRadius: 999, fontWeight: 500, fontSize: 15,
            background: active === i ? 'var(--vert-sapin)' : 'transparent',
            color: active === i ? '#fff' : 'var(--texte-soft)',
            transition: 'all 200ms ease',
            display: 'flex', alignItems: 'center', gap: 8
          }}>
              <span>{l.icon}</span>
              <span>{l.role}</span>
            </button>
          )}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
          {/* Left: explanatory text */}
          <div>
            <img src={
            active === 0 ? 'assets/illus/healthy-habit.png' :
            active === 1 ? 'assets/illus/team-goals.png' :
            'assets/illus/process.png'
            } alt="" key={active} style={{
              width: 320, height: 320, marginBottom: 24, display: 'block',
              marginLeft: -20,
              animation: 'fadeIn 400ms ease'
            }} />
            <h3 style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.025em', marginBottom: 20 }}>
              {layers[active].title}
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--texte-soft)', marginBottom: 28 }}>
              {layers[active].desc}
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {layers[active].bullets.map((b) =>
              <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15 }}>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0 }}>
                    <circle cx="10" cy="10" r="10" fill="var(--vert-menthe-soft)" />
                    <path d="M6 10.5L8.5 13L14 7" stroke="var(--vert-sapin)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                  </svg>
                  <span>{b}</span>
                </li>
              )}
            </ul>
          </div>

          {/* Right: collaborative network visualization */}
          <div className="card" style={{
            padding: 32, background: 'var(--creme)', borderColor: 'transparent',
            position: 'relative', minHeight: 460, overflow: 'hidden'
          }}>
            {/* Background curve */}
            <svg style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, opacity: 0.1 }} viewBox="0 0 64 64">
              <path d="M 14 32 Q 28 60, 50 20" stroke="var(--vert-sapin)" strokeWidth="2" fill="none" strokeLinecap="round" />
            </svg>

            {/* Team workspace mock */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, position: 'relative' }}>
              <div>
                <div style={{ fontSize: 11, color: 'var(--texte-mute)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>Workspace équipe</div>
                <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>Cabinet Comptable Léon</div>
              </div>
              <span style={{
                fontSize: 11, padding: '4px 10px', borderRadius: 999,
                background: 'var(--accent-soft)', color: 'var(--accent)', fontWeight: 600
              }}>● Live</span>
            </div>

            {/* Member rows */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, position: 'relative' }}>
              {[
              { name: 'Marie L.', role: 'Compta', level: 'Praticien', progress: 78, status: 'a validé un cas', color: '#1F4D3E' },
              { name: 'Julien M.', role: 'Compta', level: 'Initié', progress: 45, status: 'défi du jour en cours', color: '#E5704B' },
              { name: 'Sophie R.', role: 'Manager', level: 'Praticien', progress: 92, status: 'a publié un prompt', color: '#0F3329', isManager: true },
              { name: 'Lucas D.', role: 'Compta', level: 'Curieux', progress: 22, status: 'a rejoint hier', color: '#B8E6CF' }].
              map((m, i) =>
              <div key={m.name} style={{
                display: 'grid', gridTemplateColumns: '32px 1fr auto', gap: 12,
                alignItems: 'center', padding: '12px 14px', background: '#fff',
                borderRadius: 12, border: m.isManager ? '1.5px solid var(--accent-soft)' : '1px solid var(--hairline)'
              }}>
                  <div style={{
                  width: 32, height: 32, borderRadius: '50%', background: m.color,
                  display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700,
                  color: m.color === '#B8E6CF' ? '#1F4D3E' : '#fff'
                }}>{m.name[0]}</div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</span>
                      {m.isManager &&
                    <span style={{
                      fontSize: 9, padding: '2px 6px', borderRadius: 4,
                      background: 'var(--accent-soft)', color: 'var(--accent)',
                      fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase'
                    }}>Manager</span>
                    }
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--texte-mute)', marginTop: 1 }}>
                      {m.level} · {m.status}
                    </div>
                  </div>
                  {/* Progress bar */}
                  <div style={{ width: 60, height: 4, background: 'var(--creme)', borderRadius: 2, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${m.progress}%`, background: 'var(--vert-sapin)' }} />
                  </div>
                </div>
              )}
            </div>

            {/* Footer activity */}
            <div style={{
              marginTop: 16, padding: '12px 14px', borderRadius: 12,
              background: 'var(--vert-menthe-soft)',
              display: 'flex', alignItems: 'center', gap: 10,
              fontSize: 12, color: 'var(--vert-sapin)', fontWeight: 500
            }}>
              <Picto size={20} variant="menthe" />
              <span>Sophie a partagé un prompt « Relance client retardataire » avec l'équipe.</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

window.Collaboratif = Collaboratif;