// SP14 / M14 — Onboarding wizard
// Multi-step first-run experience: welcome → workspace → invites → integrations
// → sample data → done + first-run checklist.

const { useState: useStateOB, useEffect: useEffectOB } = React;

const Onboarding = ({ setPage }) => {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    role: 'founder',
    workspaceName: 'My Studio',
    subdomain: 'mystudio',
    brandColor: '#d4ff3a',
    logo: null,
    invites: [
      { email: '', role: 'Editor' },
      { email: '', role: 'Editor' },
    ],
    integrations: { stripe:false, resend:true, posthog:false, slack:false, sentry:false },
    seed: 'studio',
  });

  const steps = [
    { id:'welcome', label:'Welcome', sub:'Tell us who you are' },
    { id:'workspace', label:'Workspace', sub:'Name, URL, brand' },
    { id:'invite', label:'Invite', sub:'Add your team' },
    { id:'integrate', label:'Integrate', sub:'Connect what you use' },
    { id:'seed', label:'Sample data', sub:'Pick a starting point' },
    { id:'done', label:'Ready', sub:"You're all set" },
  ];

  const update = (patch) => setData(d => ({ ...d, ...patch }));
  const next = () => setStep(s => Math.min(s+1, steps.length-1));
  const back = () => setStep(s => Math.max(s-1, 0));

  return (
    <div style={{
      minHeight:'100vh', background:'#070708', color:'var(--ink)',
      display:'flex', flexDirection:'column',
      fontSize:14
    }}>
      <OBHeader step={step} steps={steps} setPage={setPage}/>

      <div style={{flex:1,display:'flex',flexDirection:'column'}}>
        {step === 0 && <OBWelcome data={data} update={update} next={next}/>}
        {step === 1 && <OBWorkspace data={data} update={update}/>}
        {step === 2 && <OBInvite data={data} update={update}/>}
        {step === 3 && <OBIntegrate data={data} update={update}/>}
        {step === 4 && <OBSeed data={data} update={update}/>}
        {step === 5 && <OBDone data={data} setPage={setPage}/>}
      </div>

      {step > 0 && step < 5 && <OBFooter step={step} steps={steps} back={back} next={next}/>}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// HEADER WITH STEPPER

const OBHeader = ({ step, steps, setPage }) => (
  <header style={{
    display:'flex',alignItems:'center',justifyContent:'space-between',
    padding:'16px 32px',borderBottom:'1px solid var(--line)',
    background:'rgba(7,7,8,0.85)',backdropFilter:'blur(12px)',
    position:'sticky',top:0,zIndex:20
  }}>
    <div style={{display:'flex',alignItems:'center',gap:10}}>
      <span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',width:28,height:28,border:'1px solid var(--line-2)',borderRadius:8,color:'var(--accent)'}}>{Icon.atom()}</span>
      <div>
        <div style={{fontWeight:600,fontSize:13,letterSpacing:'-0.005em',lineHeight:1.1}}>SolidAtoms</div>
        <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginTop:2}}>SETUP · {steps.length} STEPS</div>
      </div>
    </div>

    {/* Stepper */}
    <div style={{display:'flex',alignItems:'center',gap:0,flex:1,justifyContent:'center',maxWidth:680,margin:'0 32px'}}>
      {steps.map((s, i) => {
        const done = i < step;
        const active = i === step;
        return (
          <React.Fragment key={s.id}>
            <div style={{display:'flex',alignItems:'center',gap:8,opacity: i > step ? 0.5 : 1}}>
              <span style={{
                width:24,height:24,borderRadius:'50%',
                background: done ? 'var(--accent)' : active ? 'transparent' : 'var(--bg-3)',
                border:'1px solid', borderColor: done ? 'var(--accent)' : active ? 'var(--accent)' : 'var(--line-2)',
                display:'flex',alignItems:'center',justifyContent:'center',
                fontFamily:'var(--mono)',fontSize:11,fontWeight:600,
                color: done ? '#0a0a0a' : active ? 'var(--accent)' : 'var(--ink-3)',
                transition:'all .2s ease'
              }}>{done ? '✓' : i+1}</span>
              <div style={{lineHeight:1.1}}>
                <div style={{fontSize:12,fontWeight: active ? 500 : 400,color: active ? 'var(--ink)' : 'var(--ink-3)'}}>{s.label}</div>
              </div>
            </div>
            {i < steps.length-1 && <div style={{flex:1,height:1,background: i < step ? 'var(--accent)' : 'var(--line)',margin:'0 12px',transition:'background .2s ease',maxWidth:60}}/>}
          </React.Fragment>
        );
      })}
    </div>

    <button onClick={()=>setPage('home')} className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',padding:'7px 11px',border:'1px solid var(--line)',borderRadius:7}}>
      SKIP FOR NOW ↗
    </button>
  </header>
);

