/* global React */ const { useState, createContext, useContext } = React; // Shared state across onboarding artboards. Each artboard creates its own // provider with sensible defaults so it can be viewed in isolation on canvas. const OBContext = createContext(null); const DEFAULTS = { name: "Marcus Chen", headline: "Commercial property solicitor · Chen Legal", 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." }, { t: "The accidental landlord", d: "Owner-occupiers selling the business but keeping the building, suddenly a commercial lessor." }, ], wins: [ { tag: "MARCH 2026", t: "Saved a $2.3M warehouse purchase", d: "Identified an unregistered easement four days before settlement; restructured the deal to protect future expansion." }, { tag: "JANUARY 2026", t: "Closed a 14-lot Burleigh subdivision", d: "DA-conditional contracts with three separate funders. Settlement-to-construction in 11 weeks." }, ], 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. I'll only intro if it fits." }, ], 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", }; function OBProvider({ children, initial }) { const [data, setData] = useState({ ...DEFAULTS, ...(initial || {}) }); const update = (patch) => setData(d => ({ ...d, ...patch })); return {children}; } const useOB = () => useContext(OBContext) || { data: DEFAULTS, update: () => {} }; // Common chrome ---------------------------------------------------------- function Chrome({ step, total = 7, onBack, children, footer }) { return (

{step != null ? `${String(step).padStart(2,"0")} / ${String(total).padStart(2,"0")}` : ""}

{onBack && ( )}

{children}

{footer &&

{footer}

}

); } const Label = ({ children }) => ( {children} ); const StepHead = ({ title, helper }) => (

{title}

{helper &&

{helper}

}

); function Examples({ items }) { const [open, setOpen] = useState(false); return (

{open && (

{items.map((ex, i) => (

"{ex}"

))}

)}

); } const PrimaryCTA = ({ children, onClick }) => ( ); const GhostCTA = ({ children, onClick }) => ( ); // ==================================================================== // 0. SIGN IN // ==================================================================== function SignInScreen() { return (

EST. 2024 · GOLD COAST

1to1

Where business gets done.

By continuing you agree to our Terms and Privacy.

"The right room, the right introduction, at the right time." — Vol. I

); } // ==================================================================== // 1. WELCOME // ==================================================================== function WelcomeScreen() { return (

WELCOME · 0 / 07

Welcome,
Marcus.

Let's build your Meet Sheet. About 5 minutes — and the most important part of being on 1to1.

It's the first thing anyone reads about you. We'll walk through it one question at a time.

Begin

SIGNED IN AS MARCUS CHEN · CHEN LEGAL · ROBINA QLD

); } // ==================================================================== // Step 1 — What you do // ==================================================================== function Step1WhatYouDo() { const { data, update } = useOB(); return ( {}} footer={

Continue

}> What are you known for?} helper="Two or three sentences. Plain language. Not a tagline — what you actually do, for whom, and why people come to you specifically." /> In your own words

update({ whatYouDo: e.target.value })}
        rows={6}
        className="field"
        style={{ fontSize: 16, lineHeight: 1.55, padding: 16 }}
      />
      <div className="mono" style={{ fontSize: 10, color: "var(--text-3)", marginTop: 8, textAlign: "right", letterSpacing: "0.06em" }}>{data.whatYouDo.length} / 400</div>
      <Examples items={[
        "Boutique commercial property practice for small-business owners buying their first premises. The deals top-tier firms deprioritise but where the legal work most affects the outcome.",
        "Brand strategy for owner-operators on the Gold Coast — usually 6–18 months in, scaling past founder-led marketing.",
      ]} />
    </Chrome>
  );
}

