/* ============================================================
   Fashion AI Workflow — Phase 06 · Grid Compose + Video Route
   ============================================================ */

function Phase06({ brief, goPrev, goRoot }) {
  const [route, setRoute] = React.useState("FLOW");

  const gridPrompt = `Generate a 4×4 contact sheet (16 cells) of variations of the F1 OPENING HERO frame.
Subject: ${brief.wearer || "wearer"}.
Garment: ${brief.garmentType || "garment"} · ${brief.silhouette || "silhouette"} · ${brief.fabric || "fabric"}.
Mood: ${brief.angle || "STYLE EDITORIAL"} · ${brief.season || "SEASON"}.

Rules:
- Lock subject identity, wardrobe, and lighting across all 16 cells.
- Vary only: pose, gaze, hand position, micro-expression, framing crop.
- Do NOT change wardrobe color, fabric, or background.
- Output one square image, 16 equal cells, hairline white gutter, numbered 1–16 bottom-left of each cell.
- Aspect 1:1, 2048×2048.`;

  const flowSOP = `01. Open Google Flow → New Project → Image-to-Video.
02. Upload chosen cell image (e.g. cell 07) at 1920×1080 or 1080×1920.
03. Prompt: "Slow dolly-in 4 seconds, ${brief.angle || "editorial"} mood, hold subject identity."
04. Set duration 4s · 24fps · seed locked.
05. Generate 3 takes; pick best.
06. Export MP4 H.264 — name: scene-cellNN-take-N.mp4.`;

  const hfSOP = `01. Open Higgsfield.ai → Soul ID Studio.
02. Upload chosen cell image as Soul reference.
03. Scene template = Studio Pull · Camera = slow dolly-in 4s.
04. Render at 1080×1350 (4:5) primary; recrop 9:16 for Reels.
05. Export MP4; rename per scene-cellNN.`;

  return (
    <>
      <PhaseHeader
        phase="06"
        title="Grid Compose + Video Route / 16 格選圖 與 影片產出"
        subtitle="Generate a 16-cell contact sheet of F1 variations, pick a winner, then route into Google Flow or Higgsfield for video."
      />

      <InfoBox phase="06" label="STEP 1 · CONTACT SHEET">
        Use this prompt in ChatGPT Image 2.0. The model returns a single 4×4 image — pick one cell and feed it into the video route below.
      </InfoBox>

      <PromptBlock phase="06" label="16-CELL VARIATION PROMPT" content={gridPrompt} />

      {/* 4x4 placeholder grid preview */}
      <section className="module" style={{ borderLeftColor: "#f0abfc", marginTop: 6 }}>
        <div className="module-title" style={{ color: "#f0abfc" }}>PREVIEW · 16 CELLS · 1:1</div>
        <div className="grid16">
          {Array.from({ length: 16 }, (_, i) => (
            <div className="g16-cell" key={i}>
              <span className="g16-num">{String(i + 1).padStart(2, "0")}</span>
            </div>
          ))}
        </div>
        <div className="g16-hint">Replace with your generated sheet — click any cell to mark it as selected.</div>
      </section>

      {/* Step 2 — route picker */}
      <div className="phase-tag" style={{ color: "#f0abfc", marginTop: 22, marginBottom: 12 }}>STEP 2 · VIDEO ROUTE</div>

      <div className="grid-2">
        <button
          className="route-card"
          onClick={() => setRoute("FLOW")}
          style={route === "FLOW" ? {
            borderColor: "rgba(240,171,252,0.5)",
            background: "rgba(240,171,252,0.10)",
          } : {}}
        >
          <div className="rc-head">
            <span className="rc-name">Google Flow</span>
            <span className="rc-tag" style={{ color: "#f0abfc" }}>{route === "FLOW" ? "● ON" : "○ PICK"}</span>
          </div>
          <div className="rc-meta">IMAGE-TO-VIDEO · 4S · 1080P</div>
          <div className="rc-pros">
            <div className="rc-row"><b>Strength</b><span>Identity lock, motion fidelity</span></div>
            <div className="rc-row"><b>Output</b><span>MP4 H.264 · 24fps</span></div>
            <div className="rc-row"><b>Best for</b><span>One-shot scenes, slow camera</span></div>
            <div className="rc-row"><b>Caveat</b><span>Limited multi-shot continuity</span></div>
          </div>
        </button>

        <button
          className="route-card"
          onClick={() => setRoute("HF")}
          style={route === "HF" ? {
            borderColor: "rgba(253,186,116,0.5)",
            background: "rgba(253,186,116,0.10)",
          } : {}}
        >
          <div className="rc-head">
            <span className="rc-name">Higgsfield.ai</span>
            <span className="rc-tag" style={{ color: "#fdba74" }}>{route === "HF" ? "● ON" : "○ PICK"}</span>
          </div>
          <div className="rc-meta">SOUL ID · 5 CLIPS · 4:5 / 9:16</div>
          <div className="rc-pros">
            <div className="rc-row"><b>Strength</b><span>Multi-clip narrative, Soul ID</span></div>
            <div className="rc-row"><b>Output</b><span>MP4 · multi-format export</span></div>
            <div className="rc-row"><b>Best for</b><span>Full storyboard, IG-feed campaigns</span></div>
            <div className="rc-row"><b>Caveat</b><span>Slower iteration, higher cost</span></div>
          </div>
        </button>
      </div>

      <PromptBlock
        phase={route === "FLOW" ? "06" : "03"}
        label={route === "FLOW" ? "GOOGLE FLOW · 6-STEP SOP" : "HIGGSFIELD · 5-STEP SOP"}
        content={route === "FLOW" ? flowSOP : hfSOP}
      />

      <InfoBox phase="06" label="HANDOFF NOTE">
        File naming convention: <b>scene-cellNN-take-N.mp4</b>. Keep the cell number — it links every video back to a single 16-grid sheet for review.
      </InfoBox>

      <ActionBar columns="1fr 2fr">
        <ActionBtn label="← TECH FLAT" onClick={goPrev} />
        <ActionBtn label="✦ NEW BRIEF" phase="01" variant="primary" onClick={goRoot} />
      </ActionBar>
    </>
  );
}

window.Phase06 = Phase06;