// ─────────────────────────────────────────────────────────────────
// FOOTER

const OBFooter = ({ step, steps, back, next }) => (
  <footer style={{
    padding:'16px 32px',borderTop:'1px solid var(--line)',
    display:'flex',justifyContent:'space-between',alignItems:'center',
    background:'rgba(7,7,8,0.85)',backdropFilter:'blur(12px)',
    position:'sticky',bottom:0,zIndex:20
  }}>
    <button onClick={back} className="btn btn-ghost" style={{padding:'8px 14px',fontSize:13}}>← Back</button>
    <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>
      STEP {step+1} OF {steps.length} · {steps[step].sub.toUpperCase()}
    </div>
    <button onClick={next} className="btn btn-primary" style={{padding:'9px 16px',fontSize:13}}>
      {step === steps.length-2 ? 'Finish setup' : 'Continue'} {Icon.arrow()}
    </button>
  </footer>
);

// ─────────────────────────────────────────────────────────────────
// STEP 0 — WELCOME

const OBWelcome = ({ data, update, next }) => {
  const roles = [
    {id:'founder',t:'Founder / solo',d:'I run my own studio. Just me, maybe a contractor.',c:'#d4ff3a',v:'Most flexible setup'},
    {id:'agency',t:'Agency / studio',d:'We\'re a small team building for clients.',c:'#7c9bff',v:'Team workflows + client portal'},
    {id:'inhouse',t:'In-house team',d:'Marketing or engineering team at a larger company.',c:'#ff8a3a',v:'Approval workflows + audit log'},
    {id:'just-looking',t:'Just exploring',d:'Kicking the tires. Show me what this thing does.',c:'#a78bfa',v:'Demo workspace with sample data'},
  ];

  return (
    <div style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',padding:'60px 32px'}}>
      <div style={{maxWidth:920,width:'100%'}}>
        <div style={{textAlign:'center',marginBottom:48}}>
          <div className="eyebrow" style={{justifyContent:'center',marginBottom:24}}><span className="dot"/>Welcome aboard</div>
          <h1 style={{fontSize:'clamp(40px,5.6vw,68px)',lineHeight:0.98,letterSpacing:'-0.035em',fontWeight:500,marginBottom:20,maxWidth:760,margin:'0 auto 20px'}}>
            Let's <span className="serif" style={{color:'var(--accent)'}}>set up</span> your workspace.
          </h1>
          <p style={{fontSize:17,color:'var(--ink-2)',lineHeight:1.5,maxWidth:560,margin:'0 auto'}}>
            Five quick steps. Takes about two minutes. Nothing you choose here is permanent — you can change everything later.
          </p>
        </div>

        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.08em',textAlign:'center',marginBottom:20,textTransform:'uppercase'}}>First, what brings you here?</div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:14,marginBottom:32}}>
          {roles.map(r => (
            <button key={r.id} onClick={()=>update({role:r.id})} style={{
              padding:'24px 28px',borderRadius:'var(--radius)',textAlign:'left',
              border:'1px solid', borderColor: data.role===r.id ? r.c : 'var(--line)',
              background: data.role===r.id ? `linear-gradient(135deg, ${r.c}10, var(--bg-2))` : 'var(--bg-2)',
              transition:'all .15s ease',position:'relative'
            }}>
              <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',marginBottom:12}}>
                <span style={{width:38,height:38,borderRadius:10,background:`linear-gradient(135deg, ${r.c}44, ${r.c}11)`,border:`1px solid ${r.c}55`,display:'flex',alignItems:'center',justifyContent:'center',color:r.c,fontWeight:600,fontFamily:'var(--mono)',fontSize:14}}>{r.id[0].toUpperCase()}</span>
                <span style={{width:18,height:18,borderRadius:'50%',border:'1px solid', borderColor: data.role===r.id ? r.c : 'var(--line-2)',display:'flex',alignItems:'center',justifyContent:'center',background: data.role===r.id ? r.c : 'transparent'}}>
                  {data.role===r.id && <span style={{width:8,height:8,borderRadius:'50%',background:'#0a0a0a'}}/>}
                </span>
              </div>
              <div style={{fontSize:17,fontWeight:500,letterSpacing:'-0.015em',marginBottom:6}}>{r.t}</div>
              <div style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.5,marginBottom:14}}>{r.d}</div>
              <div className="mono" style={{fontSize:10,color: data.role===r.id ? r.c : 'var(--ink-3)',letterSpacing:'0.06em',textTransform:'uppercase'}}>→ {r.v}</div>
            </button>
          ))}
        </div>

        <div style={{textAlign:'center'}}>
          <button onClick={next} className="btn btn-primary" style={{padding:'12px 24px',fontSize:14}}>
            Continue {Icon.arrow()}
          </button>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// STEP 1 — WORKSPACE

