/* ============================================================
   RESTO SUITE — BUSINESS IDEA MODULE (UI)
   Depends on suite-idea.jsx (logic) + suite-shared.jsx
   ============================================================ */
const { useState: useStateIU, useRef: useRefIU } = React;

/* ---------- guided interview ---------- */
function InterviewView({ idea, setIdea, onFinish }) {
  const { t, lang } = useLang();
  const qi = idea.interview.qIndex;
  const done = qi >= INTERVIEW.length;
  const q = INTERVIEW[Math.min(qi, INTERVIEW.length - 1)];
  const [draft, setDraft] = useStateIU("");
  const [lastHeard, setLastHeard] = useStateIU(null);
  const check = computeIdea(idea, t, lang);
  const goTo = (i) => {
    setLastHeard(null);
    setDraft(idea.interview.answers[INTERVIEW[i].id] || "");
    setIdea({ interview: { ...idea.interview, qIndex: i } });
  };

  const submit = (skip) => {
    let heard = [];
    if (!skip && draft.trim()) {
      const res = askInterview({ questionId: q.id, answer: draft, idea });
      const p = { ...res.patch };
      if (p.format) p.format = { ...idea.format, ...p.format };
      if (p.founder) p.founder = { ...idea.founder, ...p.founder };
      heard = res.heard;
      const nextIndex = Math.max(qi + 1, idea.interview.maxIndex || 0);
      setIdea({ ...p, interview: { ...idea.interview, qIndex: qi + 1 === INTERVIEW.length ? INTERVIEW.length : (idea.interview.maxIndex >= INTERVIEW.length ? INTERVIEW.length : qi + 1), maxIndex: nextIndex, answers: { ...idea.interview.answers, [q.id]: draft } } });
    } else {
      setIdea({ interview: { ...idea.interview, qIndex: idea.interview.maxIndex >= INTERVIEW.length ? INTERVIEW.length : qi + 1, maxIndex: Math.max(qi + 1, idea.interview.maxIndex || 0) } });
    }
    setLastHeard(heard.length ? heard : skip ? null : [[t("idea.notedLabel"), t("idea.noted")]]);
    setDraft("");
  };

  if (done) {
    return (
      <div style={{ ...card, textAlign: "center", padding: 40 }}>
        <div className="serif" style={{ fontSize: 30, color: "var(--ink)" }}>{t("idea.doneTitle")}</div>
        <p style={{ color: "var(--muted)", fontSize: 15, maxWidth: 420, margin: "10px auto 0", lineHeight: 1.55 }}>
          {t("idea.doneDesc", { filled: check.filled, total: check.total })}
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 24 }}>
          <button onClick={() => setIdea({ mode: "form" })} style={btnGhost}>{t("idea.reviewForm")}</button>
          <button onClick={onFinish} style={btnPrimary}>{t("idea.seeConceptBrief")}</button>
        </div>
        {/* revisit any answer */}
        <div style={{ marginTop: 28, textAlign: "left", borderTop: "1px solid var(--border)", paddingTop: 18 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 600, marginBottom: 6 }}>{t("idea.yourAnswers")}</div>
          {INTERVIEW.map((it, i) => (
            <button key={it.id} onClick={() => goTo(i)} style={{ display: "flex", gap: 12, width: "100%", textAlign: "left", border: "none", background: "transparent", padding: "9px 2px", cursor: "pointer", fontFamily: "inherit", borderBottom: i < INTERVIEW.length - 1 ? "1px dashed var(--border)" : "none", alignItems: "baseline" }}>
              <span className="mono" style={{ fontSize: 10.5, color: "var(--faint)", flexShrink: 0, width: 18 }}>{i + 1}</span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)", display: "block" }}>{t("q." + it.id + ".q")}</span>
                <span style={{ fontSize: 13, color: idea.interview.answers[it.id] ? "var(--muted)" : "var(--faint)", display: "block", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                  {idea.interview.answers[it.id] ? "“" + idea.interview.answers[it.id] + "”" : t("idea.skipped")}
                </span>
              </span>
              <span style={{ fontSize: 12.5, color: "var(--accent)", fontWeight: 700, flexShrink: 0 }}>{t("idea.edit")}</span>
            </button>
          ))}
        </div>
        <button onClick={() => setIdea({ interview: { qIndex: 0, answers: {} } })} style={{ border: "none", background: "transparent", color: "var(--muted)", fontSize: 12.5, fontWeight: 600, textDecoration: "underline", cursor: "pointer", fontFamily: "inherit", marginTop: 18 }}>{t("idea.restart")}</button>
      </div>
    );
  }

  return (
    <div>
      {/* progress */}
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
        <div style={{ flex: 1, height: 5, borderRadius: 99, background: "var(--border)", overflow: "hidden" }}>
          <div style={{ width: `${(qi / INTERVIEW.length) * 100}%`, height: "100%", background: "var(--brass)", borderRadius: 99, transition: "width .4s cubic-bezier(.2,.7,.2,1)" }} />
        </div>
        <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".06em" }}>{qi + 1} / {INTERVIEW.length}</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--faint)", letterSpacing: ".06em" }}>{check.filled}/{check.total} {t("idea.progressFields")}</span>
      </div>

      {lastHeard && (
        <div style={{ marginBottom: 16, padding: "12px 16px", background: "var(--green-tint)", borderRadius: 12, animation: "fadeIn .3s" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 18px" }}>
            {lastHeard.map(([k, v], i) => (
              <span key={i} style={{ fontSize: 13.5, color: "var(--ink)" }}>
                <span style={{ color: "var(--green)", fontWeight: 700 }}>✓ {heardLabel(lang, k)}:</span> {v}
              </span>
            ))}
          </div>
        </div>
      )}

      <div key={qi} style={{ ...card, padding: 30, animation: "fadeUp .4s cubic-bezier(.2,.7,.2,1)" }}>
        <div className="serif" style={{ fontSize: 27, lineHeight: 1.25, color: "var(--ink)", letterSpacing: "-.01em" }}>{t("q." + q.id + ".q")}</div>
        <div style={{ color: "var(--muted)", fontSize: 13.5, marginTop: 8, lineHeight: 1.5 }}>{t("q." + q.id + ".hint")}</div>
        <textarea value={draft} onChange={(e) => setDraft(e.target.value)} autoFocus rows={3}
          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (draft.trim()) submit(false); } }}
          placeholder={t("idea.typeAnswer")}
          style={{ width: "100%", marginTop: 18, padding: "14px 16px", borderRadius: 13, border: "1.5px solid var(--border)", background: "var(--surface-2)", fontFamily: "inherit", fontSize: 15.5, lineHeight: 1.5, resize: "vertical", outline: "none", boxSizing: "border-box", color: "var(--ink)" }}
          onFocus={(e) => { e.target.style.borderColor = "var(--accent)"; e.target.style.background = "var(--surface)"; }}
          onBlur={(e) => { e.target.style.borderColor = "var(--border)"; e.target.style.background = "var(--surface-2)"; }} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16 }}>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            {qi > 0 && <button onClick={() => goTo(qi - 1)} style={{ border: "none", background: "transparent", color: "var(--muted)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>{t("idea.previous")}</button>}
            <button onClick={() => submit(true)} style={{ border: "none", background: "transparent", color: "var(--muted)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit", textDecoration: "underline" }}>{t("idea.skip")}</button>
          </div>
          <button onClick={() => submit(false)} disabled={!draft.trim()} style={{ ...btnPrimary, opacity: draft.trim() ? 1 : .45 }}>{(idea.interview.maxIndex || 0) >= INTERVIEW.length ? t("idea.saveAnswer") : t("idea.next")}</button>
        </div>
      </div>
      <Tip>{t("idea.interviewTip")}</Tip>
    </div>
  );
}

/* ---------- form ---------- */
function FormView({ idea, setIdea }) {
  const { t, lang } = useLang();
  const ol = (v) => optLabel(lang, v);
  const mix = idea.channelMix;
  const mixSum = mix.dineIn + mix.delivery + mix.takeaway;
  const setMix = (k, v) => setIdea({ channelMix: { ...mix, [k]: v } });
  const setFormat = (p) => setIdea({ format: { ...idea.format, ...p } });
  const setFounder = (p) => setIdea({ founder: { ...idea.founder, ...p } });
  const sectionTitle = (txt) => (
    <div className="mono" style={{ fontSize: 10.5, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 600, margin: "26px 0 12px", display: "flex", alignItems: "center", gap: 8 }}>
      <span style={{ width: 12, height: 1.5, background: "var(--brass)" }} />{txt}
    </div>
  );
  return (
    <div>
      <div style={card}>
        <FieldRow label={t("idea.conceptName")}><TextInput value={idea.conceptName} onChange={(v) => setIdea({ conceptName: v })} placeholder={t("idea.conceptNamePh")} /></FieldRow>
        <FieldRow label={t("idea.tagline")} hint={t("idea.taglineHint")} last><TextInput value={idea.tagline} onChange={(v) => setIdea({ tagline: v })} placeholder={t("idea.taglinePh")} /></FieldRow>
      </div>

      {sectionTitle(t("idea.secConcept"))}
      <div style={card}>
        <FieldRow label={t("idea.category")} top><div style={{ maxWidth: 380 }}><Chips options={CATEGORIES} value={idea.category} onChange={(v) => setIdea({ category: v })} renderLabel={ol} /></div></FieldRow>
        <FieldRow label={t("idea.cuisine")} top><div style={{ maxWidth: 380, display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-end" }}>
          <TextInput value={idea.cuisine} onChange={(v) => setIdea({ cuisine: v })} placeholder={t("idea.cuisinePh")} />
          <Chips options={CUISINE_PRESETS} value={idea.cuisine} onChange={(v) => setIdea({ cuisine: v })} renderLabel={ol} />
        </div></FieldRow>
        <FieldRow label={t("idea.serviceStyle")} top last><div style={{ maxWidth: 380 }}><Chips options={SERVICE_STYLES} value={idea.format.serviceStyle} onChange={(v) => setFormat({ serviceStyle: v })} renderLabel={ol} /></div></FieldRow>
      </div>

      {sectionTitle(t("idea.secCustomersPrice"))}
      <div style={card}>
        <FieldRow label={t("idea.targetCustomer")} hint={t("idea.targetCustomerHint")} top><div style={{ maxWidth: 380 }}><Chips multi options={CUSTOMERS} value={idea.targetCustomer} onChange={(v) => setIdea({ targetCustomer: v })} renderLabel={ol} /></div></FieldRow>
        <FieldRow label={t("idea.priceBand")} hint={idea.priceBand ? priceRange(idea.priceBand, lang) : t("idea.priceBandHint")} top last>
          <div style={{ maxWidth: 380 }}><Chips options={Object.keys(PRICE_BANDS)} value={idea.priceBand} onChange={(v) => setIdea({ priceBand: v })} renderLabel={ol} /></div>
        </FieldRow>
      </div>

      {sectionTitle(t("idea.secChannels"))}
      <div style={card}>
        {[["dineIn", t("idea.dineIn")], ["delivery", t("idea.delivery")], ["takeaway", t("idea.takeaway")]].map(([k, label], i) => (
          <FieldRow key={k} label={label} hint={k === "delivery" ? t("idea.deliveryHint") : null} last={i === 2}>
            <Stepper value={mix[k]} onChange={(v) => setMix(k, v)} max={100} step={5} suffix="%" />
          </FieldRow>
        ))}
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 16, alignItems: "baseline" }}>
          <span style={{ fontWeight: 600, fontSize: 14.5 }}>{t("idea.mustTotal100")}</span>
          <span className="serif-fig" style={{ fontSize: 24, color: mixSum === 100 ? "var(--green)" : "var(--red)" }}>{mixSum}%</span>
        </div>
      </div>

      {sectionTitle(t("idea.secFormatLocation"))}
      <div style={card}>
        <FieldRow label={t("idea.seats")} hint={t("idea.seatsHint")}><Stepper value={idea.format.seats} onChange={(v) => setFormat({ seats: v })} step={2} /></FieldRow>
        <FieldRow label={t("idea.size")}><Stepper value={idea.format.sqm} onChange={(v) => setFormat({ sqm: v })} step={5} suffix="m²" /></FieldRow>
        <FieldRow label={t("idea.locationType")} top><div style={{ maxWidth: 380 }}><Chips options={LOCATION_TYPES} value={idea.locationType} onChange={(v) => setIdea({ locationType: v })} renderLabel={ol} /></div></FieldRow>
        <FieldRow label={t("idea.competition")} hint={t("idea.competitionHint")} top><div style={{ maxWidth: 380 }}><Chips options={["Few", "Some", "Many"]} value={idea.competition} onChange={(v) => setIdea({ competition: v })} renderLabel={ol} /></div></FieldRow>
        <FieldRow label={t("idea.rentExpectation")} hint={t("idea.rentExpectationHint")} last><Amount value={idea.rentExpectation} onChange={(v) => setIdea({ rentExpectation: v })} /></FieldRow>
      </div>

      {sectionTitle(t("idea.secWhyWin"))}
      <div style={card}>
        <div style={{ fontWeight: 600, fontSize: 15.5 }}>{t("idea.uspTitle")}</div>
        <div style={{ color: "var(--muted)", fontSize: 13, marginTop: 3 }}>{t("idea.uspHint")}</div>
        <textarea value={idea.usp} onChange={(e) => setIdea({ usp: e.target.value })} rows={2} placeholder={t("idea.uspPh")}
          style={{ width: "100%", marginTop: 12, padding: "12px 14px", borderRadius: 12, border: "1.5px solid var(--border)", background: "var(--surface-2)", fontFamily: "inherit", fontSize: 15, lineHeight: 1.5, resize: "vertical", outline: "none", boxSizing: "border-box", color: "var(--ink)" }} />
      </div>

      {sectionTitle(t("idea.secAboutYou"))}
      <div style={card}>
        <FieldRow label={t("idea.experience")} top><div style={{ maxWidth: 380 }}><Chips options={EXPERIENCE} value={idea.founder.experience} onChange={(v) => setFounder({ experience: v })} renderLabel={ol} /></div></FieldRow>
        <FieldRow label={t("idea.capital")} hint={t("idea.capitalHint")}><Amount value={idea.founder.capital} onChange={(v) => setFounder({ capital: v })} /></FieldRow>
        <FieldRow label={t("idea.role")} top last><div style={{ maxWidth: 380 }}><Chips options={INVOLVEMENT} value={idea.founder.involvement} onChange={(v) => setFounder({ involvement: v })} renderLabel={ol} /></div></FieldRow>
      </div>
    </div>
  );
}

/* ---------- brief / results ---------- */
function BriefRow({ label, value, tag }) {
  return (
    <div style={{ padding: "10px 0", borderBottom: "1px dashed var(--border)", display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline" }}>
      <span className="mono" style={{ fontSize: 10, letterSpacing: ".09em", textTransform: "uppercase", color: "var(--muted)", flexShrink: 0 }}>{label}</span>
      <span style={{ fontSize: 14.5, fontWeight: 600, color: value === "—" ? "var(--faint)" : "var(--ink)", textAlign: "right" }}>{value}{tag && <span> {tag}</span>}</span>
    </div>
  );
}

function BriefView({ idea, setIdea, goFinancials }) {
  const { t, lang } = useLang();
  const ol = (v) => optLabel(lang, v);
  const c = computeIdea(idea, t, lang);
  const v = c.verdict;
  const dash = (s) => (s && String(s).trim() ? s : "—");
  const mix = idea.channelMix;
  return (
    <div style={{ animation: "fadeUp .45s cubic-bezier(.2,.7,.2,1)" }}>
      {/* verdict */}
      <div style={{ background: "var(--surface)", borderRadius: 20, boxShadow: "var(--shadow-lg)", overflow: "hidden", border: "1px solid var(--border)" }}>
        <div style={{ height: 4, background: toneVar(v.tone, "fg") }} />
        <div style={{ padding: "26px 30px", display: "flex", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600 }}>{t("idea.conceptVerdict")}</div>
            <div className="serif" style={{ fontSize: 40, color: toneVar(v.tone, "fg"), marginTop: 6, lineHeight: 1.05, letterSpacing: "-.02em" }}>{v.label}</div>
            <div style={{ fontSize: 15, color: "var(--ink)", marginTop: 12, opacity: .82, maxWidth: 440, lineHeight: 1.55 }}>
              {v.tone === "green" ? t("idea.briefVerdictGreen") :
               v.tone === "red" ? t("idea.briefVerdictRed") :
               t("idea.briefVerdictAmber")}
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--muted)" }}>{t("idea.conceptReadiness")}</div>
            <div className="serif-fig" style={{ fontSize: 54, color: toneVar(v.tone, "fg"), lineHeight: 1.05, marginTop: 4 }}>{c.readiness}<span style={{ fontSize: 26, color: "var(--muted)" }}>/100</span></div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{t("idea.fieldsCoherence", { filled: c.filled, total: c.total })}</div>
          </div>
        </div>
      </div>

      {/* brief card */}
      <div style={{ ...card, marginTop: 16, padding: 30 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 10 }}>
          <div>
            <h2 className="serif" style={{ fontSize: 30, fontWeight: 400, margin: 0, letterSpacing: "-.01em" }}>{dash(idea.conceptName) === "—" ? t("idea.conceptBriefFallback") : idea.conceptName}</h2>
            {idea.tagline && <div style={{ color: "var(--muted)", fontSize: 14.5, marginTop: 4, fontStyle: "italic", fontFamily: "Newsreader, serif" }}>“{idea.tagline}”</div>}
          </div>
          <SourceTag kind="input" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "4px 40px", marginTop: 18 }}>
          <div>
            <BriefRow label={t("idea.category")} value={dash(ol(idea.category))} />
            <BriefRow label={t("idea.cuisine")} value={dash(ol(idea.cuisine))} />
            <BriefRow label={t("idea.serviceStyle")} value={dash(ol(idea.format.serviceStyle))} />
            <BriefRow label={t("idea.size")} value={idea.format.seats || idea.format.sqm ? `${idea.format.seats || "?"} · ${idea.format.sqm || "?"} m²` : "—"} />
            <BriefRow label={t("idea.locationType")} value={dash(ol(idea.locationType))} />
            <BriefRow label={t("idea.competition")} value={dash(ol(idea.competition))} />
          </div>
          <div>
            <BriefRow label={t("idea.targetCustomer")} value={idea.targetCustomer.length ? idea.targetCustomer.map(ol).join(", ") : "—"} />
            <BriefRow label={t("idea.priceBand")} value={idea.priceBand ? `${ol(idea.priceBand)} · ${priceRange(idea.priceBand, lang)}` : "—"} />
            <BriefRow label={t("idea.secChannels")} value={`${mix.dineIn} / ${mix.delivery} / ${mix.takeaway}`} tag={<span className="mono" style={{ fontSize: 9.5, color: c.mixSum === 100 ? "var(--green)" : "var(--red)" }}>{c.mixSum === 100 ? "✓" : "≠100"}</span>} />
            <BriefRow label={t("idea.role")} value={[ol(idea.founder.experience), ol(idea.founder.involvement)].filter(Boolean).join(" · ") || "—"} />
            <BriefRow label={t("idea.capital")} value={idea.founder.capital ? fmtBaht(idea.founder.capital) : "—"} />
            <BriefRow label={t("idea.rentExpectation")} value={idea.rentExpectation ? fmtBaht(idea.rentExpectation) + "/mo" : "—"} />
          </div>
        </div>
        {idea.usp && (
          <div style={{ marginTop: 18, padding: "14px 18px", background: "var(--surface-2)", borderRadius: 12 }}>
            <span className="mono" style={{ fontSize: 9.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 600 }}>{t("idea.whyYouWin")}</span>
            <div className="serif" style={{ fontSize: 18, marginTop: 5, lineHeight: 1.45 }}>{idea.usp}</div>
          </div>
        )}
        {c.fitout && (
          <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <span style={{ fontSize: 13.5, color: "var(--muted)" }}>{t("idea.roughFitout")}<strong style={{ color: "var(--ink)" }}>{fmtBaht(c.fitout.value)}</strong> <span style={{ fontSize: 12 }}>({c.fitout.basis})</span></span>
            <SourceTag kind="benchmark" confidence="low" />
          </div>
        )}
      </div>

      {/* reality check — concept + light market/location gut-check */}
      {(c.flags.length > 0 || c.rentBench) && (
        <div style={{ ...card, marginTop: 16, padding: 28 }}>
          <h2 className="serif" style={{ fontSize: 24, fontWeight: 400, margin: 0 }}>{t("idea.realityCheck")}</h2>
          <div style={{ color: "var(--muted)", fontSize: 14, margin: "6px 0 16px", lineHeight: 1.5 }}>
            {t("idea.realityCheckDesc")}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
            {c.flags.length > 0
              ? c.flags.map((f, i) => <Flag key={i} tone={f.tone} text={f.text} />)
              : <Flag tone="green" text={t("idea.nothingJumpsOut")} />}
          </div>
          {c.rentBench && (
            <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px dashed var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
              <span style={{ fontSize: 13.5, color: "var(--muted)" }}>{t("idea.roughSalesFormat")}<strong style={{ color: "var(--ink)" }}>{fmtBaht(c.rentBench.salesEst)}/mo</strong> <span style={{ fontSize: 12 }}>({c.rentBench.basis})</span>{t("idea.healthyRentUpTo")}<strong style={{ color: "var(--ink)" }}>{fmtBaht(c.rentBench.healthyRent)}</strong></span>
              <SourceTag kind="benchmark" confidence="low" />
            </div>
          )}
          {c.riskiest && (
            <div style={{ marginTop: 16, padding: "14px 18px", background: "var(--surface-2)", borderRadius: 12, display: "flex", gap: 12, alignItems: "flex-start" }}>
              <span className="mono" style={{ fontSize: 9.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 700, flexShrink: 0, marginTop: 3 }}>{t("idea.testFirst")}</span>
              <span style={{ fontSize: 14.5, lineHeight: 1.55 }}>{c.riskiest.text}</span>
            </div>
          )}
        </div>
      )}

      <div style={{ display: "flex", gap: 12, marginTop: 24, justifyContent: "center", flexWrap: "wrap" }}>
        <button onClick={() => setIdea({ step: 0 })} style={btnGhost}>{t("idea.editMyAnswers")}</button>
        <button onClick={goFinancials} style={btnPrimary}>{t("idea.checkNumbers")}</button>
      </div>
      <div style={{ textAlign: "center", color: "var(--muted)", fontSize: 12.5, marginTop: 12 }}>{t("idea.prefillNote")}</div>
    </div>
  );
}

