// ── Page Scénarios — Catalogue API public Miikaa ──────────────

const MOCK_SCENARIOS = [
  { id:'1', slug:'gestion-objections-prix', title:'Gérer les objections prix', industry:'Vente',
    publicDescription:'Apprenez à traiter les objections tarifaires avec assertivité face à un acheteur exigeant.', difficultyLevel:3, thumbnailColor:'#C85A3C', minDurationMinutes:15, maxDurationMinutes:30 },
  { id:'2', slug:'feedback-managerial-delicat', title:'Donner un feedback managérial délicat', industry:'Management',
    publicDescription:'Exercez-vous à formuler un retour constructif sur une performance insuffisante, sans démotiver.', difficultyLevel:4, thumbnailColor:'#3D5A6C', minDurationMinutes:20, maxDurationMinutes:35 },
  { id:'3', slug:'entretien-annuel-evaluation', title:"Conduire l'entretien annuel d'évaluation", industry:'RH',
    publicDescription:"Maîtrisez la structure et la posture pour mener un entretien d'évaluation équitable et motivant.", difficultyLevel:3, thumbnailColor:'#6B7F5E', minDurationMinutes:25, maxDurationMinutes:45 },
  { id:'4', slug:'ecoute-active-tension', title:'Écoute active en situation de tension', industry:'Soft Skills',
    publicDescription:'Développez votre capacité à accueillir les émotions et à reformuler avec précision dans un contexte difficile.', difficultyLevel:2, thumbnailColor:'#D4A574', minDurationMinutes:10, maxDurationMinutes:20 },
  { id:'5', slug:'prospection-telephonique', title:'Prospection téléphonique à froid', industry:'Vente',
    publicDescription:'Décrochez des rendez-vous en surmontant les barrières et les objections dès les premiers échanges.', difficultyLevel:2, thumbnailColor:'#C85A3C', minDurationMinutes:10, maxDurationMinutes:15 },
  { id:'6', slug:'integration-nouveau-collaborateur', title:'Intégrer un nouveau collaborateur', industry:'RH',
    publicDescription:"Pratiquez l'accueil et l'onboarding pour créer les conditions d'une intégration réussie dès le premier jour.", difficultyLevel:1, thumbnailColor:'#6B7F5E', minDurationMinutes:15, maxDurationMinutes:25 },
  { id:'7', slug:'recadrer-collaborateur', title:'Recadrer un collaborateur', industry:'Management',
    publicDescription:'Gérez une situation de manquement professionnel avec fermeté et bienveillance, sans escalade.', difficultyLevel:4, thumbnailColor:'#3D5A6C', minDurationMinutes:20, maxDurationMinutes:30 },
  { id:'8', slug:'assertivite-client-difficile', title:'Assertivité face à un client difficile', industry:'Soft Skills',
    publicDescription:'Maintenez votre position et vos limites sans agressivité face à des demandes excessives ou déraisonnables.', difficultyLevel:3, thumbnailColor:'#D4A574', minDurationMinutes:15, maxDurationMinutes:25 },
  { id:'9', slug:'negociation-salariale', title:'Négociation salariale', industry:'RH',
    publicDescription:'Entraînez-vous à mener ou à répondre à une négociation de rémunération avec clarté et confiance.', difficultyLevel:4, thumbnailColor:'#6B7F5E', minDurationMinutes:20, maxDurationMinutes:35 },
  { id:'10', slug:'closing-commercial', title:'Closing commercial', industry:'Vente',
    publicDescription:'Transformez un prospect convaincu en client signé : techniques de closing et gestion des dernières hésitations.', difficultyLevel:5, thumbnailColor:'#C85A3C', minDurationMinutes:20, maxDurationMinutes:30 },
  { id:'11', slug:'deleguer-efficacement', title:'Déléguer efficacement', industry:'Management',
    publicDescription:'Pratiquez la délégation structurée : choisir la tâche, clarifier les attentes, suivre sans micro-manager.', difficultyLevel:2, thumbnailColor:'#3D5A6C', minDurationMinutes:15, maxDurationMinutes:25 },
  { id:'12', slug:'gestion-conflit-equipe', title:'Gérer un conflit au sein de l\'équipe', industry:'Soft Skills',
    publicDescription:'Intervenez comme médiateur entre deux collaborateurs en tension pour rétablir la coopération.', difficultyLevel:4, thumbnailColor:'#D4A574', minDurationMinutes:20, maxDurationMinutes:40 },
];
const MOCK_INDUSTRIES = ['Management', 'RH', 'Soft Skills', 'Vente'];
const DIFF_LABELS = ['', 'Débutant', 'Facile', 'Intermédiaire', 'Avancé', 'Expert'];

