const PromptsSample = () => {
  const prompts = [
    {
      n: '#03', tag: 'DÉCISION · Paralysie', time: '2 min',
      body: (
        <>
          <span className="kw">Rôle :</span> Tu es mon board member. Je te donne <span className="var">[mes 15 idées de la semaine]</span> — tu classes par <span className="var">[potentiel €]</span>, <span className="var">[effort]</span>, <span className="var">[impact 90j]</span>. Sortie&nbsp;: top 1 priorité + 3 actions concrètes, le reste poubellé. <span className="kw">Ton&nbsp;:</span> direct, pas de préambule.
        </>
      )
    },
    {
      n: '#12', tag: 'ADMIN · Reporting', time: '5 min',
      body: (
        <>
          <span className="kw">Contexte :</span> J'ai eu <span className="var">[X réunions]</span> cette semaine, livré <span className="var">[Y]</span>, cassé <span className="var">[Z]</span>. <span className="kw">Mission :</span> rédige un reporting hebdo à mon associé — 150 mots max, puces courtes, 1 KPI par section, zéro corporate.
        </>
      )
    },
    { locked: true, n: '#07', tag: 'ADMIN · Relance', time: '2 min' },
    { locked: true, n: '#23', tag: 'CRÉATION · TikTok', time: '3 min' },
    { locked: true, n: '#31', tag: 'BUSINESS · Pricing', time: '6 min' },
    { locked: true, n: '#44', tag: 'FOCUS · Deep work', time: '1 min' },
  ];

  return (
    <section className="prompts" data-screen-label="06 Prompts">
      <div className="shell">
        <div className="section-label"><span className="num">§ 05</span><span>un aperçu</span></div>
        <div className="prompts-head">
          <h2 className="reveal">
            2 prompts <span className="highlight">offerts.</span><br/>
            48 dans le PDF.
          </h2>
          <p className="prompts-meta reveal reveal-delay-1">
            Chaque prompt = rôle précis + contexte à remplir + format de sortie cadré.
            Tu copies, tu colles, tu ajustes les variables, et l'IA s'y met.
          </p>
        </div>

        <div className="prompt-grid">
          {prompts.map((p, i) => (
            <div className={`prompt-card reveal ${p.locked ? 'locked' : ''}`} key={i} style={{transitionDelay:`${i*70}ms`}}>
              <div className="prompt-head">
                <span className="prompt-num">PROMPT {p.n}</span>
                <span className="dots"><i/><i/><i/></span>
              </div>
              <div className="prompt-body">
                {p.locked ? (
                  <>
                    <span className="kw">Rôle :</span> ████████████████████ <span className="var">[variable]</span>
                    <br/>████████████████ — ████ <span className="var">[X]</span>, <span className="var">[Y]</span> ████████ ███ ████.
                    <br/><span className="kw">Sortie :</span> ████████ ████████ ██████████.
                  </>
                ) : p.body}
              </div>
              <div className="prompt-foot">
                <span className="tag">{p.tag}</span>
                <span>~ {p.time}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.PromptsSample = PromptsSample;