/* ---------- module wrapper ---------- */
function IdeaModule({ idea, setIdea, goFinancials }) {
  const { t } = useLang();
  const onBrief = idea.step === 1;
  return (
    <div data-screen-label="Business Model">
      {!onBrief ? (
        <StepShell k="idea" kicker={t("idea.stepKicker")} title={t("idea.stepTitle")} lead={t("idea.stepLead")}>
          <div style={{ marginBottom: 22, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
            {idea.mode === "form" ? (
              <button onClick={() => setIdea({ mode: "interview" })} style={{ border: "none", background: "transparent", color: "var(--muted)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit", padding: 0 }}>
                {t("idea.switchToInterview")}<span style={{ color: "var(--accent)", fontWeight: 700 }}>{t("idea.switchToInterviewLink")}</span>
              </button>
            ) : (
              <button onClick={() => setIdea({ mode: "form" })} style={{ border: "none", background: "transparent", color: "var(--muted)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit", padding: 0 }}>
                {t("idea.backToFormPrefix")}<span style={{ color: "var(--accent)", fontWeight: 700 }}>{t("idea.backToFormLink")}</span>
              </button>
            )}
            <button onClick={() => setIdea({ step: 1 })} style={{ border: "none", background: "transparent", color: "var(--accent)", fontSize: 13.5, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" }}>{t("idea.viewBrief")}</button>
          </div>
          {idea.mode === "interview"
            ? <InterviewView idea={idea} setIdea={setIdea} onFinish={() => setIdea({ step: 1 })} />
            : <div><FormView idea={idea} setIdea={setIdea} />
                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 24 }}>
                  <button onClick={() => setIdea({ step: 1 })} style={btnPrimary}>{t("idea.seeConceptBrief")}</button>
                </div>
              </div>}
        </StepShell>
      ) : (
        <StepShell k="brief" kicker={t("idea.briefKicker")} title={t("idea.briefTitle")} lead={t("idea.briefLead")}>
          <BriefView idea={idea} setIdea={setIdea} goFinancials={goFinancials} />
        </StepShell>
      )}
    </div>
  );
}

Object.assign(window, { IdeaModule });