// ScrollJob v2 — Auth screens (Sign in, Sign up, Forgot password)
// Two-column: form left, benefits right in V2.primarySoft.

function V2AuthShell({ title, sub, children, hideBenefits }) {
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <header style={{
        padding: '20px 32px', borderBottom: `1px solid ${V2.line}`, background: '#fff',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <V2Logo />
        <span style={{ fontSize: 13, color: V2.muted }}>Need help? <a style={{ color: V2.primary, textDecoration: 'none', fontWeight: 600 }}>Contact us</a></span>
      </header>
      <main style={{
        display: 'grid', gridTemplateColumns: hideBenefits ? '1fr' : '1fr 1fr',
        minHeight: 'calc(100% - 65px)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '64px 48px',
        }}>
          <div style={{ width: '100%', maxWidth: 420 }}>
            <h1 style={{
              margin: '0 0 8px', fontSize: 32, fontWeight: 800,
              color: V2.ink, letterSpacing: '-0.02em',
            }}>{title}</h1>
            <p style={{ margin: '0 0 28px', fontSize: 15.5, color: V2.muted, lineHeight: 1.55 }}>{sub}</p>
            {children}
          </div>
        </div>
        {!hideBenefits && <V2AuthBenefits />}
      </main>
    </div>
  );
}

function V2AuthBenefits() {
  return (
    <div style={{
      background: V2.primarySoft, padding: '64px 48px',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      borderLeft: `1px solid ${V2.line}`,
    }}>
      <div style={{ maxWidth: 440 }}>
        <div style={{
          display: 'inline-flex', padding: '4px 10px', marginBottom: 18,
          background: '#fff', border: `1px solid ${V2.primaryRing}`,
          color: V2.primaryInk, borderRadius: 999,
          fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>One account · search & hire</div>
        <h2 style={{
          margin: '0 0 14px', fontSize: 26, fontWeight: 700,
          color: V2.ink, letterSpacing: '-0.02em', lineHeight: 1.2,
        }}>Find the right job faster — and come back to it later.</h2>
        <p style={{ margin: '0 0 28px', fontSize: 15, color: V2.text, lineHeight: 1.6 }}>
          Save shortlists, get personalised alerts, build a hosted CV, and manage employer postings from one account.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            ['bookmark', 'Save jobs and come back later'],
            ['bell',     'Email alerts that match your preferences'],
            ['document', 'A hosted resume you can share with recruiters'],
            ['shield',   'Verified employers and trusted listings'],
          ].map(([icon, t]) => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{
                width: 34, height: 34, borderRadius: 10, background: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={icon} size={17} color={V2.primary} />
              </span>
              <span style={{ fontSize: 14.5, color: V2.ink, fontWeight: 500 }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AuthInput({ label, type = 'text', defaultValue, hint }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: V2.ink2, marginBottom: 6 }}>{label}</label>
      <input type={type} defaultValue={defaultValue} style={{
        width: '100%', padding: '12px 14px',
        background: '#fff', border: `1px solid ${V2.lineStrong}`, borderRadius: 10,
        fontSize: 15, outline: 'none', fontFamily: V2.font, color: V2.ink, boxSizing: 'border-box',
      }} />
      {hint && <div style={{ fontSize: 12, color: V2.muted, marginTop: 6 }}>{hint}</div>}
    </div>
  );
}

function ProviderBtn({ icon, label }) {
  return (
    <button style={{
      width: '100%', padding: '12px 16px',
      background: '#fff', color: V2.ink,
      border: `1px solid ${V2.lineStrong}`, borderRadius: 10,
      fontSize: 14.5, fontWeight: 600, cursor: 'pointer',
      fontFamily: V2.font, marginBottom: 10,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
    }}>
      {icon}
      Continue with {label}
    </button>
  );
}

function AuthDivider() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', margin: '18px 0', color: V2.muted, fontSize: 12.5 }}>
      <span style={{ flex: 1, borderTop: `1px solid ${V2.line}` }} />
      <span style={{ padding: '0 12px' }}>or with email</span>
      <span style={{ flex: 1, borderTop: `1px solid ${V2.line}` }} />
    </div>
  );
}

function GoogleIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
  );
}
function LinkedInIcon() {
  return <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#0A66C2" d="M20.4 20.5h-3.5v-5.6c0-1.3 0-3-1.8-3-1.9 0-2.1 1.4-2.1 2.9v5.7H9.4V9h3.4v1.6h.05c.5-.9 1.6-1.8 3.4-1.8 3.6 0 4.3 2.4 4.3 5.5v6.2zM5.3 7.4c-1.1 0-2-.9-2-2s.9-2 2-2c1.1 0 2 .9 2 2s-.9 2-2 2zm1.8 13H3.5V9h3.6v11.4z"/></svg>;
}