// ====================================================================
// Step 2 — Who you serve
// ====================================================================
function Step2WhoYouServe() {
  const { data, update } = useOB();
  const set = (i, k, v) => {
    const a = [...data.archetypes]; a[i] = { ...a[i], [k]: v }; update({ archetypes: a });
  };
  const remove = (i) => update({ archetypes: data.archetypes.filter((_, j) => j !== i) });
  return (
    <Chrome step={2} onBack={() => {}} footer={<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}><span className="muted-2" style={{ fontSize: 12 }}>{data.archetypes.length} of 3</span><PrimaryCTA>Continue</PrimaryCTA></div>}>
      <StepHead 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 — when others read this, they should be able to recognise the person." />
      {data.archetypes.map((a, i) => (
        <div key={i} style={{ marginBottom: 20, padding: 20, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12, position: "relative" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>{`0${i+1}`}</span>
            {data.archetypes.length > 1 && <button onClick={() => remove(i)} style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 12, cursor: "pointer" }}>Remove</button>}
          </div>
          <Label>Title</Label>
          <input className="field" value={a.t} onChange={(e) => set(i,"t",e.target.value)} style={{ marginBottom: 14 }}/>
          <Label>Description</Label>
          <textarea className="field" rows={2} value={a.d} onChange={(e) => set(i,"d",e.target.value)}/>
        </div>
      ))}
      {data.archetypes.length < 3 && (
        <button onClick={() => update({ archetypes: [...data.archetypes, { t: "", d: "" }] })} style={{ background: "transparent", border: "1px dashed var(--border)", borderRadius: 12, padding: "16px", width: "100%", color: "var(--text-3)", cursor: "pointer", fontSize: 13 }}>+ Add another archetype</button>
      )}
      <Examples items={["The first-time commercial buyer — outgrowing leased premises, often nervous about contract terms.", "The under-$5M developer — two to ten lot subdivisions, time-pressured DA pathways."]}/>
    </Chrome>
  );
}

// ====================================================================
// Step 3 — Recent wins
// ====================================================================
function Step3Wins() {
  const { data, update } = useOB();
  const set = (i, k, v) => { const a = [...data.wins]; a[i] = { ...a[i], [k]: v }; update({ wins: a }); };
  const remove = (i) => update({ wins: data.wins.filter((_, j) => j !== i) });
  return (
    <Chrome step={3} onBack={() => {}} footer={<div style={{ display: "flex", justifyContent: "flex-end" }}><PrimaryCTA>Continue</PrimaryCTA></div>}>
      <StepHead 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. Not testimonials — the work you're actually proud of." />
      {data.wins.map((w, i) => (
        <div key={i} style={{ marginBottom: 20, padding: 20, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>{`0${i+1}`}</span>
            {data.wins.length > 1 && <button onClick={() => remove(i)} style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 12, cursor: "pointer" }}>Remove</button>}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "150px 1fr", gap: 12 }}>
            <div>
              <Label>When</Label>
              <input className="field mono" value={w.tag} onChange={(e) => set(i,"tag",e.target.value)} style={{ fontSize: 12 }}/>
            </div>
            <div>
              <Label>Title</Label>
              <input className="field" value={w.t} onChange={(e) => set(i,"t",e.target.value)}/>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <Label>What happened</Label>
            <textarea className="field" rows={2} value={w.d} onChange={(e) => set(i,"d",e.target.value)}/>
          </div>
        </div>
      ))}
      {data.wins.length < 3 && (
        <button onClick={() => update({ wins: [...data.wins, { tag: "", t: "", d: "" }] })} style={{ background: "transparent", border: "1px dashed var(--border)", borderRadius: 12, padding: "16px", width: "100%", color: "var(--text-3)", cursor: "pointer", fontSize: 13 }}>+ Add another win</button>
      )}
    </Chrome>
  );
}

