/* Concept + Brief screen — first stage. */

const ScreenConcept = ({ data }) => {
  const { project, brief } = data;
  return (
    <div className="page">
      <div style={{ height: "100%", overflow: "auto" }}>
        <PageHeader title="Concept & Creative Brief" sub="Stage 01 / 09 · Intake → Brief">
          <span className="tag good"><Icon name="check"/> Approved 2026-04-22</span>
          <button className="btn ghost"><Icon name="regen"/> Regenerate brief</button>
          <button className="btn primary">Continue → Bible</button>
        </PageHeader>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 24, padding: "22px 24px", maxWidth: 1280 }}>
          <div className="col gap-md">
            <div className="card">
              <div className="card-title">User concept · paragraph one</div>
              <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, fontStyle: "italic", margin: 0, color: "var(--fg)" }}>
                "{project.concept}"
              </p>
              <div className="row gap-sm" style={{ marginTop: 14 }}>
                <span className="tag">Format · short_cinematic_episode</span>
                <span className="tag">Target · 3:00 ± 0:20</span>
                <span className="tag accent">Genre · horror.v1</span>
              </div>
            </div>

            <div className="card">
              <div className="card-title">Logline · derived</div>
              <p className="serif" style={{ fontSize: 17, lineHeight: 1.5, margin: 0 }}>{brief.logline}</p>
            </div>

            <div className="card">
              <div className="card-title">Fear engine</div>
              <p className="serif" style={{ fontSize: 19, fontStyle: "italic", margin: 0, color: "var(--accent)" }}>"{brief.fear_engine}"</p>
              <div className="dim mono" style={{ marginTop: 8, fontSize: 11 }}>The recurring source of dread. Plugin: horror.v1</div>
            </div>
          </div>

          <div className="col gap-md">
            <div className="card">
              <div className="card-title">Horror plugin · brief fields</div>
              <dl className="dl">
                <dt>Subgenre</dt><dd>Supernatural</dd>
                <dt>Threat type</dt><dd>Spirit</dd>
                <dt>Visibility</dt><dd className="row gap-sm"><Aperture value={brief.threat_visibility} size={20}/> Unseen</dd>
                <dt>Dread style</dt><dd>Slow burn</dd>
                <dt>Violence</dt><dd>Implied</dd>
                <dt>Gore</dt><dd>None</dd>
                <dt>Ending</dt><dd>Unresolved</dd>
              </dl>
            </div>

            <div className="card">
              <div className="card-title">Avoid list</div>
              <div className="row gap-sm" style={{ flexWrap: "wrap" }}>
                {brief.avoid.map(a => <span key={a} className="tag bad"><Icon name="x" size={10}/> {a}</span>)}
              </div>
            </div>

            <div className="card">
              <div className="card-title">Pipeline plan</div>
              <ol style={{ margin: 0, paddingLeft: 18, fontSize: 12.5, color: "var(--fg-muted)", lineHeight: 1.7 }}>
                <li>Mini-bible from this brief <span className="tag good" style={{marginLeft:6}}>done</span></li>
                <li>Character / threat / location treatments <span className="tag good" style={{marginLeft:6}}>done</span></li>
                <li>3-minute outline, 5 scenes <span className="tag good" style={{marginLeft:6}}>done</span></li>
                <li>Scene cards · screenplay · shot list <span className="tag good" style={{marginLeft:6}}>done</span></li>
                <li>Prompt packets — 19/20 validated <span className="tag warn" style={{marginLeft:6}}>1 warn</span></li>
                <li>Render cost approval <span className="tag warn" style={{marginLeft:6}}>pending</span></li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ScreenConcept = ScreenConcept;