// ── Icône loupe inline ────────────────────────────────────────
function SearchIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="8"/>
      <path d="M21 21l-4.35-4.35"/>
    </svg>
  );
}

// ── Carte scénario ─────────────────────────────────────────────
function ScenarioCard({ s, onCTA }) {
  const color = s.thumbnailColor || '#C85A3C';
  return (
    <div className="mk2-card" style={{ display:'flex', flexDirection:'column', overflow:'hidden', cursor:'default' }}>
      {/* Thumbnail */}
      <div style={{ height:132, background:color, position:'relative', overflow:'hidden', flexShrink:0 }}>
        {/* Motif décoratif */}
        <div aria-hidden style={{
          position:'absolute', bottom:-20, right:-20,
          width:110, height:110, borderRadius:'50%',
          background:'rgba(255,255,255,0.1)',
        }}/>
        <div aria-hidden style={{
          position:'absolute', top:-30, left:-10,
          width:80, height:80, borderRadius:'50%',
          background:'rgba(255,255,255,0.06)',
        }}/>
        {/* Badge industrie */}
        <div style={{ position:'absolute', top:12, left:12 }}>
          <span style={{
            display:'inline-flex', alignItems:'center',
            padding:'3px 10px', borderRadius:9999,
            background:'rgba(255,255,255,0.9)',
            fontSize:11, fontWeight:600, color:'#3A342C',
            letterSpacing:'0.04em',
          }}>
            {s.industry}
          </span>
        </div>
        {/* Durée */}
        <div style={{ position:'absolute', bottom:10, right:12 }}>
          <span style={{ fontSize:11, color:'rgba(255,255,255,0.85)', fontFamily:'var(--mk2-mono)' }}>
            {s.minDurationMinutes}–{s.maxDurationMinutes} min
          </span>
        </div>
      </div>

      {/* Corps */}
      <div style={{ padding:'18px 20px 22px', display:'flex', flexDirection:'column', flex:1 }}>
        <h3 className="mk2-h3" style={{ fontSize:15, marginBottom:8, lineHeight:1.35 }}>{s.title}</h3>
        <p className="mk2-caption" style={{ flex:1, lineHeight:1.6, marginBottom:16, fontSize:13 }}>
          {s.publicDescription}
        </p>
        {/* Difficulté */}
        <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:14 }}>
          <div style={{ display:'flex', gap:3 }}>
            {Array.from({length:5}, (_,i) => (
              <div key={i} style={{
                width:5, height:5, borderRadius:'50%',
                background: i < s.difficultyLevel ? color : 'var(--mk2-hair)',
                transition:'background .2s',
              }}/>
            ))}
          </div>
          <span style={{ fontSize:11, color:'var(--mk2-muted)', letterSpacing:'0.02em' }}>
            {DIFF_LABELS[s.difficultyLevel]}
          </span>
        </div>
        <button
          className="mk2-btn mk2-btn-secondary"
          style={{ width:'100%', justifyContent:'center', fontSize:13, padding:'9px 14px' }}
          onClick={onCTA}
        >
          Réserver une démo
        </button>
      </div>
    </div>
  );
}

