const suF = 'var(--font-body)';
const suC = { ink: 'var(--text-heading)', muted: 'var(--text-muted)', label: 'var(--ah-ink-500)', teal: 'var(--ah-teal-600)', tealSoft: 'var(--ah-teal-100)', line: 'var(--border-subtle)', page: 'var(--surface-page)', white: 'var(--ah-white)', coral: 'var(--ah-coral-500)' };

function SuIcon({ name, size = 18, color = 'currentColor' }) {
  const url = '../../icons/' + name + '.svg';
  return <span style={{ display: 'inline-block', flex: 'none', width: size, height: size, background: color, WebkitMask: 'url(' + url + ') center/contain no-repeat', mask: 'url(' + url + ') center/contain no-repeat' }}></span>;
}
function SuStatus() {
  if (window.AHStatusBar) return <window.AHStatusBar />;
  return <div style={{ height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', fontFamily: suF, fontWeight: 600, fontSize: 14, color: suC.ink }}><span>9:41</span><span style={{ display: 'flex', gap: 8 }}><SuIcon name="signal" size={17} /><SuIcon name="wifi" size={17} /><SuIcon name="battery-full" size={22} /></span></div>;
}
function SuHeader({ step, total, title, sub, onBack }) {
  return <div style={{ background: suC.white, padding: '12px 24px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <button onClick={onBack} style={{ all: 'unset', cursor: 'pointer', width: 36, height: 36, borderRadius: 18, background: 'var(--ah-ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: suC.ink }}><SuIcon name="chevron-left" size={20} /></button>
      <span style={{ fontFamily: suF, fontSize: 12, fontWeight: 600, color: suC.label, letterSpacing: '1px', textTransform: 'uppercase' }}>Step {step} of {total}</span>
    </div>
    <div style={{ display: 'flex', gap: 6 }}>{Array.from({ length: total }).map((_, i) => <div key={i} style={{ flex: 1, height: 6, borderRadius: 3, background: i < step ? suC.teal : 'var(--ah-ink-100)' }}></div>)}</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{ fontFamily: suF, fontSize: 20, fontWeight: 700, color: suC.ink, textWrap: 'pretty' }}>{title}</div>
      <div style={{ fontFamily: suF, fontSize: 13, color: suC.muted, lineHeight: 1.4, textWrap: 'pretty' }}>{sub}</div>
    </div>
  </div>;
}
function SuSection({ title, children }) {
  return <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
    <div style={{ fontFamily: suF, fontSize: 13, fontWeight: 600, color: suC.label, letterSpacing: '1px', textTransform: 'uppercase' }}>{title}</div>
    {children}
  </div>;
}
function SuCard({ children, gap = 14 }) {
  return <div style={{ background: suC.white, borderRadius: 16, padding: 16, display: 'flex', flexDirection: 'column', gap, boxShadow: '0px 4px 12px 0px rgba(0,0,0,0.0392)' }}>{children}</div>;
}
function SuField({ label, value, onChange, hint }) {
  return <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
    <span style={{ fontFamily: suF, fontSize: 11, fontWeight: 600, color: suC.label, textTransform: 'uppercase', letterSpacing: '.5px' }}>{label}</span>
    <input value={value} onChange={e => onChange(e.target.value)} style={{ fontFamily: suF, fontSize: 15, fontWeight: 500, color: suC.ink, border: '1px solid ' + suC.line, borderRadius: 10, padding: '12px 14px', outline: 'none', background: suC.page }} />
    {hint ? <span style={{ fontFamily: suF, fontSize: 11, color: suC.muted }}>{hint}</span> : null}
  </label>;
}
function SuChips({ options, value, onToggle }) {
  return <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{options.map(o => { const on = value.includes(o); return <button key={o} onClick={() => onToggle(o)} style={{ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', borderRadius: 8, fontFamily: suF, fontSize: 13, fontWeight: 600, background: on ? suC.tealSoft : suC.white, color: on ? 'var(--ah-teal-700)' : suC.muted, boxShadow: 'inset 0 0 0 1px ' + (on ? suC.teal : suC.line) }}>{on ? <SuIcon name="check" size={14} /> : null}{o}</button>; })}</div>;
}
function SuToggle({ on, onClick }) {
  return <button onClick={onClick} style={{ all: 'unset', cursor: 'pointer', flex: 'none', width: 44, height: 26, borderRadius: 13, background: on ? suC.teal : 'var(--border-strong)', position: 'relative', transition: 'background .15s' }}><span style={{ position: 'absolute', top: 3, left: on ? 21 : 3, width: 20, height: 20, borderRadius: 10, background: suC.white, transition: 'left .15s', boxShadow: '0 1px 2px rgba(0,0,0,.15)' }}></span></button>;
}
function SuRow({ icon, title, sub, right, iconBg = 'var(--ah-blue-100)', iconColor = suC.teal }) {
  return <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <span style={{ width: 40, height: 40, borderRadius: 10, background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><SuIcon name={icon} size={19} color={iconColor} /></span>
    <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}><span style={{ fontFamily: suF, fontSize: 14, fontWeight: 600, color: suC.ink }}>{title}</span><span style={{ fontFamily: suF, fontSize: 12, color: suC.muted, lineHeight: 1.35 }}>{sub}</span></span>
    {right}
  </div>;
}
function SuFooter({ label, onClick, disabled, note }) {
  return <div style={{ flex: 'none', padding: '14px 19px 30px', background: suC.page, borderTop: '1px solid ' + suC.line, display: 'flex', flexDirection: 'column', gap: 10 }}>
    {note ? <div style={{ fontFamily: suF, fontSize: 12, color: suC.muted, textAlign: 'center' }}>{note}</div> : null}
    <button onClick={disabled ? undefined : onClick} style={{ all: 'unset', cursor: disabled ? 'default' : 'pointer', height: 50, borderRadius: 10, background: disabled ? 'var(--border-strong)' : suC.teal, color: suC.white, fontFamily: suF, fontSize: 15, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{label}</button>
  </div>;
}
function useSetupState() {
  const [s, setS] = React.useState(() => { try { return JSON.parse(localStorage.getItem('ah-advisor-setup')) || null; } catch (e) { return null; } });
  const state = s || { name: 'Maya Reyes', title: 'Senior Financial Advisor', firm: 'Northbridge Wealth Partners', npn: '18842716', states: ['California', 'Washington'], lines: ['Life', 'Annuities'], carriers: ['Aegis Mutual Assurance'], sources: { salesforce: true, gmail: true, drive: false, carrier: false }, reviewer: 'Daniel Okafor, CCO', attest: false, digest: true, alerts: true };
  const set = (patch) => { const n = Object.assign({}, state, patch); setS(n); localStorage.setItem('ah-advisor-setup', JSON.stringify(n)); };
  const toggle = (key, v) => set({ [key]: state[key].includes(v) ? state[key].filter(x => x !== v) : [...state[key], v] });
  return [state, set, toggle];
}
function SuShell({ children }) {
  return <div style={{ width: 430, height: 932, background: suC.page, display: 'flex', flexDirection: 'column', fontFamily: suF, overflow: 'hidden' }}>{children}</div>;
}
const suBody = { flex: 1, minHeight: 0, overflowY: 'auto', scrollbarWidth: 'none', padding: '20px 19px 8px', display: 'flex', flexDirection: 'column', gap: 22 };

function AdvisorSetupProfile({ go }) {
  const [s, set, toggle] = useSetupState();
  return <SuShell><SuStatus />
    <SuHeader step={1} total={4} title="Set up your advisor profile" sub="This is how you appear on proposals, client emails and the decision trail." onBack={() => go('loading')} />
    <div style={suBody}>
      <SuCard>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ flex: 'none', width: 64, height: 64, borderRadius: 32, overflow: 'hidden', background: 'var(--ah-blue-100)', display: 'block' }}><img src="../../assets/avatar-advisor.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /></span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}><span style={{ fontFamily: suF, fontSize: 14, fontWeight: 600, color: suC.ink }}>Profile photo</span><span style={{ fontFamily: suF, fontSize: 13, fontWeight: 600, color: suC.teal, cursor: 'pointer' }}>Change photo</span></div>
        </div>
        <SuField label="Full name" value={s.name} onChange={v => set({ name: v })} />
        <SuField label="Title" value={s.title} onChange={v => set({ title: v })} />
        <SuField label="Firm" value={s.firm} onChange={v => set({ firm: v })} />
        <SuField label="National Producer Number" value={s.npn} onChange={v => set({ npn: v })} hint="Used to verify licensing with carriers." />
      </SuCard>
      <SuSection title="Licensed states"><SuChips options={['California', 'Washington', 'Oregon', 'Nevada', 'Arizona', 'New York']} value={s.states} onToggle={v => toggle('states', v)} /></SuSection>
    </div>
    <SuFooter label="Continue" disabled={!s.name.trim()} onClick={() => go('setup2')} />
  </SuShell>;
}
function AdvisorSetupPractice({ go }) {
  const [s, , toggle] = useSetupState();
  return <SuShell><SuStatus />
    <SuHeader step={2} total={4} title="Your practice" sub="AdvisorHub uses this to prioritize your Smart Queue and pick the right disclosure templates." onBack={() => go('setup1')} />
    <div style={suBody}>
      <SuSection title="Lines of business"><SuChips options={['Life', 'Annuities', 'Long-term care', 'Disability', 'Group benefits']} value={s.lines} onToggle={v => toggle('lines', v)} /></SuSection>
      <SuSection title="Carriers you place with"><SuChips options={['Aegis Mutual Assurance', 'Harbor Life', 'Summit National', 'Evergreen Mutual']} value={s.carriers} onToggle={v => toggle('carriers', v)} /></SuSection>
      <SuCard gap={4}>
        <SuRow icon="users" title="Book of business" sub="We'll import clients and policies from your CRM in the next step." />
      </SuCard>
    </div>
    <SuFooter label="Continue" disabled={!s.lines.length} onClick={() => go('setup3')} />
  </SuShell>;
}
function AdvisorSetupSources({ go }) {
  const [s, set] = useSetupState();
  const src = [['salesforce', 'cloud', 'Salesforce CRM', 'Client and policy details'], ['gmail', 'mail', 'Gmail', 'Client correspondence and attachments'], ['drive', 'folder', 'Google Drive', 'Statements, scans and PDFs'], ['carrier', 'building-2', 'Carrier in-force portals', 'Illustrations and policy values']];
  const n = Object.values(s.sources).filter(Boolean).length;
  return <SuShell><SuStatus />
    <SuHeader step={3} total={4} title="Connect your data sources" sub="AdvisorHub assembles each case from these. You can change them later in Settings." onBack={() => go('setup2')} />
    <div style={suBody}>
      <SuCard gap={16}>{src.map(([k, ic, t, sub]) => <SuRow key={k} icon={ic} title={t} sub={s.sources[k] ? 'Connected · ' + sub : sub} iconBg={s.sources[k] ? 'var(--ah-teal-100)' : 'var(--ah-ink-100)'} iconColor={s.sources[k] ? suC.teal : suC.label} right={<SuToggle on={s.sources[k]} onClick={() => set({ sources: Object.assign({}, s.sources, { [k]: !s.sources[k] }) })} />} />)}</SuCard>
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '12px 14px', borderRadius: 10, background: 'var(--ah-blue-100)' }}><SuIcon name="shield-check" size={18} color={suC.teal} /><span style={{ fontFamily: suF, fontSize: 12, color: suC.muted, lineHeight: 1.45 }}>Read-only access. AdvisorHub never sends email or edits CRM records without your approval.</span></div>
    </div>
    <SuFooter label="Continue" note={n + ' of 4 sources connected'} disabled={!n} onClick={() => go('setup4')} />
  </SuShell>;
}
function AdvisorSetupCompliance({ go }) {
  const [s, set] = useSetupState();
  return <SuShell><SuStatus />
    <SuHeader step={4} total={4} title="Compliance & notifications" sub="Set who reviews your client-facing material and how you hear about new work." onBack={() => go('setup3')} />
    <div style={suBody}>
      <SuSection title="Compliance reviewer"><SuCard gap={4}><SuField label="Supervising principal" value={s.reviewer} onChange={v => set({ reviewer: v })} hint="Receives proposals flagged for review." /></SuCard></SuSection>
      <SuSection title="Notifications"><SuCard gap={16}>
        <SuRow icon="sun" title="Morning worklist" sub="Daily at 8:00 AM" right={<SuToggle on={s.digest} onClick={() => set({ digest: !s.digest })} />} />
        <SuRow icon="bell" title="Critical review alerts" sub="Carrier changes and compliance flags" iconBg="var(--ah-coral-100)" iconColor={suC.coral} right={<SuToggle on={s.alerts} onClick={() => set({ alerts: !s.alerts })} />} />
      </SuCard></SuSection>
      <button onClick={() => set({ attest: !s.attest })} style={{ all: 'unset', cursor: 'pointer', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <span style={{ flex: 'none', width: 22, height: 22, borderRadius: 6, background: s.attest ? suC.teal : suC.white, boxShadow: s.attest ? 'none' : 'inset 0 0 0 1.5px var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: suC.white }}>{s.attest ? <SuIcon name="check" size={15} /> : null}</span>
        <span style={{ fontFamily: suF, fontSize: 13, color: suC.ink, lineHeight: 1.45 }}>I understand AdvisorHub drafts are suggestions. I remain responsible for final recommendations and client communication.</span>
      </button>
    </div>
    <SuFooter label="Finish setup" disabled={!s.attest} onClick={() => go('setupDone')} />
  </SuShell>;
}
function AdvisorSetupDone({ go }) {
  const [s] = useSetupState();
  const first = (s.name || 'Maya').trim().split(' ')[0];
  const n = Object.values(s.sources).filter(Boolean).length;
  const rows = [['badge-check', 'Profile verified', s.title + ' · ' + s.states.length + ' licensed states'], ['plug', n + ' data sources connected', 'Importing clients and policies now'], ['shield-check', 'Compliance reviewer set', s.reviewer]];
  return <SuShell><SuStatus />
    <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '64px 24px 8px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
      <span style={{ width: 96, height: 96, borderRadius: 48, background: 'var(--ah-teal-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><SuIcon name="check" size={44} color={suC.teal} /></span>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', textAlign: 'center' }}>
        <div style={{ fontFamily: suF, fontSize: 24, fontWeight: 800, color: suC.ink }}>You're all set, {first}</div>
        <div style={{ fontFamily: suF, fontSize: 14, color: suC.muted, lineHeight: 1.45, maxWidth: 320, textWrap: 'pretty' }}>We found 3 cases that need your attention today. Your worklist is ready.</div>
      </div>
      <div style={{ alignSelf: 'stretch' }}><SuCard gap={16}>{rows.map(([ic, t, sub]) => <SuRow key={t} icon={ic} title={t} sub={sub} iconBg="var(--ah-teal-100)" />)}</SuCard></div>
    </div>
    <SuFooter label="Go to my worklist" onClick={() => go('home')} />
  </SuShell>;
}
Object.assign(window, { AdvisorSetupProfile, AdvisorSetupPractice, AdvisorSetupSources, AdvisorSetupCompliance, AdvisorSetupDone });