// auth.jsx — 4 variations of Auth + Onboarding (welcome → signup → handicap)
// Each variant is a self-contained mini-prototype with its own step state.

const _T = window.T_AU, _I = window.Icon_AU, _Av = window.Avatar_AU, _PS = window.PhoneScreen_AU;

// ─────────────────────────────────────────────────────────────────
// V1 — EDITORIAL DARK
// Playfair Display hero, gold accents, full-bleed. Premium magazine feel.
// ─────────────────────────────────────────────────────────────────
function AuthV1() {
  const [step, setStep] = React.useState(0);
  const [hcp, setHcp] = React.useState(8);

  return (
    <_PS bg={_T.webBg} statusDark hideHome={false}>
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        {/* film grain */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.04,
          backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }}/>
        {/* gold glow */}
        <div style={{
          position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
          width: 420, height: 420, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 60%)',
          pointerEvents: 'none',
        }}/>

        {step === 0 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '32px 28px 24px', color: _T.webText }}>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ font: `600 11px/1 ${_T.fontBody}`, letterSpacing: '0.32em', color: _T.webGold, textTransform: 'uppercase', marginBottom: 24 }}>
                anTee·Up Golf
              </div>
              <h1 style={{ font: `700 56px/0.95 ${_T.fontDisplay}`, letterSpacing: '-0.02em', margin: 0, color: _T.webText }}>
                Built for<br/>groups that<br/><em style={{ color: _T.webGold, fontStyle: 'italic' }}>play for</em><br/>money.
              </h1>
              <p style={{ font: `300 16px/1.5 ${_T.fontBody}`, color: 'rgba(240,235,224,0.72)', maxWidth: 320, marginTop: 28 }}>
                Live leaderboards, every press tracked, automatic settlement. Thirteen formats. One app.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <button onClick={() => setStep(1)} style={{
                background: _T.webGold, color: _T.webBg, border: 'none',
                padding: '18px 0', borderRadius: 100,
                font: `600 16px/1 ${_T.fontBody}`, cursor: 'pointer',
                boxShadow: '0 8px 24px rgba(201,168,76,0.24)',
              }}>Create account</button>
              <button onClick={() => setStep(1)} style={{
                background: 'transparent', color: _T.webText,
                border: '1px solid rgba(255,255,255,0.18)',
                padding: '17px 0', borderRadius: 100,
                font: `600 16px/1 ${_T.fontBody}`, cursor: 'pointer',
              }}>I already have one</button>
            </div>
          </div>
        )}

        {step === 1 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '24px 28px', color: _T.webText }}>
            <button onClick={() => setStep(0)} style={{ background: 'none', border: 'none', color: 'rgba(240,235,224,0.6)', padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, font: `400 14px/1 ${_T.fontBody}` }}>
              <_I name="chevL" size={18}/> Back
            </button>
            <div style={{ marginTop: 28, marginBottom: 28 }}>
              <div style={{ font: `600 11px/1 ${_T.fontBody}`, letterSpacing: '0.32em', color: _T.webGold, textTransform: 'uppercase', marginBottom: 12 }}>Step 1 of 2</div>
              <h2 style={{ font: `700 36px/1 ${_T.fontDisplay}`, margin: 0, letterSpacing: '-0.01em' }}>
                Tell us<br/><em style={{ color: _T.webGold }}>your name.</em>
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
              <Field1 label="Display name" placeholder="Mike Lawson" defaultValue="Mike Lawson"/>
              <Field1 label="Email" placeholder="mike@golfclub.co" defaultValue="mike@golfclub.co" type="email"/>
              <Field1 label="Password" placeholder="••••••••" defaultValue="••••••••" type="password"/>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'rgba(240,235,224,0.6)', font: `300 13px/1.4 ${_T.fontBody}`, marginTop: 6 }}>
                <div style={{ width: 18, height: 18, borderRadius: 4, border: `1.5px solid ${_T.webGold}`, background: _T.webGold, display: 'flex', alignItems: 'center', justifyContent: 'center', color: _T.webBg, flexShrink: 0 }}>
                  <_I name="check" size={14} stroke={2.5}/>
                </div>
                I'm 18+ and agree to Terms & Privacy.
              </div>
            </div>
            <button onClick={() => setStep(2)} style={{
              background: _T.webGold, color: _T.webBg, border: 'none',
              padding: '18px 0', borderRadius: 100,
              font: `600 16px/1 ${_T.fontBody}`, cursor: 'pointer',
              boxShadow: '0 8px 24px rgba(201,168,76,0.24)',
            }}>Continue</button>
          </div>
        )}

        {step === 2 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '24px 28px', color: _T.webText }}>
            <button onClick={() => setStep(1)} style={{ background: 'none', border: 'none', color: 'rgba(240,235,224,0.6)', padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, font: `400 14px/1 ${_T.fontBody}` }}>
              <_I name="chevL" size={18}/> Back
            </button>
            <div style={{ marginTop: 28, marginBottom: 20 }}>
              <div style={{ font: `600 11px/1 ${_T.fontBody}`, letterSpacing: '0.32em', color: _T.webGold, textTransform: 'uppercase', marginBottom: 12 }}>Step 2 of 2</div>
              <h2 style={{ font: `700 36px/1 ${_T.fontDisplay}`, margin: 0, letterSpacing: '-0.01em' }}>
                What's your<br/><em style={{ color: _T.webGold }}>handicap?</em>
              </h2>
              <p style={{ font: `300 14px/1.5 ${_T.fontBody}`, color: 'rgba(240,235,224,0.6)', marginTop: 14, maxWidth: 280 }}>
                We'll allocate strokes hole-by-hole automatically. You can connect GHIN later.
              </p>
            </div>
            {/* Big number tied to scrubber */}
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 26 }}>
              <div style={{
                font: `400 144px/1 ${_T.fontDisplay}`, color: _T.webGold,
                fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.04em',
              }}>{hcp.toFixed(1)}</div>
              <input type="range" min={0} max={36} step={0.1} value={hcp}
                onChange={e => setHcp(parseFloat(e.target.value))}
                style={{
                  width: '90%', accentColor: _T.webGold,
                }}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', width: '90%', font: `400 12px/1 ${_T.fontMono}`, color: 'rgba(240,235,224,0.4)' }}>
                <span>scratch</span><span>36</span>
              </div>
              <button style={{ background: 'transparent', border: `1px solid ${_T.webGold}`, color: _T.webGold, padding: '10px 18px', borderRadius: 100, font: `600 13px/1 ${_T.fontBody}`, cursor: 'pointer' }}>
                Connect GHIN instead
              </button>
            </div>
            <button onClick={() => setStep(3)} style={{
              background: _T.webGold, color: _T.webBg, border: 'none',
              padding: '18px 0', borderRadius: 100, marginTop: 16,
              font: `600 16px/1 ${_T.fontBody}`, cursor: 'pointer',
              boxShadow: '0 8px 24px rgba(201,168,76,0.24)',
            }}>Finish · Let's play</button>
          </div>
        )}

        {step === 3 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '32px 28px', color: _T.webText, alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
            <div style={{
              width: 96, height: 96, borderRadius: '50%',
              background: `linear-gradient(135deg, ${_T.webGold} 0%, ${_T.webGoldLight} 100%)`,
              color: _T.webBg, font: `700 36px/1 ${_T.fontDisplay}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 32,
              boxShadow: '0 12px 40px rgba(201,168,76,0.32)',
            }}>ML</div>
            <h2 style={{ font: `700 44px/0.95 ${_T.fontDisplay}`, margin: 0, letterSpacing: '-0.02em' }}>
              Welcome,<br/><em style={{ color: _T.webGold }}>Mike.</em>
            </h2>
            <p style={{ font: `300 15px/1.5 ${_T.fontBody}`, color: 'rgba(240,235,224,0.7)', maxWidth: 280, marginTop: 18 }}>
              Your account is ready. The first tee awaits.
            </p>
            <button onClick={() => setStep(0)} style={{
              background: _T.webGold, color: _T.webBg, border: 'none',
              padding: '16px 40px', borderRadius: 100, marginTop: 36,
              font: `600 15px/1 ${_T.fontBody}`, cursor: 'pointer',
            }}>Open the app →</button>
          </div>
        )}
      </div>
    </_PS>
  );
}

function Field1({ label, placeholder, defaultValue, type = 'text' }) {
  return (
    <div>
      <div style={{ font: `400 11px/1 ${_T.fontBody}`, letterSpacing: '0.2em', color: 'rgba(201,168,76,0.7)', textTransform: 'uppercase', marginBottom: 8 }}>
        {label}
      </div>
      <input type={type} defaultValue={defaultValue} placeholder={placeholder} style={{
        width: '100%', boxSizing: 'border-box',
        background: 'transparent', color: _T.webText,
        border: 'none', borderBottom: `1px solid rgba(255,255,255,0.18)`,
        padding: '8px 0 12px',
        font: `400 18px/1 ${_T.fontBody}`, outline: 'none',
      }}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// V2 — LIGHT CLUB-CLEAN
// Cream bg, white cards, simple stacked. Closest to the existing app.
// ─────────────────────────────────────────────────────────────────
function AuthV2() {
  const [step, setStep] = React.useState(0);
  const [hcp, setHcp] = React.useState(8);

  return (
    <_PS bg={_T.bg}>
      {step === 0 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '20px 24px 28px' }}>
          {/* Gradient pad like welcome screen */}
          <div style={{
            flex: 1, borderRadius: 24,
            background: `linear-gradient(180deg, ${_T.primaryDeep} 0%, ${_T.primary} 60%, ${_T.bg} 100%)`,
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            padding: '32px 24px 24px', color: '#fff', position: 'relative', overflow: 'hidden',
          }}>
            {/* Course illustration */}
            <CourseHill/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <Logo/>
              <h1 style={{ font: `700 28px/1.15 ${_T.fontApp}`, margin: '20px 0 8px', letterSpacing: '-0.01em' }}>
                Up and running<br/>before the first tee.
              </h1>
              <p style={{ font: `400 14px/1.5 ${_T.fontApp}`, color: 'rgba(255,255,255,0.78)', margin: 0, maxWidth: 280 }}>
                Live scoring and wager settlement for groups that play for money.
              </p>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
            <button onClick={() => setStep(1)} style={btnPrimary}>Create account</button>
            <button onClick={() => setStep(1)} style={btnSecondary}>Sign in</button>
          </div>
        </div>
      )}

      {step === 1 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '12px 20px 24px' }}>
          <TopBar onBack={() => setStep(0)} title="Create account"/>
          <div style={{
            background: '#fff', borderRadius: 18, padding: 22, marginTop: 18,
            boxShadow: '0 1px 4px rgba(27,58,45,0.05), 0 8px 24px rgba(27,58,45,0.06)',
          }}>
            <Field2 label="Display name" value="Mike Lawson"/>
            <Field2 label="Email" value="mike@golfclub.co" icon="bell"/>
            <Field2 label="Password" value="••••••••" type="password"/>
            <button onClick={() => setStep(2)} style={{ ...btnPrimary, marginTop: 18 }}>Continue</button>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '20px 0' }}>
              <div style={{ flex: 1, height: 1, background: _T.divider }}/>
              <span style={{ font: `400 11px/1 ${_T.fontApp}`, color: _T.inkFaint, letterSpacing: '0.12em' }}>OR</span>
              <div style={{ flex: 1, height: 1, background: _T.divider }}/>
            </div>
            <button style={{ ...btnSocial, marginBottom: 8 }}>
              <span style={{ width: 18, height: 18, borderRadius: 9, background: 'conic-gradient(from 0deg, #4285F4, #34A853, #FBBC05, #EA4335, #4285F4)' }}/>
              Continue with Google
            </button>
            <button style={{ ...btnSocial, background: '#000', color: '#fff', border: 'none' }}>
               Continue with Apple
            </button>
          </div>
          <div style={{ flex: 1 }}/>
          <p style={{ font: `400 12px/1.5 ${_T.fontApp}`, color: _T.inkFaint, textAlign: 'center', margin: 0, padding: '0 20px' }}>
            By continuing you agree to our <u>Terms</u> and <u>Privacy Policy</u>.
          </p>
        </div>
      )}

      {step === 2 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '12px 20px 24px' }}>
          <TopBar onBack={() => setStep(1)} title="Your handicap"/>
          <Stepper step={2} total={2}/>
          <div style={{
            background: '#fff', borderRadius: 18, padding: 24, marginTop: 18,
            boxShadow: '0 1px 4px rgba(27,58,45,0.05), 0 8px 24px rgba(27,58,45,0.06)',
            textAlign: 'center',
          }}>
            <div style={{ font: `600 12px/1 ${_T.fontApp}`, color: _T.inkSub, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 18 }}>
              Handicap Index
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
              <button onClick={() => setHcp(Math.max(0, hcp - 0.1))} style={dialBtn}>
                <_I name="minus" size={26} stroke={2.5}/>
              </button>
              <div style={{ font: `700 64px/1 ${_T.fontApp}`, color: _T.primary, fontVariantNumeric: 'tabular-nums', minWidth: 140 }}>
                {hcp.toFixed(1)}
              </div>
              <button onClick={() => setHcp(Math.min(36, hcp + 0.1))} style={dialBtn}>
                <_I name="plus" size={26} stroke={2.5}/>
              </button>
            </div>
            <div style={{ marginTop: 24, padding: 14, background: _T.mint, borderRadius: 12, textAlign: 'left', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <_I name="shield" size={20} style={{ color: _T.primary, flexShrink: 0, marginTop: 2 }}/>
              <div>
                <div style={{ font: `600 13px/1.3 ${_T.fontApp}`, color: _T.primary }}>Connect GHIN</div>
                <div style={{ font: `400 12px/1.4 ${_T.fontApp}`, color: _T.inkSub, marginTop: 2 }}>Pull your official index automatically</div>
              </div>
              <_I name="chevR" size={20} style={{ color: _T.primary, marginLeft: 'auto', marginTop: 6 }}/>
            </div>
          </div>
          <div style={{ flex: 1 }}/>
          <button onClick={() => setStep(3)} style={btnPrimary}>Finish setup</button>
          <button style={{ ...btnSecondary, background: 'transparent', boxShadow: 'none', marginTop: 8, color: _T.inkSub }}>Skip for now</button>
        </div>
      )}

      {step === 3 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px', textAlign: 'center' }}>
          <div style={{
            width: 100, height: 100, borderRadius: '50%',
            background: _T.primary, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            font: `700 38px/1 ${_T.fontApp}`, marginBottom: 28,
            boxShadow: `0 10px 28px ${_T.primary}40`,
          }}>ML</div>
          <h2 style={{ font: `700 30px/1.15 ${_T.fontApp}`, color: _T.primary, margin: 0, letterSpacing: '-0.01em' }}>
            Welcome, Mike!
          </h2>
          <p style={{ font: `400 15px/1.5 ${_T.fontApp}`, color: _T.inkSub, marginTop: 12, maxWidth: 280 }}>
            Your handicap is set. Time to play.
          </p>
          <button onClick={() => setStep(0)} style={{ ...btnPrimary, width: '100%', marginTop: 36 }}>Let's play</button>
        </div>
      )}
    </_PS>
  );
}

function Logo({ inverse = false, size = 'lg' }) {
  const s = size === 'lg' ? 48 : 30;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: s, height: s, borderRadius: 12,
        background: _T.accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        <div style={{ width: s * 0.4, height: s * 0.4, borderRadius: '50%', background: '#fff', boxShadow: 'inset -2px -2px 4px rgba(0,0,0,0.1)' }}/>
        <div style={{ position: 'absolute', bottom: 4, width: 2, height: 10, background: '#fff', borderRadius: 1 }}/>
      </div>
      <div>
        <div style={{ font: `700 22px/1 ${_T.fontApp}`, color: inverse ? _T.primary : '#fff', letterSpacing: '-0.01em' }}>anTee-Up</div>
        <div style={{ font: `400 10px/1 ${_T.fontApp}`, color: inverse ? _T.inkSub : 'rgba(255,255,255,0.5)', letterSpacing: '0.32em', textTransform: 'uppercase', marginTop: 4 }}>Golf</div>
      </div>
    </div>
  );
}

function CourseHill() {
  return (
    <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMax slice" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, width: '100%', height: 180, opacity: 0.16 }}>
      <path d="M0,140 Q80,80 160,110 T320,90 L320,200 L0,200 Z" fill="#fff"/>
      <path d="M0,170 Q100,130 200,150 T320,140 L320,200 L0,200 Z" fill="#fff" opacity="0.6"/>
      <circle cx="240" cy="50" r="22" fill="#fff" opacity="0.4"/>
    </svg>
  );
}

const btnPrimary = {
  background: _T.primary, color: '#fff', border: 'none',
  padding: '16px 0', borderRadius: 12,
  font: `600 16px/1 ${_T.fontApp}`, cursor: 'pointer',
  boxShadow: `0 4px 14px ${_T.primary}40`,
};
const btnSecondary = {
  background: _T.card, color: _T.primary, border: 'none',
  padding: '16px 0', borderRadius: 12,
  font: `600 16px/1 ${_T.fontApp}`, cursor: 'pointer',
  boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
};
const btnSocial = {
  width: '100%', padding: '13px 0', borderRadius: 12,
  border: `1px solid ${_T.divider}`, background: '#fff', cursor: 'pointer',
  font: `600 14px/1 ${_T.fontApp}`, color: _T.ink,
  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
};
const dialBtn = {
  width: 56, height: 56, borderRadius: '50%',
  background: _T.mint, color: _T.primary, border: 'none', cursor: 'pointer',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
};

function TopBar({ onBack, title, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 4 }}>
      <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: _T.ink }}>
        <_I name="chevL" size={26}/>
      </button>
      <div style={{ font: `700 16px/1 ${_T.fontApp}`, color: _T.ink }}>{title}</div>
      <div style={{ width: 26 }}>{action}</div>
    </div>
  );
}
function Field2({ label, value, type = 'text', icon }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ font: `600 12px/1 ${_T.fontApp}`, color: _T.inkSub, marginBottom: 6 }}>{label}</div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        border: `1px solid ${_T.divider}`, borderRadius: 12,
        padding: '12px 14px', background: _T.bg,
      }}>
        {icon && <_I name={icon} size={18} style={{ color: _T.inkFaint }}/>}
        <input type={type} defaultValue={value} style={{
          flex: 1, border: 'none', background: 'transparent', outline: 'none',
          font: `400 15px/1.2 ${_T.fontApp}`, color: _T.ink,
        }}/>
      </div>
    </div>
  );
}
function Stepper({ step, total }) {
  return (
    <div style={{ display: 'flex', gap: 4, marginTop: 12 }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{ flex: 1, height: 4, borderRadius: 4, background: i < step ? _T.primary : _T.divider }}/>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// V3 — CONVERSATIONAL
// One question per screen. Huge type. Animated transitions.
// ─────────────────────────────────────────────────────────────────
function AuthV3() {
  const [step, setStep] = React.useState(0);
  const [name, setName] = React.useState('Mike');
  const [hcp, setHcp] = React.useState(8);
  const steps = ['intro', 'name', 'email', 'handicap', 'done'];

  const next = () => setStep(Math.min(step + 1, steps.length - 1));
  const back = () => setStep(Math.max(step - 1, 0));

  return (
    <_PS bg={_T.bg}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '14px 24px 24px' }}>
        {step > 0 && step < 4 && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button onClick={back} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: _T.ink }}>
              <_I name="chevL" size={24}/>
            </button>
            <div style={{ flex: 1, height: 3, background: _T.divider, borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ width: `${(step / 4) * 100}%`, height: '100%', background: _T.primary, transition: 'width 320ms ease' }}/>
            </div>
          </div>
        )}

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBottom: 40 }}>
          {step === 0 && (
            <div>
              <Logo inverse/>
              <h1 style={{ font: `700 38px/1.05 ${_T.fontApp}`, color: _T.primary, margin: '36px 0 14px', letterSpacing: '-0.015em' }}>
                Let's get you to the first tee.
              </h1>
              <p style={{ font: `400 16px/1.5 ${_T.fontApp}`, color: _T.inkSub, margin: 0 }}>
                Three quick questions. Under a minute.
              </p>
            </div>
          )}
          {step === 1 && (
            <div>
              <div style={{ font: `400 13px/1 ${_T.fontApp}`, color: _T.inkFaint, marginBottom: 8 }}>1 of 3</div>
              <h2 style={{ font: `700 32px/1.1 ${_T.fontApp}`, color: _T.ink, margin: 0, marginBottom: 24, letterSpacing: '-0.01em' }}>
                What's your name?
              </h2>
              <input value={name} onChange={e => setName(e.target.value)}
                style={{
                  width: '100%', boxSizing: 'border-box',
                  border: 'none', borderBottom: `2px solid ${_T.primary}`,
                  background: 'transparent', padding: '8px 0',
                  font: `400 32px/1 ${_T.fontApp}`, color: _T.ink, outline: 'none',
                }}/>
              <div style={{ font: `400 13px/1.4 ${_T.fontApp}`, color: _T.inkFaint, marginTop: 16 }}>
                Shown on the leaderboard. You can change it later.
              </div>
            </div>
          )}
          {step === 2 && (
            <div>
              <div style={{ font: `400 13px/1 ${_T.fontApp}`, color: _T.inkFaint, marginBottom: 8 }}>2 of 3</div>
              <h2 style={{ font: `700 32px/1.1 ${_T.fontApp}`, color: _T.ink, margin: 0, marginBottom: 24, letterSpacing: '-0.01em' }}>
                Nice. Where do we send the round receipts?
              </h2>
              <input defaultValue="mike@golfclub.co" placeholder="email"
                style={{
                  width: '100%', boxSizing: 'border-box',
                  border: 'none', borderBottom: `2px solid ${_T.primary}`,
                  background: 'transparent', padding: '8px 0',
                  font: `400 22px/1 ${_T.fontApp}`, color: _T.ink, outline: 'none',
                }}/>
              <div style={{ marginTop: 28, padding: 14, background: _T.mint, borderRadius: 12 }}>
                <div style={{ font: `600 13px/1.3 ${_T.fontApp}`, color: _T.primary, marginBottom: 4 }}>Or, faster:</div>
                <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                  <button style={{ ...btnSocial, flex: 1, padding: '10px 0', fontSize: 13 }}>Google</button>
                  <button style={{ ...btnSocial, flex: 1, padding: '10px 0', fontSize: 13, background: '#000', color: '#fff', borderColor: 'transparent' }}>Apple</button>
                </div>
              </div>
            </div>
          )}
          {step === 3 && (
            <div>
              <div style={{ font: `400 13px/1 ${_T.fontApp}`, color: _T.inkFaint, marginBottom: 8 }}>3 of 3</div>
              <h2 style={{ font: `700 28px/1.1 ${_T.fontApp}`, color: _T.ink, margin: 0, marginBottom: 32, letterSpacing: '-0.01em' }}>
                Last thing — your handicap?
              </h2>
              <div style={{ textAlign: 'center' }}>
                <div style={{
                  font: `700 120px/1 ${_T.fontApp}`, color: _T.primary,
                  fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.04em',
                }}>{hcp.toFixed(1)}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 24, justifyContent: 'center', marginTop: 18 }}>
                  <button onClick={() => setHcp(Math.max(0, hcp - 1))} style={chip3}>−1</button>
                  <button onClick={() => setHcp(Math.max(0, hcp - 0.1))} style={chip3}>−.1</button>
                  <button onClick={() => setHcp(hcp + 0.1)} style={chip3}>+.1</button>
                  <button onClick={() => setHcp(hcp + 1)} style={chip3}>+1</button>
                </div>
                <button style={{
                  marginTop: 22, background: 'transparent', border: 'none',
                  color: _T.primary, font: `600 14px/1 ${_T.fontApp}`, cursor: 'pointer',
                  textDecoration: 'underline',
                }}>I have a GHIN number</button>
              </div>
            </div>
          )}
          {step === 4 && (
            <div style={{ textAlign: 'center' }}>
              <div style={{ font: `700 56px/1 ${_T.fontApp}`, color: _T.primary, marginBottom: 16, letterSpacing: '-0.02em' }}>
                Ready.
              </div>
              <p style={{ font: `400 17px/1.5 ${_T.fontApp}`, color: _T.inkSub, margin: 0, maxWidth: 280, marginLeft: 'auto', marginRight: 'auto' }}>
                {name}, your account is set up. You can join a round by code or start your own.
              </p>
            </div>
          )}
        </div>

        <button onClick={step < 4 ? next : () => setStep(0)} style={btnPrimary}>
          {step === 0 ? 'Start' : step < 4 ? 'Continue' : 'Open the app'}
        </button>
      </div>
    </_PS>
  );
}

const chip3 = {
  background: _T.mint, color: _T.primary, border: 'none',
  padding: '10px 16px', borderRadius: 10, cursor: 'pointer',
  font: `700 14px/1 ${_T.fontApp}`, minWidth: 50,
};

// ─────────────────────────────────────────────────────────────────
// V4 — COURSE BACKDROP  (push)
// Welcome over a course photo; glass form on top. Signup is full-bleed
// with course imagery framing each step.
// ─────────────────────────────────────────────────────────────────
function AuthV4() {
  const [step, setStep] = React.useState(0);
  const [hcp, setHcp] = React.useState(8);

  return (
    <_PS bg={_T.primaryDeep} statusDark>
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        {/* Course backdrop — abstract aerial */}
        <AerialBackdrop/>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,28,21,0.4) 0%, rgba(11,28,21,0.85) 60%, #0B1C15 100%)' }}/>

        {step === 0 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '24px 24px 24px', color: '#fff' }}>
            <div style={{ paddingTop: 12 }}>
              <Logo/>
            </div>
            <div style={{ flex: 1 }}/>
            <div style={{
              background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
              border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: 24, padding: 24, color: '#fff',
            }}>
              <Chip4>Early access</Chip4>
              <h1 style={{ font: `700 30px/1.1 ${_T.fontApp}`, margin: '12px 0 8px', letterSpacing: '-0.015em' }}>
                Track every press,<br/>every skin, every snake.
              </h1>
              <p style={{ font: `400 14px/1.5 ${_T.fontApp}`, color: 'rgba(255,255,255,0.78)', margin: 0 }}>
                Thirteen formats. Live leaderboards. Auto-settled by the app, not arguments on the 18th green.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
                <button onClick={() => setStep(1)} style={{ ...btnPrimary, flex: 1, background: _T.accent, boxShadow: '0 4px 14px rgba(230,126,34,0.4)' }}>Get started</button>
                <button onClick={() => setStep(1)} style={{ ...btnSocial, flex: 1, background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.24)' }}>Sign in</button>
              </div>
            </div>
          </div>
        )}

        {step === 1 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '14px 24px 24px', color: '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <button onClick={() => setStep(0)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: '#fff' }}>
                <_I name="chevL" size={24}/>
              </button>
              <div style={{ flex: 1, font: `600 13px/1 ${_T.fontApp}`, color: 'rgba(255,255,255,0.7)' }}>Account · 1 of 2</div>
            </div>
            <div style={{ flex: 1 }}/>
            <div style={{
              background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
              border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: 24, padding: 24, color: '#fff',
            }}>
              <h2 style={{ font: `700 22px/1.15 ${_T.fontApp}`, margin: 0, marginBottom: 18, letterSpacing: '-0.01em' }}>
                Create your account
              </h2>
              <Field4 label="Name" value="Mike Lawson"/>
              <Field4 label="Email" value="mike@golfclub.co"/>
              <Field4 label="Password" value="••••••••" type="password"/>
              <button onClick={() => setStep(2)} style={{ ...btnPrimary, width: '100%', marginTop: 16, background: _T.accent, boxShadow: '0 4px 14px rgba(230,126,34,0.4)' }}>Continue →</button>
              <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                <button style={{ ...btnSocial, flex: 1, background: 'rgba(255,255,255,0.06)', color: '#fff', borderColor: 'rgba(255,255,255,0.14)' }}>Google</button>
                <button style={{ ...btnSocial, flex: 1, background: 'rgba(255,255,255,0.06)', color: '#fff', borderColor: 'rgba(255,255,255,0.14)' }}>Apple</button>
              </div>
            </div>
          </div>
        )}

        {step === 2 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '14px 24px 24px', color: '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <button onClick={() => setStep(1)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: '#fff' }}>
                <_I name="chevL" size={24}/>
              </button>
              <div style={{ flex: 1, font: `600 13px/1 ${_T.fontApp}`, color: 'rgba(255,255,255,0.7)' }}>Handicap · 2 of 2</div>
            </div>
            <div style={{ flex: 1 }}/>
            <div style={{
              background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
              border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: 24, padding: 24, color: '#fff', textAlign: 'center',
            }}>
              <h2 style={{ font: `700 22px/1.15 ${_T.fontApp}`, margin: 0, marginBottom: 4, letterSpacing: '-0.01em' }}>What's your handicap?</h2>
              <p style={{ font: `400 13px/1.5 ${_T.fontApp}`, color: 'rgba(255,255,255,0.6)', margin: 0, marginBottom: 22 }}>We use this to allocate strokes hole-by-hole.</p>
              <HandicapDial value={hcp} onChange={setHcp}/>
              <button style={{
                marginTop: 18, background: 'transparent', border: '1px solid rgba(255,255,255,0.24)',
                color: '#fff', padding: '10px 18px', borderRadius: 100,
                font: `600 13px/1 ${_T.fontApp}`, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <_I name="shield" size={14}/> Connect GHIN
              </button>
              <button onClick={() => setStep(3)} style={{ ...btnPrimary, width: '100%', marginTop: 18, background: _T.accent, boxShadow: '0 4px 14px rgba(230,126,34,0.4)' }}>
                Finish →
              </button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px', color: '#fff', textAlign: 'center' }}>
            <div style={{
              width: 100, height: 100, borderRadius: '50%',
              background: _T.accent, color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: `700 38px/1 ${_T.fontApp}`, marginBottom: 28,
              boxShadow: '0 12px 40px rgba(230,126,34,0.5)',
            }}>ML</div>
            <h2 style={{ font: `700 32px/1.1 ${_T.fontApp}`, margin: 0, letterSpacing: '-0.015em' }}>
              You're in, Mike.
            </h2>
            <p style={{ font: `400 15px/1.5 ${_T.fontApp}`, color: 'rgba(255,255,255,0.7)', marginTop: 12 }}>
              Index 8.0 · Saved
            </p>
            <button onClick={() => setStep(0)} style={{
              ...btnPrimary, marginTop: 36, padding: '14px 32px',
              background: _T.accent, boxShadow: '0 4px 14px rgba(230,126,34,0.4)',
            }}>Take me home →</button>
          </div>
        )}
      </div>
    </_PS>
  );
}

function AerialBackdrop() {
  return (
    <svg viewBox="0 0 400 800" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <radialGradient id="fwy" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#3F7A4F"/>
          <stop offset="100%" stopColor="#1E4A2F"/>
        </radialGradient>
      </defs>
      <rect width="400" height="800" fill="#0E2219"/>
      <path d="M50,820 Q140,520 200,360 Q260,200 380,-20 L420,-20 L420,820 Z" fill="url(#fwy)" opacity="0.85"/>
      <path d="M60,820 Q130,580 180,420 Q230,260 320,40 L320,40 L320,820 Z" fill="#4F8C5F" opacity="0.45"/>
      {/* trees */}
      <circle cx="80" cy="180" r="22" fill="#1E3D26" opacity="0.7"/>
      <circle cx="120" cy="120" r="18" fill="#1E3D26" opacity="0.6"/>
      <circle cx="320" cy="280" r="28" fill="#1E3D26" opacity="0.7"/>
      <circle cx="60" cy="430" r="20" fill="#1E3D26" opacity="0.6"/>
      <circle cx="340" cy="540" r="24" fill="#1E3D26" opacity="0.7"/>
      {/* sand */}
      <ellipse cx="240" cy="320" rx="38" ry="18" fill="#E2C988" opacity="0.7"/>
      <ellipse cx="160" cy="540" rx="30" ry="14" fill="#E2C988" opacity="0.6"/>
      {/* green */}
      <circle cx="230" cy="200" r="34" fill="#7BB68B" opacity="0.9"/>
      <circle cx="230" cy="200" r="2" fill="#fff"/>
    </svg>
  );
}

function Chip4({ children }) {
  return (
    <span style={{
      display: 'inline-block',
      padding: '5px 10px', borderRadius: 999,
      background: 'rgba(230,126,34,0.18)', border: '1px solid rgba(230,126,34,0.35)',
      color: _T.accent, font: `700 11px/1 ${_T.fontApp}`,
      letterSpacing: '0.12em', textTransform: 'uppercase',
    }}>{children}</span>
  );
}
function Field4({ label, value, type = 'text' }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{ font: `400 11px/1 ${_T.fontApp}`, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <input type={type} defaultValue={value} style={{
        width: '100%', boxSizing: 'border-box',
        background: 'rgba(255,255,255,0.06)',
        border: '1px solid rgba(255,255,255,0.14)',
        borderRadius: 10, padding: '11px 14px',
        font: `500 15px/1 ${_T.fontApp}`, color: '#fff', outline: 'none',
      }}/>
    </div>
  );
}

function HandicapDial({ value, onChange }) {
  return (
    <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', height: 160 }}>
      <svg width="180" height="180" viewBox="0 0 180 180">
        <circle cx="90" cy="90" r="78" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="6"/>
        <circle cx="90" cy="90" r="78" fill="none" stroke={_T.accent} strokeWidth="6"
          strokeDasharray={`${(value / 36) * 490} 490`}
          transform="rotate(-90 90 90)" strokeLinecap="round"/>
      </svg>
      <div style={{ position: 'absolute', textAlign: 'center' }}>
        <div style={{ font: `700 52px/1 ${_T.fontApp}`, color: '#fff', letterSpacing: '-0.03em' }}>{value.toFixed(1)}</div>
        <div style={{ font: `400 10px/1 ${_T.fontApp}`, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 6 }}>handicap</div>
        <div style={{ display: 'flex', gap: 10, marginTop: 10, justifyContent: 'center' }}>
          <button onClick={() => onChange(Math.max(0, value - 0.1))} style={{ background: 'rgba(255,255,255,0.08)', border: 'none', color: '#fff', width: 32, height: 32, borderRadius: 16, cursor: 'pointer', font: `700 14px/1 ${_T.fontApp}` }}>−</button>
          <button onClick={() => onChange(Math.min(36, value + 0.1))} style={{ background: 'rgba(255,255,255,0.08)', border: 'none', color: '#fff', width: 32, height: 32, borderRadius: 16, cursor: 'pointer', font: `700 14px/1 ${_T.fontApp}` }}>+</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuthV1, AuthV2, AuthV3, AuthV4 });