/* ============================================================
   Fashion AI Workflow — Phase 03 · Higgsfield Config
   ============================================================ */

function Phase03({ brief, goPrev, goNext }) {
  const sopBody = `01. Open Higgsfield.ai → New Project → Soul ID Studio.
02. Upload reference frame (use Phase 02 · F1 hero output).
03. Set scene template = ${brief.angle === "LIFESTYLE STORY" ? "Editorial Walk" : "Studio Pull"}.
04. Camera motion = slow dolly-in, 4 sec.
05. Render at 1080×1350 (4:5) for IG-feed primary.
06. Export 9:16 alt for Reels (recrop, do not re-render).`;

  return (
    <>
      <PhaseHeader
        phase="03"
        title="Higgsfield Config / 影片配置"
        subtitle="Recommended Higgsfield module + 6-step SOP. Copy the SOP and paste into a new Higgsfield project."
      />

      {/* Module recommendation */}
      <section className="module" style={{ borderLeftColor: "#fdba74" }}>
        <div className="module-title" style={{ color: "#fdba74" }}>RECOMMENDED · EDITORIAL SOUL STUDIO</div>
        <div className="hf-grid">
          <div className="hf-cell"><div className="hf-lbl">CLIPS</div><div className="hf-val">5</div></div>
          <div className="hf-cell"><div className="hf-lbl">FORMATS</div><div className="hf-val">4:5 · 9:16</div></div>
          <div className="hf-cell"><div className="hf-lbl">DURATION</div><div className="hf-val">4 SEC / CLIP</div></div>
          <div className="hf-cell"><div className="hf-lbl">FPS</div><div className="hf-val">24</div></div>
        </div>
      </section>

      {/* 2x2 config grid */}
      <div className="grid-2">
        <div className="cfg-card"><div className="cfg-lbl">SOUL ID</div><div className="cfg-val">{brief.wearer || "—"}</div></div>
        <div className="cfg-card"><div className="cfg-lbl">SCENE TEMPLATE</div><div className="cfg-val">Studio Pull</div></div>
        <div className="cfg-card"><div className="cfg-lbl">CAMERA MOTION</div><div className="cfg-val">Slow dolly-in, 4s</div></div>
        <div className="cfg-card"><div className="cfg-lbl">VIDEO FORMAT</div><div className="cfg-val">4:5 primary · 9:16 alt</div></div>
      </div>

      {/* Steps prompt block */}
      <PromptBlock phase="03" label="PRODUCTION SOP · 6 STEPS" content={sopBody} />

      {/* QC checklist (green) */}
      <InfoBox phase="04" label="QC CHECKLIST">
        <ul className="qc-list">
          <li>Soul ID matches campaign angle</li>
          <li>Camera motion matches scene template</li>
          <li>Output ratio set before render</li>
          <li>Audio: silent (post-production overlay)</li>
        </ul>
      </InfoBox>

      <ActionBar columns="1fr 2fr">
        <ActionBtn label="← STORYBOARD" onClick={goPrev} />
        <ActionBtn label="TECH FLAT →" phase="04" variant="primary" onClick={goNext} />
      </ActionBar>
    </>
  );
}

window.Phase03 = Phase03;