function V2SignInScreen() {
  return (
    <V2AuthShell title="Welcome back" sub="Sign in to your saved jobs, alerts and resume.">
      <ProviderBtn icon={<GoogleIcon />} label="Google" />
      <ProviderBtn icon={<LinkedInIcon />} label="LinkedIn" />
      <AuthDivider />
      <AuthInput label="Email" type="email" defaultValue="emma.carter@example.com" />
      <AuthInput label="Password" type="password" defaultValue="········" />
      <div style={{ textAlign: 'right', marginTop: -8, marginBottom: 16 }}>
        <a style={{ color: V2.primary, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>Forgot password?</a>
      </div>
      <V2Button variant="primary" size="lg" full>Sign in</V2Button>
      <p style={{ textAlign: 'center', marginTop: 22, color: V2.muted, fontSize: 13.5 }}>
        New to ScrollJob? <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Create a free account</a>
      </p>
    </V2AuthShell>
  );
}

function V2SignUpScreen() {
  return (
    <V2AuthShell title="Create your free account" sub="Save jobs, get alerts, build a hosted resume — all in one place.">
      <ProviderBtn icon={<GoogleIcon />} label="Google" />
      <ProviderBtn icon={<LinkedInIcon />} label="LinkedIn" />
      <AuthDivider />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <AuthInput label="First name" defaultValue="" />
        <AuthInput label="Last name"  defaultValue="" />
      </div>
      <AuthInput label="Email" type="email" />
      <AuthInput label="Password" type="password" hint="At least 8 characters with a number or symbol." />
      <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13, color: V2.text, marginBottom: 14, cursor: 'pointer' }}>
        <input type="checkbox" defaultChecked style={{ width: 16, height: 16, accentColor: V2.primary, marginTop: 2 }} />
        I agree to the <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Terms</a> and <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Privacy Policy</a>.
      </label>
      <V2Button variant="primary" size="lg" full>Create account</V2Button>
      <p style={{ textAlign: 'center', marginTop: 22, color: V2.muted, fontSize: 13.5 }}>
        Already have an account? <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Sign in</a>
      </p>
    </V2AuthShell>
  );
}

function V2ForgotPasswordScreen() {
  return (
    <V2AuthShell title="Reset your password" sub="Enter your email and we'll send you a reset link. Links expire after 30 minutes.">
      <AuthInput label="Email" type="email" defaultValue="emma.carter@example.com" />
      <V2Button variant="primary" size="lg" full>Send reset link</V2Button>
      <div style={{
        marginTop: 22, padding: 14,
        background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
        borderRadius: V2.rMd, fontSize: 13, color: V2.primaryInk, lineHeight: 1.55,
      }}>
        <strong>Didn't get the email?</strong> Check spam, or wait 60 seconds and try again. If your account uses Google or LinkedIn sign-in, reset via that provider instead.
      </div>
      <p style={{ textAlign: 'center', marginTop: 22, color: V2.muted, fontSize: 13.5 }}>
        Remembered it? <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Back to sign in</a>
      </p>
    </V2AuthShell>
  );
}

Object.assign(window, { V2SignInScreen, V2SignUpScreen, V2ForgotPasswordScreen });