/* ============================================================
   EBTR — Author Portal: the submission tool
   A guided, 4-step intake whose STRUCTURE enforces the EBTHub
   bar — every pitch must name a problem, carry a number+source,
   and clear the litmus test before "Submit" unlocks. A live
   banned-word detector flags off-voice language as you type.
   ============================================================ */
const PF_FIELD = { fontFamily: "var(--font-body)", fontSize: 16, color: "var(--white)", background: "var(--neutral-900)", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-sm)", padding: "12px 14px", outline: "none", width: "100%" };
function PFField({ label, hint, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span style={{ fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-secondary)" }}>{label}</span>
      {hint && <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.45, color: "var(--text-muted)", marginTop: -2 }}>{hint}</span>}
      {children}
    </label>
  );
}

const PF_CATEGORIES = ["Lab Outputs", "Voices from Industry", "Tools & Diagnostics", "Field Notes", "Agent Stories", "Briefings", "The Digital Employee"];
const PF_CAT_KEY = { "Lab Outputs": "lab-outputs", "Voices from Industry": "voices", "Tools & Diagnostics": "tools", "Field Notes": "field-notes", "Agent Stories": "agent-stories", "Briefings": "briefings", "The Digital Employee": "digital-employee" };
const PF_COVERS = { "lab-outputs": "blue", "voices": "purple", "tools": "orange", "field-notes": "blue", "agent-stories": "purple", "briefings": "orange", "digital-employee": "purple" };
const PF_STEPS = ["Section & topic", "The argument", "The piece", "Quality check"];

/* Editorial craft self-checks — advisory, the author ticks them to confirm the piece earns its place.
   These mirror the recurring notes a sharp editor (or Grammarly) raises; they nudge revision, not gate submission. */
const PF_CRAFT = [
  { key: "hook", label: "Sharpen the opening", hint: "The first two lines hook immediately — a sharp claim or live tension, no warm-up." },
  { key: "universal", label: "Frame the problem as universal", hint: "Make clear it isn't just your experience — it's every leader's risk, and a blind spot." },
  { key: "redundancy", label: "Eliminate redundancy", hint: "Cut repeated points and filler. Every sentence earns its place or goes." },
  { key: "principle", label: "Highlight the leadership principle", hint: "Name the actionable insight so an executive can adopt it on Monday." },
  { key: "cta", label: "Add a strategic call to action", hint: "Tell the reader the one move to make — concrete, not 'consider'." },
  { key: "closing", label: "Make the closing unmissable", hint: "End forward-looking — name the compounding risk of doing nothing." },
];

/* Convert the guided form into a real article doc (status 'new' → editor queue) */
function pfBuildArticle(f, me) {
  const catKey = PF_CAT_KEY[f.category] || "lab-outputs";
  const slug = (f.title || "untitled").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 48);
  const id = f._editId ? f._editId : (slug + "-" + Date.now().toString(36));
  const blocks = [];
  {
    const rl = (f.body || "").split(/\n/);
    let i = 0;
    while (i < rl.length) {
      const ln = rl[i].trim();
      if (!ln) { i++; continue; }                                            // blank line = separator
      if (/^#{1,3}\s+/.test(ln)) { blocks.push({ t: "h2", text: ln.replace(/^#{1,3}\s+/, "") }); i++; continue; }  // heading = own block
      if (/^[-*•]\s+/.test(ln)) {                                            // bullet group: bullets + their description lines, until a blank line
        const grp = [];
        while (i < rl.length && rl[i].trim()) { grp.push(rl[i].trim()); i++; }
        blocks.push({ t: "p", text: grp.join("\n") });
        continue;
      }
      blocks.push({ t: "p", text: ln });                                     // each paragraph (line) = its own block → its own editor field
      i++;
    }
  }
  if (f.statValue && f.statSource) blocks.splice(Math.min(1, blocks.length), 0, { t: "stat", value: f.statValue, label: f.statLabel || "", source: f.statSource, color: PF_COVERS[catKey] || "orange" });
  if (f.pullquote) blocks.push({ t: "quote", text: f.pullquote });
  if (!blocks.length) blocks.push({ t: "p", text: f.standfirst || f.thesis || "" });
  const email = (me && me.email || "").toLowerCase();
  return {
    id, category: catKey, title: f.title || "Untitled", dek: f.standfirst || f.thesis || "",
    author: email || (me && me.name) || "author", authorEmail: email, authorName: (me && me.name) || "Author",
    authorTitle: (me && me.title) || "", authorBio: (me && me.bio) || "", authorBadges: (me && me.badges) || [], authorBadge: (me && me.badges && me.badges[0]) || null,
    date: new Date().toISOString().slice(0, 10),
    premium: false, featured: false, readNext: false,
    cover: PF_COVERS[catKey] || "blue", coverUrl: "",
    body: blocks, doi: f.doi || "", references: (f.references || []).filter((r) => (r.authors || "").trim() && (r.title || "").trim()),
    status: "new",
    formDraft: f,
    editorMeta: {
      score: { number: !!(f.statValue && f.statSource), named: f.problem.trim().length > 3, provoke: f.thesis.trim().length > 10, board: !!f.attest },
      comments: [],
      submission: { problem: f.problem, claim: f.claim, thesis: f.thesis, statLabel: f.statLabel },
    },
  };
}

