// ScenarioBrief — the read-only scenario + persona summary shown above the form.
function ScenarioBrief({ scenario }) {
  const s = scenario.scenario;
  const p = scenario.persona;
  return (
    <section className="brief" aria-label="Scenario brief">
      <div className="brief__col brief__col--scenario">
        <div className="brief__eyebrow">Scenario — {scenario.audienceLabel}</div>
        <h2 className="brief__company">{s.company}</h2>
        {s.body.split("\n\n").map((para, i) => (
          <p key={i} className="brief__body">{para}</p>
        ))}
        <div className="brief__prompt">
          <span className="brief__prompt-label">Brief</span>
          <p className="brief__prompt-text">{s.prompt}</p>
        </div>
      </div>

      <div className="brief__col brief__col--persona">
        <div className="brief__eyebrow">Audience persona</div>
        <div className="brief__persona-head">
          {p.image && (
            <img className="brief__persona-photo" src={p.image} alt={p.name} />
          )}
          <div className="brief__persona-id">
            <h3 className="brief__persona-name">{p.name}</h3>
            {p.role && <p className="brief__persona-role">{p.role}</p>}
          </div>
        </div>
        <ul className="brief__traits">
          {p.traits.map((t, i) => (
            <li key={i} className="brief__trait">{t}</li>
          ))}
        </ul>
        <blockquote className="brief__quote">
          <span aria-hidden="true">&ldquo;</span>{p.quote}<span aria-hidden="true">&rdquo;</span>
        </blockquote>
      </div>
    </section>
  );
}

window.ScenarioBrief = ScenarioBrief;