// ════════════ ONBOARDING · marketing + signup wizard ════════════
const { Icon, Spark, Pex, PXLogo, Avatar, Card, Btn, Pill, Label, Num, Field, Toggle } = window;

// ── LANDING ──────────────────────────────────────────────────
window.SCREENS['landing'] = function Landing() {
  const P = window.PX; const { go, toast } = window.useApp();
  // marketing nav — Catalog has a real screen; the rest give honest feedback
  const navItems = [
    ['Product', () => toast('Product tour — the full marketing site is on the way.', { icon: 'sparkles' })],
    ['Pricing', () => toast('$20/month. Usage credits are shown before approval.', { icon: 'zap' })],
    ['Catalog', () => go('catalog')],
    ['Stories', () => toast('Customer stories are coming soon.', { icon: 'message' })],
  ];
  const linkSpan = { cursor: 'pointer' };
  return (
    <div style={{ fontFamily: P.sans, background: P.canvas, minHeight: '100%' }}>
      <nav style={{ display: 'flex', alignItems: 'center', padding: '18px 48px', borderBottom: `1px solid ${P.line}`, position: 'sticky', top: 0, background: P.canvas, zIndex: 10 }}>
        <PXLogo size={24}/>
        <div style={{ flex: 1, display: 'flex', gap: 28, justifyContent: 'center', fontSize: 13.5, color: P.ink2 }}>{navItems.map(([t, fn]) => <span key={t} onClick={fn} style={linkSpan}>{t}</span>)}</div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}><span onClick={() => go('login')} style={{ fontSize: 13.5, color: P.ink2, cursor: 'pointer' }}>Sign in</span><Btn kind="primary" size="md" onClick={() => go('onboard')} iconR="arrowRight">Get started</Btn></div>
      </nav>

      <section style={{ padding: '76px 48px 48px', maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
        <Pill tone="spark" style={{ marginBottom: 22, padding: '5px 12px' }}><Spark size={12}/> Built for American small business</Pill>
        <h1 style={{ fontFamily: P.serif, fontSize: 80, fontWeight: 400, lineHeight: 0.98, color: P.ink, letterSpacing: -2, margin: 0 }}>Your whole business,<br/><span style={{ fontStyle: 'italic' }}>in one warm </span><span style={{ fontStyle: 'italic', color: P.spark }}>place.</span></h1>
        <p style={{ fontSize: 18, color: P.ink2, lineHeight: 1.5, maxWidth: 600, margin: '24px auto 34px' }}>Website, email, accounting, CRM, a store, and a staff designer named <b style={{ color: P.ink }}>Pex</b> who does the work. $20/month. Unlimited seats.</p>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', background: P.card, border: `1px solid ${P.lineStrong}`, borderRadius: 13, padding: 6, width: 500, boxShadow: P.shLg }}>
            <div style={{ width: 38, height: 38, borderRadius: 9, background: P.sparkTint, display: 'flex', alignItems: 'center', justifyContent: 'center', color: P.spark, flexShrink: 0 }}><Icon name="globe" size={18}/></div>
            <input defaultValue="honestloaves.com" style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontSize: 16, color: P.ink, padding: '0 12px', fontFamily: P.sans }}/>
            <Btn kind="primary" size="lg" onClick={() => go('onboard')} iconR="arrowRight">Claim</Btn>
          </div>
        </div>
        <div style={{ fontSize: 12.5, color: P.ink3 }}>We'll find your logo, colors, and competitors in seconds.</div>
      </section>

      <section style={{ padding: '40px 48px', background: P.sidebar, borderTop: `1px solid ${P.line}`, borderBottom: `1px solid ${P.line}` }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 18, alignItems: 'end' }}>
          {[['Website', 'Squarespace', '$23'], ['Email', 'Front', '$25'], ['CRM', 'HubSpot', '$50'], ['Books', 'QuickBooks', '$35'], ['AI', 'ChatGPT', '$20']].map((s, i) => (
            <div key={i} style={{ textAlign: 'center', opacity: 0.55 }}><div style={{ fontSize: 10.5, color: P.ink3, textTransform: 'uppercase', letterSpacing: 0.6 }}>{s[0]}</div><div style={{ fontSize: 13.5, color: P.ink, textDecoration: 'line-through', textDecorationColor: P.spark }}>{s[1]}</div><div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 22, color: P.ink }}>{s[2]}</div></div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 18, fontSize: 13.5, color: P.ink3 }}>Stop paying for 14 logins. One Pexxie from <span style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 22, color: P.ink }}>$20/mo</span></div>
      </section>

      <section style={{ padding: '72px 48px', maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Label style={{ marginBottom: 10 }}>The kit · 12 apps · 1 login</Label>
          <h2 style={{ fontFamily: P.serif, fontSize: 44, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -1 }}>Everything you half-meant to set up.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }}>
          {[['Website', 'globe'], ['Email', 'mail'], ['CRM', 'users'], ['Money', 'dollar'], ['Marketing', 'megaphone'], ['Files', 'folder'], ['Calendar', 'calendar'], ['Chat', 'message'], ['Projects', 'briefcase'], ['Catalog', 'grid'], ['Insights', 'barchart'], ['Pex', 'sparkles']].map((m, i) => (
            <Card key={i} pad={18} hover>
              <div style={{ width: 34, height: 34, borderRadius: 9, background: m[0] === 'Pex' ? P.spark : P.sunk, color: m[0] === 'Pex' ? '#fff' : P.ink2, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}><Icon name={m[1]} size={18}/></div>
              <div style={{ fontSize: 14, fontWeight: 600, color: P.ink }}>{m[0]}</div>
            </Card>
          ))}
        </div>
      </section>

      <section style={{ padding: '72px 48px', background: `linear-gradient(160deg, ${P.sparkWash}, ${P.tint})`, borderTop: `1px solid ${P.line}`, borderBottom: `1px solid ${P.line}` }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <Label style={{ color: P.sparkDim, marginBottom: 12 }}>✦ Meet Pex</Label>
            <h2 style={{ fontFamily: P.serif, fontSize: 52, fontWeight: 400, margin: 0, letterSpacing: -1, lineHeight: 1, color: P.ink }}><span style={{ fontStyle: 'italic', color: P.spark }}>Not</span> a chatbot.<br/>A teammate who ships.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: P.ink2, marginTop: 18, maxWidth: 440 }}>Pex reads your inbox, books, and calendar, and every Monday leaves a handful of things on your desk — priced in Sparks. You approve the ones that matter. Done by lunch.</p>
            <Btn kind="spark" size="lg" onClick={() => go('onboard')} style={{ marginTop: 20 }} iconR="arrowRight">Get started</Btn>
          </div>
          <Card pad={18} style={{ color: P.ink, boxShadow: P.shLg }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 12, borderBottom: `1px solid ${P.line}` }}><Pex size={32}/><div><div style={{ fontSize: 13, fontWeight: 600 }}>Pex · Monday 7:02am</div><div style={{ fontSize: 11, color: P.ink3 }}>5 proposals for this week</div></div></div>
            {[['Send Café Bleu\'s overdue invoice', 1], ['Rewrite your About page', 3], ['Draft the class email to past customers', 4]].map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 0', borderBottom: i < 2 ? `1px solid ${P.line}` : 'none' }}>
                <span style={{ width: 5, height: 5, borderRadius: 5, background: P.spark }}/>
                <span style={{ flex: 1, fontSize: 13, color: P.ink }}>{p[0]}</span>
                <Pill tone="spark"><Spark size={10}/>{p[1]}</Pill>
                <Btn kind="primary" size="sm">Approve</Btn>
              </div>
            ))}
          </Card>
        </div>
      </section>

      <footer style={{ padding: '40px 48px', display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: P.ink3, maxWidth: 1080, margin: '0 auto' }}>
        <PXLogo size={18}/><div style={{ display: 'flex', gap: 20 }}>{[['Terms', 'Terms of service'], ['Privacy', 'Privacy policy'], ['Status', 'All systems operational.']].map(([t, msg]) => <span key={t} onClick={() => toast(msg, { icon: 'fileText' })} style={linkSpan}>{t}</span>)}<span>Built in Brooklyn</span></div>
      </footer>
    </div>
  );
};

