// ===== AUTH: login / sign up · social + mobile OTP =====

const AUTH_KEY = 'nrsa_auth';

function GoogleMark({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <path fill="#4285F4" d="M45.1 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h11.8c-.5 2.7-2 5-4.4 6.6v5.5h7.1c4.2-3.8 6.6-9.5 6.6-16.1Z" />
      <path fill="#34A853" d="M24 46c5.9 0 10.9-2 14.5-5.3l-7.1-5.5c-2 1.3-4.5 2.1-7.4 2.1-5.7 0-10.5-3.8-12.2-9H4.5v5.7C8.1 41.2 15.4 46 24 46Z" />
      <path fill="#FBBC05" d="M11.8 28.3c-.4-1.3-.7-2.7-.7-4.3s.3-3 .7-4.3v-5.7H4.5C3 17 2 20.4 2 24s1 7 2.5 10l7.3-5.7Z" />
      <path fill="#EA4335" d="M24 10.7c3.2 0 6.1 1.1 8.4 3.3l6.3-6.3C34.9 4.1 29.9 2 24 2 15.4 2 8.1 6.8 4.5 14l7.3 5.7c1.7-5.2 6.5-9 12.2-9Z" />
    </svg>
  );
}
function FacebookMark({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"><path fill="#1877F2" d="M24 12a12 12 0 1 0-13.9 11.9v-8.4H7.1V12h3V9.4c0-3 1.8-4.6 4.5-4.6 1.3 0 2.6.2 2.6.2v2.9h-1.5c-1.4 0-1.9.9-1.9 1.8V12h3.3l-.5 3.5h-2.8v8.4A12 12 0 0 0 24 12Z" /></svg>
  );
}
function AppleMark({ size = 20, color = '#000' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M17.6 12.7c0-2.4 2-3.6 2-3.6-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9s-1.8-.8-3-.8c-1.5 0-3 .9-3.8 2.3-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.4 2.9 2.3 1.2 0 1.6-.7 3-.7s1.8.7 3 .7 2-1 2.8-2.1c.9-1.3 1.2-2.5 1.3-2.6 0 0-2.5-.9-2.5-3.8Zm-2.3-7c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.8 1.4-.6.7-1.1 1.8-1 2.9 1 .1 2.1-.5 2.8-1.3Z" /></svg>
  );
}

