// User Dashboard — Calm style (single focus, generous whitespace, slim icon nav)
const T = window.TB;

function DashboardScreen({ go, answers, mobile = false }) {
  const profile = deriveProfile(answers);
  const [tab, setTab] = React.useState('overview');
  const [docState, setDocState] = React.useState(() => {
    const m = {};
    profile.docs.forEach((d, i) => { m[d.t] = i < 2 ? 'uploaded' : i < 4 ? 'pending' : 'missing'; });
    return m;
  });

  if (mobile) return <DashboardMobile profile={profile} docState={docState} setDocState={setDocState}/>;

  return (
    <div style={{ minHeight: '100%', background: '#fff', fontFamily: T.font, color: T.ink2, display: 'flex' }}>
      <DashSidebar tab={tab} setTab={setTab} go={go}/>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <DashTopBar/>
        <div style={{ flex: 1, padding: '56px 72px', maxWidth: 1100, width: '100%', boxSizing: 'border-box' }}>
          {tab === 'overview' && <CalmOverview profile={profile} docState={docState}/>}
          {tab === 'documents' && <DocumentsTab profile={profile} docState={docState} setDocState={setDocState}/>}
          {tab === 'advisors' && <AdvisorsTab profile={profile}/>}
          {tab === 'filing' && <FilingTab profile={profile}/>}
          {tab === 'settings' && <SettingsTab/>}
        </div>
      </div>
    </div>
  );
}

// ─── Slim icon sidebar ─────────────────────────────────
function DashSidebar({ tab, setTab, go }) {
  const items = [
    { id: 'overview', l: 'Overview', i: Icon.home2 },
    { id: 'documents', l: 'Documents', i: Icon.doc },
    { id: 'advisors', l: 'Advisors', i: Icon.user },
    { id: 'filing', l: 'Filing', i: Icon.flag },
    { id: 'settings', l: 'Settings', i: Icon.shield },
  ];
  return (
    <aside style={{
      width: 76, background: '#fff',
      borderRight: `1px solid ${T.borderSoft}`,
      padding: '20px 0',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      flexShrink: 0, minHeight: '100vh',
    }}>
      <div style={{ padding: '6px 0 18px' }}>
        <Logo size={20} wordmark={false}/>
      </div>
      {items.map(it => {
        const active = tab === it.id;
        return (
          <SidebarBtn key={it.id} active={active} label={it.l} onClick={() => setTab(it.id)}>
            {it.i}
          </SidebarBtn>
        );
      })}
      <div style={{ flex: 1 }}/>
      <div style={{
        width: 38, height: 38, borderRadius: 999, marginBottom: 14,
        background: T.ink, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14, fontWeight: 600,
      }}>M</div>
    </aside>
  );
}

function SidebarBtn({ active, label, onClick, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div style={{ position: 'relative' }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
      <button
        onClick={onClick}
        style={{
          width: 40, height: 40, borderRadius: 11,
          background: active ? T.ink : 'transparent',
          color: active ? '#fff' : T.muted,
          border: 0, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 140ms ease',
        }}
      >{children}</button>
      {hover && !active && (
        <div style={{
          position: 'absolute', left: 'calc(100% + 4px)', top: '50%', transform: 'translateY(-50%)',
          background: T.ink, color: '#fff', padding: '4px 10px', borderRadius: 7,
          fontFamily: T.font, fontSize: 12, fontWeight: 500,
          whiteSpace: 'nowrap', pointerEvents: 'none', zIndex: 10,
        }}>{label}</div>
      )}
    </div>
  );
}

// ─── Top bar — minimal ─────────────────────────────────
function DashTopBar() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 36px',
      borderBottom: `1px solid ${T.borderSoft}`,
    }}>
      <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
        Case CR-2189 · Tax year 2024 · Encrypted
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <button style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'transparent', border: `1px solid ${T.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', color: T.ink2, position: 'relative',
        }}>
          {Icon.bell}
          <span style={{
            position: 'absolute', top: 6, right: 7, width: 7, height: 7,
            borderRadius: 999, background: T.mint, border: '2px solid #fff',
          }}/>
        </button>
        <button style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'transparent', border: `1px solid ${T.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', color: T.ink2,
        }}>{Icon.search}</button>
      </div>
    </div>
  );
}

