/* Authentication: Welcome, Login select, shared Verification (email+phone OTP) */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon, Logo = window.Logo;
  const D = window.YEIDA;

  /* ---- Brand panel (navy decorative side) ---- */
  function BrandPanel({ compact }) {
    return (
      <div style={{ position: 'relative', overflow: 'hidden', color: '#fff', padding: compact ? '38px 40px' : '48px 46px', background: 'radial-gradient(120% 90% at 100% 0%, #16407e 0%, #0b2548 45%, #081a39 100%)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .5, backgroundImage: 'linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)', backgroundSize: '46px 46px', maskImage: 'radial-gradient(80% 80% at 70% 30%,#000,transparent)' }} />
        <div style={{ position: 'absolute', top: -120, right: -100, width: 380, height: 380, borderRadius: '50%', background: 'radial-gradient(circle, rgba(22,182,126,.32), transparent 65%)', filter: 'blur(10px)' }} />
        <div style={{ position: 'relative', zIndex: 2 }}><Logo light size={42} /></div>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 13px', borderRadius: 99, background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.12)', fontSize: 12.5, fontWeight: 600, color: '#cfe0f7', marginBottom: 22 }}>
            <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--emerald-500)', boxShadow: '0 0 0 3px rgba(22,182,126,.25)' }} />Official Allottee Portal
          </div>
          <h2 style={{ color: '#fff', fontSize: 32, fontWeight: 800, lineHeight: 1.12, letterSpacing: '-.02em', maxWidth: 380 }}>Your complete Yamuna Expressway property portal.</h2>
          <p style={{ color: 'rgba(220,232,248,.82)', fontSize: 15, lineHeight: 1.55, maxWidth: 360, marginTop: 16 }}>Verify your allotment, view official authority records, track construction and manage documents — securely.</p>
        </div>
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', gap: 30 }}>
          {[['7+', 'Active Sectors'], ['62,000+', 'Allottees'], ['100%', 'Digital']].map((x, i) => (
            <div key={i}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: '#fff' }}>{x[0]}</div>
              <div style={{ fontSize: 12.5, color: 'rgba(200,216,240,.7)', fontWeight: 600, marginTop: 2 }}>{x[1]}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function AuthShell({ wide, children }) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', padding: 24, background: 'linear-gradient(180deg,#eef3fb,#e6eefa)' }}>
        <div className="anim-pop card" style={{ width: '100%', maxWidth: wide ? 1240 : 1080, display: 'grid', gridTemplateColumns: '1fr 1fr', overflow: 'hidden', borderRadius: 24, boxShadow: 'var(--sh-lg)', minHeight: 600 }}>
          <BrandPanel />
          <div style={{ padding: '44px 50px', display: 'flex', flexDirection: 'column', justifyContent: 'center', background: '#fff', maxHeight: '94vh', overflowY: 'auto' }}>{children}</div>
        </div>
      </div>
    );
  }

  /* ---------------- WELCOME ---------------- */
  function Welcome({ go }) {
    return (
      <div style={{ minHeight: '100vh', position: 'relative', overflow: 'hidden', background: 'radial-gradient(130% 100% at 80% -10%, #16407e 0%, #0b2548 42%, #06122b 100%)', color: '#fff' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .55, backgroundImage: 'linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)', backgroundSize: '54px 54px', maskImage: 'radial-gradient(90% 70% at 60% 20%,#000,transparent)' }} />
        <div style={{ position: 'absolute', top: -160, right: -120, width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(22,182,126,.26), transparent 62%)' }} />
        <div style={{ position: 'absolute', bottom: -200, left: -120, width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(38,112,230,.28), transparent 62%)' }} />
        <header style={{ position: 'relative', zIndex: 3, maxWidth: 1180, margin: '0 auto', padding: '26px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Logo light size={40} />
          <div className="row gap-3">
            <button className="btn btn-ghost" style={{ color: '#cfe0f7' }} onClick={() => go('login')}>Sign In</button>
            <button className="btn" style={{ background: 'rgba(255,255,255,.1)', border: '1px solid rgba(255,255,255,.16)', color: '#fff' }} onClick={() => go('sectormaps-public')}>Explore Sector Maps</button>
          </div>
        </header>
        <main style={{ position: 'relative', zIndex: 3, maxWidth: 1180, margin: '0 auto', padding: '40px 40px 60px', display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 50, alignItems: 'center' }}>
          <div className="anim-fade-up">
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '8px 15px', borderRadius: 99, background: 'rgba(255,255,255,.07)', border: '1px solid rgba(255,255,255,.13)', fontSize: 13, fontWeight: 600, color: '#cfe0f7', marginBottom: 26 }}>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--emerald-500)', boxShadow: '0 0 0 4px rgba(22,182,126,.22)' }} />Government of Uttar Pradesh · Official Portal
            </div>
            <h1 style={{ color: '#fff', fontSize: 54, lineHeight: 1.05, fontWeight: 800, letterSpacing: '-.025em' }}>Your Complete <span style={{ background: 'linear-gradient(100deg,#5ad6a6,#7fb3ff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Yamuna Expressway</span> Property Management Portal</h1>
            <p style={{ color: 'rgba(214,228,247,.85)', fontSize: 17.5, lineHeight: 1.55, maxWidth: 520, marginTop: 22 }}>Verify your allotment, view official authority payment records, track construction approvals and manage documents — all in one secure place.</p>
            <div className="row gap-3" style={{ marginTop: 34, flexWrap: 'wrap' }}>
              <button className="btn btn-lg" style={{ background: '#0077FF', color: '#fff', borderRadius: 999, boxShadow: '0 16px 40px -12px rgba(0,119,255,.7)' }} onClick={() => go('login')}>Login to Portal<Icon name="arrowR" size={19} /></button>
              <button className="btn btn-lg" style={{ background: 'rgba(255,255,255,.1)', border: '1px solid rgba(255,255,255,.18)', color: '#fff', borderRadius: 999 }} onClick={() => go('sectormaps-public')}><Icon name="map" size={19} />Explore Sector Maps</button>
            </div>
            <div className="row gap-4" style={{ marginTop: 40, color: 'rgba(200,216,240,.7)', fontSize: 13.5, fontWeight: 500, flexWrap: 'wrap' }}>
              <span className="row gap-2"><Icon name="shield" size={17} style={{ color: 'var(--emerald-500)' }} />SSL Secured</span>
              <span className="row gap-2"><Icon name="lock" size={17} style={{ color: 'var(--emerald-500)' }} />OTP Verified Access</span>
              <span className="row gap-2"><Icon name="check" size={17} style={{ color: 'var(--emerald-500)' }} />DigiLocker Ready</span>
            </div>
          </div>
          <HeroCard />
        </main>
      </div>
    );
  }

  function HeroCard() {
    const plots = [[20, 18], [64, 18], [108, 18], [186, 18], [230, 18], [274, 18], [20, 116], [64, 116], [186, 116], [230, 116], [274, 116]];
    return (
      <div className="anim-fade-up" style={{ animationDelay: '.1s', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: '-14px', borderRadius: 28, background: 'linear-gradient(160deg,rgba(127,179,255,.25),transparent)', filter: 'blur(2px)' }} />
        <div style={{ position: 'relative', background: 'rgba(255,255,255,.97)', borderRadius: 22, padding: 22, boxShadow: '0 40px 80px -30px rgba(0,0,0,.55)', color: 'var(--ink)' }}>
          <div className="row spread" style={{ marginBottom: 16 }}>
            <div className="row gap-3">
              <div style={{ width: 40, height: 40, borderRadius: 11, background: 'linear-gradient(150deg,var(--blue-500),var(--navy-800))', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name="building" size={21} /></div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14.5 }}>Plot B-47, Sector 18</div>
                <div className="muted" style={{ fontSize: 12.5 }}>Residential · 300 sq.m</div>
              </div>
            </div>
            <window.StatusBadge code="LD_COMPLETED" />
          </div>
          <div style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid var(--line)', background: 'linear-gradient(135deg,#eef4ff,#e7f7f0)' }}>
            <svg viewBox="0 0 320 180" width="100%" style={{ display: 'block' }}>
              <rect width="320" height="180" fill="#eaf1fa" />
              <rect x="0" y="78" width="320" height="24" fill="#dde6f1" />
              <rect x="150" y="0" width="22" height="180" fill="#dde6f1" />
              <line x1="0" y1="90" x2="320" y2="90" stroke="#fff" strokeWidth="2" strokeDasharray="8 7" />
              <line x1="161" y1="0" x2="161" y2="180" stroke="#fff" strokeWidth="2" strokeDasharray="8 7" />
              {plots.map((p, i) => <rect key={i} x={p[0]} y={p[1]} width="34" height="44" rx="3" fill="#fff" stroke="#c9d6e6" strokeWidth="1" />)}
              <rect x="108" y="116" width="34" height="44" rx="3" fill="var(--emerald-500)" stroke="#fff" strokeWidth="2" />
              <circle cx="125" cy="138" r="14" fill="none" stroke="var(--emerald-500)" strokeWidth="2" opacity=".5" style={{ animation: 'ping 2s infinite' }} />
              <text x="125" y="141" textAnchor="middle" fontSize="9" fontWeight="700" fill="#fff">B-47</text>
            </svg>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- LOGIN SELECTION ---------------- */
  function LoginSelect({ go }) {
    const [mode, setMode] = useState('allotment');
    const opts = [
      { k: 'allotment', icon: 'building', title: 'Allotment Number', desc: 'Login with your YEIDA allotment number' },
      { k: 'invite', icon: 'key', title: 'Invitation Code', desc: 'Access via authority-issued invite code' },
    ];
    return (
      <AuthShell>
        <div className="anim-fade-up">
          <div className="kicker" style={{ marginBottom: 10 }}>Welcome back</div>
          <h1 style={{ fontSize: 28, fontWeight: 800 }}>Sign in to your portal</h1>
          <p className="muted" style={{ fontSize: 14.5, marginTop: 6 }}>Verify yourself using your allotment number or an invitation code.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11, margin: '26px 0 20px' }}>
            {opts.map(o => (
              <button key={o.k} onClick={() => setMode(o.k)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '15px 16px', borderRadius: 14, textAlign: 'left', border: '1.5px solid ' + (mode === o.k ? 'var(--blue-400)' : 'var(--line)'), background: mode === o.k ? 'var(--blue-50)' : '#fff', boxShadow: mode === o.k ? '0 0 0 4px rgba(38,112,230,.1)' : 'none', transition: 'all .15s', cursor: 'pointer' }}>
                <span style={{ width: 42, height: 42, borderRadius: 11, flex: 'none', display: 'grid', placeItems: 'center', background: mode === o.k ? 'var(--blue-500)' : 'var(--bg-2)', color: mode === o.k ? '#fff' : 'var(--muted)' }}><Icon name={o.icon} size={21} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>{o.title}</div>
                  <div className="muted" style={{ fontSize: 12.8, marginTop: 1 }}>{o.desc}</div>
                </div>
                <span style={{ width: 20, height: 20, borderRadius: 99, border: '2px solid ' + (mode === o.k ? 'var(--blue-500)' : '#cdd7e4'), display: 'grid', placeItems: 'center' }}>{mode === o.k && <span style={{ width: 9, height: 9, borderRadius: 99, background: 'var(--blue-500)' }} />}</span>
              </button>
            ))}
          </div>
          <div className="field" style={{ marginBottom: 16 }}>
            <label>{mode === 'allotment' ? 'Allotment Number' : 'Invitation Code'}</label>
            <div className="input-icon">
              <Icon name={mode === 'allotment' ? 'building' : 'key'} />
              <input className="input" maxLength={mode === 'allotment' ? 10 : undefined} placeholder={mode === 'allotment' ? 'e.g. YEA-654321' : 'Enter your code'} defaultValue={mode === 'allotment' ? 'YEA-654321' : ''} />
            </div>
            {mode === 'allotment' && <button onClick={() => go('login-allotment')} style={{ alignSelf: 'flex-start', background: 'none', border: 'none', color: 'var(--blue-600)', fontWeight: 600, fontSize: 12.5, cursor: 'pointer', padding: 0, marginTop: 2 }}>I don't remember my allotment number</button>}
          </div>
          <button className="btn btn-primary btn-block btn-lg" onClick={() => go('verify')}>Continue<Icon name="arrowR" size={19} /></button>
          <div style={{ textAlign: 'center', marginTop: 22, fontSize: 14, color: 'var(--muted)' }}>
            New allottee or representative?{' '}
            <button onClick={() => go('register')} style={{ background: 'none', border: 'none', color: 'var(--blue-600)', fontWeight: 700, cursor: 'pointer', fontSize: 14 }}>Register here</button>
          </div>
        </div>
      </AuthShell>
    );
  }

  /* ---------------- SHARED VERIFICATION (email + phone, same screen) ---------------- */
  // VerifyPanel renders both channels and reports completion via onChange(bothVerified)
  function VerifyPanel({ email, phone, onChange }) {
    const [cc, setCc] = useState(D.countryCodes[0]);
    const [state, setState] = useState({ email: false, phone: false });
    return (
      <div className="col gap-3">
        <VerifyChannelLifted kind="email" value={email} onVerified={v => setState(s => { const n = { ...s, email: v }; onChange && onChange(n.email && n.phone); return n; })} />
        <VerifyChannelLifted kind="phone" value={phone} cc={cc} setCc={setCc} onVerified={v => setState(s => { const n = { ...s, phone: v }; onChange && onChange(n.email && n.phone); return n; })} />
      </div>
    );
  }

  // channel that lifts verified state up to the panel
  function VerifyChannelLifted({ kind, value, cc, setCc, onVerified }) {
    const [sent, setSent] = useState(false);
    const [otp, setOtp] = useState(['', '', '', '', '', '']);
    const [verified, setVerified] = useState(false);
    const [cooldown, setCooldown] = useState(0);
    const [checking, setChecking] = useState(false);
    const [api, setApi] = useState('idle');   // idle|checking|ok|invalid_email|mailbox_full|bounce_risk|invalid_mobile
    const [otpErr, setOtpErr] = useState(false);
    const [field, setField] = useState(value || '');
    const refs = useRef([]);
    useEffect(() => { if (cooldown <= 0) return; const t = setInterval(() => setCooldown(s => s - 1), 1000); return () => clearInterval(t); }, [cooldown]);
    useEffect(() => { onVerified && onVerified(verified); }, [verified]);

    const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field || '');
    const digits = (field || '').replace(/\D/g, '').length;
    const phoneOk = digits >= (cc ? cc.digits : 10);
    const valid = kind === 'email' ? emailOk : phoneOk;

    // simulate an email/phone validation API — keywords in the value trigger states (demo)
    const runApi = () => {
      setApi('checking'); setChecking(true);
      setTimeout(() => {
        setChecking(false);
        const v = (field || '').toLowerCase();
        if (kind === 'email') {
          if (!emailOk) return setApi('invalid_email');
          if (v.includes('full')) return setApi('mailbox_full');
          if (v.includes('bounce') || v.includes('temp')) return setApi('bounce_risk');
          setApi('ok'); setSent(true); setCooldown(60); setTimeout(() => refs.current[0] && refs.current[0].focus(), 50);
        } else {
          if (!phoneOk) return setApi('invalid_mobile');
          setApi('ok'); setSent(true); setCooldown(60); setTimeout(() => refs.current[0] && refs.current[0].focus(), 50);
        }
      }, 950);
    };

    const API_MSG = {
      checking: { tone: 'blue', icon: 'clock', text: kind === 'email' ? 'Validating email via API…' : 'Validating mobile via API…' },
      ok: { tone: 'green', icon: 'checkCircle', text: kind === 'email' ? 'Email deliverable · OTP sent' : 'Mobile valid · OTP sent' },
      invalid_email: { tone: 'red', icon: 'alert', text: 'Invalid email address' },
      mailbox_full: { tone: 'amber', icon: 'alert', text: 'Mailbox full — try another email' },
      bounce_risk: { tone: 'amber', icon: 'alert', text: 'High bounce risk — verify spelling' },
      invalid_mobile: { tone: 'red', icon: 'alert', text: `Invalid mobile number for ${cc ? cc.label : 'IN'}` },
    };

    const set = (i, v) => {
      if (!/^\d?$/.test(v)) return;
      const d = otp.slice(); d[i] = v; setOtp(d); setOtpErr(false);
      if (v && i < 5) refs.current[i + 1] && refs.current[i + 1].focus();
      if (d.every(x => x !== '')) {
        // demo: "000000" simulates an incorrect OTP
        if (d.join('') === '000000') { setOtpErr(true); setOtp(['', '', '', '', '', '']); setTimeout(() => refs.current[0] && refs.current[0].focus(), 50); }
        else setVerified(true);
      }
    };
    const onKey = (i, e) => { if (e.key === 'Backspace' && !otp[i] && i > 0) refs.current[i - 1] && refs.current[i - 1].focus(); };

    const apiMsg = API_MSG[api];
    const toneColor = { red: 'var(--red-600)', amber: 'var(--amber-600)', blue: 'var(--blue-600)', green: 'var(--emerald-700)' };
    const toneBg = { red: 'var(--red-50)', amber: 'var(--amber-50)', blue: 'var(--blue-50)', green: 'var(--emerald-50)' };

    return (
      <div style={{ border: '1.5px solid ' + (verified ? '#bfe6d3' : 'var(--line)'), borderRadius: 16, padding: 18, background: verified ? 'var(--emerald-50)' : '#fff', transition: 'all .2s' }}>
        <div className="row spread" style={{ marginBottom: 12 }}>
          <div className="row gap-3">
            <span style={{ width: 38, height: 38, borderRadius: 10, flex: 'none', display: 'grid', placeItems: 'center', background: verified ? 'var(--emerald-500)' : 'var(--blue-50)', color: verified ? '#fff' : 'var(--blue-600)' }}><Icon name={kind === 'email' ? 'mail' : 'phone'} size={19} /></span>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14.5 }}>{kind === 'email' ? 'Verify Email' : 'Verify Phone Number'}</div>
              <div className="faint" style={{ fontSize: 12 }}>{verified ? 'Verified successfully' : sent ? 'Enter the 6-digit OTP' : 'OTP verification required'}</div>
            </div>
          </div>
          {verified && <span className="badge badge-green"><Icon name="check" size={13} />Verified</span>}
        </div>
        {kind === 'email' ? (
          <div className="input-icon"><Icon name="mail" /><input className="input" value={field} onChange={e => { setField(e.target.value); setApi('idle'); }} disabled={sent} /></div>
        ) : (
          <div className="row gap-2">
            <select className="select" value={cc.code} onChange={e => setCc(D.countryCodes.find(c => c.code === e.target.value))} disabled={sent} style={{ width: 100, flex: 'none' }}>
              {D.countryCodes.map(c => <option key={c.code} value={c.code}>{c.label} {c.code}</option>)}
            </select>
            <div className="input-icon" style={{ flex: 1 }}><Icon name="phone" /><input className="input" value={field} onChange={e => { setField(e.target.value); setApi('idle'); }} disabled={sent} /></div>
          </div>
        )}

        {/* API validation status banner */}
        {apiMsg && (
          <div className="row gap-2" style={{ fontSize: 12, color: toneColor[apiMsg.tone], background: toneBg[apiMsg.tone], borderRadius: 9, padding: '7px 11px', marginTop: 9, fontWeight: 600 }}>
            {api === 'checking' ? <span style={{ width: 13, height: 13, border: '2px solid rgba(38,112,230,.3)', borderTopColor: 'var(--blue-600)', borderRadius: 99, animation: 'spin .7s linear infinite' }} /> : <Icon name={apiMsg.icon} size={14} />}
            {apiMsg.text}
          </div>
        )}

        {!sent ? (
          <button className="btn btn-outline btn-sm btn-block" style={{ marginTop: 12 }} disabled={checking} onClick={runApi}>
            {checking ? <><span style={{ width: 15, height: 15, border: '2px solid rgba(38,112,230,.3)', borderTopColor: 'var(--blue-600)', borderRadius: 99, animation: 'spin .7s linear infinite' }} />{kind === 'email' ? 'Checking email…' : 'Sending OTP…'}</> : <><Icon name="send" size={15} />Send OTP</>}
          </button>
        ) : (
          <div style={{ marginTop: 14 }}>
            <div className="row gap-2" style={{ justifyContent: 'space-between' }}>
              {otp.map((d, i) => (
                <input key={i} ref={el => refs.current[i] = el} value={d} inputMode="numeric" maxLength={1} disabled={verified}
                  onChange={e => set(i, e.target.value)} onKeyDown={e => onKey(i, e)}
                  style={{ width: 44, height: 50, textAlign: 'center', fontSize: 20, fontWeight: 700, fontFamily: 'var(--font-display)', border: '1.5px solid ' + (otpErr ? 'var(--red-500)' : d ? (verified ? '#7fd3ad' : 'var(--blue-400)') : 'var(--line)'), borderRadius: 11, color: 'var(--ink)', outline: 'none', background: otpErr ? 'var(--red-50)' : d ? (verified ? '#fff' : 'var(--blue-50)') : '#fff' }} />
              ))}
            </div>
            {otpErr && <div className="row gap-2" style={{ fontSize: 12, color: 'var(--red-600)', marginTop: 8, fontWeight: 600 }}><Icon name="alert" size={14} />OTP incorrect — please try again</div>}
            {!verified && (
              <div className="row spread" style={{ marginTop: 10, fontSize: 12.5 }}>
                <span className="faint">Didn't get the code?</span>
                <div className="row gap-3">
                  {kind === 'email' && cooldown <= 0 && <button onClick={() => setCooldown(60)} style={{ background: 'none', border: 'none', color: 'var(--blue-600)', fontWeight: 700, cursor: 'pointer', fontSize: 12.5 }}>Resend Email</button>}
                  {cooldown > 0
                    ? <span className="muted">Resend in <b className="num" style={{ color: 'var(--ink-2)' }}>0:{String(cooldown).padStart(2, '0')}</b></span>
                    : <button onClick={() => setCooldown(60)} style={{ background: 'none', border: 'none', color: 'var(--blue-600)', fontWeight: 700, cursor: 'pointer', fontSize: 12.5 }}>Resend OTP</button>}
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }

  /* standalone Verify screen (login path) */
  function Verify({ go }) {
    const [both, setBoth] = useState(false);
    return (
      <AuthShell>
        <div className="anim-fade-up">
          <button className="btn btn-ghost btn-sm" style={{ marginBottom: 14, marginLeft: -8 }} onClick={() => go('login')}><Icon name="chevL" size={16} />Back</button>
          <div style={{ width: 54, height: 54, borderRadius: 14, background: 'var(--blue-50)', display: 'grid', placeItems: 'center', color: 'var(--blue-600)', marginBottom: 16 }}><Icon name="shield" size={27} /></div>
          <h1 style={{ fontSize: 27, fontWeight: 800 }}>Verify it's you</h1>
          <p className="muted" style={{ fontSize: 14.5, marginTop: 6, marginBottom: 20 }}>Confirm both your email and mobile to securely access your records.</p>
          <VerifyPanel email={D.user.email} phone="9876500012" onChange={setBoth} />
          <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 20, opacity: both ? 1 : .55 }} disabled={!both} onClick={() => go('app')}>{both ? 'Continue to Portal' : 'Verify email & phone to continue'}<Icon name="arrowR" size={19} /></button>
          <p className="faint" style={{ fontSize: 11.5, textAlign: 'center', marginTop: 14 }}>Demo: enter any 6 digits to verify · type "000000" for an incorrect-OTP state · use an email with "full"/"bounce" to see API states</p>
        </div>
      </AuthShell>
    );
  }

  Object.assign(window, { Welcome, LoginSelect, Verify, AuthShell, VerifyPanel, BrandPanel });
  const s = document.createElement('style');
  s.textContent = '@keyframes ping{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}';
  document.head.appendChild(s);
})();