const OBWorkspace = ({ data, update }) => {
  const colorOpts = ['#d4ff3a','#7c9bff','#ff8a3a','#a78bfa','#7ee787','#22d3ee','#f472b6','#fde047'];

  return (
    <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',minHeight:0}}>
      {/* Left: form */}
      <div style={{padding:'48px 56px',overflow:'auto',display:'flex',flexDirection:'column',gap:28,maxWidth:640,margin:'0 auto',width:'100%'}}>
        <div>
          <div className="eyebrow" style={{marginBottom:14}}><span className="dot"/>Step 2 · Workspace identity</div>
          <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:14}}>What should we call your workspace?</h2>
          <p style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.55}}>This is what your team sees in the sidebar and what shows up on shared links. You can change it any time.</p>
        </div>

        <div>
          <FieldLabel>Workspace name</FieldLabel>
          <input value={data.workspaceName} onChange={e=>update({workspaceName:e.target.value})}
            placeholder="Acme Studio"
            style={{width:'100%',padding:'14px 16px',borderRadius:10,background:'var(--bg-3)',border:'1px solid var(--line-2)',color:'var(--ink)',fontSize:18,fontWeight:500,fontFamily:'var(--sans)',outline:'none',letterSpacing:'-0.005em'}}/>
        </div>

        <div>
          <FieldLabel hint="Use lowercase, numbers, dashes">Workspace URL</FieldLabel>
          <div style={{display:'flex',alignItems:'center',borderRadius:10,background:'var(--bg-3)',border:'1px solid var(--line-2)',overflow:'hidden'}}>
            <span className="mono" style={{padding:'14px 12px 14px 16px',color:'var(--ink-3)',fontSize:14,letterSpacing:'0.01em'}}>solidatoms.com/</span>
            <input value={data.subdomain} onChange={e=>update({subdomain:e.target.value.toLowerCase().replace(/[^a-z0-9-]/g,'')})} placeholder="mystudio"
              style={{flex:1,padding:'14px 16px 14px 0',background:'transparent',border:0,color:'var(--ink)',fontSize:14,fontFamily:'var(--mono)',outline:'none'}}/>
            <span className="mono" style={{padding:'6px 12px',marginRight:8,fontSize:10,color:'var(--ok)',background:'rgba(126,231,135,0.1)',border:'1px solid rgba(126,231,135,0.3)',borderRadius:5,letterSpacing:'0.06em'}}>● AVAILABLE</span>
          </div>
        </div>

        <div>
          <FieldLabel>Logo</FieldLabel>
          <div style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:14}}>
            <div style={{
              width:96,height:96,borderRadius:12,
              background: data.logo ? 'transparent' : 'var(--bg-3)',
              border:'1px dashed var(--line-2)',
              display:'flex',alignItems:'center',justifyContent:'center',
              fontFamily:'var(--mono)',fontSize:32,fontWeight:600,
              color: data.brandColor
            }}>
              {data.workspaceName ? data.workspaceName.split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase() : '✦'}
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:8,justifyContent:'center'}}>
              <button className="btn btn-ghost" style={{padding:'8px 14px',fontSize:12,alignSelf:'flex-start'}}>Upload logo</button>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>SVG OR PNG · 200×200+ · WE'LL USE INITIALS UNTIL YOU UPLOAD</div>
            </div>
          </div>
        </div>

        <div>
          <FieldLabel>Brand color</FieldLabel>
          <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
            {colorOpts.map(c => (
              <button key={c} onClick={()=>update({brandColor:c})} style={{
                width:42,height:42,borderRadius:10,
                background:c, position:'relative',
                border:'2px solid', borderColor: data.brandColor===c ? 'var(--ink)' : 'transparent',
                outline:'1px solid var(--line)',outlineOffset:-2
              }}>
                {data.brandColor===c && <span style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',color:'#0a0a0a',fontWeight:700,fontSize:14}}>✓</span>}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Right: live preview */}
      <div style={{padding:'48px 32px',background:'#0a0a0b',borderLeft:'1px solid var(--line)',display:'flex',flexDirection:'column',justifyContent:'center',overflow:'auto'}}>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.08em',marginBottom:18,textTransform:'uppercase'}}>● LIVE PREVIEW · ADMIN SIDEBAR</div>

        <div style={{maxWidth:380,width:'100%',margin:'0 auto'}}>
          {/* Mock admin window */}
          <div style={{borderRadius:'var(--radius)',border:'1px solid var(--line)',background:'var(--bg-2)',overflow:'hidden',boxShadow:'0 24px 60px rgba(0,0,0,0.4)'}}>
            <div style={{padding:'10px 14px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:6}}>
              <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
              <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
              <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
              <span className="mono" style={{fontSize:10,color:'var(--ink-3)',marginLeft:8}}>solidatoms.com/{data.subdomain || 'workspace'}</span>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'140px 1fr',minHeight:280}}>
              <aside style={{padding:'14px 12px',background:'#0a0a0b',borderRight:'1px solid var(--line)',display:'flex',flexDirection:'column',gap:6}}>
                <div style={{display:'flex',alignItems:'center',gap:8,padding:'6px 8px',borderRadius:6,background:'rgba(255,255,255,0.02)'}}>
                  <span style={{
                    width:22,height:22,borderRadius:5,
                    background:`linear-gradient(135deg, ${data.brandColor}66, ${data.brandColor}22)`,
                    border:`1px solid ${data.brandColor}44`,
                    display:'flex',alignItems:'center',justifyContent:'center',
                    color: data.brandColor,fontFamily:'var(--mono)',fontSize:9,fontWeight:600
                  }}>{data.workspaceName ? data.workspaceName.split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase() : 'WS'}</span>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:11,fontWeight:600,color:'var(--ink)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{data.workspaceName || 'Workspace'}</div>
                  </div>
                </div>

                <div style={{height:1,background:'var(--line)',margin:'4px 0'}}/>

                {['◐ Dashboard','▤ Content','◇ Media','◍ Team','◯ Settings'].map((it,i) => (
                  <div key={i} style={{padding:'5px 8px',borderRadius:5,fontSize:10,color: i===0 ? data.brandColor : 'var(--ink-2)',background: i===0 ? `${data.brandColor}11` : 'transparent'}}>
                    {it}
                  </div>
                ))}
              </aside>
              <div style={{padding:'14px 16px'}}>
                <div style={{fontSize:13,fontWeight:500,marginBottom:8,color:'var(--ink)'}}>Welcome to {data.workspaceName || 'your workspace'}</div>
                <div style={{height:1,background:'var(--line)',marginBottom:10}}/>
                <div style={{height:8,width:'80%',background:'var(--bg-3)',borderRadius:2,marginBottom:6}}/>
                <div style={{height:8,width:'60%',background:'var(--bg-3)',borderRadius:2,marginBottom:14}}/>
                <button style={{padding:'5px 10px',borderRadius:6,background:data.brandColor,color:'#0a0a0a',fontSize:10,fontWeight:500,border:0}}>Get started</button>
              </div>
            </div>
          </div>

          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',textAlign:'center',marginTop:18,textTransform:'uppercase'}}>
            URL: solidatoms.com/{data.subdomain || 'workspace'}
          </div>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// STEP 2 — INVITE TEAM

const OBInvite = ({ data, update }) => {
  const updateInvite = (i, patch) => {
    const inv = [...data.invites];
    inv[i] = { ...inv[i], ...patch };
    update({ invites: inv });
  };
  const addInvite = () => update({ invites: [...data.invites, { email:'', role:'Editor' }] });
  const removeInvite = (i) => update({ invites: data.invites.filter((_,idx)=>idx!==i) });
  const roles = ['Admin','Editor','Writer','Reviewer'];

  return (
    <div style={{flex:1,padding:'48px 56px',display:'flex',flexDirection:'column',gap:28,maxWidth:880,margin:'0 auto',width:'100%'}}>
      <div>
        <div className="eyebrow" style={{marginBottom:14}}><span className="dot"/>Step 3 · Invite your team</div>
        <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:14}}>Who else needs access?</h2>
        <p style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.55,maxWidth:580}}>Send invite emails now or skip this step — you can always invite people later from Team & roles. Each invite uses 1 seat.</p>
      </div>

      {/* Bulk paste */}
      <div style={{padding:'14px 18px',borderRadius:10,border:'1px solid var(--line)',background:'rgba(212,255,58,0.04)',display:'flex',alignItems:'center',gap:14}}>
        <span style={{color:'var(--accent)',fontSize:16}}>⌘</span>
        <div style={{flex:1,fontSize:13,color:'var(--ink-2)'}}>
          <strong>Inviting a whole team?</strong> Paste a list of emails separated by commas or new lines.
        </div>
        <button className="btn btn-ghost" style={{padding:'6px 12px',fontSize:11}}>Bulk paste</button>
      </div>

      {/* Invites */}
      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {data.invites.map((inv, i) => (
          <div key={i} style={{display:'grid',gridTemplateColumns:'1fr 160px 40px',gap:10,alignItems:'center'}}>
            <input value={inv.email} onChange={e=>updateInvite(i,{email:e.target.value})}
              placeholder="teammate@company.com"
              style={{padding:'12px 14px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line-2)',color:'var(--ink)',fontSize:14,fontFamily:'var(--sans)',outline:'none'}}/>
            <select value={inv.role} onChange={e=>updateInvite(i,{role:e.target.value})} style={{padding:'11px 12px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line-2)',color:'var(--ink)',fontSize:13,fontFamily:'var(--sans)',outline:'none'}}>
              {roles.map(r => <option key={r} value={r}>{r}</option>)}
            </select>
            <button onClick={()=>removeInvite(i)} style={{width:40,height:40,borderRadius:8,border:'1px solid var(--line)',color:'var(--ink-3)',fontSize:16}}>×</button>
          </div>
        ))}
        <button onClick={addInvite} style={{padding:'10px 12px',borderRadius:8,fontSize:13,color:'var(--ink-3)',border:'1px dashed var(--line-2)',background:'transparent',display:'flex',alignItems:'center',gap:8,justifyContent:'center',marginTop:4}}>
          + Add another
        </button>
      </div>

      {/* Role legend */}
      <div style={{marginTop:14,padding:'18px 22px',borderRadius:10,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14,textTransform:'uppercase'}}>What each role can do</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14}}>
          {[
            ['Admin','Manage content, team, billing'],
            ['Editor','Write, edit, publish'],
            ['Writer','Drafts only, no publish'],
            ['Reviewer','Read + comment'],
          ].map(([r,d]) => (
            <div key={r}>
              <div style={{fontSize:13,fontWeight:500,marginBottom:4}}>{r}</div>
              <div style={{fontSize:11,color:'var(--ink-3)',lineHeight:1.4}}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// STEP 3 — INTEGRATIONS

const OBIntegrate = ({ data, update }) => {
  const toggle = (key) => update({ integrations: { ...data.integrations, [key]: !data.integrations[key] } });
  const integrations = [
    {id:'resend',n:'Resend',d:'Send transactional + marketing email',c:'#000',recommend:true,why:'Powers email studio'},
    {id:'stripe',n:'Stripe',d:'Accept payments + manage subscriptions',c:'#635bff',recommend:true,why:'For pricing + invoices'},
    {id:'posthog',n:'PostHog',d:'Product analytics, funnels, session replay',c:'#1d4aff',recommend:false},
    {id:'slack',n:'Slack',d:'Notifications for new leads + reviews',c:'#4a154b',recommend:false},
    {id:'sentry',n:'Sentry',d:'Error monitoring + performance',c:'#362d59',recommend:false},
    {id:'github',n:'GitHub',d:'Sync deployments + PR previews',c:'#181717',recommend:false},
    {id:'linear',n:'Linear',d:'Mirror issues from project mgmt',c:'#5e6ad2',recommend:false},
    {id:'cal',n:'Cal.com',d:'Book intro calls from your site',c:'#0a0a0a',recommend:false},
  ];

  return (
    <div style={{flex:1,padding:'48px 56px',display:'flex',flexDirection:'column',gap:28,maxWidth:1000,margin:'0 auto',width:'100%'}}>
      <div>
        <div className="eyebrow" style={{marginBottom:14}}><span className="dot"/>Step 4 · Connect your tools</div>
        <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:14}}>What do you already use?</h2>
        <p style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.55,maxWidth:580}}>Connect now and we'll pre-wire the integration. Skip and you can add any of these from Settings later — nothing's locked in.</p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:12}}>
        {integrations.map(i => {
          const on = data.integrations[i.id];
          return (
            <div key={i.id} style={{
              padding:'18px 20px',borderRadius:12,
              border:'1px solid', borderColor: on ? 'var(--accent)' : 'var(--line)',
              background: on ? 'linear-gradient(135deg, rgba(212,255,58,0.04), var(--bg-2))' : 'var(--bg-2)',
              display:'flex',alignItems:'center',gap:14, position:'relative',transition:'all .15s ease'
            }}>
              <span style={{width:42,height:42,borderRadius:10,background: i.c, display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:700,fontSize:16,flexShrink:0}}>{i.n[0]}</span>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
                  <span style={{fontSize:15,fontWeight:500,letterSpacing:'-0.005em'}}>{i.n}</span>
                  {i.recommend && <span className="mono" style={{fontSize:9,color:'var(--accent)',padding:'2px 6px',background:'rgba(212,255,58,0.1)',border:'1px solid rgba(212,255,58,0.3)',borderRadius:4,letterSpacing:'0.04em',textTransform:'uppercase'}}>Recommended</span>}
                </div>
                <div style={{fontSize:12,color:'var(--ink-3)',lineHeight:1.5}}>{i.d}</div>
                {on && i.why && <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.04em',marginTop:6,textTransform:'uppercase'}}>● {i.why}</div>}
              </div>
              <button onClick={()=>toggle(i.id)} style={{
                padding:'7px 14px',borderRadius:7,fontSize:12,fontWeight:500,
                background: on ? 'var(--accent)' : 'transparent',
                color: on ? '#0a0a0a' : 'var(--ink-2)',
                border:'1px solid', borderColor: on ? 'var(--accent)' : 'var(--line-2)'
              }}>{on ? '✓ Connected' : 'Connect'}</button>
            </div>
          );
        })}
      </div>

      <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',textAlign:'center',marginTop:8,textTransform:'uppercase'}}>
        ● {Object.values(data.integrations).filter(Boolean).length} OF {integrations.length} CONNECTED · ALL OPTIONAL
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// STEP 4 — SAMPLE DATA

const OBSeed = ({ data, update }) => {
  const seeds = [
    {id:'studio',t:'Studio starter',d:'Empty workspace with a few example projects so you can see how everything fits together.',includes:['3 sample projects','6 services','5 team profiles','12 blog drafts','42 sample tools'],c:'#d4ff3a'},
    {id:'agency',t:'Agency template',d:'Pre-loaded with agency-shaped content. Just replace names + links.',includes:['Agency services scaffold','Case study template','Client portal mock','Welcome email sequence'],c:'#7c9bff'},
    {id:'blank',t:'Blank slate',d:'Start completely empty. Best if you know what you want.',includes:['Just the design system','Empty collections','Default templates','Empty media library'],c:'#a78bfa'},
  ];
  return (
    <div style={{flex:1,padding:'48px 56px',display:'flex',flexDirection:'column',gap:28,maxWidth:1080,margin:'0 auto',width:'100%'}}>
      <div>
        <div className="eyebrow" style={{marginBottom:14}}><span className="dot"/>Step 5 · Starting point</div>
        <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:14}}>Want to start with sample data?</h2>
        <p style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.55,maxWidth:580}}>Pre-loaded content makes it easier to see how SolidAtoms works. Everything's safe to delete or modify.</p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
        {seeds.map(s => {
          const sel = data.seed === s.id;
          return (
            <button key={s.id} onClick={()=>update({seed:s.id})} style={{
              padding:'28px 30px',borderRadius:'var(--radius)',textAlign:'left',
              border:'1px solid', borderColor: sel ? s.c : 'var(--line)',
              background: sel ? `linear-gradient(180deg, ${s.c}10, var(--bg-2))` : 'var(--bg-2)',
              transition:'all .15s ease',display:'flex',flexDirection:'column',gap:14
            }}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
                <span style={{width:42,height:42,borderRadius:10,background:`linear-gradient(135deg, ${s.c}44, ${s.c}11)`,border:`1px solid ${s.c}55`,display:'flex',alignItems:'center',justifyContent:'center',color:s.c,fontWeight:600,fontFamily:'var(--mono)',fontSize:15}}>{s.t[0]}</span>
                <span style={{width:18,height:18,borderRadius:'50%',border:'1px solid', borderColor: sel ? s.c : 'var(--line-2)',display:'flex',alignItems:'center',justifyContent:'center',background: sel ? s.c : 'transparent'}}>
                  {sel && <span style={{width:8,height:8,borderRadius:'50%',background:'#0a0a0a'}}/>}
                </span>
              </div>
              <div>
                <div style={{fontSize:18,fontWeight:500,letterSpacing:'-0.015em',marginBottom:6}}>{s.t}</div>
                <div style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.5}}>{s.d}</div>
              </div>
              <div style={{paddingTop:14,borderTop:'1px solid var(--line)'}}>
                <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10,textTransform:'uppercase'}}>Includes</div>
                <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:6}}>
                  {s.includes.map(it => (
                    <li key={it} style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'var(--ink-2)'}}>
                      <span style={{color:s.c}}>{Icon.check()}</span>{it}
                    </li>
                  ))}
                </ul>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// STEP 5 — DONE + FIRST-RUN CHECKLIST

