// screens-auth.jsx — Landing page + login/register

function LandingScreen({ onEnter }) {
  const [mode, setMode] = React.useState('landing'); // landing | login | register
  return (
    <div style={{
      width: '100%', height: '100%', overflow: 'hidden',
      background: 'linear-gradient(180deg, #1F1A14 0%, #2A2017 65%, #3D2A1C 100%)',
      color: '#fff', position: 'relative',
    }}>
      {/* Hero photo with overlay */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: '58%',
        backgroundImage: 'url(https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=1200&q=80)',
        backgroundSize: 'cover', backgroundPosition: 'center',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(31,26,20,.3) 0%, rgba(31,26,20,.5) 60%, rgba(31,26,20,1) 100%)',
        }} />
      </div>

      <div style={{ position: 'relative', zIndex: 2, padding: '60px 28px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 9, background: 'var(--primary)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400, color: '#fff', paddingBottom: 2,
          }}>I</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, letterSpacing: -0.01 }}>ImmoBot</div>
        </div>

        {mode === 'landing' && (
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 44 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--primary)', letterSpacing: 0.08, textTransform: 'uppercase', marginBottom: 12 }}>
              Ihr KI-Immobiliensucher
            </div>
            <h1 style={{
              margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 52, lineHeight: 0.95, letterSpacing: -0.025, marginBottom: 14,
            }}>
              Die nächste Immobilie findet sich von selbst.
            </h1>
            <p style={{ margin: 0, fontSize: 15, color: 'rgba(255,255,255,.75)', lineHeight: 1.5, marginBottom: 28, maxWidth: 320 }}>
              Wir scannen ImmoScout24 und Kleinanzeigen rund um die Uhr — bewertet von KI, sortiert nach Rendite.
            </p>
            <button
              className="btn btn-accent" style={{ width: '100%', padding: '15px 20px', fontSize: 16 }}
              onClick={() => setMode('register')}
            >
              Kostenlos starten
            </button>
            <button
              className="btn btn-ghost" style={{ width: '100%', color: '#fff', marginTop: 10, fontSize: 14 }}
              onClick={() => setMode('login')}
            >
              Ich habe bereits ein Konto
            </button>
            <div style={{ display: 'flex', gap: 14, marginTop: 28, justifyContent: 'center', color: 'rgba(255,255,255,.55)', fontSize: 12 }}>
              <span>✓ 14 Tage gratis</span>
              <span>✓ Keine Bindung</span>
              <span>✓ DSGVO</span>
            </div>
          </div>
        )}

        {mode === 'login' && <LoginForm onBack={() => setMode('landing')} onEnter={onEnter} onSwitch={() => setMode('register')} />}
        {mode === 'register' && <RegisterForm onBack={() => setMode('landing')} onEnter={onEnter} onSwitch={() => setMode('login')} />}
      </div>
    </div>
  );
}

function LoginForm({ onBack, onEnter, onSwitch }) {
  const [email, setEmail] = React.useState('maxim.berger@example.de');
  const [pw, setPw] = React.useState('••••••••');
  const [loading, setLoading] = React.useState(false);
  const submit = () => {
    setLoading(true);
    setTimeout(onEnter, 700);
  };
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 36 }}>
      <button onClick={onBack} style={{
        alignSelf: 'flex-start', background: 'rgba(255,255,255,.12)', border: 0,
        color: '#fff', padding: '6px 12px 6px 8px', borderRadius: 999, fontSize: 13, fontWeight: 600,
        display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', marginBottom: 18,
      }}><I.chevL style={{ width: 16, height: 16 }} /> Zurück</button>
      <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 38, lineHeight: 1.0, letterSpacing: -0.02, marginBottom: 6 }}>
        Willkommen zurück
      </h2>
      <p style={{ margin: 0, fontSize: 14, color: 'rgba(255,255,255,.6)', marginBottom: 24 }}>
        Melden Sie sich an, um Ihre Suchen weiterzuführen.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
        <input
          value={email} onChange={e => setEmail(e.target.value)}
          placeholder="E-Mail"
          style={authInputStyle}
        />
        <input
          value={pw} onChange={e => setPw(e.target.value)}
          placeholder="Passwort" type="password"
          style={authInputStyle}
        />
      </div>
      <button
        onClick={submit} disabled={loading}
        className="btn btn-accent"
        style={{ width: '100%', padding: '15px', fontSize: 16, opacity: loading ? 0.7 : 1 }}
      >
        {loading ? 'Anmelden…' : 'Anmelden'}
      </button>
      <button onClick={onSwitch} className="btn btn-ghost" style={{ color: 'rgba(255,255,255,.7)', marginTop: 14, fontSize: 14, width: '100%' }}>
        Noch kein Konto? <span style={{ color: '#fff', fontWeight: 700, marginLeft: 4 }}>Registrieren</span>
      </button>
    </div>
  );
}

function RegisterForm({ onBack, onEnter, onSwitch }) {
  const [step, setStep] = React.useState(1);
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 36 }}>
      <button onClick={onBack} style={{
        alignSelf: 'flex-start', background: 'rgba(255,255,255,.12)', border: 0,
        color: '#fff', padding: '6px 12px 6px 8px', borderRadius: 999, fontSize: 13, fontWeight: 600,
        display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', marginBottom: 18,
      }}><I.chevL style={{ width: 16, height: 16 }} /> Zurück</button>
      <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 38, lineHeight: 1.0, letterSpacing: -0.02, marginBottom: 6 }}>
        Konto erstellen
      </h2>
      <p style={{ margin: 0, fontSize: 14, color: 'rgba(255,255,255,.6)', marginBottom: 24 }}>
        14 Tage gratis. Jederzeit kündbar.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
        <input placeholder="Vor- und Nachname" defaultValue="Maxim Berger" style={authInputStyle} />
        <input placeholder="E-Mail" defaultValue="maxim.berger@example.de" style={authInputStyle} />
        <input placeholder="Passwort wählen" type="password" defaultValue="••••••••" style={authInputStyle} />
      </div>
      <button
        onClick={onEnter}
        className="btn btn-accent"
        style={{ width: '100%', padding: '15px', fontSize: 16 }}
      >
        Konto erstellen
      </button>
      <p style={{ fontSize: 11, color: 'rgba(255,255,255,.45)', textAlign: 'center', marginTop: 14, lineHeight: 1.5 }}>
        Mit der Registrierung akzeptiere ich die AGB und<br/> Datenschutzbestimmungen.
      </p>
      <button onClick={onSwitch} className="btn btn-ghost" style={{ color: 'rgba(255,255,255,.7)', marginTop: 4, fontSize: 14, width: '100%' }}>
        Bereits Mitglied? <span style={{ color: '#fff', fontWeight: 700, marginLeft: 4 }}>Anmelden</span>
      </button>
    </div>
  );
}

const authInputStyle = {
  background: 'rgba(255,255,255,.10)',
  border: '1px solid rgba(255,255,255,.16)',
  color: '#fff',
  padding: '14px 16px',
  fontSize: 15,
  borderRadius: 12,
  fontFamily: 'var(--font-sans)',
  outline: 'none',
};

Object.assign(window, { LandingScreen });