// ====================================================================
// Step 4 — Looking to meet (tag input)
// ====================================================================
function Step4LookingFor() {
  const { data, update } = useOB();
  const [input, setInput] = useState("");
  const suggestions = ["Town planners · Robina/Varsity", "QS / building consultants", "Insurance brokers", "Conveyancers", "Founders raising seed rounds"].filter(s => !data.lookingFor.includes(s));
  const add = (v) => { if (v && !data.lookingFor.includes(v)) update({ lookingFor: [...data.lookingFor, v] }); setInput(""); };
  const remove = (v) => update({ lookingFor: data.lookingFor.filter(x => x !== v) });
  return (
    <Chrome step={4} onBack={() => {}} footer={<div style={{ display: "flex", justifyContent: "flex-end" }}><PrimaryCTA>Continue</PrimaryCTA></div>}>
      <StepHead title={<>Who would <span className="serif-i" style={{ color: "var(--accent)" }}>move things forward</span> for you?</>} helper="Industries, roles, locations. We use these to suggest 1to1s and to surface you when others list complementary asks." />
      <Label>Your asks</Label>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, padding: 14, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, minHeight: 80 }}>
        {data.lookingFor.map((tag, i) => (
          <span key={i} className="pill accent" style={{ paddingRight: 6 }}>
            {tag}
            <button onClick={() => remove(tag)} style={{ background: "transparent", border: "none", color: "var(--accent)", marginLeft: 4, cursor: "pointer", padding: 0, fontSize: 14, lineHeight: 1 }}>×</button>
          </span>
        ))}
        <input value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(input); } }}
          placeholder={data.lookingFor.length ? "" : "Start typing…"}
          style={{ flex: 1, minWidth: 120, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 14, padding: "6px 4px", fontFamily: "var(--sans)" }}/>
      </div>
      <div style={{ marginTop: 18 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", marginBottom: 10 }}>SUGGESTIONS</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {suggestions.map((s, i) => (
            <button key={i} onClick={() => add(s)} className="pill" style={{ cursor: "pointer", border: "1px dashed var(--border)" }}>+ {s}</button>
          ))}
        </div>
      </div>
    </Chrome>
  );
}

// ====================================================================
// Step 5 — Offers
// ====================================================================
function Step5Offers() {
  const { data, update } = useOB();
  const set = (i, k, v) => { const a = [...data.offers]; a[i] = { ...a[i], [k]: v }; update({ offers: a }); };
  const remove = (i) => update({ offers: data.offers.filter((_, j) => j !== i) });
  return (
    <Chrome step={5} onBack={() => {}} footer={<div style={{ display: "flex", justifyContent: "flex-end" }}><PrimaryCTA>Continue</PrimaryCTA></div>}>
      <StepHead title={<>What can you offer <span className="serif-i" style={{ color: "var(--accent)" }}>in return?</span></>} helper="The most generous Meet Sheets list specific, useful things — not 'great service.' What can someone reading this actually take you up on this week?" />
      {data.offers.map((o, i) => (
        <div key={i} style={{ marginBottom: 20, padding: 20, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>{`0${i+1}`}</span>
            {data.offers.length > 1 && <button onClick={() => remove(i)} style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 12, cursor: "pointer" }}>Remove</button>}
          </div>
          <Label>Title</Label>
          <input className="field" value={o.t} onChange={(e) => set(i,"t",e.target.value)} style={{ marginBottom: 14 }}/>
          <Label>Description</Label>
          <textarea className="field" rows={2} value={o.d} onChange={(e) => set(i,"d",e.target.value)}/>
        </div>
      ))}
      {data.offers.length < 3 && (
        <button onClick={() => update({ offers: [...data.offers, { t: "", d: "" }] })} style={{ background: "transparent", border: "1px dashed var(--border)", borderRadius: 12, padding: "16px", width: "100%", color: "var(--text-3)", cursor: "pointer", fontSize: 13 }}>+ Add another offer</button>
      )}
    </Chrome>
  );
}