// ── Page principale ────────────────────────────────────────────
function Mk2PageScenarios({ onNav }) {
  const [scenarios, setScenarios] = React.useState([]);
  const [loading, setLoading]     = React.useState(true);
  const [search, setSearch]       = React.useState('');
  const [industry, setIndustry]   = React.useState('');
  const [industries, setIndustries] = React.useState(MOCK_INDUSTRIES);
  const [page, setPage]           = React.useState(1);
  const [total, setTotal]         = React.useState(0);
  const [totalPages, setTotalPages] = React.useState(1);
  const searchRef = React.useRef(null);

  const applyMock = (q, ind) => {
    let filtered = MOCK_SCENARIOS;
    if (ind)  filtered = filtered.filter(s => s.industry === ind);
    if (q)    filtered = filtered.filter(s =>
      s.title.toLowerCase().includes(q.toLowerCase()) ||
      s.publicDescription.toLowerCase().includes(q.toLowerCase())
    );
    setScenarios(filtered);
    setTotal(filtered.length);
    setTotalPages(1);
    setIndustries(MOCK_INDUSTRIES);
    setLoading(false);
  };

  React.useEffect(() => {
    setLoading(true);
    const params = new URLSearchParams({ page, limit: 12 });
    if (industry) params.set('industry', industry);
    if (search)   params.set('search', search);

    const controller = new AbortController();
    fetch(`https://api.miikaa.io/api/v1/public/catalog?${params}`, {
      signal: controller.signal,
    })
      .then(r => { if (!r.ok) throw new Error('API error'); return r.json(); })
      .then(data => {
        setScenarios(data.data || []);
        setTotal(data.total || 0);
        setTotalPages(data.totalPages || 1);
        if (data.availableIndustries?.length) setIndustries(data.availableIndustries);
        setLoading(false);
      })
      .catch(() => applyMock(search, industry));

    return () => controller.abort();
  }, [page, industry, search]);

  const reset = () => { setSearch(''); setIndustry(''); setPage(1); };

  return (
    <main>
      {/* ── En-tête ─────────────────────────────────────────── */}
      <section style={{ padding:'80px 0 56px', background:'var(--mk2-canvas-2)', position:'relative', overflow:'hidden' }}>
        <div aria-hidden style={{
          position:'absolute', right:'-5%', top:'-20%',
          width:440, height:440, borderRadius:'50%',
          background:'radial-gradient(circle, rgba(200,90,60,0.12), transparent 70%)',
          pointerEvents:'none',
        }}/>
        <div className="mk2-container" style={{ position:'relative' }}>
          <div className="mk2-eyebrow" style={{ marginBottom:14 }}>Catalogue</div>
          <h1 className="mk2-display" style={{ fontSize:'clamp(40px, 6vw, 68px)', marginBottom:18, maxWidth:700 }}>
            Scénarios de<br/>
            <span className="mk2-italic" style={{ color:'var(--mk2-ember)' }}>mise en situation IA</span>
          </h1>
          <p className="mk2-body" style={{ fontSize:17, maxWidth:560, color:'var(--mk2-text-2)' }}>
            Explorez notre bibliothèque de simulations immersives animées par IA conversationnelle — pour former, évaluer, progresser.
          </p>
        </div>
      </section>

      {/* ── Barre de filtres sticky ──────────────────────────── */}
      <div style={{
        position:'sticky', top:72, zIndex:20,
        background:'rgba(246,241,234,0.92)',
        backdropFilter:'blur(14px)',
        borderBottom:'1px solid var(--mk2-hair)',
      }}>
        <div className="mk2-container" style={{ padding:'16px 24px', display:'flex', alignItems:'center', gap:14, flexWrap:'wrap' }}>
          {/* Recherche */}
          <div style={{ position:'relative', flex:'1 1 240px', maxWidth:320 }}>
            <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', color:'var(--mk2-muted)', display:'flex', pointerEvents:'none' }}>
              <SearchIcon size={14}/>
            </span>
            <input
              ref={searchRef}
              type="text"
              placeholder="Rechercher un scénario…"
              value={search}
              onChange={e => { setSearch(e.target.value); setPage(1); }}
              style={{
                width:'100%', padding:'9px 14px 9px 36px',
                border:'1px solid var(--mk2-hair)',
                borderRadius:'var(--mk2-r-pill)',
                background:'var(--mk2-paper)',
                fontFamily:'var(--mk2-sans)', fontSize:13,
                color:'var(--mk2-text)', outline:'none',
                transition:'border-color .18s',
              }}
              onFocus={e => e.target.style.borderColor = 'var(--mk2-ember)'}
              onBlur={e => e.target.style.borderColor = 'var(--mk2-hair)'}
            />
          </div>

          {/* Filtres catégorie */}
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            {['', ...industries].map(ind => {
              const active = industry === ind;
              return (
                <button key={ind || '__all__'}
                  onClick={() => { setIndustry(ind); setPage(1); }}
                  style={{
                    padding:'7px 16px', fontSize:12, fontWeight:500,
                    borderRadius:'var(--mk2-r-pill)', cursor:'pointer',
                    border:'1px solid ' + (active ? 'transparent' : 'var(--mk2-hair)'),
                    background: active ? 'var(--mk2-ink)' : 'var(--mk2-paper)',
                    color: active ? 'var(--mk2-text-dark)' : 'var(--mk2-text-2)',
                    transition:'all .18s',
                    fontFamily:'var(--mk2-sans)',
                  }}>
                  {ind || 'Toutes les catégories'}
                </button>
              );
            })}
          </div>

          {/* Compteur */}
          {!loading && (
            <span style={{ marginLeft:'auto', fontSize:12, color:'var(--mk2-muted)', whiteSpace:'nowrap' }}>
              {total} scénario{total > 1 ? 's' : ''}
            </span>
          )}
        </div>
      </div>

      {/* ── Grille ──────────────────────────────────────────── */}
      <section style={{ padding:'48px 0 96px' }}>
        <div className="mk2-container">
          {loading ? (
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24 }}>
              {Array.from({length:6}).map((_,i) => (
                <div key={i} style={{
                  height:340, borderRadius:'var(--mk2-r-lg)',
                  background:'var(--mk2-canvas-2)',
                  animation:'mk2-pulse 1.6s ease-in-out infinite',
                  animationDelay: `${i*0.1}s`,
                }}/>
              ))}
            </div>
          ) : scenarios.length === 0 ? (
            <div style={{ textAlign:'center', padding:'80px 0' }}>
              <p className="mk2-body" style={{ marginBottom:20 }}>Aucun scénario ne correspond à vos critères.</p>
              <button className="mk2-btn mk2-btn-secondary" onClick={reset}>
                Réinitialiser les filtres
              </button>
            </div>
          ) : (
            <>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24 }}>
                {scenarios.map(s => (
                  <ScenarioCard key={s.id} s={s} onCTA={() => onNav?.('contact')}/>
                ))}
              </div>

              {/* Pagination */}
              {totalPages > 1 && (
                <div style={{ display:'flex', justifyContent:'center', gap:8, marginTop:48 }}>
                  {Array.from({length:totalPages}, (_,i) => (
                    <button key={i}
                      onClick={() => { setPage(i+1); window.scrollTo({top:0, behavior:'smooth'}); }}
                      style={{
                        width:36, height:36, borderRadius:'var(--mk2-r-md)',
                        display:'grid', placeItems:'center', cursor:'pointer',
                        fontFamily:'var(--mk2-sans)', fontSize:13, fontWeight:500,
                        border:'1px solid ' + (page===i+1 ? 'transparent' : 'var(--mk2-hair)'),
                        background: page===i+1 ? 'var(--mk2-ink)' : 'var(--mk2-paper)',
                        color: page===i+1 ? 'var(--mk2-text-dark)' : 'var(--mk2-text-2)',
                      }}>
                      {i+1}
                    </button>
                  ))}
                </div>
              )}
            </>
          )}
        </div>
      </section>

      {/* ── CTA bas de page ─────────────────────────────────── */}
      <section style={{ padding:'80px 0', background:'var(--mk2-ink)' }}>
        <div className="mk2-container" style={{ display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', maxWidth:620, margin:'0 auto' }}>
          <div style={{ width:48, height:48, borderRadius:14, background:'var(--mk2-ember)', display:'grid', placeItems:'center', marginBottom:24 }}>
            <Mk2Sparkle size={22} color="#fff"/>
          </div>
          <h2 className="mk2-display" style={{ fontSize:'clamp(26px, 3.5vw, 40px)', color:'var(--mk2-text-dark)', marginBottom:16 }}>
            Vous voulez tester un scénario{' '}
            <span className="mk2-italic" style={{ color:'var(--mk2-ember-soft)' }}>dans votre contexte&nbsp;?</span>
          </h2>
          <p style={{ color:'var(--mk2-muted-dark)', fontSize:16, lineHeight:1.65, marginBottom:32 }}>
            Nous configurons un scénario issu de votre métier et vous le faisons vivre en démo. 30 minutes, sans slides.
          </p>
          <button className="mk2-btn mk2-btn-ember" style={{ padding:'14px 28px', fontSize:15 }} onClick={() => onNav?.('contact')}>
            Prendre rendez-vous <Mk2Arrow size={15}/>
          </button>
          <div style={{ marginTop:16, fontSize:12, color:'var(--mk2-muted-dark)' }}>
            Sans engagement · Réponse sous 24 h
          </div>
        </div>
      </section>

      <style>{`
        @keyframes mk2-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.45; }
        }
      `}</style>
    </main>
  );
}

window.Mk2PageScenarios = Mk2PageScenarios;