// ── ONBOARD WIZARD ───────────────────────────────────────────
window.SCREENS['onboard'] = function Onboard() {
  const P = window.PX; const { go } = window.useApp();
  const [step, setStep] = React.useState(0);
  const [situation, setSituation] = React.useState(null);   // has-site | has-domain | need-domain | fresh
  const [domainMode, setDomainMode] = React.useState('register'); // register | subdomain
  // ── wizard state lifted here so it survives Back/Next and gates the footer ──
  const [acctName, setAcctName] = React.useState('Amara Okafor');
  const [acctEmail, setAcctEmail] = React.useState('amara@honestloaves.com');
  const [acctPw, setAcctPw] = React.useState('sourdough7');            // 10 chars → passes the rule
  const [bizName, setBizName] = React.useState('Honest Loaves');
  const [bizWhat, setBizWhat] = React.useState('Artisan bakery');
  const [domainQuery, setDomainQuery] = React.useState('honestloaves');
  const [selectedDomain, setSelectedDomain] = React.useState(null);   // a registered domain string
  const [logoCaptured, setLogoCaptured] = React.useState(false);
  const [brandVariant, setBrandVariant] = React.useState(0);
  const [plan, setPlan] = React.useState('base');
  const [sparkPkg, setSparkPkg] = React.useState(null);               // '$20' | '$50' | '$100'
  const [card, setCard] = React.useState('4242 4242 4242 4242');
  const steps = ['Account', 'Business', 'Domain', 'Brand', 'Email', 'Plan', 'Setup', 'Welcome'];
  const next = () => setStep(s => Math.min(steps.length - 1, s + 1));
  const back = () => setStep(s => Math.max(0, s - 1));
  // ── step gating ──
  const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(acctEmail.trim());
  const acctOk = !!acctName.trim() && emailOk && acctPw.length >= 10;
  const blocked =
    (step === 0 && !acctOk) ||          // account fields must validate
    (step === 1 && !situation) ||       // must pick a starting point
    (step === 5 && !sparkPkg);          // must choose a Starter Spark package before activating

  return (
    <div style={{ display: 'flex', height: '100vh', fontFamily: P.sans, background: P.canvas }}>
      {/* left rail */}
      <div style={{ width: '36%', maxWidth: 440, background: `linear-gradient(165deg, ${P.sparkWash}, ${P.sparkTint})`, color: P.ink, padding: '40px 44px', display: 'flex', flexDirection: 'column', flexShrink: 0, borderRight: `1px solid ${P.line}` }}>
        <PXLogo size={22}/>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 34, letterSpacing: -1, lineHeight: 1.05, marginBottom: 32, color: P.ink }}>Let’s set up<br/>your business.</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '7px 0', opacity: i === step ? 1 : i < step ? 0.85 : 0.4 }}>
                <span style={{ width: 24, height: 24, borderRadius: 24, background: i < step ? P.spark : 'transparent', border: `1.5px solid ${i <= step ? P.spark : P.lineStrong}`, color: i < step ? '#fff' : P.ink3, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, flexShrink: 0 }}>{i < step ? <Icon name="check" size={12} color="#fff" stroke={3}/> : i + 1}</span>
                <span style={{ fontSize: 13.5, fontWeight: i === step ? 600 : 500, color: P.ink }}>{s}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ fontSize: 11.5, color: P.ink3 }}>© Pexxie · Made with care in Brooklyn</div>
      </div>

      {/* right content */}
      <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, padding: '44px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 660, width: '100%' }}>
          {step === 0 && <StepAccount next={next} name={acctName} setName={setAcctName} email={acctEmail} setEmail={setAcctEmail} pw={acctPw} setPw={setAcctPw} emailOk={emailOk}/>}
          {step === 1 && <StepBusiness situation={situation} setSituation={setSituation} bizName={bizName} setBizName={setBizName} bizWhat={bizWhat} setBizWhat={setBizWhat}/>}
          {step === 2 && <StepDomain situation={situation} domainMode={domainMode} setDomainMode={setDomainMode} query={domainQuery} setQuery={setDomainQuery} selected={selectedDomain} setSelected={setSelectedDomain}/>}
          {step === 3 && <StepBrand situation={situation} logoCaptured={logoCaptured} setLogoCaptured={setLogoCaptured} variant={brandVariant} setVariant={setBrandVariant}/>}
          {step === 4 && <StepEmail situation={situation} domainMode={domainMode}/>}
          {step === 5 && <StepPlan plan={plan} setPlan={setPlan} sparkPkg={sparkPkg} setSparkPkg={setSparkPkg} card={card} setCard={setCard}/>}
          {step === 6 && <StepBuilding situation={situation} domainMode={domainMode} onDone={next}/>}
          {step === 7 && <StepWelcome go={go} situation={situation}/>}
        </div>
        {step < 6 && (
          <div style={{ padding: '20px 56px', borderTop: `1px solid ${P.line}`, display: 'flex', gap: 10, maxWidth: 660 }}>
            {step > 0 && <Btn kind="ghost" size="lg" icon="chevL" onClick={back}>Back</Btn>}
            <div style={{ flex: 1 }}/>
            <Btn kind="primary" size="lg" onClick={next} disabled={blocked} iconR="arrowRight">{step === 0 ? 'Create account' : step === 5 ? 'Activate Pexxie' : 'Continue'}</Btn>
          </div>
        )}
      </div>
    </div>
  );
};