// ─── Calm Overview ─────────────────────────────────────
function CalmOverview({ profile, docState }) {
  const uploaded = Object.values(docState).filter(s => s === 'uploaded').length;
  const total = Object.keys(docState).length;
  const refundLow = profile.refundRange.split('–')[0];
  return (
    <div>
      <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
        Welcome back, Maya
      </div>
      <h1 style={{
        fontSize: 44, fontWeight: 600, letterSpacing: -1.4, lineHeight: 1.05,
        color: T.ink, margin: '10px 0 6px', maxWidth: 640, textWrap: 'pretty',
      }}>
        Your refund estimate is&nbsp;ready.
      </h1>
      <p style={{ fontSize: 16, color: T.muted, margin: '0 0 48px', maxWidth: 580, lineHeight: 1.55 }}>
        {profile.subline}
      </p>

      {/* Big number */}
      <div style={{ marginBottom: 14 }}>
        <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 14 }}>
          Estimated refund · {profile.complexity.toLowerCase()} complexity
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, flexWrap: 'wrap' }}>
          <span style={{
            fontSize: 96, fontWeight: 600, letterSpacing: -3.6,
            color: T.ink, lineHeight: 0.95,
          }}>{refundLow}</span>
          <span style={{
            fontSize: 26, color: T.muted, fontWeight: 500,
            paddingBottom: 10, letterSpacing: -0.5,
          }}>– {profile.refundRange.split('–')[1]}</span>
        </div>
        <div style={{ fontSize: 13.5, color: T.muted, marginTop: 10 }}>
          Verified after document review · Range based on your answers
        </div>
      </div>

      {/* Primary actions */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 36, marginBottom: 56 }}>
        <Button variant="primary" size="lg" iconRight={Icon.arrow}>Upload next document</Button>
        <Button variant="ghost" size="lg">See full breakdown</Button>
      </div>

      {/* Three stat columns */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 48, paddingTop: 32, borderTop: `1px solid ${T.borderSoft}`,
      }}>
        {[
          { l: 'Profile', v: '62%', s: 'Complete', detail: <ProgressBar value={62}/> },
          { l: 'Documents', v: `${uploaded} of ${total}`, s: 'Encrypted · EU-only', detail: null },
          { l: 'Deadline', v: 'Jul 31', s: '79 days remaining', detail: null },
        ].map(s => (
          <div key={s.l}>
            <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 12 }}>{s.l}</div>
            <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: -1, color: T.ink, lineHeight: 1.05 }}>{s.v}</div>
            <div style={{ fontSize: 13, color: T.muted, marginTop: 8 }}>{s.s}</div>
            {s.detail && <div style={{ marginTop: 14 }}>{s.detail}</div>}
          </div>
        ))}
      </div>

      {/* Profile tags — subtle */}
      <div style={{ marginTop: 56, paddingTop: 32, borderTop: `1px solid ${T.borderSoft}` }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 10 }}>Your profile</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              <Badge tone="neutral">Employee</Badge>
              <Badge tone="neutral">Resident</Badge>
              <Badge tone="mint">Salary</Badge>
              <Badge tone="blue">RSU</Badge>
              <Badge tone="blue">Foreign</Badge>
              <Badge tone="amber">Crypto</Badge>
              <Badge tone="neutral">First-time filer</Badge>
            </div>
          </div>
          <button style={{
            background: 'none', border: 0, cursor: 'pointer',
            color: T.ink, fontSize: 13, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: T.font,
          }}>Edit profile {Icon.arrow}</button>
        </div>
      </div>

      {/* Advisor whisper */}
      <div style={{
        marginTop: 32, padding: '20px 24px',
        background: T.surfaceWarm, borderRadius: 16,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 999, flexShrink: 0,
            background: profile.advisors[0].color, color: T.ink,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 600, fontSize: 14,
          }}>{profile.advisors[0].n.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 14.5, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>
              {profile.advisors[0].n}
            </div>
            <div style={{ fontSize: 12.5, color: T.muted, marginTop: 2 }}>
              {profile.advisors[0].match}% match · {profile.advisors[0].tags.slice(0,2).join(' · ')} · {profile.advisors[0].price}
            </div>
          </div>
        </div>
        <Button variant="outline" size="md" iconRight={Icon.arrow}>Review match</Button>
      </div>
    </div>
  );
}

