// Personas — the demo account. One Opsmera, configured around who is using it.
// Switching persona changes identity, where you land, which nav you see, and how
// the dashboard frames the day around that person's real pain points.
const PERSONAS = {
  strata: {
    id: 'strata', name: 'Jessica Young', initials: 'JY', role: 'Strata manager', org: '127 schemes · 4,180 lots',
    home: 'today', accent: '#33D499',
    blurb: 'The control room for a whole book. Every deadline, invoice, AGM and ticket — ranked and ahead.',
    pains: ['Too many deadlines, too few hours', 'Compliance exposure across 127 schemes', 'Chasing approvals & invoices'],
    sections: ['today', 'assistant', 'intake', 'board', 'compliance', 'portfolio', 'invoices', 'meetings', 'comms', 'field', 'reports'],
    hero: {
      eyebrow: 'Monday, 8 June 2026 · 127 schemes · 4,180 lots',
      h1: 'Good morning, Jessica.<br />Eight deadlines need you <em>today.</em>',
      sub: 'The control room is calm. Across 127 schemes, here is what moves the book forward this morning.',
      pulse: [['8', 'Due ≤ 48h', true], ['34', 'In intake'], ['2h 10m', 'Avg response'], ['93.6%', 'Compliance']],
    },
  },
  treasurer: {
    id: 'treasurer', name: 'Helen Bennett', initials: 'HB', role: 'Committee treasurer', org: 'Harbourview · SP 84021',
    home: 'invoices', accent: '#5B9BF0',
    blurb: 'Your scheme, with the money in full view. Approve spend with the whole history in front of you.',
    pains: ['Approving spend without the full picture', 'Is this invoice fair and compliant?', 'Owners asking where the money goes'],
    sections: ['today', 'assistant', 'invoices', 'meetings', 'board', 'compliance', 'comms', 'reports', 'portfolio'],
    hero: {
      eyebrow: 'Committee treasurer · Harbourview · SP 84021 · 142 lots',
      h1: 'Welcome back, Helen.<br />Four approvals are <em>waiting on you.</em>',
      sub: 'Your scheme at a glance. Approve with the full history attached — every dollar evidenced and audit-ready.',
      pulse: [['4', 'Awaiting you', true], ['$5,600', 'To approve'], ['$184k', 'FYTD spend'], ['88%', 'Budget used']],
    },
  },
  building: {
    id: 'building', name: 'David Johnson', initials: 'DJ', role: 'Building manager', org: 'The Lumen · SP 67203',
    home: 'intake', accent: '#E8B23E',
    blurb: 'Everything happening in your building, in one place. Log by voice, close the loop with residents.',
    pains: ['Residents chasing me for updates', 'Logging jobs while on the move', 'Knowing what is actually open on site'],
    sections: ['today', 'assistant', 'intake', 'board', 'comms', 'field', 'compliance', 'portfolio'],
    hero: {
      eyebrow: 'Building manager · The Lumen · SP 67203 · 210 lots',
      h1: 'Morning, David.<br />Three things are <em>open on site.</em>',
      sub: 'Your building in one view. Capture work by voice in 20 seconds and keep every resident in the loop.',
      pulse: [['3', 'Open on site', true], ['12', 'In intake'], ['96%', 'Compliance'], ['4.6★', 'Resident CSAT']],
    },
  },
  maintenance: {
    id: 'maintenance', name: 'Cameron Smith', initials: 'CS', role: 'Maintenance lead', org: 'FM & trades · 6 crews',
    home: 'field', accent: '#9B8CF0',
    blurb: 'Your run sheet for the day. Every job, site and certificate — scheduled to standard, evidenced from the phone.',
    pains: ['What is next, and where?', 'AS 1851 schedules per asset', 'Photo sign-offs and getting paid'],
    sections: ['today', 'assistant', 'field', 'board', 'intake', 'compliance'],
    hero: {
      eyebrow: 'Maintenance lead · FM & trades · 6 crews on today',
      h1: 'Hey Cameron.<br />Nine jobs are <em>ready to run.</em>',
      sub: 'Today’s run sheet, in order. Every job to standard, evidenced with photos, closed with a defensible trail.',
      pulse: [['9', 'Jobs today', true], ['4', 'On site now'], ['23', 'AS 1851 due'], ['$12.4k', 'Approved work']],
    },
  },
};
const PERSONA_ORDER = ['strata', 'treasurer', 'building', 'maintenance'];

// ---- Login / persona-select (the demo entry) ------------------------------
function Login({ onPick }) {
  return (
    <div className="login">
      <div className="login-z">
        <div className="login-top">
          <div className="login-logo"><img src="../assets/mark-white.svg" alt="" /><b>OPSMERA</b></div>
          <span className="demo-badge"><span className="dot" />Live demo · sample data</span>
        </div>
        <div className="login-hero">
          <div className="eyebrow">The control room for property operations</div>
          <h1>Pick who you are.<br /><em>The system reshapes</em> around you.</h1>
          <p>Opsmera is one platform, configured for each team. Choose a persona to see the same portfolio through their eyes — their landing screen, their tools, their pain points.</p>
        </div>
        <div className="persona-grid">
          {PERSONA_ORDER.map(id => {
            const p = PERSONAS[id];
            return (
              <button className="persona-card" key={id} onClick={() => onPick(id)} style={{ '--pa': p.accent }}>
                <div className="pc-top">
                  <div className="pc-av" style={{ background: p.accent }}>{p.initials}</div>
                  <div className="pc-id"><div className="pc-name">{p.name}</div><div className="pc-role">{p.role}</div></div>
                  <span className="pc-go"><Icon name="arrow-right" /></span>
                </div>
                <div className="pc-org">{p.org}</div>
                <p className="pc-blurb">{p.blurb}</p>
                <div className="pc-pains">
                  {p.pains.map((pain, i) => <span key={i} className="pc-pain"><Icon name="dot" />{pain}</span>)}
                </div>
                <div className="pc-enter">Enter as {p.role.toLowerCase()} <Icon name="arrow-right" /></div>
              </button>
            );
          })}
        </div>
        <div className="login-foot">Demo environment · all names, buildings and figures are illustrative.</div>
      </div>
    </div>
  );
}

// ---- Persona switcher (modal body, opened from sidebar/topbar) -------------
function openSwitcher(current) {
  window.opsModal({
    title: 'Switch persona', sub: 'Same portfolio, seen through a different role',
    body: (
      <div className="switch-list">
        {PERSONA_ORDER.map(id => {
          const p = PERSONAS[id];
          return (
            <button key={id} className={`switch-row ${id === current ? 'on' : ''}`}
              onClick={() => { window.opsCloseModal(); if (id !== current) window.opsSwitchPersona(id); }}>
              <div className="sr-av" style={{ background: p.accent }}>{p.initials}</div>
              <div className="sr-id"><div className="sr-name">{p.name}</div><div className="sr-role">{p.role} · {p.org}</div></div>
              {id === current ? <span className="sr-now">Current</span> : <Icon name="arrow-right" />}
            </button>
          );
        })}
        <button className="switch-out" onClick={() => { window.opsCloseModal(); window.opsSignOut(); }}>
          <Icon name="log-out" />Back to sign-in
        </button>
      </div>
    )
  });
}

Object.assign(window, { PERSONAS, PERSONA_ORDER, Login, openSwitcher });