const { IconButton, Avatar } = window.CLIQDesignSystem_d61053;

/**
 * The Sovereign Club — senior home screen.
 * Massive touch targets, explicit text labels, biometric-first sign in.
 * White background for accessibility.
 */
window.SeniorHome = function SeniorHome({ onOpenPortal, onTalk, onGetHelp }) {
  const portals = [
    { id: 'accounts', icon: 'key',         label: 'My Accounts',   sub: 'Easy account search and login with Face ID, Touch ID or Passkey', safe: false }, // spoof demo — triggers Pause & Review
    { id: 'recent',   icon: 'history',     label: 'Recent Logins', sub: 'Pick up where you left off', safe: true, toast: 'Reopening your recent logins…' },
    { id: 'cliq',     icon: 'users-group', label: 'My CLIQ',       sub: 'View and manage members of your inner circle', safe: true, toast: 'Opening your inner circle…' },
    { id: 'email',    icon: 'mail',        label: 'My Email',      sub: 'Easy access to your scam-screened email inbox(es)', safe: true, toast: 'Opening your scam-screened inbox…' },
  ];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#fff' }}>
      {/* header */}
      <div style={{ padding: '8px 22px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Avatar name="Margaret Ellis" size={46} ring status="safe" />
          <div>
            <div style={{ fontSize: 14, color: 'var(--text-muted)' }}>Good afternoon,</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--navy-800)', lineHeight: 1.1 }}>Margaret</div>
          </div>
        </div>
        <IconButton icon="settings" variant="soft" tone="navy" aria-label="Settings" />
      </div>

      {/* protected banner */}
      <div style={{ margin: '10px 18px 0', display: 'flex', alignItems: 'center', gap: 10,
        background: 'var(--surface-safe)', borderRadius: 'var(--radius-pill)', padding: '11px 16px' }}>
        <i className="ti ti-shield-check" style={{ fontSize: 22, color: 'var(--teal-700)' }} aria-hidden="true" />
        <span style={{ fontSize: 15, color: 'var(--teal-700)', fontWeight: 600 }}>CLIQ is protecting you</span>
      </div>

      {/* portal list */}
      <div style={{ padding: '16px 18px 0', flex: 1, overflowY: 'auto' }}>
        <div style={{ fontSize: 15, color: 'var(--text-muted)', marginBottom: 10, fontWeight: 600 }}>What would you like to do?</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {portals.map(p => (
            <button key={p.id} onClick={() => onOpenPortal(p)} style={{
              background: 'var(--violet-100)', border: 'none', borderRadius: 'var(--radius-2xl)',
              padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 15,
              cursor: 'pointer', minHeight: 84, textAlign: 'left', width: '100%',
              transition: 'transform var(--dur-fast)', fontFamily: 'var(--font-sans)',
            }}
            onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
            onMouseUp={e => e.currentTarget.style.transform = 'none'}
            onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
              <span style={{ width: 54, height: 54, borderRadius: 16, background: 'var(--violet-500)', flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i className={`ti ti-${p.icon}`} style={{ fontSize: 28, color: '#fff' }} aria-hidden="true" />
              </span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 19, fontWeight: 700, color: 'var(--navy-800)', lineHeight: 1.15 }}>{p.label}</span>
                <span style={{ display: 'block', fontSize: 14, color: 'var(--ink-600)', lineHeight: 1.35, marginTop: 3 }}>{p.sub}</span>
              </span>
              <i className="ti ti-fingerprint" style={{ fontSize: 24, color: 'var(--teal-700)', flexShrink: 0 }} aria-hidden="true" />
            </button>
          ))}
        </div>
      </div>

      {/* bottom dock */}
      <div style={{ display: 'flex', gap: 12, padding: '12px 18px 20px', flexShrink: 0 }}>
        <button onClick={onTalk} style={{
          flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          background: 'var(--cliq-teal)', border: 'none', borderRadius: 'var(--radius-xl)',
          padding: 16, cursor: 'pointer', boxShadow: 'var(--shadow-teal)', fontFamily: 'var(--font-sans)',
        }}>
          <i className="ti ti-microphone" style={{ fontSize: 24, color: 'var(--navy-800)' }} aria-hidden="true" />
          <span style={{ fontSize: 17, fontWeight: 700, color: 'var(--navy-800)' }}>Talk to CLIQ</span>
        </button>
        <button onClick={onGetHelp} style={{
          width: 64, display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'var(--navy-800)', border: 'none', borderRadius: 'var(--radius-xl)', cursor: 'pointer',
        }} aria-label="Get human help">
          <i className="ti ti-headset" style={{ fontSize: 26, color: '#fff' }} aria-hidden="true" />
        </button>
      </div>
    </div>
  );
}