function StepAccount({ next, name, setName, email, setEmail, pw, setPw, emailOk }) {
  const P = window.PX;
  const [sso, setSso] = React.useState(null);   // provider label while its OAuth is "pending"
  const startSSO = (label) => { if (sso) return; setSso(label); setTimeout(() => next(), 950); };
  const emailErr = email && !emailOk ? 'Enter a valid email address.' : '';
  const pwErr = pw && pw.length < 10 ? 'At least 10 characters.' : '';
  return (
    <>
      <Label style={{ marginBottom: 10 }}>Step 1 of 8 · Your account</Label>
      <h2 style={{ fontFamily: P.serif, fontSize: 34, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -0.5, lineHeight: 1.1 }}>Let's create your account.</h2>
      <p style={{ fontSize: 14, color: P.ink3, marginTop: 10, marginBottom: 22 }}>$20/month · cancel anytime · your data stays yours.</p>
      <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
        {[['Continue with Google', '#4285F4', 'G'], ['Continue with Apple', P.ink, '']].map((s, i) => {
          const pending = sso === s[0];
          return (
            <div key={i} onClick={() => startSSO(s[0])} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px 0', border: `1px solid ${P.lineStrong}`, borderRadius: 10, cursor: sso ? 'default' : 'pointer', opacity: sso && !pending ? 0.5 : 1, fontSize: 13.5, fontWeight: 500, color: P.ink }}>
              {pending
                ? <><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" style={{ animation: 'pxspin .7s linear infinite' }}><path d="M12 3a9 9 0 1 1-9 9"/></svg>Connecting…</>
                : <><span style={{ width: 18, height: 18, borderRadius: 4, background: s[1], color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>{s[2] || ''}</span>{s[0]}</>}
            </div>
          );
        })}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0 18px', color: P.ink4, fontSize: 11.5 }}><div style={{ flex: 1, height: 1, background: P.line }}/>or with email<div style={{ flex: 1, height: 1, background: P.line }}/></div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
        <Field label="Your name" value={name} onChange={setName} icon="user"/>
        <Field label="Work email" value={email} onChange={setEmail} icon="mail" error={emailErr}/>
      </div>
      <Field label="Password" value={pw} onChange={setPw} icon="lock" type="password" error={pwErr} sub="At least 10 characters."/>
    </>
  );
}

function StepBusiness({ situation, setSituation, bizName, setBizName, bizWhat, setBizWhat }) {
  const P = window.PX;
  const opts = [
    { k: 'has-site', icon: 'globe', t: 'I have a website', s: 'Connect your domain — we’ll import your brand, pages, and content.' },
    { k: 'has-domain', icon: 'link', t: 'I have a domain, but no real site', s: 'Point it here and Pex builds your website on it.' },
    { k: 'need-domain', icon: 'search', t: 'I need a domain', s: 'Search and register a new one in seconds.' },
    { k: 'fresh', icon: 'sparkles', t: 'Just getting started', s: 'No domain, no site yet — start on a pexxie.com address.' },
  ];
  return (
    <>
      <Label style={{ marginBottom: 10 }}>Step 2 of 8 · Your business</Label>
      <h2 style={{ fontFamily: P.serif, fontSize: 34, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -0.5, lineHeight: 1.1 }}>Tell us about your business.</h2>
      <p style={{ fontSize: 14, color: P.ink3, marginTop: 10, marginBottom: 18 }}>Pex tailors everything — your website, catalog, and proposals — to what you actually do.</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 20 }}>
        <Field label="Business name" value={bizName} onChange={setBizName} icon="briefcase"/>
        <Field label="What you do" value={bizWhat} onChange={setBizWhat} icon="tag"/>
      </div>
      <Label style={{ marginBottom: 8 }}>Where are you starting from?</Label>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {opts.map(o => {
          const on = situation === o.k;
          return (
            <div key={o.k} onClick={() => setSituation(o.k)} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 14px', border: `1.5px solid ${on ? P.spark : P.line}`, borderRadius: 11, background: on ? P.sparkWash : P.card, cursor: 'pointer' }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: on ? P.sparkTint : P.sunk, color: on ? P.spark : P.ink3, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={o.icon} size={18}/></div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600, color: P.ink }}>{o.t}</div><div style={{ fontSize: 11.5, color: P.ink3, marginTop: 1 }}>{o.s}</div></div>
              <span style={{ width: 18, height: 18, borderRadius: 18, border: `2px solid ${on ? P.spark : P.lineStrong}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{on && <span style={{ width: 9, height: 9, borderRadius: 9, background: P.spark }}/>}</span>
            </div>
          );
        })}
      </div>
    </>
  );
}

function StepDomain({ situation, domainMode, setDomainMode, query, setQuery, selected, setSelected }) {
  const P = window.PX;
  const connect = situation === 'has-site' || situation === 'has-domain';
  if (connect) {
    return (
      <>
        <Label style={{ marginBottom: 10 }}>Step 3 of 8 · Domain</Label>
        <h2 style={{ fontFamily: P.serif, fontSize: 34, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -0.5, lineHeight: 1.1 }}>Connect your domain.</h2>
        <p style={{ fontSize: 14, color: P.ink3, marginTop: 10, marginBottom: 18 }}>We’ll point it here and configure DNS, SSL, and email records automatically — through Cloudflare, with zero downtime. {situation === 'has-domain' && 'Pex will build a fresh site on it.'}</p>
        <Field label="Your domain" value="honestloaves.com" icon="globe" style={{ marginBottom: 14 }}/>
        <Card pad={0}>
          {[['Domain verified', 'Ownership confirmed via your registrar', 'check'], ['DNS · Cloudflare', 'Zone created · records propagating', 'globe'], ['SSL certificate', 'Auto-issued · HTTPS everywhere', 'lock'], ['Email records', 'MX + SPF, DKIM, DMARC ready', 'mail']].map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderBottom: i < 3 ? `1px solid ${P.line}` : 'none' }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: P.sageTint, color: P.sage, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="check" size={14} stroke={2.5}/></div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, color: P.ink, fontWeight: 500 }}>{r[0]}</div><div style={{ fontSize: 11.5, color: P.ink3 }}>{r[1]}</div></div>
            </div>
          ))}
        </Card>
      </>
    );
  }
  const allResults = [
    { d: 'honestloaves.com', status: 'taken' },
    { d: 'honestloaves.nyc', status: 'available', price: '$18/yr' },
    { d: 'honestloavesbakery.com', status: 'available', price: '$12/yr' },
    { d: 'honestloaves.co', status: 'available', price: '$22/yr' },
  ];
  const q = query.trim().toLowerCase().replace(/\s+/g, '');
  const results = q ? allResults.filter(r => r.d.toLowerCase().includes(q)) : allResults;
  return (
    <>
      <Label style={{ marginBottom: 10 }}>Step 3 of 8 · Domain</Label>
      <h2 style={{ fontFamily: P.serif, fontSize: 34, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -0.5, lineHeight: 1.1 }}>Let’s find your domain.</h2>
      <p style={{ fontSize: 14, color: P.ink3, marginTop: 10, marginBottom: 16 }}>Register one through Pexxie — DNS, SSL, and email come set up. Or start on a pexxie.com address and add a custom domain whenever.</p>
      <div style={{ display: 'flex', alignItems: 'center', background: P.card, border: `1px solid ${P.lineStrong}`, borderRadius: 10, padding: '10px 12px', marginBottom: 12 }}>
        <Icon name="search" size={16} color={P.ink3}/>
        <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search for a domain" style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontSize: 15, color: P.ink, padding: '0 10px', fontFamily: P.sans }}/>
        <Pill tone={results.length ? 'sage' : 'neutral'} dot>{results.length} found</Pill>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 7, marginBottom: 14 }}>
        {results.length === 0 && <div style={{ padding: '14px', fontSize: 13, color: P.ink3, textAlign: 'center', border: `1px dashed ${P.lineStrong}`, borderRadius: 10 }}>No matches for “{query.trim()}”. Try another name.</div>}
        {results.map((r, i) => {
          const taken = r.status === 'taken';
          const on = domainMode === 'register' && selected === r.d;
          return (
            <div key={r.d} onClick={() => { if (!taken) { setDomainMode('register'); setSelected(r.d); } }} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', border: `1.5px solid ${on ? P.spark : P.line}`, borderRadius: 10, background: on ? P.sparkWash : taken ? P.canvas : P.card, cursor: taken ? 'default' : 'pointer', opacity: taken ? 0.55 : 1 }}>
              <Icon name="globe" size={16} color={taken ? P.ink4 : P.ink3}/>
              <span style={{ flex: 1, fontSize: 14, color: P.ink, fontFamily: P.mono, textDecoration: taken ? 'line-through' : 'none' }}>{r.d}</span>
              {taken ? <span style={{ fontSize: 11.5, color: P.ink4 }}>Taken</span> : <><span style={{ fontSize: 12.5, color: P.ink2 }}>{r.price}</span><span style={{ fontSize: 11.5, color: on ? P.spark : P.sage, fontWeight: 600 }}>{on ? 'Selected' : 'Available'}</span></>}
            </div>
          );
        })}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0 12px', color: P.ink4, fontSize: 11.5 }}><div style={{ flex: 1, height: 1, background: P.line }}/>or skip for now<div style={{ flex: 1, height: 1, background: P.line }}/></div>
      <div onClick={() => setDomainMode('subdomain')} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 14px', border: `1.5px solid ${domainMode === 'subdomain' ? P.spark : P.line}`, borderRadius: 11, background: domainMode === 'subdomain' ? P.sparkWash : P.card, cursor: 'pointer' }}>
        <div style={{ width: 36, height: 36, borderRadius: 9, background: P.sunk, color: P.ink2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="zap" size={17}/></div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600, color: P.ink, fontFamily: P.mono }}>honestloaves.pexxie.com</div><div style={{ fontSize: 11.5, color: P.ink3, marginTop: 1 }}>Live instantly · connect a custom domain anytime</div></div>
        <span style={{ width: 18, height: 18, borderRadius: 18, border: `2px solid ${domainMode === 'subdomain' ? P.spark : P.lineStrong}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{domainMode === 'subdomain' && <span style={{ width: 9, height: 9, borderRadius: 9, background: P.spark }}/>}</span>
      </div>
    </>
  );
}

function StepBrand({ situation, logoCaptured, setLogoCaptured, variant, setVariant }) {
  const P = window.PX; const { toast } = window.useApp();
  const found = situation === 'has-site';
  const variants = [
    { mono: 'hl', bg: '#3A2A1C', fg: '#F5D8A8', display: 'Cormorant', palette: [['#3A2A1C', 'Crust'], ['#D9A84C', 'Wheat'], ['#8C4A2A', 'Bake'], ['#F2E2C4', 'Cream']] },
    { mono: 'HL', bg: '#26332A', fg: '#CFE8C4', display: 'Fraunces', palette: [['#26332A', 'Pine'], ['#7FB06A', 'Leaf'], ['#46683A', 'Herb'], ['#E7F0DC', 'Mist']] },
    { mono: 'hb', bg: '#3A1C2C', fg: '#F5C8DC', display: 'Poppins', palette: [['#3A1C2C', 'Plum'], ['#C45A8A', 'Rose'], ['#8C2A5A', 'Berry'], ['#F2D8E6', 'Blush']] },
  ];
  const v = variants[variant % variants.length];
  const regenerate = () => { setLogoCaptured(false); setVariant(x => (x + 1) % variants.length); toast((found ? 'Pex refined your brand' : 'Pex regenerated your brand') + ' · 5 ⚡', { tone: 'spark', icon: 'sparkles' }); };
  const upload = () => { setLogoCaptured(true); toast('logo.png uploaded — applied to your brand kit.', { tone: 'sage', icon: 'check' }); };
  return (
    <>
      <Label style={{ marginBottom: 10 }}>Step 4 of 8 · Brand</Label>
      <h2 style={{ fontFamily: P.serif, fontSize: 34, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -0.5, lineHeight: 1.1 }}>{found ? 'We pulled your brand.' : 'Let’s create your brand.'}</h2>
      <p style={{ fontSize: 14, color: P.ink3, marginTop: 10, marginBottom: 18 }}>{found ? 'Logo, colors, and fonts straight from your site. Edit anything — or let Pex refine it.' : 'No existing site to read, so Pex generated a starting point from your name and what you do. Make it yours, or upload your own.'}</p>
      <Card pad={18}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          {logoCaptured ? <Pill tone="sage" dot>Custom logo uploaded</Pill> : found ? <Pill tone="sage" dot>Found on honestloaves.com</Pill> : <Pill tone="spark"><Spark size={10}/> Generated by Pex</Pill>}
          <span style={{ fontSize: 11.5, color: P.ink3 }}>{logoCaptured ? 'logo.png · your upload' : found ? 'BrandFetch · 1.2s' : 'from “Honest Loaves · artisan bakery”'}</span>
        </div>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 16 }}>
          <div style={{ width: 56, height: 56, borderRadius: 12, background: logoCaptured ? P.sunk : v.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: P.serif, fontStyle: 'italic', color: logoCaptured ? P.ink3 : v.fg, fontSize: 26, flexShrink: 0 }}>{logoCaptured ? <Icon name="image" size={24} color={P.ink3}/> : v.mono}</div>
          <div style={{ flex: 1 }}>
            <Label style={{ marginBottom: 6 }}>Palette</Label>
            <div style={{ display: 'flex', gap: 6 }}>{v.palette.map((c, i) => <div key={i} style={{ textAlign: 'center' }}><div style={{ width: 30, height: 30, borderRadius: 7, background: c[0], border: `1px solid ${P.line}` }}/><div style={{ fontSize: 9, color: P.ink3, marginTop: 3 }}>{c[1]}</div></div>)}</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, paddingTop: 14, borderTop: `1px solid ${P.line}` }}>
          <div><Label>Display</Label><div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 22, color: P.ink }}>{v.display}</div></div>
          <div><Label>Body & voice</Label><div style={{ fontSize: 14, color: P.ink, marginTop: 2 }}>Inter · warm, plain-spoken</div></div>
        </div>
      </Card>
      <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
        <Btn kind={logoCaptured ? 'primary' : 'default'} size="sm" icon={logoCaptured ? 'check' : 'upload'} onClick={upload}>{logoCaptured ? 'Logo uploaded' : 'Upload your logo'}</Btn>
        <Btn kind="default" size="sm" icon="sparkles" onClick={regenerate}>{found ? 'Refine with Pex' : 'Regenerate'} · 5 ⚡</Btn>
      </div>
    </>
  );
}