// ─── Documents Tab ─────────────────────────────────────
function DocumentsTab({ profile, docState, setDocState }) {
  const uploaded = Object.values(docState).filter(s => s === 'uploaded').length;
  return (
    <div>
      <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
        Documents · Encrypted at rest · EU-only
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36, marginTop: 10, flexWrap: 'wrap', gap: 16 }}>
        <h1 style={{ fontSize: 36, fontWeight: 600, color: T.ink, letterSpacing: -1.1, lineHeight: 1.1, margin: 0, maxWidth: 540, textWrap: 'pretty' }}>
          {uploaded} of {profile.docs.length} ready.
          <span style={{ color: T.muted, display: 'block' }}>Let's finish the rest.</span>
        </h1>
        <Button variant="primary" size="md" icon={Icon.upload}>Upload document</Button>
      </div>

      <div style={{ borderTop: `1px solid ${T.borderSoft}` }}>
        {profile.docs.map((d, i) => {
          const state = docState[d.t];
          return (
            <div key={d.t} style={{
              display: 'grid', gridTemplateColumns: '36px 1fr 1fr 130px 110px',
              alignItems: 'center', gap: 18,
              padding: '20px 4px',
              borderBottom: `1px solid ${T.borderSoft}`,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: state === 'uploaded' ? T.mintSoft : T.surface,
                color: state === 'uploaded' ? T.mintInk : T.ink2,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{Icon.doc}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>{d.t}</div>
                <div style={{ fontSize: 12, color: T.muted, marginTop: 2 }}>{d.req ? 'Required' : 'Optional'} · PDF · max 25 MB</div>
              </div>
              <div style={{ fontSize: 13, color: T.muted, lineHeight: 1.5 }}>{d.s}</div>
              <div>
                {state === 'uploaded' && <Badge tone="mint" icon={Icon.check}>Encrypted</Badge>}
                {state === 'pending' && <Badge tone="amber" icon={Icon.clock}>Processing</Badge>}
                {state === 'missing' && <Badge tone="neutral">Not uploaded</Badge>}
              </div>
              <Button
                variant={state === 'missing' ? 'primary' : 'outline'}
                size="sm"
                full
                onClick={() => {
                  if (state === 'missing') setDocState({ ...docState, [d.t]: 'pending' });
                  else if (state === 'pending') setDocState({ ...docState, [d.t]: 'uploaded' });
                }}
              >
                {state === 'missing' ? 'Upload' : state === 'pending' ? 'Complete' : 'View'}
              </Button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Advisors Tab ─────────────────────────────────────
function AdvisorsTab({ profile }) {
  return (
    <div>
      <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
        Matched advisors · Verified Steuerberater
      </div>
      <h1 style={{ fontSize: 36, fontWeight: 600, color: T.ink, letterSpacing: -1.1, lineHeight: 1.1, margin: '10px 0 8px', maxWidth: 580, textWrap: 'pretty' }}>
        Three advisors that fit your situation.
      </h1>
      <p style={{ fontSize: 15, color: T.muted, margin: '0 0 40px', maxWidth: 540 }}>
        You stay in control — your profile is only shared when you explicitly approve it.
      </p>
      <div style={{ display: 'grid', gap: 14, gridTemplateColumns: 'repeat(3, 1fr)' }}>
        {profile.advisors.map(a => (
          <Card key={a.n} pad={24} hover style={{ cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
              <div style={{
                width: 52, height: 52, borderRadius: 999, flexShrink: 0,
                background: a.color, color: T.ink,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 600, fontSize: 17,
              }}>{a.n.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15.5, fontWeight: 600, color: T.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.n}</div>
                <div style={{ fontSize: 12.5, color: T.muted, marginTop: 1 }}>{a.l}</div>
              </div>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 18 }}>
              {a.tags.map(t => <Badge key={t} tone="neutral">{t}</Badge>)}
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18 }}>
              <div>
                <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 4 }}>Match score</div>
                <div style={{ fontFamily: T.font, fontSize: 32, fontWeight: 600, color: T.mintInk, letterSpacing: -0.7, lineHeight: 1 }}>{a.match}<span style={{ fontSize: 16, color: T.muted }}>%</span></div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 4 }}>From</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: T.ink }}>{a.price.replace('From ', '')}</div>
              </div>
            </div>
            <Button variant="primary" size="md" full iconRight={Icon.arrow}>Review & share</Button>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 12, fontSize: 11, color: T.muted }}>
              <span style={{ color: T.mintInk }}>{Icon.shield}</span>
              Shared only with your explicit consent
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ─── Filing tab (placeholder) ─────────────────────────
function FilingTab({ profile }) {
  return (
    <div>
      <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
        Filing timeline · Tax year 2024
      </div>
      <h1 style={{ fontSize: 36, fontWeight: 600, color: T.ink, letterSpacing: -1.1, lineHeight: 1.1, margin: '10px 0 36px', maxWidth: 580, textWrap: 'pretty' }}>
        On track to file before Jul 31.
      </h1>
      <Timeline/>
    </div>
  );
}

function Timeline() {
  const steps = [
    { t: 'Created profile', d: '13 May 2026 · today', done: true, current: false },
    { t: 'Upload documents', d: '3 of 8 uploaded · ongoing', done: false, current: true },
    { t: 'Review with advisor', d: 'Suggested · Lena R.', done: false, current: false },
    { t: 'File via ELSTER', d: 'Target: by 30 June', done: false, current: false },
    { t: 'Refund expected', d: '~6–10 weeks after filing', done: false, current: false },
  ];
  return (
    <div style={{ maxWidth: 560 }}>
      {steps.map((s, i) => (
        <div key={i} style={{ display: 'flex', gap: 18, paddingBottom: i === steps.length - 1 ? 0 : 24, position: 'relative' }}>
          {i < steps.length - 1 && (
            <div style={{
              position: 'absolute', left: 14, top: 30, width: 2, height: 'calc(100% - 8px)',
              background: T.borderSoft,
            }}/>
          )}
          <div style={{
            width: 30, height: 30, borderRadius: 999, flexShrink: 0,
            background: s.done ? T.mint : s.current ? '#fff' : T.surface,
            border: s.current ? `2px solid ${T.mint}` : `1px solid ${T.border}`,
            color: s.done ? T.ink : T.muted,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative', zIndex: 1,
          }}>
            {s.done ? Icon.check : <div style={{ width: 7, height: 7, borderRadius: 999, background: s.current ? T.mint : T.faint }}/>}
          </div>
          <div style={{ flex: 1, paddingTop: 5 }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: s.done || s.current ? T.ink : T.muted, letterSpacing: -0.2 }}>{s.t}</div>
            <div style={{ fontSize: 13, color: T.muted, marginTop: 3 }}>{s.d}</div>
          </div>
          {s.current && <Badge tone="mint">In progress</Badge>}
        </div>
      ))}
    </div>
  );
}

