/* global React */
// Mobile rebuild of onboarding screens. Replaces the desktop-width versions
// in app.jsx so every artboard fits inside an iPhone frame at 420×880.

const { useState: useOBM, createContext: createCtxM, useContext: useCtxM } = React;

const OBM_DEFAULTS = {
  name: "Marcus Chen",
  whatYouDo: "Boutique commercial property practice. I act for small business owners purchasing first commercial premises and developers under $5M — the deals top-tier firms deprioritise but where the legal work most affects the outcome.",
  archetypes: [
    { t: "The first-time commercial buyer", d: "Business owner outgrowing leased premises, $1.5–4M deal, often nervous about contract terms." },
    { t: "The under-$5M developer", d: "Two to ten lot subdivisions, mixed-use infill, time-pressured DA pathways." },
  ],
  wins: [
    { tag: "MARCH 2026", t: "Saved a $2.3M warehouse purchase", d: "Identified an unregistered easement four days before settlement." },
    { tag: "JANUARY 2026", t: "Closed a 14-lot Burleigh subdivision", d: "DA-conditional contracts with three separate funders." },
  ],
  lookingFor: ["Commercial mortgage brokers", "SME accountants", "Commercial agents · Gold Coast"],
  offers: [
    { t: "Free 20-min contract reviews", d: "For early-stage business owners deciding whether a commercial purchase makes sense." },
    { t: "Intros to ~12 SE QLD brokers", d: "Mostly relationship-based, no kickbacks." },
  ],
  focus: "Building referral relationships with brokers and accountants who serve SME owners buying their first commercial premises.",
  highlight: "SME owners buying their first commercial premises",
  meetingType: "both",
  calendar: "google",
};

const OBMCtx = createCtxM(null);
function OBMProvider({ children, initial }) {
  const [data, setData] = useOBM({ ...OBM_DEFAULTS, ...(initial || {}) });
  const update = (patch) => setData(d => ({ ...d, ...patch }));
  return <OBMCtx.Provider value={{ data, update }}>{children}</OBMCtx.Provider>;
}
const useOBMData = () => useCtxM(OBMCtx) || { data: OBM_DEFAULTS, update: () => {} };

// Shared mobile chrome
function MChrome({ step, total = 7, children, footer }) {
  const { MScreen, MTopBar } = window.M;
  return (
    <MScreen footer={footer}>
      <MTopBar
        label={step != null ? `${String(step).padStart(2,"0")} / ${String(total).padStart(2,"0")}` : ""}
        right={<button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", cursor: "pointer" }}>SAVE & EXIT</button>}
      />
      {children}
    </MScreen>
  );
}

function MHead({ eyebrow, title, helper }) {
  return (
    <div style={{ padding: "8px 24px 0" }}>
      {eyebrow && <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>{eyebrow}</div>}
      <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>{title}</h1>
      {helper && <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-2)", marginTop: 12, textWrap: "pretty" }}>{helper}</p>}
    </div>
  );
}

function MLabel({ children, hint }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
      <label className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>{children}</label>
      {hint && <span className="mono" style={{ fontSize: 10, color: "var(--text-3)" }}>{hint}</span>}
    </div>
  );
}

function MPrimary({ children, disabled }) {
  return (
    <button disabled={disabled} style={{
      width: "100%", height: 52, borderRadius: 999,
      background: disabled ? "var(--surface-3)" : "var(--accent)",
      color: disabled ? "var(--text-3)" : "#0E0D0B",
      border: "none", fontFamily: "var(--sans)", fontSize: 15, fontWeight: 600,
      cursor: disabled ? "not-allowed" : "pointer",
    }}>{children}</button>
  );
}

function MGhost({ children }) {
  return (
    <button style={{
      width: "100%", height: 48, borderRadius: 999,
      background: "transparent", border: "1px solid var(--border)",
      color: "var(--text)", fontFamily: "var(--sans)", fontSize: 14, fontWeight: 500,
      cursor: "pointer",
    }}>{children}</button>
  );
}