function AuthFlow({ t, dark, onAuth }) {
  const [mode, setMode] = useState('login'); // login | signup
  const [step, setStep] = useState('form'); // form | otp
  const [adminMode, setAdminMode] = useState(false);
  const [adminEmail, setAdminEmail] = useState('');
  const [adminPass, setAdminPass] = useState('');
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [loading, setLoading] = useState(''); // provider id while "connecting"
  const [code, setCode] = useState('');
  const [digits, setDigits] = useState(['', '', '', '', '', '']);
  const [timer, setTimer] = useState(0);
  const [error, setError] = useState('');
  const [verifying, setVerifying] = useState(false);
  const [legalDoc, setLegalDoc] = useState(null); // 'terms' | 'privacy'
  const boxRefs = useRef([]);

  // Maps a backend user object → the shape the app's onAuth expects.
  const mapUser = (u) => ({
    name: u.fullName || u.full_name || 'NRSA User',
    method: u.authProvider || u.auth_provider || 'mobile',
    role: u.role || 'driver',
    email: u.email || undefined,
    phone: u.phone || undefined,
    verified: !!(u.isVerified ?? u.is_verified),
    occupation: u.occupation, school: u.school, industry: u.industry,
    age: u.age, address: u.address,
    since: new Date().getFullYear(),
  });

  const navy = t.navy, accent = t.accent;
  const phoneClean = phone.replace(/[^\d]/g, '');
  const phoneValid = phoneClean.length >= 10;

  useEffect(() => {
    if (timer <= 0) return;
    const id = setTimeout(() => setTimer(s => s - 1), 1000);
    return () => clearTimeout(id);
  }, [timer]);

  const social = (provider, label) => {
    if (loading) return;
    setLoading(provider);
    if (NRSAApi.isLive()) {
      // NOTE: replace this dev placeholder token with a real OAuth token obtained
      // from the provider's SDK/popup before production. The dev backend accepts
      // "mock:" tokens in non-production so this path is testable locally.
      const token = `mock:${provider}@nrsa.org.ph:${label}`;
      NRSAApi.socialLogin(provider, token)
        .then(r => onAuth(mapUser(r.user)))
        .catch(e => { setError(e.message); setLoading(''); });
      return;
    }
    setTimeout(() => {
      onAuth({ name: label, method: provider, since: new Date().getFullYear() });
    }, 950);
  };

  const adminLogin = () => {
    if (!adminEmail.trim() || !adminPass.trim()) { setError('Enter your admin email and password'); return; }
    if (!/.+@.+\..+/.test(adminEmail)) { setError('Enter a valid email address'); return; }
    setError('');
    setLoading('admin');
    if (NRSAApi.isLive()) {
      NRSAApi.adminLogin(adminEmail.trim(), adminPass)
        .then(r => onAuth(mapUser(r.user)))
        .catch(e => { setError(e.message); setLoading(''); });
      return;
    }
    setTimeout(() => {
      const nm = adminEmail.split('@')[0].replace(/[._]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
      onAuth({ name: nm || 'NRSA Admin', method: 'admin', role: 'admin', email: adminEmail.trim(), verified: true, since: new Date().getFullYear() });
    }, 950);
  };

  const sendOtp = () => {
    if (!phoneValid) { setError('Enter a valid mobile number'); return; }
    if (mode === 'signup' && !name.trim()) { setError('Please enter your full name'); return; }
    setError('');
    setLoading('phone');
    if (NRSAApi.isLive()) {
      // Live: the backend texts the code; it is never returned to the client.
      NRSAApi.requestOtp('+63' + phoneClean)
        .then(() => {
          setCode(''); // unknown on the client in live mode
          setDigits(['', '', '', '', '', '']);
          setTimer(30);
          setStep('otp');
          setLoading('');
          setTimeout(() => boxRefs.current[0] && boxRefs.current[0].focus(), 120);
        })
        .catch(e => { setError(e.message); setLoading(''); });
      return;
    }
    setTimeout(() => {
      const gen = String(Math.floor(100000 + Math.random() * 900000));
      setCode(gen);
      setDigits(['', '', '', '', '', '']);
      setTimer(30);
      setStep('otp');
      setLoading('');
      setTimeout(() => boxRefs.current[0] && boxRefs.current[0].focus(), 120);
    }, 900);
  };

  const setDigit = (i, v) => {
    const d = v.replace(/[^\d]/g, '').slice(-1);
    setDigits(prev => {
      const next = [...prev];
      next[i] = d;
      return next;
    });
    setError('');
    if (d && i < 5) boxRefs.current[i + 1] && boxRefs.current[i + 1].focus();
  };
  const onKey = (i, e) => {
    if (e.key === 'Backspace' && !digits[i] && i > 0) boxRefs.current[i - 1] && boxRefs.current[i - 1].focus();
  };
  const onPaste = (e) => {
    const txt = (e.clipboardData.getData('text') || '').replace(/[^\d]/g, '').slice(0, 6);
    if (!txt) return;
    e.preventDefault();
    const next = ['', '', '', '', '', ''];
    txt.split('').forEach((c, i) => next[i] = c);
    setDigits(next);
    const last = Math.min(txt.length, 6) - 1;
    if (last >= 0) boxRefs.current[Math.min(last + 1, 5)] && boxRefs.current[Math.min(last + 1, 5)].focus();
  };

  const verify = () => {
    const entered = digits.join('');
    if (entered.length < 6) { setError('Enter the full 6-digit code'); return; }
    setVerifying(true);
    if (NRSAApi.isLive()) {
      NRSAApi.verifyOtp('+63' + phoneClean, entered)
        .then(r => onAuth(mapUser(r.user)))
        .catch(e => {
          setError(e.message || 'Incorrect code. Please try again.');
          setDigits(['', '', '', '', '', '']);
          boxRefs.current[0] && boxRefs.current[0].focus();
          setVerifying(false);
        });
      return;
    }
    setTimeout(() => {
      if (entered === code) {
        onAuth({ name: mode === 'signup' ? name.trim() : 'NRSA Responder', method: 'mobile', phone: '+63 ' + phoneClean, since: new Date().getFullYear() });
      } else {
        setError('Incorrect code. Please try again.');
        setDigits(['', '', '', '', '', '']);
        boxRefs.current[0] && boxRefs.current[0].focus();
        setVerifying(false);
      }
    }, 800);
  };

  const inputBase = {
    width: '100%', border: `1.5px solid ${t.border}`, background: t.inputBg, color: t.text,
    borderRadius: 14, padding: '14px 15px', outline: 'none', fontWeight: 500, fontSize: 15,
  };

  const SocialBtn = ({ id, mark, label }) => (
    <button onClick={() => social(id, label)} disabled={!!loading} className="no-select" style={{
      width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 11, minHeight: 52,
      border: `1.5px solid ${t.border}`, background: t.card, color: t.text, borderRadius: 14,
      fontSize: 14.5, fontWeight: 700, opacity: loading && loading !== id ? 0.5 : 1, position: 'relative',
    }}>
      {loading === id
        ? <span style={{ width: 19, height: 19, borderRadius: 999, border: `2.5px solid ${t.border}`, borderTopColor: t.mid, animation: 'spin 0.7s linear infinite' }} />
        : mark}
      {loading === id ? 'Connecting…' : `Continue with ${label}`}
    </button>
  );

  return (
    <div className="scroll-y no-select" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', background: t.bg, color: t.text }}>
      {/* Hero */}
      <div style={{
        background: `linear-gradient(150deg, ${navy} 0%, ${t.mid} 100%)`, color: '#fff',
        padding: `max(34px, calc(env(safe-area-inset-top) + 26px)) 24px 46px`, position: 'relative', overflow: 'hidden', flexShrink: 0,
      }}>
        <div style={{ position: 'absolute', right: -36, top: -36, width: 150, height: 150, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
        <div style={{ position: 'absolute', right: 40, bottom: -54, width: 120, height: 120, borderRadius: '50%', background: 'rgba(245,166,35,0.14)' }} />
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <img src="assets/nrsa-logo.png" alt="NRSA" style={{ width: 84, height: 84, objectFit: 'contain', filter: 'drop-shadow(0 6px 14px rgba(0,0,0,0.3))' }} />
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '0.02em', marginTop: 12 }}>NRSA</div>
          <div style={{ fontSize: 12.5, opacity: 0.8, fontWeight: 600, letterSpacing: '0.04em', marginTop: 2 }}>National Road Safety Alliance</div>
          <div style={{ fontSize: 12.5, opacity: 0.72, marginTop: 10, lineHeight: 1.4, maxWidth: 280 }}>Sign in to access live traffic, crash reporting, and road-safety tools.</div>
        </div>
      </div>

      {/* Card */}
      <div style={{
        flex: 1, background: t.bg, borderTopLeftRadius: 28, borderTopRightRadius: 28, marginTop: -26,
        padding: '8px 22px max(28px, env(safe-area-inset-bottom))', position: 'relative',
      }}>
        {step === 'form' ? (adminMode ? (
          <div className="screen-in">
            <button onClick={() => { setAdminMode(false); setError(''); }} className="no-select" style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', color: t.subtext, fontWeight: 700, fontSize: 13.5, padding: '16px 0 8px' }}>
              <Icon name="chevron-left" size={18} /> Back to sign in
            </button>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: t.gold + (dark ? '2e' : '1c'), display: 'grid', placeItems: 'center', fontSize: 28, margin: '6px 0 14px' }}>🛡️</div>
            <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 800, color: t.text, letterSpacing: '-0.02em' }}>Administrator sign in</h1>
            <p style={{ margin: '0 0 20px', fontSize: 13.5, color: t.subtext, lineHeight: 1.45 }}>Restricted access for NRSA system administrators.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
              <div>
                <label style={{ fontSize: 12, fontWeight: 700, color: t.subtext, display: 'block', marginBottom: 7 }}>ADMIN EMAIL</label>
                <input value={adminEmail} onChange={e => { setAdminEmail(e.target.value); setError(''); }} type="email" inputMode="email" placeholder="admin@nrsa.org.ph" style={inputBase} />
              </div>
              <div>
                <label style={{ fontSize: 12, fontWeight: 700, color: t.subtext, display: 'block', marginBottom: 7 }}>PASSWORD</label>
                <input value={adminPass} onChange={e => { setAdminPass(e.target.value); setError(''); }} type="password" placeholder="••••••••" style={inputBase} />
              </div>
              {error && <div style={{ fontSize: 12.5, color: t.danger, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="alert" size={15} color={t.danger} />{error}</div>}
              <Btn t={t} full color={t.navy} onClick={adminLogin} style={{ marginTop: 4, minHeight: 52 }}>
                {loading === 'admin'
                  ? <span style={{ width: 19, height: 19, borderRadius: 999, border: '2.5px solid rgba(255,255,255,0.4)', borderTopColor: '#fff', animation: 'spin 0.7s linear infinite' }} />
                  : 'Sign in to console'}
              </Btn>
            </div>
            {NRSAApi.isMock() && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: t.gold + (dark ? '1f' : '12'), border: `1px solid ${t.gold}44`, borderRadius: 12, padding: '10px 12px', marginTop: 18 }}>
              <span style={{ fontSize: 16 }}>💡</span>
              <span style={{ fontSize: 12, color: t.text, fontWeight: 500 }}>Demo: any email + password grants admin access.</span>
            </div>
            )}
          </div>
        ) : (
          <div className="screen-in">
            {/* Tabs */}
            <div style={{ display: 'flex', background: t.inputBg, borderRadius: 14, padding: 4, margin: '14px 0 22px' }}>
              {[['login', 'Log in'], ['signup', 'Sign up']].map(([id, label]) => (
                <button key={id} onClick={() => { setMode(id); setError(''); }} className="no-select" style={{
                  flex: 1, border: 'none', borderRadius: 11, padding: '11px', minHeight: 44, fontSize: 14, fontWeight: 700,
                  background: mode === id ? t.card : 'transparent', color: mode === id ? t.text : t.subtext,
                  boxShadow: mode === id ? t.shadow : 'none', transition: 'all 0.2s',
                }}>{label}</button>
              ))}
            </div>

            <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 800, color: t.text, letterSpacing: '-0.02em' }}>
              {mode === 'login' ? 'Welcome back' : 'Create your account'}
            </h1>
            <p style={{ margin: '0 0 20px', fontSize: 13.5, color: t.subtext, lineHeight: 1.45 }}>
              {mode === 'login' ? 'Log in to continue keeping the roads safer.' : 'Join the NRSA road-safety community in seconds.'}
            </p>

            {/* Social */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              <SocialBtn id="google" mark={<GoogleMark />} label="Google" />
              <SocialBtn id="facebook" mark={<FacebookMark />} label="Facebook" />
              <SocialBtn id="apple" mark={<AppleMark color={dark ? '#fff' : '#000'} />} label="Apple" />
            </div>

            {/* Divider */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '22px 0' }}>
              <div style={{ flex: 1, height: 1, background: t.border }} />
              <span style={{ fontSize: 11.5, color: t.subtext, fontWeight: 700, letterSpacing: '0.03em' }}>OR USE MOBILE NUMBER</span>
              <div style={{ flex: 1, height: 1, background: t.border }} />
            </div>

            {/* Mobile form */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
              {mode === 'signup' && (
                <div>
                  <label style={{ fontSize: 12, fontWeight: 700, color: t.subtext, display: 'block', marginBottom: 7 }}>FULL NAME</label>
                  <input value={name} onChange={e => { setName(e.target.value); setError(''); }} placeholder="Juan Dela Cruz" style={inputBase} />
                </div>
              )}
              <div>
                <label style={{ fontSize: 12, fontWeight: 700, color: t.subtext, display: 'block', marginBottom: 7 }}>MOBILE NUMBER</label>
                <div style={{ display: 'flex', gap: 9 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, border: `1.5px solid ${t.border}`, background: t.inputBg, borderRadius: 14, padding: '0 13px', fontWeight: 700, color: t.text, fontSize: 15, flexShrink: 0 }}>
                    🇵🇭 +63
                  </div>
                  <input value={phone} onChange={e => { setPhone(e.target.value); setError(''); }} inputMode="tel" placeholder="917 123 4567" style={{ ...inputBase, flex: 1 }} />
                </div>
              </div>
              {error && <div style={{ fontSize: 12.5, color: t.danger, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="alert" size={15} color={t.danger} />{error}</div>}
              <Btn t={t} full color={accent} onClick={sendOtp} style={{ marginTop: 4, minHeight: 52 }}>
                {loading === 'phone'
                  ? <span style={{ width: 19, height: 19, borderRadius: 999, border: '2.5px solid rgba(255,255,255,0.4)', borderTopColor: '#fff', animation: 'spin 0.7s linear infinite' }} />
                  : 'Send verification code'}
              </Btn>
            </div>

            <p style={{ fontSize: 11, color: t.subtext, textAlign: 'center', marginTop: 20, lineHeight: 1.5 }}>
              By continuing you agree to NRSA's{' '}
              <button onClick={() => setLegalDoc('terms')} className="no-select" style={{ background: 'none', border: 'none', padding: 0, font: 'inherit', fontSize: 11, fontWeight: 700, color: t.mid, textDecoration: 'underline', cursor: 'pointer' }}>Terms of Service</button>
              {' '}and{' '}
              <button onClick={() => setLegalDoc('privacy')} className="no-select" style={{ background: 'none', border: 'none', padding: 0, font: 'inherit', fontSize: 11, fontWeight: 700, color: t.mid, textDecoration: 'underline', cursor: 'pointer' }}>Privacy Policy</button>.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '18px 0 4px' }}>
              <div style={{ flex: 1, height: 1, background: t.border }} />
              <button onClick={() => { setAdminMode(true); setError(''); }} className="no-select" style={{ background: 'none', border: 'none', color: t.subtext, fontWeight: 700, fontSize: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="shield" size={14} color={t.subtext} /> Sign in as Administrator
              </button>
              <div style={{ flex: 1, height: 1, background: t.border }} />
            </div>
          </div>
        )) : (
          <div className="screen-in">
            <button onClick={() => { setStep('form'); setError(''); }} className="no-select" style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', color: t.subtext, fontWeight: 700, fontSize: 13.5, padding: '16px 0 8px' }}>
              <Icon name="chevron-left" size={18} /> Back
            </button>
            <div style={{ width: 60, height: 60, borderRadius: 18, background: accent + (dark ? '2e' : '1c'), display: 'grid', placeItems: 'center', fontSize: 30, margin: '8px 0 16px' }}>📲</div>
            <h1 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 800, color: t.text, letterSpacing: '-0.02em' }}>Verify your number</h1>
            <p style={{ margin: '0 0 8px', fontSize: 13.5, color: t.subtext, lineHeight: 1.5 }}>
              We sent a 6-digit code to <b style={{ color: t.text }}>+63 {phoneClean}</b>.
            </p>

            {/* demo hint — only in mock mode (live mode texts the code) */}
            {NRSAApi.isMock() && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: t.mid + (dark ? '1f' : '12'), border: `1px solid ${t.mid}44`, borderRadius: 12, padding: '10px 12px', marginBottom: 22 }}>
              <span style={{ fontSize: 16 }}>💡</span>
              <span style={{ fontSize: 12.5, color: t.text, fontWeight: 500 }}>Demo code: <b style={{ fontVariantNumeric: 'tabular-nums', letterSpacing: '0.08em' }}>{code}</b></span>
            </div>
            )}

            {/* OTP boxes */}
            <div style={{ display: 'flex', gap: 9, justifyContent: 'space-between', marginBottom: 18 }}>
              {digits.map((d, i) => (
                <input key={i} ref={el => boxRefs.current[i] = el} value={d}
                  onChange={e => setDigit(i, e.target.value)} onKeyDown={e => onKey(i, e)} onPaste={onPaste}
                  inputMode="numeric" maxLength={1} style={{
                    width: '100%', aspectRatio: '1 / 1', minWidth: 0, textAlign: 'center', fontSize: 24, fontWeight: 800,
                    border: `2px solid ${error ? t.danger : d ? t.mid : t.border}`, background: t.inputBg, color: t.text,
                    borderRadius: 14, outline: 'none', fontVariantNumeric: 'tabular-nums', transition: 'border-color 0.18s',
                  }} />
              ))}
            </div>
            {error && <div style={{ fontSize: 12.5, color: t.danger, fontWeight: 600, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="alert" size={15} color={t.danger} />{error}</div>}

            <Btn t={t} full color={accent} onClick={verify} style={{ minHeight: 52 }}>
              {verifying
                ? <span style={{ width: 19, height: 19, borderRadius: 999, border: '2.5px solid rgba(255,255,255,0.4)', borderTopColor: '#fff', animation: 'spin 0.7s linear infinite' }} />
                : 'Verify & continue'}
            </Btn>

            <div style={{ textAlign: 'center', marginTop: 18, fontSize: 13, color: t.subtext, fontWeight: 500 }}>
              Didn't get the code?{' '}
              {timer > 0
                ? <span style={{ color: t.text, fontWeight: 700 }}>Resend in {timer}s</span>
                : <button onClick={() => { const g = String(Math.floor(100000 + Math.random() * 900000)); setCode(g); setTimer(30); setError(''); setDigits(['','','','','','']); }} className="no-select" style={{ background: 'none', border: 'none', color: t.mid, fontWeight: 800, fontSize: 13 }}>Resend code</button>}
            </div>
          </div>
        )}
      </div>

      {legalDoc && <LegalSheet t={t} doc={legalDoc} onClose={() => setLegalDoc(null)} />}
    </div>
  );
}

