/* ============================================================
   Fashion AI Workflow — Phase 04 · Tech Flat Prompts
   ============================================================ */

function Phase04({ brief, goPrev, goNext }) {
  const front = `Technical flat sketch, FRONT view. ${brief.garmentType || "garment"}, ${brief.silhouette || "silhouette"}. Pure black line on white, 1px stroke. No shading, no model, no background. Symmetric. Show all seams, darts, closures. Bilingual labels OK. Production-ready.`;
  const back  = `Technical flat sketch, BACK view. Same garment, same scale and orientation as front. 1px black line on white. Center back seam shown as dashed if present.`;
  const detail = `Detail callout — ${brief.fabric || "selvedge"} edge construction. 2× zoom of one seam, with arrow leader to a labeled note. Same line weight, same orientation.`;

  return (
    <>
      <PhaseHeader
        phase="04"
        title="Tech Flat Prompts / 款式圖 Prompt"
        subtitle="Front, back and (optionally) detail. Paste into ChatGPT Image 2 — line-only output, production reference."
      />

      <InfoBox phase="04" label="INFO · CHATGPT IMAGE 2">
        Switch to a fresh thread (no Soul ID context). Paste FRONT first; once accepted, paste BACK to maintain pose & scale.
      </InfoBox>

      <PromptBlock phase="04" label="FRONT VIEW" content={front} />
      <PromptBlock phase="04" label="BACK VIEW"  content={back} />
      <PromptBlock phase="04" label="DETAIL CALLOUT (OPTIONAL)" content={detail} />

      <InfoBox phase="04" label="USAGE NOTE">
        Tech flats are reference for the pattern maker, not the final spec sheet. Always cross-check seam allowance separately.
      </InfoBox>

      <ActionBar columns="1fr 1fr 2fr">
        <ActionBtn label="← HIGGSFIELD" onClick={goPrev} />
        <ActionBtn label="↻ REGEN" phase="04" variant="secondary" />
        <ActionBtn label="PATTERN SVG →" phase="05" variant="primary" onClick={goNext} />
      </ActionBar>
    </>
  );
}

window.Phase04 = Phase04;