function MExamples({ items }) {
  const [open, setOpen] = useOBM(false);
  return (
    <div style={{ marginTop: 14 }}>
      <button onClick={() => setOpen(o => !o)} className="mono" style={{ background: "transparent", border: "none", color: "var(--text-3)", cursor: "pointer", fontSize: 10, letterSpacing: "0.12em", padding: 0 }}>
        {open ? "− HIDE EXAMPLES" : "+ SHOW EXAMPLES"}
      </button>
      {open && (
        <div style={{ marginTop: 12, paddingLeft: 12, borderLeft: "1px solid var(--accent-soft)" }}>
          {items.map((ex, i) => (
            <p key={i} className="serif-i" style={{ fontSize: 13, lineHeight: 1.5, color: "var(--text-2)", margin: "0 0 10px" }}>"{ex}"</p>
          ))}
        </div>
      )}
    </div>
  );
}

// ====================================================================
// 0 — Sign in
// ====================================================================
function MSignIn() {
  const { MScreen } = window.M;
  return (
    <MScreen>
      <div style={{ padding: "0 24px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", position: "relative" }}>
        <div className="mono" style={{ position: "absolute", top: 20, left: 24, fontSize: 9.5, letterSpacing: "0.18em", color: "var(--text-3)" }}>EST. 2024 · GOLD COAST</div>
        <div className="serif" style={{ fontSize: 92, lineHeight: 1, letterSpacing: "-0.04em" }}>
          1to<span className="serif-i" style={{ color: "var(--accent)" }}>1</span>
        </div>
        <p style={{ marginTop: 18, fontSize: 15, color: "var(--text-2)" }}>Where business gets done.</p>
        <button style={{ marginTop: 36, width: "100%", maxWidth: 320, height: 52, borderRadius: 999, background: "var(--accent)", color: "#0E0D0B", border: "none", fontFamily: "var(--sans)", fontSize: 15, fontWeight: 600, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45z"/></svg>
          Continue with LinkedIn
        </button>
        <p style={{ fontSize: 11, color: "var(--text-3)", marginTop: 14, maxWidth: 280 }}>By continuing you agree to our Terms and Privacy.</p>
        <p className="serif-i" style={{ position: "absolute", bottom: 24, left: 24, right: 24, fontSize: 11, color: "var(--text-3)", margin: 0, textAlign: "center" }}>"The right room, the right introduction, at the right time." — Vol. I</p>
      </div>
    </MScreen>
  );
}

// ====================================================================
// 0b — Welcome
// ====================================================================
function MWelcome() {
  const { MScreen, MStickyCTA } = window.M;
  return (
    <MScreen footer={<MStickyCTA><MPrimary>Begin</MPrimary><div style={{ textAlign: "center", marginTop: 10 }}><button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 12, cursor: "pointer" }}>I'll do this later</button></div></MStickyCTA>}>
      <div style={{ padding: "32px 24px 0" }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>WELCOME · 0 / 07</div>
        <div style={{ marginTop: 80 }}>
          <h1 className="serif" style={{ fontSize: 54, margin: 0, letterSpacing: "-0.025em", lineHeight: 1 }}>
            Welcome,<br/><span className="serif-i" style={{ color: "var(--accent)" }}>Marcus.</span>
          </h1>
          <p style={{ marginTop: 22, fontSize: 15.5, lineHeight: 1.55, color: "var(--text-2)", textWrap: "pretty" }}>
            Let's build your Meet Sheet. About 5 minutes — and the most important part of being on 1to1.
          </p>
          <p style={{ marginTop: 12, fontSize: 13.5, lineHeight: 1.55, color: "var(--text-3)", textWrap: "pretty" }}>
            It's the first thing anyone reads about you. We'll walk through it one question at a time.
          </p>
        </div>
      </div>
      <div className="mono" style={{ position: "absolute", bottom: 110, left: 24, right: 24, fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>SIGNED IN AS MARCUS CHEN · CHEN LEGAL · ROBINA QLD</div>
    </MScreen>
  );
}

// ====================================================================
// Step 1 — What you do
// ====================================================================
function MStep1() {
  const { data, update } = useOBMData();
  const { MStickyCTA } = window.M;
  return (
    <MChrome step={1} footer={<MStickyCTA><MPrimary>Continue</MPrimary></MStickyCTA>}>
      <MHead title={<>What are you <span className="serif-i" style={{ color: "var(--accent)" }}>known for?</span></>} helper="Two or three sentences. Plain language — what you actually do, for whom, and why people come to you specifically."/>
      <div style={{ padding: "22px 24px 24px" }}>
        <MLabel hint={`${data.whatYouDo.length} / 400`}>IN YOUR OWN WORDS</MLabel>
        <textarea value={data.whatYouDo} onChange={(e) => update({ whatYouDo: e.target.value })} rows={6} className="field" style={{ fontSize: 14.5, lineHeight: 1.55, padding: 14 }}/>
        <MExamples items={["Boutique commercial property practice for small-business owners buying their first premises.", "Brand strategy for owner-operators on the Gold Coast — usually 6–18 months in."]}/>
      </div>
    </MChrome>
  );
}

// ====================================================================
// Step 2 — Who you serve
// ====================================================================
function MStep2() {
  const { data, update } = useOBMData();
  const { MStickyCTA } = window.M;
  const set = (i, k, v) => { const a = [...data.archetypes]; a[i] = { ...a[i], [k]: v }; update({ archetypes: a }); };
  return (
    <MChrome step={2} footer={<MStickyCTA><MPrimary>Continue</MPrimary><div className="mono" style={{ textAlign: "center", marginTop: 8, fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)" }}>{data.archetypes.length} OF 3</div></MStickyCTA>}>
      <MHead title={<>Who are your <span className="serif-i" style={{ color: "var(--accent)" }}>ideal clients?</span></>} helper="Up to three archetypes. Specific is more useful than broad."/>
      <div style={{ padding: "22px 24px 24px" }}>
        {data.archetypes.map((a, i) => (
          <div key={i} style={{ marginBottom: 14, padding: 16, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
              <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>{`0${i+1}`}</span>
              <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 11, cursor: "pointer" }}>Remove</button>
            </div>
            <MLabel>TITLE</MLabel>
            <input className="field" value={a.t} onChange={(e) => set(i,"t",e.target.value)} style={{ marginBottom: 12, fontSize: 14, height: 42 }}/>
            <MLabel>DESCRIPTION</MLabel>
            <textarea className="field" rows={2} value={a.d} onChange={(e) => set(i,"d",e.target.value)} style={{ fontSize: 13.5, padding: 12 }}/>
          </div>
        ))}
        <button style={{ background: "transparent", border: "1px dashed var(--border)", borderRadius: 12, padding: 14, width: "100%", color: "var(--text-3)", cursor: "pointer", fontSize: 13 }}>+ Add another archetype</button>
      </div>
    </MChrome>
  );
}

// ====================================================================
// Step 3 — Recent wins
// ====================================================================
function MStep3() {
  const { data, update } = useOBMData();
  const { MStickyCTA } = window.M;
  const set = (i, k, v) => { const a = [...data.wins]; a[i] = { ...a[i], [k]: v }; update({ wins: a }); };
  return (
    <MChrome step={3} footer={<MStickyCTA><MPrimary>Continue</MPrimary></MStickyCTA>}>
      <MHead title={<>What have you done <span className="serif-i" style={{ color: "var(--accent)" }}>lately?</span></>} helper="Up to three. Specific outcomes from the last twelve months."/>
      <div style={{ padding: "22px 24px 24px" }}>
        {data.wins.map((w, i) => (
          <div key={i} style={{ marginBottom: 14, padding: 16, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
              <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>{`0${i+1}`}</span>
              <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 11, cursor: "pointer" }}>Remove</button>
            </div>
            <MLabel>WHEN</MLabel>
            <input className="field mono" value={w.tag} onChange={(e) => set(i,"tag",e.target.value)} style={{ marginBottom: 12, fontSize: 12, height: 42 }}/>
            <MLabel>TITLE</MLabel>
            <input className="field" value={w.t} onChange={(e) => set(i,"t",e.target.value)} style={{ marginBottom: 12, fontSize: 14, height: 42 }}/>
            <MLabel>WHAT HAPPENED</MLabel>
            <textarea className="field" rows={2} value={w.d} onChange={(e) => set(i,"d",e.target.value)} style={{ fontSize: 13.5, padding: 12 }}/>
          </div>
        ))}
        <button style={{ background: "transparent", border: "1px dashed var(--border)", borderRadius: 12, padding: 14, width: "100%", color: "var(--text-3)", cursor: "pointer", fontSize: 13 }}>+ Add another win</button>
      </div>
    </MChrome>
  );
}

// ====================================================================
// Step 4 — Looking to meet
// ====================================================================
function MStep4() {
  const { data, update } = useOBMData();
  const { MStickyCTA } = window.M;
  const [input, setInput] = useOBM("");
  const suggestions = ["Town planners · Robina/Varsity", "QS / building consultants", "Insurance brokers", "Conveyancers"].filter(s => !data.lookingFor.includes(s));
  const remove = (v) => update({ lookingFor: data.lookingFor.filter(x => x !== v) });
  return (
    <MChrome step={4} footer={<MStickyCTA><MPrimary>Continue</MPrimary></MStickyCTA>}>
      <MHead title={<>Who would <span className="serif-i" style={{ color: "var(--accent)" }}>move things forward</span> for you?</>} helper="Industries, roles, locations. Used to suggest 1to1s."/>
      <div style={{ padding: "22px 24px 24px" }}>
        <MLabel>YOUR ASKS</MLabel>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, padding: 12, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, minHeight: 70 }}>
          {data.lookingFor.map((tag, i) => (
            <span key={i} className="pill accent" style={{ paddingRight: 6, fontSize: 12 }}>
              {tag}
              <button onClick={() => remove(tag)} style={{ background: "transparent", border: "none", color: "var(--accent)", marginLeft: 4, cursor: "pointer", padding: 0, fontSize: 13, lineHeight: 1 }}>×</button>
            </span>
          ))}
          <input value={input} onChange={(e) => setInput(e.target.value)} placeholder={data.lookingFor.length ? "" : "Start typing…"} style={{ flex: 1, minWidth: 100, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 13, padding: "4px", fontFamily: "var(--sans)" }}/>
        </div>
        <div style={{ marginTop: 18 }}>
          <MLabel>SUGGESTIONS</MLabel>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {suggestions.map((s, i) => <button key={i} className="pill" style={{ cursor: "pointer", border: "1px dashed var(--border)", fontSize: 12 }}>+ {s}</button>)}
          </div>
        </div>
      </div>
    </MChrome>
  );
}

// ====================================================================
// Step 5 — Offers
// ====================================================================
function MStep5() {
  const { data, update } = useOBMData();
  const { MStickyCTA } = window.M;
  const set = (i, k, v) => { const a = [...data.offers]; a[i] = { ...a[i], [k]: v }; update({ offers: a }); };
  return (
    <MChrome step={5} footer={<MStickyCTA><MPrimary>Continue</MPrimary></MStickyCTA>}>
      <MHead title={<>What can you offer <span className="serif-i" style={{ color: "var(--accent)" }}>in return?</span></>} helper="Specific, useful things. What can someone reading this take you up on this week?"/>
      <div style={{ padding: "22px 24px 24px" }}>
        {data.offers.map((o, i) => (
          <div key={i} style={{ marginBottom: 14, padding: 16, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
              <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>{`0${i+1}`}</span>
              <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 11, cursor: "pointer" }}>Remove</button>
            </div>
            <MLabel>TITLE</MLabel>
            <input className="field" value={o.t} onChange={(e) => set(i,"t",e.target.value)} style={{ marginBottom: 12, fontSize: 14, height: 42 }}/>
            <MLabel>DESCRIPTION</MLabel>
            <textarea className="field" rows={2} value={o.d} onChange={(e) => set(i,"d",e.target.value)} style={{ fontSize: 13.5, padding: 12 }}/>
          </div>
        ))}
        <button style={{ background: "transparent", border: "1px dashed var(--border)", borderRadius: 12, padding: 14, width: "100%", color: "var(--text-3)", cursor: "pointer", fontSize: 13 }}>+ Add another offer</button>
      </div>
    </MChrome>
  );
}

// ====================================================================
// Step 6 — Focus + live preview
// ====================================================================
function MStep6() {
  const { data, update } = useOBMData();
  const { MStickyCTA } = window.M;
  const renderQuote = () => {
    const t = data.focus, h = data.highlight;
    if (!h || !t.includes(h)) return <span>"{t}"</span>;
    const i = t.indexOf(h);
    return <span>"{t.slice(0,i)}<span style={{ color: "var(--accent)" }}>{h}</span>{t.slice(i+h.length)}"</span>;
  };
  return (
    <MChrome step={6} footer={<MStickyCTA><MPrimary>Continue</MPrimary></MStickyCTA>}>
      <MHead title={<>What are you <span className="serif-i" style={{ color: "var(--accent)" }}>focused on</span> right now?</>} helper="Your 90-day focus appears at the top of your Meet Sheet. One sentence."/>
      <div style={{ padding: "22px 24px 24px" }}>
        <MLabel>YOUR FOCUS</MLabel>
        <textarea className="field" rows={3} value={data.focus} onChange={(e) => update({ focus: e.target.value })} style={{ fontSize: 14.5, lineHeight: 1.5, padding: 14 }}/>
        <div style={{ marginTop: 16 }}>
          <MLabel hint="OPTIONAL · IN SAGE">HIGHLIGHT PHRASE</MLabel>
          <input className="field" value={data.highlight} onChange={(e) => update({ highlight: e.target.value })} style={{ fontSize: 13.5, height: 42 }}/>
        </div>
        <div style={{ marginTop: 24 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", marginBottom: 12 }}>PREVIEW · AS IT WILL APPEAR</div>
          <div style={{ padding: "22px 18px", background: "var(--surface)", borderRadius: 12, border: "1px solid var(--border-soft)" }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>NOW · 90-DAY FOCUS</div>
            <div className="serif-i" style={{ fontSize: 18, lineHeight: 1.4, letterSpacing: "-0.005em", marginTop: 10, color: "var(--text)", textWrap: "pretty" }}>
              {renderQuote()}
            </div>
            <div className="perf" style={{ marginTop: 18, marginBottom: 0 }}/>
          </div>
        </div>
      </div>
    </MChrome>
  );
}

// ====================================================================
// Step 7 — Calendar + meeting types
// ====================================================================
function MStep7() {
  const { data, update } = useOBMData();
  const { MStickyCTA } = window.M;
  return (
    <MChrome step={7} footer={<MStickyCTA><MPrimary>Finish</MPrimary></MStickyCTA>}>
      <MHead title={<>How do you like to <span className="serif-i" style={{ color: "var(--accent)" }}>meet?</span></>} helper="We'll use this to book 1to1s without back-and-forth."/>
      <div style={{ padding: "22px 24px 24px" }}>
        <MLabel>MEETING STYLE</MLabel>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 22 }}>
          {[["in-person","In person"],["video","Video"],["both","Both"]].map(([v,l]) => (
            <button key={v} onClick={() => update({ meetingType: v })} style={{
              padding: "12px 8px", borderRadius: 10, cursor: "pointer", textAlign: "center",
              border: "1px solid " + (data.meetingType===v?"var(--accent)":"var(--border-soft)"),
              background: data.meetingType===v?"var(--accent-soft)":"var(--surface)",
              color: data.meetingType===v ? "var(--accent)" : "var(--text)", fontSize: 13, fontWeight: 500,
            }}>{l}</button>
          ))}
        </div>

        <MLabel hint="ONE IS ENOUGH">CONNECT A CALENDAR</MLabel>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 22 }}>
          {[["google","Google"],["outlook","Outlook"],["apple","Apple"]].map(([v,l]) => (
            <button key={v} onClick={() => update({ calendar: v })} style={{
              padding: "12px 8px", borderRadius: 999, cursor: "pointer",
              border: "1px solid " + (data.calendar===v?"var(--accent)":"var(--border)"),
              background: data.calendar===v?"var(--accent-soft)":"transparent",
              color: data.calendar===v?"var(--accent)":"var(--text)", fontSize: 13, fontWeight: 500,
            }}>{data.calendar===v ? "✓ " : ""}{l}</button>
          ))}
        </div>

        <MLabel>DEFAULT AVAILABILITY</MLabel>
        <div style={{ background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12 }}>
          {[["Weekday mornings", "7:30 — 10:00"], ["Weekday afternoons", "14:00 — 17:00"], ["Saturday mornings", "Off"]].map(([l, t], i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "13px 16px", borderBottom: i<2?"1px solid var(--border-soft)":"none", alignItems: "center" }}>
              <span style={{ fontSize: 13.5 }}>{l}</span>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--text-2)" }}>{t}</span>
            </div>
          ))}
        </div>
        <button className="mono" style={{ marginTop: 12, background: "transparent", border: "none", color: "var(--text-3)", fontSize: 10, letterSpacing: "0.12em", cursor: "pointer", padding: 0 }}>+ EDIT WINDOWS</button>
      </div>
    </MChrome>
  );
}