const LEGAL_CONTENT = {
  terms: {
    title: 'Terms of Service',
    icon: '📜',
    updated: 'Last updated: May 2026',
    sections: [
      ['1. Acceptance of Terms', 'By creating an account or using the NRSA app, you agree to these Terms of Service. If you do not agree, please do not use the app.'],
      ['2. Purpose of the Service', 'NRSA provides road-safety tools including live traffic, crash reporting, education, emergency contacts, and community features. The app is provided for public safety and informational purposes.'],
      ['3. Eligibility & Accounts', 'You must provide accurate information when registering. You are responsible for keeping your account secure and for all activity under it. Certain roles (e.g. Crash Responder) require verification.'],
      ['4. Acceptable Use', 'You agree not to submit false crash reports, misuse the SOS/emergency features, harass other users, or attempt to disrupt or gain unauthorized access to the service.'],
      ['5. Emergency Disclaimer', 'NRSA is not a substitute for official emergency services. In an emergency, always call 911 or the appropriate hotline directly. Traffic, weather, and routing data may not always be accurate or real-time.'],
      ['6. User Content', 'You retain ownership of content you submit (reports, posts, photos) but grant NRSA a license to use it to operate and improve road-safety services.'],
      ['7. Limitation of Liability', 'The service is provided "as is." NRSA is not liable for damages arising from reliance on app information, road decisions, or service interruptions.'],
      ['8. Changes', 'We may update these Terms. Continued use after changes constitutes acceptance. Material changes will be notified in-app.'],
      ['9. Contact', 'For questions about these Terms, contact support@nrsa.org.ph.'],
    ],
  },
  privacy: {
    title: 'Privacy Policy',
    icon: '🔐',
    updated: 'Compliant with RA 10173 (Data Privacy Act of 2012)',
    sections: [
      ['1. Who We Are', 'The National Road Safety Alliance (NRSA) is the Personal Information Controller responsible for your data under the Data Privacy Act of 2012 (RA 10173).'],
      ['2. Information We Collect', 'Identity (name, age, government ID), contact details (mobile, email, address), background (study/work, school or industry), location data (for traffic, SOS, crash reports), and any incident reports you submit.'],
      ['3. How We Use It', 'To verify users, power road-safety tools, respond to incidents, improve the service, and—only with your optional consent—send road-safety updates.'],
      ['4. Legal Basis', 'We process your data based on your consent and NRSA\u2019s legitimate road-safety mandate.'],
      ['5. How We Protect It', 'Data is encrypted, access-controlled, and never sold to third parties. We apply data minimization and retention limits.'],
      ['6. Your Rights', 'You may access, correct, object to processing, withdraw consent, or request erasure of your data, and lodge a complaint with the National Privacy Commission.'],
      ['7. Retention', 'We keep data only as long as necessary for these purposes or as required by law.'],
      ['8. Data Protection Officer', 'To exercise your rights or for privacy concerns, contact our DPO at dpo@nrsa.org.ph.'],
    ],
  },
};