// ====================================================================
// Step 6 — 90-day focus (the showpiece)
// ====================================================================
function Step6Focus() {
  const { data, update } = useOB();
  // Live preview renders focus with highlight wrapping the substring
  const renderQuote = () => {
    const t = data.focus;
    const 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 (
    <Chrome step={6} onBack={() => {}} footer={<div style={{ display: "flex", justifyContent: "flex-end" }}><PrimaryCTA>Continue</PrimaryCTA></div>}>
      <StepHead 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 — the freshest signal of what's worth talking to you about. One sentence." />
      <Label>Your focus</Label>
      <textarea className="field" rows={3} value={data.focus} onChange={(e) => update({ focus: e.target.value })} style={{ fontSize: 16, lineHeight: 1.5 }}/>

<div style={{ marginTop: 18 }}>
        <Label>Highlight a phrase <span className="muted-2" style={{ fontWeight: 400, marginLeft: 6 }}>(optional · appears in sage)</span></Label>
        <input className="field" value={data.highlight} onChange={(e) => update({ highlight: e.target.value })} placeholder="" style={{ fontSize: 14 }}/>
      </div>

{/* LIVE PREVIEW */}
      <div style={{ marginTop: 36 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--text-3)", marginBottom: 14 }}>PREVIEW · AS IT WILL APPEAR</div>
        <div style={{ padding: "32px 28px", background: "var(--surface)", borderRadius: 12, border: "1px solid var(--border-soft)", position: "relative" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Now · 90-day focus</div>
          <div className="serif-i" style={{ fontSize: 24, lineHeight: 1.35, letterSpacing: "-0.005em", color: "var(--text)" }}>
            {renderQuote()}
          </div>
          <div className="perf" style={{ marginTop: 24, marginBottom: 0 }}/>
        </div>
      </div>
    </Chrome>
  );
}

// ====================================================================
// Step 7 — Calendar + meeting types
// ====================================================================
function Step7Calendar() {
  const { data, update } = useOB();
  return (
    <Chrome step={7} onBack={() => {}} footer={<div style={{ display: "flex", justifyContent: "flex-end" }}><PrimaryCTA>Finish</PrimaryCTA></div>}>
      <StepHead 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. You can change any of it later." />

<Label>Meeting style</Label>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: 28 }}>
        {[["in-person","In person","Coffee or office"],["video","Video","Zoom or Meet"],["both","Both","Whichever fits"]].map(([v,l,d]) => (
          <button key={v} onClick={() => update({ meetingType: v })} style={{
            padding: "16px 14px", borderRadius: 12, cursor: "pointer", textAlign: "left",
            border: "1px solid " + (data.meetingType===v?"var(--accent)":"var(--border-soft)"),
            background: data.meetingType===v?"var(--accent-soft)":"var(--surface)",
            color: "var(--text)",
          }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{l}</div>
            <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{d}</div>
          </button>
        ))}
      </div>

<Label>Connect a calendar <span className="muted-2" style={{ fontWeight: 400 }}>· one is enough</span></Label>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: 28 }}>
        {[["google","Google"],["outlook","Outlook"],["apple","Apple"]].map(([v,l]) => (
          <button key={v} onClick={() => update({ calendar: v })} style={{
            padding: "14px", 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: 14, fontWeight: 500,
          }}>{data.calendar===v ? "✓ " : ""}{l}</button>
        ))}
      </div>

<Label>Default availability</Label>
      <div style={{ background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 12, padding: 0 }}>
        {[["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: "14px 18px", borderBottom: i<2?"1px solid var(--border-soft)":"none", alignItems: "center" }}>
            <span style={{ fontSize: 14 }}>{l}</span>
            <span className="mono" style={{ fontSize: 12, color: "var(--text-2)" }}>{t}</span>
          </div>
        ))}
      </div>
      <button style={{ marginTop: 14, background: "transparent", border: "none", color: "var(--text-3)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", cursor: "pointer", padding: 0 }}>+ EDIT WINDOWS</button>
    </Chrome>
  );
}

// ====================================================================
// Completion — live preview of their Meet Sheet hero
// ====================================================================
function CompletionScreen() {
  const { data } = useOB();
  return (
    <div style={{ width: "100%", height: "100%", background: "var(--bg)", color: "var(--text)", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", overflow: "hidden" }}>
      {/* Left: copy */}
      <div style={{ padding: "60px 56px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--accent)" }}>COMPLETE</div>
        <h1 className="serif" style={{ fontSize: 56, margin: "16px 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: 24, fontSize: 16, lineHeight: 1.6, color: "var(--text-2)", maxWidth: 420 }}>
          Forty-seven seconds and a few honest sentences — that's all it took. From here, every 1to1 begins with this.
        </p>
        <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <PrimaryCTA>View your Meet Sheet</PrimaryCTA>
          <GhostCTA>Find your first 1to1</GhostCTA>
        </div>
        <p className="muted-2" style={{ marginTop: 32, fontSize: 12 }}>You can edit any of this anytime.</p>
      </div>

{/* Right: live phone preview */}
      <div style={{ padding: 40, background: "var(--surface)", borderLeft: "1px solid var(--border-soft)", display: "grid", placeItems: "center" }}>
        <div style={{ width: 280, height: 580, borderRadius: 36, overflow: "hidden", border: "1px solid var(--border)", background: "var(--bg)", boxShadow: "0 30px 60px rgba(0,0,0,0.3)", position: "relative" }}>
          <LivePhonePreview data={data}/>
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// Discovery / Suggested matches
// ====================================================================
function DiscoveryScreen() {
  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"] },
    { name: "James Whitford", role: "Accountant", firm: "Coast Ledger", why: "Mutual focus on SME owners. Three group members in common.", stats: ["41", "38", "17"] },
    { name: "Devon Park", role: "Commercial agent", firm: "Ray White Commercial", why: "Sources first-commercial buyers under $4M across the Coast.", stats: ["33", "28", "14"] },
  ];
  return (
    <div style={{ width: "100%", height: "100%", background: "var(--bg)", color: "var(--text)", overflow: "auto", padding: "40px 48px" }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--text-3)" }}>SUGGESTED — BASED ON YOUR MEET SHEET</div>
      <h1 className="serif" style={{ fontSize: 44, margin: "16px 0 8px", letterSpacing: "-0.02em", lineHeight: 1.02 }}>
        Three people who could<br/><span className="serif-i" style={{ color: "var(--accent)" }}>move things forward.</span>
      </h1>
      <p className="muted" style={{ fontSize: 14, marginBottom: 32, maxWidth: 540, lineHeight: 1.55 }}>
        Each of these matches three or more of your stated asks. Tap a card to read their Meet Sheet.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {matches.map((m, i) => (
          <div key={i} style={{ padding: 24, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 14, cursor: "pointer", display: "flex", flexDirection: "column" }}>
            <div style={{ width: "100%", aspectRatio: "1/1", borderRadius: 10, background: `linear-gradient(180deg, oklch(0.32 0.02 ${230 + i*15}), oklch(0.18 0.02 ${230 + i*15}))`, marginBottom: 18, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", bottom: 12, left: 14, right: 14 }}>
                <div className="serif" style={{ fontSize: 22, lineHeight: 1, letterSpacing: "-0.01em" }}>{m.name.split(" ")[0]}<br/><span className="serif-i">{m.name.split(" ")[1]}</span></div>
                <div style={{ fontSize: 11, color: "rgba(237,238,241,0.7)", marginTop: 6 }}>{m.role}</div>
              </div>
              <div className="mono" style={{ position: "absolute", top: 12, right: 12, fontSize: 8, letterSpacing: "0.14em", color: "rgba(237,238,241,0.55)" }}>№ {String(247+i)}</div>
            </div>
            <div className="muted-2" style={{ fontSize: 12 }}>{m.firm}</div>
            <div className="serif-i" style={{ fontSize: 14, color: "var(--accent)", marginTop: 14, lineHeight: 1.45, flex: 1 }}>"{m.why}"</div>
            <div style={{ display: "flex", gap: 14, marginTop: 18, 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>
  );
}

window.OB = { OBProvider, SignInScreen, WelcomeScreen, Step1WhatYouDo, Step2WhoYouServe, Step3Wins, Step4LookingFor, Step5Offers, Step6Focus, Step7Calendar, CompletionScreen, DiscoveryScreen };

{title}

Welcome,Marcus.

Welcome,
Marcus.