function PSubmit({ onCancel, onSubmitted, onGuide, draft, me }) {
  const D = window.EBTR_AUTHOR;
  const [step, setStep] = React.useState(0);
  const [f, setF] = React.useState(() => {
    const d = draft && draft.formDraft;
    if (d) return {
      _editId: draft.id || "",
      format: d.format || "", category: d.category || draft.category || "", title: d.title || draft.title || "",
      problem: d.problem || "", claim: d.claim || "", statValue: d.statValue || "", statLabel: d.statLabel || "", statSource: d.statSource || "",
      thesis: d.thesis || "", standfirst: d.standfirst || "", body: d.body || "", pullquote: d.pullquote || "",
      references: Array.isArray(d.references) ? d.references : [], doi: d.doi || "", attest: false, craft: d.craft || {},
    };
    return {
      _editId: draft && draft.id ? draft.id : "",
      format: draft ? draft.format : "", category: draft ? draft.category : "", title: draft ? draft.title : "",
      problem: "", claim: "", statValue: "", statLabel: "", statSource: "",
      thesis: "", standfirst: draft ? draft.dek : "", body: "", pullquote: "", references: [], doi: "", attest: false, craft: {},
    };
  });
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const refs = f.references;
  const setRef = (i, patch) => set("references", refs.map((r, j) => j === i ? { ...r, ...patch } : r));
  const addRef = () => { if (refs.length < 5) set("references", [...refs, { authors: "", year: "", title: "", source: "", doi: "" }]); };
  const delRef = (i) => set("references", refs.filter((_, j) => j !== i));
  const validRefs = refs.filter((r) => (r.authors || "").trim() && (r.title || "").trim()).length;

  const text = `${f.problem} ${f.thesis} ${f.standfirst} ${f.body} ${f.claim}`.toLowerCase();
  const bannedHits = D.guide.avoid.filter((w) => new RegExp(`\\b${w.toLowerCase()}\\b`).test(text));
  const hasNumber = /\d/.test(f.statValue) || /\d%/.test(f.body) || /\d/.test(f.claim);
  const score = {
    number: hasNumber && f.statSource.trim().length > 1,
    named: f.problem.trim().length > 3,
    provoke: f.thesis.trim().length > 10,
    board: f.attest,
  };
  const passCount = Object.values(score).filter(Boolean).length;
  const canSubmit = f.category && score.number && score.named && score.provoke && bannedHits.length === 0 && validRefs >= 2;
  const words = f.body.trim() ? f.body.trim().split(/\s+/).length : 0;

  const next = () => setStep((s) => Math.min(PF_STEPS.length - 1, s + 1));
  const back = () => setStep((s) => Math.max(0, s - 1));

  return (
    <main style={{ maxWidth: 1600, margin: "0 auto", padding: "40px var(--space-7) 80px" }}>
      <button onClick={onCancel} style={{ display: "inline-flex", alignItems: "center", gap: 9, background: "none", border: "none", padding: 0, cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-secondary)", marginBottom: 26 }}>← Cancel</button>
      <PEyebrow color="orange">{draft ? "Revise submission" : "New submission"}</PEyebrow>
      <h1 style={{ fontFamily: "var(--ebtr-display)", fontSize: "clamp(26px, 3vw, 40px)", letterSpacing: "0.015em", textTransform: "uppercase", color: "var(--white)", margin: "12px 0 0" }}>Pitch your piece</h1>

      <div className="pf-submit-grid" style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 56, alignItems: "start", marginTop: 36 }}>
        {/* sidebar: steps + live quality meter */}
        <aside className="pf-submit-side" style={{ position: "sticky", top: 96 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 28 }}>
            {PF_STEPS.map((s, i) => (
              <button key={s} onClick={() => setStep(i)} style={{ display: "flex", alignItems: "center", gap: 12, textAlign: "left", background: i === step ? "rgba(255,255,255,0.04)" : "none", border: "none", borderLeft: i === step ? "2px solid var(--ebt-orange)" : "2px solid transparent", padding: "10px 12px", cursor: "pointer" }}>
                <span style={{ width: 20, height: 20, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", fontFamily: "var(--font-ui)", fontSize: 10, background: i < step ? "var(--ebt-blue)" : i === step ? "var(--ebt-orange)" : "var(--neutral-800)", color: i <= step ? (i === step ? "var(--neutral-1000)" : "var(--white)") : "var(--text-muted)" }}>{i < step ? "✓" : i + 1}</span>
                <span style={{ fontFamily: "var(--font-ui)", fontSize: 11.5, letterSpacing: "0.06em", textTransform: "uppercase", color: i === step ? "var(--white)" : "var(--text-secondary)" }}>{s}</span>
              </button>
            ))}
          </div>

          <div style={{ border: "1px solid var(--border-hairline)", padding: "18px 18px 20px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
              <span style={{ fontFamily: "var(--font-ui)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-muted)" }}>Quality bar</span>
              <span style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: passCount === 4 ? "var(--blue-400)" : "var(--ebt-orange)" }}>{passCount}/4</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {D.litmus.map((l) => (
                <div key={l.key} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 8, alignItems: "start" }}>
                  <span style={{ color: score[l.key] ? "var(--blue-400)" : "var(--text-muted)", fontFamily: "var(--font-ui)", fontSize: 12 }}>{score[l.key] ? "✓" : "○"}</span>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, lineHeight: 1.35, color: score[l.key] ? "var(--text-secondary)" : "var(--text-muted)" }}>{l.label}</span>
                </div>
              ))}
            </div>
            <button onClick={onGuide} className="pf-link" style={{ marginTop: 16, background: "none", border: "none", padding: 0, cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--blue-400)" }}>Open style guide →</button>
          </div>

          {bannedHits.length > 0 && (
            <div style={{ marginTop: 16, border: "1px solid rgba(255,140,3,0.4)", background: "rgba(255,140,3,0.07)", padding: "14px 16px" }}>
              <div style={{ fontFamily: "var(--font-ui)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ebt-orange)", marginBottom: 8 }}>Off-voice language</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.5, color: "var(--neutral-100)" }}>Avoid: {bannedHits.map((w) => <span key={w} style={{ color: "var(--ebt-orange)", textDecoration: "line-through", marginRight: 6 }}>{w}</span>)}</div>
            </div>
          )}
        </aside>

        {/* step body */}
        <div style={{ minWidth: 0 }}>
          {step === 0 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <h2 style={pfH2}>What are you submitting?</h2>
              <PFField label="Section" hint="Where it lists in the Review. The editor confirms placement on acceptance."><select style={PF_FIELD} value={f.category} onChange={(e) => set("category", e.target.value)}><option value="" disabled>Select…</option>{PF_CATEGORIES.map((x) => <option key={x}>{x}</option>)}</select></PFField>
              <PFField label="Working title" hint="UPPERCASE on publication. Short, sharp, ownable."><input style={PF_FIELD} value={f.title} onChange={(e) => set("title", e.target.value)} placeholder="The Verification Tax" /></PFField>
            </div>
          )}

          {step === 1 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <h2 style={pfH2}>The argument</h2>
              <p style={pfLede}>This is where pieces live or die. Every EBTR piece names a problem, backs it with a number, and states a thesis you could put on a slide.</p>
              <PFField label="Name the problem" hint="The thing everyone ignores. Give it a sharp, ownable name."><input style={PF_FIELD} value={f.problem} onChange={(e) => set("problem", e.target.value)} placeholder="The Verification Tax" /></PFField>
              <div style={{ border: "1px solid var(--border-hairline)", padding: "20px 22px" }}>
                <div style={{ fontFamily: "var(--font-ui)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--blue-400)", marginBottom: 16 }}>Your headline number <span style={{ color: "var(--ebt-orange)" }}>— required</span></div>
                <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16 }} className="pf-2">
                  <PFField label="Value"><input style={PF_FIELD} value={f.statValue} onChange={(e) => set("statValue", e.target.value)} placeholder="900%" /></PFField>
                  <PFField label="What it measures"><input style={PF_FIELD} value={f.statLabel} onChange={(e) => set("statLabel", e.target.value)} placeholder="increase in verification time on AI-assisted work" /></PFField>
                </div>
                <div style={{ marginTop: 16 }}><PFField label="Source" hint="A Lab result, a study, or a named case. No source, no claim."><input style={PF_FIELD} value={f.statSource} onChange={(e) => set("statSource", e.target.value)} placeholder="Lab 01 field study, 2026" /></PFField></div>
              </div>
              <PFField label="One-line thesis" hint="Direct. State it as fact, no hedging."><input style={PF_FIELD} value={f.thesis} onChange={(e) => set("thesis", e.target.value)} placeholder="You don't have an AI problem. You have a verification problem." /></PFField>
            </div>
          )}

          {step === 2 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <h2 style={pfH2}>The piece</h2>
              <PFField label="Standfirst / dek" hint="One or two sentences. What's the so-what?">
                <textarea rows={2} maxLength={280} style={{ ...PF_FIELD, resize: "vertical", lineHeight: 1.5 }} value={f.standfirst} onChange={(e) => set("standfirst", e.target.value)} placeholder="Your team isn't slower because the AI is bad…" />
              </PFField>
              <div style={{ marginTop: -14, textAlign: "right", fontFamily: "var(--font-ui)", fontSize: 10.5, color: f.standfirst.length > 260 ? "var(--ebt-orange)" : "var(--text-muted)" }}>{f.standfirst.length}/280</div>
              <PFField label="Body" hint="Lead with the problem. Earn every paragraph. Numbers as digits with %. Blank line = new paragraph. For a bullet list, start each line with a dash (-).">
                <textarea rows={9} style={{ ...PF_FIELD, resize: "vertical", lineHeight: 1.6 }} value={f.body} onChange={(e) => set("body", e.target.value)} placeholder={"Write the piece…\n\nUse a blank line between paragraphs.\n\n- Bullet one\n- Bullet two"} />
              </PFField>
              <div style={{ marginTop: -14, textAlign: "right", fontFamily: "var(--font-ui)", fontSize: 10.5, color: "var(--text-muted)" }}>{words} words</div>

              {/* References — 2 to 5, APA */}
              <div style={{ borderTop: "1px solid var(--border-hairline)", paddingTop: 22 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }}>
                  <span style={{ fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-secondary)" }}>References · APA</span>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: validRefs < 2 ? "var(--ebt-orange)" : "var(--blue-400)" }}>{validRefs}/5 · min 2 required</span>
                </div>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.5, color: "var(--text-muted)", margin: "0 0 14px" }}>Every EBTR piece is sourced. Add 2–5 references; the editor confirms them on acceptance.</p>
                {refs.map((r, i) => (
                  <div key={i} style={{ border: "1px solid var(--border-hairline)", padding: "12px 14px", marginBottom: 10 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}><span style={{ fontFamily: "var(--font-ui)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)" }}>Reference {i + 1}</span><button type="button" onClick={() => delRef(i)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)", fontFamily: "var(--font-ui)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase" }}>Remove</button></div>
                    <div style={{ display: "grid", gridTemplateColumns: "2fr 70px", gap: 8, marginBottom: 8 }}>
                      <input value={r.authors} onChange={(e) => setRef(i, { authors: e.target.value })} placeholder="Authors — Westerman, G., & Bonnet, D." style={{ ...PF_FIELD, fontSize: 13.5, padding: "9px 11px" }} />
                      <input value={r.year} onChange={(e) => setRef(i, { year: e.target.value })} placeholder="Year" style={{ ...PF_FIELD, fontSize: 13.5, padding: "9px 11px" }} />
                    </div>
                    <input value={r.title} onChange={(e) => setRef(i, { title: e.target.value })} placeholder="Title of the work" style={{ ...PF_FIELD, fontSize: 13.5, padding: "9px 11px", marginBottom: 8 }} />
                    <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 8 }}>
                      <input value={r.source} onChange={(e) => setRef(i, { source: e.target.value })} placeholder="Journal / source, vol(issue), pp." style={{ ...PF_FIELD, fontSize: 13.5, padding: "9px 11px" }} />
                      <input value={r.doi || ""} onChange={(e) => setRef(i, { doi: e.target.value })} placeholder="DOI (optional)" style={{ ...PF_FIELD, fontSize: 13.5, padding: "9px 11px" }} />
                    </div>
                  </div>
                ))}
                {refs.length < 5 && <button type="button" onClick={addRef} className="pf-ghost" style={{ background: "none", border: "1px solid var(--border-strong)", padding: "9px 16px", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--white)" }}>+ Add reference</button>}
                <PFField label="Your DOI / preprint (optional)" hint="If this work has a DOI or ORCID-linked preprint, add it." >
                  <input value={f.doi} onChange={(e) => set("doi", e.target.value)} placeholder="10.xxxx/…" style={PF_FIELD} />
                </PFField>
              </div>
              <PFField label="Pull-quote (optional)" hint="The one line you'd put on a billboard."><input style={PF_FIELD} value={f.pullquote} onChange={(e) => set("pullquote", e.target.value)} placeholder="You don't have an AI problem…" /></PFField>
            </div>
          )}

          {step === 3 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <h2 style={pfH2}>Clear the bar</h2>
              <p style={pfLede}>Submissions that clear all four are fast-tracked to senior editorial review. This is the same test our editors and reviewers use.</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {D.litmus.map((l) => (
                  <div key={l.key} style={{ display: "grid", gridTemplateColumns: "26px 1fr", gap: 12, alignItems: "start", padding: "16px 18px", border: "1px solid var(--border-hairline)", borderLeft: `3px solid ${score[l.key] ? "var(--ebt-blue)" : "var(--neutral-700)"}` }}>
                    <span style={{ color: score[l.key] ? "var(--blue-400)" : "var(--text-muted)", fontFamily: "var(--font-ui)", fontSize: 15 }}>{score[l.key] ? "✓" : "○"}</span>
                    <div>
                      <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 15, color: "var(--white)" }}>{l.label}</div>
                      <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-muted)", marginTop: 3 }}>{l.hint}</div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Editorial craft self-review — advisory nudges, ticked by the author */}
              <div style={{ marginTop: 8, paddingTop: 22, borderTop: "1px solid var(--border-hairline)" }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: 4 }}>
                  <h2 style={pfH2}>Craft self-review</h2>
                  <span style={{ fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.06em", color: "var(--text-muted)" }}>{PF_CRAFT.filter((c) => f.craft[c.key]).length}/{PF_CRAFT.length} confirmed · optional</span>
                </div>
                <p style={pfLede}>The notes our editors raise most. Read each, fix the piece, then tick it. Optional — but pieces that clear these get published faster.</p>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {PF_CRAFT.map((c) => {
                    const on = !!f.craft[c.key];
                    return (
                      <label key={c.key} style={{ display: "grid", gridTemplateColumns: "26px 1fr", gap: 12, alignItems: "start", padding: "14px 16px", border: "1px solid var(--border-hairline)", borderLeft: `3px solid ${on ? "var(--ebt-orange)" : "var(--neutral-700)"}`, cursor: "pointer" }}>
                        <input type="checkbox" checked={on} onChange={(e) => set("craft", Object.assign({}, f.craft, { [c.key]: e.target.checked }))} style={{ width: 17, height: 17, marginTop: 1, accentColor: "var(--ebt-orange)" }} />
                        <div>
                          <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 15, color: "var(--white)" }}>{c.label}</div>
                          <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.5, color: "var(--text-muted)", marginTop: 3 }}>{c.hint}</div>
                        </div>
                      </label>
                    );
                  })}
                </div>
              </div>

              <label style={{ display: "flex", alignItems: "flex-start", gap: 12, cursor: "pointer", padding: "4px 2px" }}>
                <input type="checkbox" checked={f.attest} onChange={(e) => set("attest", e.target.checked)} style={{ width: 18, height: 18, marginTop: 2, accentColor: "var(--ebt-orange)" }} />
                <span style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.5, color: "var(--text-secondary)" }}>I'd put my name on this, and I'd expect a board member to share it. It's original and not under review elsewhere.</span>
              </label>
              {!canSubmit && <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ebt-orange)" }}>{!f.category ? "Pick a section on step 1 to submit." : bannedHits.length > 0 ? "Remove the off-voice words flagged in the sidebar to submit." : validRefs < 2 ? "Add at least 2 references (with author and title) to submit." : "Name a problem, add a sourced number, and a thesis to unlock submission."}</div>}
            </div>
          )}

          {/* nav */}
          <div style={{ display: "flex", justifyContent: "space-between", gap: 14, marginTop: 40, paddingTop: 24, borderTop: "1px solid var(--border-hairline)" }}>
            <button onClick={step === 0 ? onCancel : back} className="pf-ghost" style={{ background: "none", border: "1px solid var(--border-strong)", padding: "13px 22px", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--white)" }}>{step === 0 ? "Cancel" : "← Back"}</button>
            {step < PF_STEPS.length - 1
              ? <PBtn variant="primary" size="lg" icon="none" onClick={next}>Continue</PBtn>
              : <PBtn variant="primary" size="lg" icon="none" disabled={!canSubmit} onClick={() => onSubmitted(pfBuildArticle(f, me))}>Submit for review</PBtn>}
          </div>
        </div>
      </div>
    </main>
  );
}

const pfH2 = { fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 24, color: "var(--white)", margin: 0 };
const pfLede = { fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--text-secondary)", margin: "-8px 0 4px", maxWidth: 620 };

Object.assign(window, { PSubmit });