function LegalSheet({ t, doc, onClose }) {
  const c = LEGAL_CONTENT[doc];
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 60, display: 'flex', alignItems: 'flex-end', animation: 'screenIn 0.2s ease' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: t.bg, borderTopLeftRadius: 26, borderTopRightRadius: 26, padding: '10px 20px max(22px, env(safe-area-inset-bottom))', maxHeight: '86%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: t.border, margin: '4px auto 14px', flexShrink: 0 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 4, flexShrink: 0 }}>
          <span style={{ fontSize: 26 }}>{c.icon}</span>
          <div style={{ flex: 1 }}>
            <h2 style={{ margin: 0, fontSize: 19, fontWeight: 800, color: t.text }}>{c.title}</h2>
            <div style={{ fontSize: 11.5, color: t.subtext, marginTop: 1 }}>{c.updated}</div>
          </div>
          <button onClick={onClose} className="no-select" style={{ width: 34, height: 34, borderRadius: 999, border: 'none', background: t.card, color: t.text, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="x" size={18} /></button>
        </div>
        <div className="scroll-y" style={{ overflowY: 'auto', marginTop: 12, paddingRight: 2 }}>
          {c.sections.map(([h, body], i) => (
            <div key={i} style={{ marginBottom: 16 }}>
              <div style={{ fontSize: 13.5, fontWeight: 800, color: t.text, marginBottom: 5 }}>{h}</div>
              <p style={{ margin: 0, fontSize: 12.5, color: t.subtext, lineHeight: 1.55 }}>{body}</p>
            </div>
          ))}
        </div>
        <Btn t={t} full color={t.mid} onClick={onClose} style={{ marginTop: 6, flexShrink: 0 }}>Got it</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { AuthFlow, AUTH_KEY });