function StepPlan({ plan, setPlan, sparkPkg, setSparkPkg, card, setCard }) {
  const P = window.PX;
  return (
    <>
      <Label style={{ marginBottom: 10 }}>Step 6 of 8 · Plan & usage credits</Label>
      <h2 style={{ fontFamily: P.serif, fontSize: 34, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -0.5 }}>Pick a plan and usage credits.</h2>
      <p style={{ fontSize: 14, color: P.ink3, marginTop: 10, marginBottom: 18 }}>Every plan has all 12 apps and unlimited seats. Pex work uses usage credits, shown before approval.</p>
      <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
        {[['base', 'Base', '$20/mo', 'monthly allowance included'], ['pro', 'Pro', '$100/mo', '400 usage credits included']].map(pl => (
          <Card key={pl[0]} pad={14} onClick={() => setPlan(pl[0])} style={{ flex: 1, border: `1.5px solid ${plan === pl[0] ? P.spark : P.line}`, background: plan === pl[0] ? P.sparkWash : P.card, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 18, height: 18, borderRadius: 18, border: `2px solid ${plan === pl[0] ? P.spark : P.lineStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{plan === pl[0] && <span style={{ width: 9, height: 9, borderRadius: 9, background: P.spark }}/>}</span>
              <span style={{ fontSize: 14, fontWeight: 600, color: P.ink, flex: 1 }}>{pl[1]}</span>
              <Num size={20}>{pl[2]}</Num>
            </div>
            <div style={{ fontSize: 11.5, color: P.ink3, marginTop: 6, paddingLeft: 26 }}>{pl[3]}</div>
          </Card>
        ))}
      </div>
      <Label style={{ marginBottom: 8 }}>Starter usage credits</Label>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginBottom: 16 }}>
        {[['$20', '180 ⚡', 'activates', true], ['$50', '500 ⚡', 'a few projects', false], ['$100', '1,100 ⚡', 'go big', false]].map((b, i) => {
          const on = sparkPkg === b[0];
          return (
            <Card key={i} pad={12} onClick={() => setSparkPkg(b[0])} style={{ border: `1.5px solid ${on ? P.spark : P.line}`, background: on ? P.sparkWash : P.card, textAlign: 'center', cursor: 'pointer', position: 'relative' }}>
              {b[3] && <div style={{ position: 'absolute', top: -9, left: '50%', transform: 'translateX(-50%)', background: P.spark, color: '#fff', fontSize: 9.5, fontWeight: 600, padding: '2px 8px', borderRadius: 9, whiteSpace: 'nowrap' }}>MOST PEOPLE</div>}
              <Num size={26}>{b[0]}</Num><div style={{ fontSize: 12, color: P.ink, marginTop: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}><Spark size={11}/>{b[1]}</div>
              <div style={{ fontSize: 11, fontWeight: 600, color: on ? P.spark : P.ink4, marginTop: 5 }}>{on ? 'Selected' : b[2]}</div>
            </Card>
          );
        })}
      </div>
      <Field label="Card details" value={card} onChange={setCard} icon="card" sub={sparkPkg ? `Starter usage-credit package selected: ${sparkPkg}.` : 'Choose a starter usage-credit package above to continue.'}/>
    </>
  );
}

function StepEmail() {
  const P = window.PX;
  const [prov, setProv] = React.useState('google');
  const [addr, setAddr] = React.useState('amara');
  const [boxes, setBoxes] = React.useState({ hello: true, orders: true, accounts: false });
  const [migrate, setMigrate] = React.useState(true);
  const taken = ['admin', 'info', 'support', 'no-reply'];
  const handle = addr.trim().toLowerCase();
  const avail = handle.length > 0 && !taken.includes(handle);
  const extra = [['hello', 'hello@honestloaves.com'], ['orders', 'orders@honestloaves.com'], ['accounts', 'accounts@honestloaves.com']];
  return (
    <>
      <Label style={{ marginBottom: 10 }}>Step 5 of 8 · Email</Label>
      <h2 style={{ fontFamily: P.serif, fontSize: 34, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -0.5 }}>Your real business email.</h2>
      <p style={{ fontSize: 14, color: P.ink3, marginTop: 10, marginBottom: 16 }}>Pexxie resells <b style={{ color: P.ink2 }}>Google Workspace</b> and <b style={{ color: P.ink2 }}>Microsoft 365</b> — the actual product, provisioned and billed through us on one invoice. Pick your backend; we create the mailboxes and migrate your old mail.</p>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
        {[['google', 'Google Workspace', '#4285F4', 'G', 'Gmail, Drive, Meet · $6/seat'], ['ms', 'Microsoft 365', '#0078D4', '⊞', 'Outlook, OneDrive, Teams · $6/seat']].map(p => (
          <Card key={p[0]} pad={13} onClick={() => setProv(p[0])} style={{ flex: 1, border: `1.5px solid ${prov === p[0] ? P.spark : P.line}`, background: prov === p[0] ? P.sparkWash : P.card, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 6 }}>
              <span style={{ width: 26, height: 26, borderRadius: 7, background: p[2], color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700 }}>{p[3]}</span>
              <span style={{ fontSize: 13.5, fontWeight: 600, color: P.ink, flex: 1 }}>{p[1]}</span>
              {prov === p[0] && <Icon name="check" size={15} color={P.spark} stroke={2.5}/>}
            </div>
            <div style={{ fontSize: 11, color: P.ink3 }}>{p[4]}</div>
          </Card>
        ))}
      </div>
      <Label style={{ marginBottom: 6 }}>Your address</Label>
      <div style={{ display: 'flex', alignItems: 'center', background: P.card, border: `1px solid ${avail ? P.lineStrong : P.rose}`, borderRadius: 10, padding: '10px 12px', marginBottom: 14 }}>
        <input value={addr} onChange={e => setAddr(e.target.value)} style={{ width: 90, border: 'none', background: 'transparent', outline: 'none', fontSize: 15, color: P.ink, fontFamily: P.sans, textAlign: 'right' }}/>
        <span style={{ fontSize: 15, color: P.ink3 }}>@honestloaves.com</span>
        <div style={{ flex: 1 }}/>
        {handle.length === 0 ? <Pill tone="neutral">Pick a name</Pill> : avail ? <Pill tone="sage" dot>Available</Pill> : <Pill tone="rose" dot>Taken</Pill>}
      </div>
      <Card pad={14} style={{ background: P.sunk, border: 'none' }}>
        <Label style={{ marginBottom: 8 }}>Also create these mailboxes</Label>
        {extra.map(([k, e]) => (
          <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0' }}><Toggle on={boxes[k]} size="sm" onClick={() => setBoxes(b => ({ ...b, [k]: !b[k] }))}/><span style={{ fontSize: 13, color: P.ink }}>{e}</span></div>
        ))}
      </Card>
      <label style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14, fontSize: 13, color: P.ink2 }}><Toggle on={migrate} size="sm" onClick={() => setMigrate(m => !m)}/>Migrate 3 years of mail & contacts from amara.bakes@gmail.com</label>
    </>
  );
}

function StepBuilding({ situation, domainMode, onDone }) {
  const P = window.PX; const { toast } = window.useApp();
  const [done, setDone] = React.useState(1);
  const [failAt, setFailAt] = React.useState(null);       // index configured to fail
  const [erroredAt, setErroredAt] = React.useState(null); // index currently paused on an error
  const [retrying, setRetrying] = React.useState(false);
  const [skipped, setSkipped] = React.useState({});
  const [helpOpen, setHelpOpen] = React.useState(false);  // inline resolution detail for the current error
  const sub = domainMode === 'subdomain';
  const fresh = situation === 'need-domain' || situation === 'fresh';
  const items = [
    { t: 'Creating your account', s: 'amara@honestloaves.com secured' },
    { t: sub ? 'Spinning up honestloaves.pexxie.com' : 'Registering & routing honestloaves.com', s: 'DNS via Cloudflare · SSL issued',
      fail: { s: "DNS propagation didn't confirm in time — this can take up to 24 hrs with some registrars.", help: 'Check DNS status', detail: 'Add these two records at your registrar, then retry:  A  @ → 76.76.21.21  ·  CNAME  www → cname.pexxie.com.  Propagation can take up to 24 hrs.' } },
    { t: 'Setting up your email', s: 'Google Workspace · MX, SPF, DKIM, DMARC live',
      fail: { s: 'Google Workspace provisioning failed — their API returned a billing error on our end.', help: 'Contact support', detail: "We've opened ticket #PX-4821 with our email team. A human will reply to amara@honestloaves.com within the hour — you can keep setting up in the meantime." } },
    { t: fresh ? 'Generating your brand identity' : 'Importing your brand', s: fresh ? 'Logo, palette & voice from your name + industry' : 'Logo, colors & fonts from your site',
      fail: { s: "Couldn't fetch your site's brand assets — the page didn't respond before we timed out.", help: 'Enter brand manually', detail: "Switched to manual brand entry — we'll start from your business name and a neutral palette. Upload a logo and tune colors anytime from Settings → Brand." } },
    { t: fresh ? 'Writing & deploying your website' : 'Importing & refreshing your website', s: fresh ? 'Template chosen · pages written · live on the edge' : 'Pages imported · brand re-applied · redeployed' },
    { t: 'Opening your money workspace', s: 'USD balance · chart of accounts · invoice template' },
    { t: 'Building your CRM & catalog', s: 'Pipeline stages · services tuned to a Brooklyn bakery' },
    { t: 'Pex’s first 5 proposals', s: 'Things worth doing this week' },
  ];
  const failableIdx = items.reduce((a, it, i) => (it.fail ? [...a, i] : a), []);

  React.useEffect(() => {
    if (erroredAt != null || retrying) return;
    if (done >= items.length) { const t = setTimeout(onDone, 900); return () => clearTimeout(t); }
    if (done === failAt && !skipped[done]) {
      const t = setTimeout(() => setErroredAt(done), 800);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setDone(d => d + 1), 800);
    return () => clearTimeout(t);
  }, [done, erroredAt, retrying, failAt]);

  const retry = () => {
    setRetrying(true); setHelpOpen(false);
    setTimeout(() => { setRetrying(false); setErroredAt(null); setFailAt(null); setDone(d => d + 1); }, 1000);
  };
  const skipStep = () => { setSkipped(s => ({ ...s, [erroredAt]: true })); setHelpOpen(false); setErroredAt(null); setDone(d => d + 1); };
  const openHelp = (label) => { const nx = !helpOpen; setHelpOpen(nx); if (nx) toast(label + ' — details below.', { icon: 'info' }); };

  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}><Pex size={44} glow/><div><div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 30, color: P.ink, letterSpacing: -0.5, lineHeight: 1 }}>Pex is setting you up.</div><div style={{ fontSize: 12.5, color: P.ink3, marginTop: 3 }}>60–90 seconds. You can close the tab — we’ll email you when it’s ready.</div></div></div>
      {done === 1 && !erroredAt && (
        <div style={{ fontSize: 11, color: P.ink4, marginBottom: 8 }}>
          Simulate a hiccup: {failableIdx.map((i, j) => (
            <span key={i} onClick={() => setFailAt(i)} style={{ color: P.ink3, textDecoration: 'underline', cursor: 'pointer', marginRight: j < failableIdx.length - 1 ? 10 : 0 }}>{items[i].t.split(' ').slice(0, 2).join(' ')}</span>
          ))}
        </div>
      )}
      <Card pad={6}>
        {items.map((it, i) => {
          const st = erroredAt === i ? 'error' : skipped[i] ? 'skipped' : i < done ? 'done' : i === done ? 'active' : 'queued';
          return (
            <div key={i} style={{ padding: '12px 14px', borderBottom: i < items.length - 1 ? `1px solid ${P.line}` : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 13 }}>
                <div style={{ marginTop: 1, width: 20, height: 20, borderRadius: 20, flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: st === 'done' ? P.sage : st === 'error' ? P.rose : st === 'skipped' ? P.amber : st === 'active' ? P.sparkTint : P.sunk, color: '#fff' }}>
                  {st === 'done' ? <Icon name="check" size={12} color="#fff" stroke={3}/> : st === 'error' ? <Icon name="alert" size={12} color="#fff" stroke={3}/> : st === 'skipped' ? <Icon name="arrowRight" size={11} color="#fff" stroke={3}/> : st === 'active' ? <span style={{ width: 7, height: 7, borderRadius: 7, background: P.spark }}/> : <span style={{ width: 5, height: 5, borderRadius: 5, background: P.ink4 }}/>}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, color: st === 'queued' ? P.ink4 : st === 'error' ? P.rose : P.ink, fontWeight: (st === 'active' || st === 'error') ? 600 : 500 }}>{it.t}</div>
                  <div style={{ fontSize: 11.5, color: st === 'error' ? P.rose : P.ink3, marginTop: 2 }}>{st === 'error' ? it.fail.s : st === 'skipped' ? 'Skipped — you can finish this later from Settings.' : it.s}</div>
                  {st === 'active' && <div style={{ marginTop: 7, height: 3, background: P.sunk, borderRadius: 3, overflow: 'hidden' }}><div style={{ width: '60%', height: '100%', background: P.spark }}/></div>}
                </div>
              </div>
              {st === 'error' && (
                <div style={{ marginTop: 10, marginLeft: 33 }}>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <Btn kind="primary" size="sm" onClick={retry} disabled={retrying} icon={retrying ? undefined : 'refresh'}>{retrying ? 'Retrying…' : 'Retry'}</Btn>
                    <Btn kind="ghost" size="sm" onClick={skipStep}>Skip for now</Btn>
                    <Btn kind={helpOpen ? 'soft' : 'ghost'} size="sm" onClick={() => openHelp(it.fail.help)}>{it.fail.help}</Btn>
                  </div>
                  {helpOpen && (
                    <div style={{ marginTop: 10, padding: '11px 13px', background: P.sunk, borderRadius: 9, border: `1px solid ${P.line}`, fontSize: 12, color: P.ink2, lineHeight: 1.5 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 600, color: P.ink, marginBottom: 4 }}><Icon name="info" size={13} color={P.ink2}/>{it.fail.help}</div>
                      {it.fail.detail}
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </Card>
    </>
  );
}

function StepWelcome({ go, situation }) {
  const P = window.PX;
  const fresh = situation === 'need-domain' || situation === 'fresh';
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ display: 'inline-flex', marginBottom: 20 }}><Pex size={64} glow/></div>
      <h2 style={{ fontFamily: P.serif, fontSize: 40, fontWeight: 400, color: P.ink, margin: 0, letterSpacing: -1, fontStyle: 'italic' }}>You’re live, Amara.</h2>
      <p style={{ fontSize: 15, color: P.ink2, lineHeight: 1.6, maxWidth: 470, margin: '14px auto 24px' }}>{fresh ? <>Your website is live, email is set up, and your workspace is ready. Pex wrote a first draft of every page — go make it yours.</> : <>Site refreshed, email migrated, books synced, and <b>428 contacts</b> imported. Everything\u2019s in one place — and Pex already has <b style={{ color: P.spark }}>5 things</b> waiting.</>}</p>
      <Card pad={14} style={{ maxWidth: 380, margin: '0 auto 22px', background: P.sageWash, border: `1px solid ${P.sageTint}`, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 34, height: 34, borderRadius: 9, background: P.card, color: P.sage, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="globe" size={17}/></div>
        <div style={{ flex: 1, textAlign: 'left' }}><div style={{ fontSize: 13, fontWeight: 600, color: P.ink }}>Your website is live</div><div style={{ fontSize: 11.5, color: P.ink3, fontFamily: P.mono }}>{fresh ? 'honestloaves.pexxie.com' : 'honestloaves.com'}</div></div>
        <Pill tone="sage" dot>Online</Pill>
      </Card>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
        <Btn kind="spark" size="lg" onClick={() => go('website/editor')} iconR="arrowRight">Start on your website</Btn>
        <Btn kind="default" size="lg" onClick={() => go('home')}>Open dashboard</Btn>
      </div>
    </div>
  );
}