const OBDone = ({ data, setPage }) => {
  const [tasks, setTasks] = React.useState({
    profile:false, post:false, project:false, dns:false, domain:false, share:false
  });
  const completed = Object.values(tasks).filter(Boolean).length;
  const total = Object.keys(tasks).length;

  return (
    <div style={{flex:1,padding:'48px 56px',display:'flex',flexDirection:'column',gap:32,maxWidth:1100,margin:'0 auto',width:'100%'}}>
      {/* Hero */}
      <div style={{textAlign:'center',padding:'24px 0'}}>
        <div style={{
          display:'inline-flex',alignItems:'center',justifyContent:'center',
          width:80,height:80,borderRadius:'50%',
          background:`linear-gradient(135deg, ${data.brandColor}55, ${data.brandColor}22)`,
          border:`1px solid ${data.brandColor}66`,
          color: data.brandColor,marginBottom:24,
          animation:'donePop .5s cubic-bezier(.2,.7,.2,1)'
        }}>
          <span style={{fontSize:36}}>✓</span>
        </div>
        <style>{`@keyframes donePop { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }`}</style>
        <div className="eyebrow" style={{justifyContent:'center',marginBottom:18}}><span className="dot"/>You're all set</div>
        <h1 style={{fontSize:'clamp(36px,5vw,60px)',lineHeight:1,letterSpacing:'-0.035em',fontWeight:500,marginBottom:18,maxWidth:680,margin:'0 auto 18px'}}>
          Welcome to <span className="serif" style={{color:'var(--accent)'}}>{data.workspaceName || 'your studio'}</span>.
        </h1>
        <p style={{fontSize:17,color:'var(--ink-2)',lineHeight:1.5,maxWidth:560,margin:'0 auto 24px'}}>
          {data.invites.filter(i=>i.email).length > 0
            ? `We sent invites to ${data.invites.filter(i=>i.email).length} teammate${data.invites.filter(i=>i.email).length > 1 ? 's' : ''}. They'll get a welcome email from your shiny new Email Studio.`
            : 'Your workspace is ready. Here are a few things you can do next.'}
        </p>
        <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
          <button onClick={()=>setPage('cms')} className="btn btn-primary" style={{padding:'12px 22px',fontSize:14}}>Open dashboard {Icon.arrow()}</button>
          <button onClick={()=>setPage('home')} className="btn btn-ghost" style={{padding:'11px 20px',fontSize:14}}>Visit your site</button>
        </div>
      </div>

      {/* Checklist */}
      <div className="card" style={{padding:'28px 32px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
          <div>
            <h2 style={{fontSize:20,fontWeight:500,letterSpacing:'-0.015em',marginBottom:4}}>First-run checklist</h2>
            <div style={{fontSize:13,color:'var(--ink-3)'}}>A few things worth doing in your first week.</div>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:14}}>
            <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{completed} OF {total} DONE</div>
            <div style={{width:120,height:6,background:'var(--bg-3)',borderRadius:3,overflow:'hidden'}}>
              <div style={{width:`${(completed/total)*100}%`,height:'100%',background:'var(--accent)',transition:'width .3s ease'}}/>
            </div>
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          {[
            {id:'profile',t:'Set up your founder profile',d:'Add your bio, links, and headshot.',time:'2 min'},
            {id:'post',t:'Publish your first blog post',d:'Write something short. Anything.',time:'15 min'},
            {id:'project',t:'Import a past project',d:'Drag in a screenshot, fill in 4 fields.',time:'5 min'},
            {id:'dns',t:'Verify your sending domain',d:'Adds DKIM + SPF for email deliverability.',time:'10 min'},
            {id:'domain',t:'Connect your custom domain',d:'Replace solidatoms.com/yourname with your own URL.',time:'5 min'},
            {id:'share',t:'Share with the team',d:'Drop the workspace URL in Slack.',time:'30 sec'},
          ].map(t => (
            <button key={t.id} onClick={()=>setTasks(p=>({...p,[t.id]:!p[t.id]}))} style={{
              display:'grid',gridTemplateColumns:'24px 1fr 60px',gap:12,alignItems:'center',
              padding:'14px 16px',borderRadius:10,border:'1px solid',
              borderColor: tasks[t.id] ? 'rgba(212,255,58,0.3)' : 'var(--line)',
              background: tasks[t.id] ? 'rgba(212,255,58,0.04)' : 'var(--bg-3)',
              textAlign:'left',transition:'all .15s ease'
            }}>
              <span style={{
                width:22,height:22,borderRadius:'50%',
                border:'1.5px solid', borderColor: tasks[t.id] ? 'var(--accent)' : 'var(--line-2)',
                background: tasks[t.id] ? 'var(--accent)' : 'transparent',
                display:'flex',alignItems:'center',justifyContent:'center',
                color:'#0a0a0a',fontSize:11,fontWeight:700
              }}>{tasks[t.id] ? '✓' : ''}</span>
              <div style={{minWidth:0}}>
                <div style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em',marginBottom:3,textDecoration: tasks[t.id] ? 'line-through' : 'none',color: tasks[t.id] ? 'var(--ink-3)' : 'var(--ink)'}}>{t.t}</div>
                <div style={{fontSize:11,color:'var(--ink-3)'}}>{t.d}</div>
              </div>
              <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>{t.time}</span>
            </button>
          ))}
        </div>
      </div>

      {/* What's wired up */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
        <div className="card" style={{padding:'22px 24px'}}>
          <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:10}}>● WORKSPACE LIVE</div>
          <div style={{fontSize:15,fontWeight:500,marginBottom:6}}>{data.workspaceName}</div>
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>solidatoms.com/{data.subdomain}</div>
        </div>
        <div className="card" style={{padding:'22px 24px'}}>
          <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:10}}>● INTEGRATIONS</div>
          <div style={{fontSize:15,fontWeight:500,marginBottom:6}}>{Object.values(data.integrations).filter(Boolean).length} connected</div>
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>
            {Object.keys(data.integrations).filter(k=>data.integrations[k]).join(' · ').toUpperCase() || 'NONE YET'}
          </div>
        </div>
        <div className="card" style={{padding:'22px 24px'}}>
          <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:10}}>● WELCOME EMAIL</div>
          <div style={{fontSize:15,fontWeight:500,marginBottom:6}}>Queued · sends in 2 min</div>
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>VIA EMAIL STUDIO · M13</div>
        </div>
      </div>

      {/* Next steps */}
      <div style={{marginTop:8,padding:'20px 24px',borderRadius:10,border:'1px solid var(--line)',background:'rgba(255,255,255,0.02)',display:'flex',alignItems:'center',gap:18}}>
        <span style={{fontSize:20,color:'var(--accent)'}}>✦</span>
        <div style={{flex:1,fontSize:13,color:'var(--ink-2)'}}>
          <strong>Stuck on something?</strong> Hit ⌘K anywhere to open the command palette, or message us at hi@solidatoms.com — a human replies inside 24h.
        </div>
        <button className="btn btn-ghost" style={{padding:'7px 12px',fontSize:11}}>Open docs ↗</button>
      </div>
    </div>
  );
};

window.Onboarding = Onboarding;