// ─── Settings tab (placeholder) ─────────────────────────
function SettingsTab() {
  return (
    <div>
      <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
        Account security
      </div>
      <h1 style={{ fontSize: 36, fontWeight: 600, color: T.ink, letterSpacing: -1.1, lineHeight: 1.1, margin: '10px 0 36px', maxWidth: 580, textWrap: 'pretty' }}>
        Your account is protected.
      </h1>
      <div style={{ maxWidth: 600, display: 'flex', flexDirection: 'column' }}>
        {[
          { done: true, t: 'Email verified', d: 'maya@example.com' },
          { done: true, t: 'Strong password', d: 'AES-256 encrypted · never stored in plain text' },
          { done: false, t: 'Two-factor authentication', d: 'Add a second layer with TOTP or hardware key', action: 'Enable' },
          { done: false, t: 'ELSTER connection', d: 'Link your German tax office account for filing', action: 'Connect' },
        ].map(s => (
          <div key={s.t} style={{
            padding: '20px 0', borderBottom: `1px solid ${T.borderSoft}`,
            display: 'flex', alignItems: 'center', gap: 16,
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: 999,
              background: s.done ? T.mint : T.surface,
              color: T.ink,
              border: s.done ? 'none' : `1px solid ${T.border}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>{s.done ? Icon.check : <div style={{ width: 7, height: 7, borderRadius: 999, background: T.faint }}/>}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>{s.t}</div>
              <div style={{ fontSize: 13, color: T.muted, marginTop: 2 }}>{s.d}</div>
            </div>
            {s.action && <Button variant="outline" size="sm" iconRight={Icon.arrow}>{s.action}</Button>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Mobile dashboard — calm style ──────────────────────
function DashboardMobile({ profile, docState, setDocState }) {
  const refundLow = profile.refundRange.split('–')[0];
  return (
    <div style={{ background: '#fff', minHeight: '100%', fontFamily: T.font, color: T.ink2 }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 20px',
      }}>
        <Logo size={18}/>
        <div style={{ display: 'flex', gap: 10 }}>
          <button style={{ width: 34, height: 34, borderRadius: 10, background: T.surface, border: `1px solid ${T.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: T.ink2 }}>{Icon.bell}</button>
          <div style={{ width: 34, height: 34, borderRadius: 999, background: T.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 600 }}>M</div>
        </div>
      </div>
      <div style={{ padding: '20px 24px 24px' }}>
        <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
          Welcome back, Maya · CR-2189
        </div>
        <h1 style={{
          fontSize: 28, fontWeight: 600, letterSpacing: -0.8, lineHeight: 1.1,
          color: T.ink, margin: '8px 0 28px', textWrap: 'pretty',
        }}>Your refund estimate is ready.</h1>

        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>Estimated refund</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
            <span style={{ fontSize: 56, fontWeight: 600, letterSpacing: -2, color: T.ink, lineHeight: 1 }}>{refundLow}</span>
            <span style={{ fontSize: 16, color: T.muted, fontWeight: 500, paddingBottom: 5 }}>– {profile.refundRange.split('–')[1]}</span>
          </div>
        </div>

        <Button variant="primary" size="lg" full iconRight={Icon.arrow}>Upload next document</Button>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
          paddingTop: 28, marginTop: 28,
          borderTop: `1px solid ${T.borderSoft}`,
        }}>
          {[
            { l: 'Profile', v: '62%' },
            { l: 'Docs', v: `${Object.values(docState).filter(s => s === 'uploaded').length}/${Object.keys(docState).length}` },
            { l: 'Days left', v: '79' },
          ].map(s => (
            <div key={s.l}>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 6 }}>{s.l}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5, color: T.ink, lineHeight: 1 }}>{s.v}</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 28, padding: '16px 18px',
          background: T.surfaceWarm, borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 999, flexShrink: 0,
            background: profile.advisors[0].color, color: T.ink,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 600, fontSize: 13,
          }}>{profile.advisors[0].n.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: T.ink }}>{profile.advisors[0].n}</div>
            <div style={{ fontSize: 11.5, color: T.muted }}>{profile.advisors[0].match}% match · {profile.advisors[0].tags[0]}</div>
          </div>
          <div style={{ color: T.muted }}>{Icon.arrow}</div>
        </div>
      </div>

      {/* Bottom nav */}
      <div style={{
        position: 'sticky', bottom: 0,
        background: '#fff', borderTop: `1px solid ${T.borderSoft}`,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        padding: '8px 0',
      }}>
        {[
          { i: Icon.home2, l: 'Home', a: true },
          { i: Icon.doc, l: 'Docs' },
          { i: Icon.user, l: 'Advisors' },
          { i: Icon.shield, l: 'Settings' },
        ].map(x => (
          <button key={x.l} style={{
            background: 'none', border: 0, cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            padding: '6px 0',
            color: x.a ? T.ink : T.muted,
          }}>
            {x.i}
            <span style={{ fontSize: 11, fontWeight: x.a ? 600 : 500 }}>{x.l}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { DashboardScreen });