function ClientPortalPage({ onBook }) {
  const { N, nStyles, useMediaQuery, SectionLabel, CTAStrip, GridBg } = window;
  const isMobile = useMediaQuery('(max-width: 768px)');
  const container = { ...nStyles.container, padding: isMobile ? '0 20px' : '0 48px' };
  const [mode, setMode] = React.useState('login');

  return (
    <section style={{ position: 'relative', minHeight: `calc(100vh - ${isMobile ? 56 : 72}px)`, padding: isMobile ? '40px 0' : '80px 0', overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
      <GridBg />
      <div style={{
        position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)',
        width: 700, height: 400,
        background: `radial-gradient(ellipse, ${N.accent}22 0%, transparent 70%)`,
        filter: 'blur(60px)', pointerEvents: 'none',
      }} />
      <div style={{ ...container, position: 'relative', width: '100%' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 80, alignItems: 'center', maxWidth: 1100, margin: '0 auto' }}>
          {/* LEFT */}
          <div>
            <SectionLabel>› auth / client portal</SectionLabel>
            <h1 style={{ ...nStyles.h1, fontSize: isMobile ? 36 : 56, marginBottom: 20 }}>
              Your books.<br/>
              <span style={{ color: N.accent, filter: `drop-shadow(0 0 20px ${N.accentGlow})` }}>Always live.</span>
            </h1>
            <p style={{ fontSize: isMobile ? 14 : 16, color: N.inkSoft, lineHeight: 1.6, marginBottom: 32, maxWidth: 420 }}>
              Access real-time dashboards, upload docs, view reports, and message your team. All in one place, on any device.
            </p>
            <div style={{ display: 'grid', gap: 10 }}>
              {[
                { ic: '📊', t: 'Real-time P&L, cash & KPI dashboards' },
                { ic: '📥', t: 'Drag-drop receipts & documents' },
                { ic: '💬', t: 'Message your accountant directly' },
                { ic: '📋', t: 'Monthly close packages & tax docs' },
                { ic: '🔐', t: '256-bit SSL · 2FA · SOC 2 Type II' },
              ].map((b, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14, color: N.inkSoft }}>
                  <span style={{ fontSize: 18 }}>{b.ic}</span>
                  <span>{b.t}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 40, padding: 20, border: `1px solid ${N.line}`, borderRadius: 8, background: N.surface }}>
              <div style={{ ...nStyles.mono, fontSize: 10, color: N.accent, letterSpacing: '0.18em', marginBottom: 10 }}>› SYSTEM STATUS</div>
              <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', fontSize: 12, color: N.inkSoft, ...nStyles.mono }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} /> api · ok
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} /> bank feeds · synced 2m ago
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} /> uptime · 99.99%
                </span>
              </div>
            </div>
          </div>

          {/* LOGIN CARD */}
          <div style={{
            border: `1px solid ${N.lineStrong}`, borderRadius: 14, padding: isMobile ? 28 : 40,
            background: `linear-gradient(135deg, ${N.surface} 0%, ${N.surface2} 100%)`,
            boxShadow: `0 20px 80px rgba(0,0,0,0.5), 0 0 40px ${N.accentGlow}`,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
              <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.18em' }}>› {mode === 'login' ? 'SIGN IN' : mode === 'signup' ? 'REQUEST ACCESS' : 'RESET'}</div>
              <div style={{ display: 'flex', gap: 8 }}>
                {['login', 'signup'].map(m => (
                  <button key={m} onClick={() => setMode(m)} style={{
                    padding: '6px 12px', fontSize: 11, borderRadius: 4,
                    border: `1px solid ${mode === m ? N.accent : N.line}`,
                    background: mode === m ? `${N.accent}15` : 'transparent',
                    color: mode === m ? N.accent : N.inkSoft,
                    cursor: 'pointer', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em',
                  }}>{m === 'login' ? 'LOGIN' : 'SIGNUP'}</button>
                ))}
              </div>
            </div>

            <form onSubmit={(e) => { e.preventDefault(); alert('Demo only — contact your Fortis account manager for real credentials.'); }} style={{ display: 'grid', gap: 18 }}>
              {mode === 'signup' && (
                <Field label="COMPANY NAME" type="text" placeholder="Acme Holdings LLC" />
              )}
              <Field label="EMAIL" type="email" placeholder="you@yourcompany.com" />
              {mode !== 'reset' && <Field label="PASSWORD" type="password" placeholder="••••••••••" showForgot={mode === 'login'} onForgot={() => setMode('reset')} />}
              {mode === 'signup' && <Field label="CLIENT ID (OPTIONAL)" type="text" placeholder="FA-XXXX-XXXX" />}

              {mode === 'login' && (
                <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: N.inkSoft, cursor: 'pointer' }}>
                  <input type="checkbox" defaultChecked style={{ accentColor: N.accent }} />
                  Keep me signed in for 7 days
                </label>
              )}

              <button type="submit" style={{
                ...nStyles.btn, background: N.accent, color: N.bg,
                justifyContent: 'center', padding: '14px', fontSize: 14, fontWeight: 600,
                boxShadow: `0 0 24px ${N.accentGlow}`,
              }}>
                {mode === 'login' ? 'Sign in →' : mode === 'signup' ? 'Request access →' : 'Send reset link →'}
              </button>

              <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0', color: N.inkMute, fontSize: 11 }}>
                <div style={{ flex: 1, height: 1, background: N.line }} />
                <span style={{ ...nStyles.mono, letterSpacing: '0.14em' }}>OR</span>
                <div style={{ flex: 1, height: 1, background: N.line }} />
              </div>

              <button type="button" style={{
                ...nStyles.btn, background: 'transparent', color: N.ink,
                border: `1px solid ${N.lineStrong}`, justifyContent: 'center', padding: '12px',
              }}>
                🔐 Continue with SSO
              </button>
            </form>

            <div style={{ textAlign: 'center', marginTop: 28, paddingTop: 20, borderTop: `1px solid ${N.line}`, fontSize: 12, color: N.inkMute }}>
              Not a Fortis client yet? <a href="#" onClick={(e) => { e.preventDefault(); onBook(); }} style={{ color: N.accent, textDecoration: 'none' }}>Book a consult →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, type, placeholder, showForgot, onForgot }) {
  const { N, nStyles } = window;
  const [focused, setFocused] = React.useState(false);
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
        <label style={{ ...nStyles.mono, fontSize: 10, color: focused ? N.accent : N.inkMute, letterSpacing: '0.14em' }}>{label}</label>
        {showForgot && (
          <button type="button" onClick={onForgot} style={{ background: 'none', border: 'none', color: N.accent, fontSize: 11, cursor: 'pointer', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>FORGOT?</button>
        )}
      </div>
      <input
        type={type} placeholder={placeholder}
        onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
        style={{
          width: '100%', padding: '13px 16px', fontSize: 14,
          background: N.bg, border: `1px solid ${focused ? N.accent : N.line}`,
          borderRadius: 6, color: N.ink, outline: 'none',
          fontFamily: 'inherit',
          boxShadow: focused ? `0 0 16px ${N.accentGlow}` : 'none',
          transition: 'all .15s',
        }}
      />
    </div>
  );
}
window.ClientPortalPage = ClientPortalPage;