// ====================================================================
// Completion — single-column mobile
// ====================================================================
function MComplete() {
  const { data } = useOBMData();
  const { MScreen, MStickyCTA } = window.M;
  const renderQuote = () => {
    const t = data.focus, h = data.highlight;
    if (!h || !t.includes(h)) return <>"{t}"</>;
    const i = t.indexOf(h);
    return <>"{t.slice(0,i)}<span style={{ color: "var(--accent)" }}>{h}</span>{t.slice(i+h.length)}"</>;
  };
  return (
    <MScreen footer={<MStickyCTA><MPrimary>View your Meet Sheet</MPrimary><div style={{ marginTop: 10 }}><MGhost>Find your first 1to1</MGhost></div></MStickyCTA>}>
      <div style={{ padding: "32px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--accent)" }}>COMPLETE</div>
        <h1 className="serif" style={{ fontSize: 38, margin: "10px 0 0", letterSpacing: "-0.025em", lineHeight: 1.02 }}>
          Your Meet Sheet<br/><span className="serif-i" style={{ color: "var(--accent)" }}>is ready.</span>
        </h1>
        <p style={{ marginTop: 14, fontSize: 13.5, lineHeight: 1.55, color: "var(--text-2)", textWrap: "pretty" }}>
          Forty-seven seconds and a few honest sentences — that's all it took. From here, every 1to1 begins with this.
        </p>

        {/* Meet Sheet preview card */}
        <div style={{ marginTop: 22, borderRadius: 14, overflow: "hidden", border: "1px solid var(--border-soft)", background: "var(--surface)" }}>
          <div style={{ aspectRatio: "1.05/1", background: "linear-gradient(180deg, oklch(0.32 0.02 250), oklch(0.20 0.02 250))", position: "relative" }}>
            <div className="mono" style={{ position: "absolute", top: 14, right: 14, fontSize: 9, letterSpacing: "0.12em", color: "rgba(245,241,234,0.55)" }}>MEET SHEET № 0247</div>
            <div style={{ position: "absolute", bottom: 16, left: 18, right: 18 }}>
              <div className="serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: "-0.02em" }}>
                Marcus<br/><span className="serif-i" style={{ color: "var(--accent)" }}>Chen</span>
              </div>
              <div style={{ marginTop: 8, color: "rgba(245,241,234,0.7)", fontSize: 12 }}>Commercial property solicitor</div>
            </div>
          </div>
          <div style={{ padding: "18px 18px" }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>NOW · 90-DAY FOCUS</div>
            <div className="serif-i" style={{ fontSize: 15, lineHeight: 1.45, marginTop: 8 }}>{renderQuote()}</div>
            <div className="perf" style={{ margin: "16px 0" }}/>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>WHAT I DO</div>
            <div style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--text-2)", marginTop: 8, display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
              {data.whatYouDo}
            </div>
          </div>
        </div>

        <p className="mono" style={{ marginTop: 16, fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", textAlign: "center" }}>YOU CAN EDIT ANY OF THIS ANYTIME</p>
      </div>
    </MScreen>
  );
}

// ====================================================================
// Discovery — single column mobile
// ====================================================================
function MDiscovery() {
  const { MScreen } = window.M;
  const matches = [
    { name: "Priya Anand", role: "Mortgage broker", firm: "Stride Finance", why: "She places $60–80M of commercial annually for SE QLD owner-operators — exactly your buyer profile.", stats: ["62", "55", "23"], hue: 230 },
    { name: "James Whitford", role: "Accountant", firm: "Coast Ledger", why: "Mutual focus on SME owners. Three group members in common.", stats: ["41", "38", "17"], hue: 245 },
    { name: "Devon Park", role: "Commercial agent", firm: "Ray White Commercial", why: "Sources first-commercial buyers under $4M across the Coast.", stats: ["33", "28", "14"], hue: 260 },
  ];
  return (
    <MScreen>
      <div style={{ padding: "24px 24px 32px" }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--text-3)" }}>SUGGESTED — BASED ON YOUR MEET SHEET</div>
        <h1 className="serif" style={{ fontSize: 32, margin: "12px 0 8px", letterSpacing: "-0.02em", lineHeight: 1.05, textWrap: "pretty" }}>
          Three people who could<br/><span className="serif-i" style={{ color: "var(--accent)" }}>move things forward.</span>
        </h1>
        <p style={{ fontSize: 13, color: "var(--text-2)", marginBottom: 22, lineHeight: 1.55 }}>
          Each matches three or more of your stated asks. Tap to read their Meet Sheet.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {matches.map((m, i) => (
            <div key={i} style={{ background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 14, overflow: "hidden", cursor: "pointer" }}>
              <div style={{ aspectRatio: "1.4/1", background: `linear-gradient(180deg, oklch(0.32 0.02 ${m.hue}), oklch(0.18 0.02 ${m.hue}))`, position: "relative" }}>
                <div className="mono" style={{ position: "absolute", top: 12, right: 12, fontSize: 9, letterSpacing: "0.14em", color: "rgba(245,241,234,0.55)" }}>№ {String(247+i)}</div>
                <div style={{ position: "absolute", bottom: 14, left: 16, right: 16 }}>
                  <div className="serif" style={{ fontSize: 26, lineHeight: 1, letterSpacing: "-0.01em" }}>{m.name.split(" ")[0]} <span className="serif-i">{m.name.split(" ")[1]}</span></div>
                  <div style={{ fontSize: 11.5, color: "rgba(245,241,234,0.7)", marginTop: 4 }}>{m.role} · {m.firm}</div>
                </div>
              </div>
              <div style={{ padding: 16 }}>
                <div className="serif-i" style={{ fontSize: 14, color: "var(--accent)", lineHeight: 1.45 }}>"{m.why}"</div>
                <div style={{ display: "flex", gap: 18, marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border-soft)" }}>
                  {[["1to1s",m.stats[0]],["Reach",m.stats[1]],["Conn.",m.stats[2]]].map(([l,n], j) => (
                    <div key={j}>
                      <div className="mono" style={{ fontSize: 14, fontWeight: 500 }}>{n}</div>
                      <div className="mono" style={{ fontSize: 9, color: "var(--text-3)", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </MScreen>
  );
}

window.OBM = { OBMProvider, MSignIn, MWelcome, MStep1, MStep2, MStep3, MStep4, MStep5, MStep6, MStep7, MComplete, MDiscovery };