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

function LandingScreen({ ctx, onEnter }) {
  const [mode, setMode] = React.useState('landing'); // landing | login | register
  const heroAsset = '/revamp/landing/hero.jpg';
  const textureAsset = '/revamp/landing/texture.jpg';
  const uiAsset = '/revamp/landing/ui-mockup.jpg';

  if (mode !== 'landing') {
    return (
      <div style={{
        width: '100%', height: '100%', overflow: 'hidden',
        background: 'radial-gradient(circle at 18% 12%, rgba(194,132,40,.32) 0, transparent 34%), linear-gradient(180deg, #1F1A14 0%, #2A2017 68%, #3D2A1C 100%)',
        color: '#fff', position: 'relative',
      }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .18, backgroundImage: `url(${textureAsset})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
        <div style={{ position: 'relative', zIndex: 2, padding: '60px 28px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
          <LandingLogo light />
          {mode === 'login' && <LoginForm ctx={ctx} onBack={() => setMode('landing')} onEnter={onEnter} onSwitch={() => setMode('register')} />}
          {mode === 'register' && <RegisterForm ctx={ctx} onBack={() => setMode('landing')} onEnter={onEnter} onSwitch={() => setMode('login')} />}
        </div>
      </div>
    );
  }

  return (
    <div className="phone-scroll" style={{
      width: '100%', height: '100%',
      background: 'linear-gradient(180deg, #FAF7F2 0%, #F4EEE4 52%, #1F1A14 52%, #1F1A14 100%)',
      color: 'var(--ink)', position: 'relative',
    }}>
      <div style={{ position: 'relative', minHeight: 760, padding: '18px 18px 0', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -140, right: -170, width: 360, height: 360, borderRadius: 999,
          background: 'radial-gradient(circle, rgba(194,132,40,.22), transparent 68%)', filter: 'blur(2px)'
        }} />
        <div style={{
          position: 'absolute', top: 90, left: -110, width: 260, height: 260, borderRadius: 999,
          background: 'radial-gradient(circle, rgba(92,63,14,.12), transparent 70%)'
        }} />

        <div style={{ position: 'relative', zIndex: 3, paddingTop: 'calc(var(--safe-top) + 8px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <LandingLogo />
          <button onClick={() => setMode('login')} className="btn btn-soft" style={{ padding: '9px 14px', fontSize: 13, boxShadow: 'var(--shadow-card)' }}>
            Login
          </button>
        </div>

        <div style={{ position: 'relative', zIndex: 2, paddingTop: 30 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 999, background: 'rgba(255,255,255,.78)', border: '1px solid rgba(220,211,197,.8)', boxShadow: 'var(--shadow-card)', marginBottom: 18 }}>
            <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--success)', boxShadow: '0 0 0 5px rgba(47,143,90,.12)' }} />
            <span style={{ fontSize: 12, fontWeight: 800, color: 'var(--primary-ink)', letterSpacing: .02 }}>KI scannt rund um die Uhr</span>
          </div>

          <h1 style={{
            margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 54, lineHeight: .92, letterSpacing: '-0.045em', color: 'var(--ink)',
          }}>
            Finden, bevor andere suchen.
          </h1>
          <p style={{ margin: '16px 0 0', fontSize: 16, lineHeight: 1.55, color: 'var(--ink-muted)', maxWidth: 340 }}>
            ImmoBot überwacht ImmoScout24 und Kleinanzeigen, bewertet Angebote per KI und zeigt sofort, welche Immobilie sich wirklich lohnt.
          </p>

          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            <button onClick={() => setMode('register')} className="btn btn-accent" style={{ flex: 1, padding: '15px 18px', fontSize: 15, boxShadow: '0 14px 34px rgba(194,132,40,.26)' }}>
              Kostenlos starten
            </button>
            <button onClick={() => setMode('login')} className="btn btn-outline" style={{ padding: '15px 16px', background: 'rgba(255,255,255,.62)' }}>
              Anmelden
            </button>
          </div>
        </div>

        <div style={{ position: 'relative', zIndex: 1, marginTop: 26, height: 404 }}>
          <div style={{
            position: 'absolute', inset: '0 0 auto', height: 330, borderRadius: 34, overflow: 'hidden',
            background: '#1F1A14', boxShadow: '0 24px 70px rgba(31,26,20,.24)', transform: 'rotate(-1.5deg)'
          }}>
            <img src={heroAsset} alt="ImmoBot KI Immobilien Suche" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: .94 }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,26,20,0) 34%, rgba(31,26,20,.72) 100%)' }} />
          </div>

          <div style={{ position: 'absolute', left: 14, right: 14, bottom: 28, display: 'grid', gap: 10 }}>
            <LandingMetric value="92" label="KI-Score" tone="accent" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <LandingMetric value="24/7" label="Monitoring" />
              <LandingMetric value="2 min" label="Push Alert" />
            </div>
          </div>
        </div>
      </div>

      <div style={{ position: 'relative', marginTop: -18, padding: '34px 18px 22px', background: '#1F1A14', color: '#fff', borderRadius: '34px 34px 0 0' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .16, backgroundImage: `url(${textureAsset})`, backgroundSize: 'cover', backgroundPosition: 'center top', borderRadius: '34px 34px 0 0' }} />
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div className="section-title" style={{ color: 'var(--primary)', marginBottom: 12 }}>Was die App für Sie übernimmt</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 36, lineHeight: 1, letterSpacing: '-.03em' }}>
            Von der Suche bis zur Entscheidung.
          </h2>

          <div style={{ marginTop: 22, borderRadius: 30, overflow: 'hidden', background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.1)', boxShadow: '0 20px 48px rgba(0,0,0,.18)' }}>
            <img src={uiAsset} alt="ImmoBot App Vorschau" style={{ width: '100%', display: 'block' }} />
          </div>

          <div style={{ display: 'grid', gap: 12, marginTop: 16 }}>
            <LandingFeature icon="⌁" title="Automatisch suchen" text="Neue Kauf- und Mietangebote werden laufend erkannt, normalisiert und dedupliziert." />
            <LandingFeature icon="✦" title="KI bewerten lassen" text="Score, Chancen, Risiken und Rendite-Indikatoren direkt in der Detailansicht." />
            <LandingFeature icon="↗" title="Sofort reagieren" text="Push-Benachrichtigung, Favoriten, Kontakttext und Share-Link für Freunde oder Partner." />
          </div>

          <button onClick={() => setMode('register')} className="btn btn-accent" style={{ width: '100%', padding: '16px', fontSize: 16, marginTop: 22 }}>
            Jetzt 14 Tage gratis testen
          </button>
          <p style={{ margin: '13px 0 0', textAlign: 'center', fontSize: 12, color: 'rgba(255,255,255,.52)' }}>
            Keine Bindung · DSGVO-konform · jederzeit kündbar
          </p>
        </div>
      </div>
    </div>
  );
}

function LandingLogo({ light = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 34, height: 34, borderRadius: 11, background: 'var(--primary)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-display)', fontSize: 23, fontWeight: 400, color: '#fff', paddingBottom: 2,
        boxShadow: '0 10px 24px rgba(194,132,40,.28)'
      }}>I</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: -0.02, color: light ? '#fff' : 'var(--ink)' }}>ImmoBot</div>
    </div>
  );
}

function LandingMetric({ value, label, tone }) {
  return (
    <div style={{
      padding: 14, borderRadius: 22,
      background: tone === 'accent' ? 'rgba(194,132,40,.92)' : 'rgba(255,255,255,.92)',
      color: tone === 'accent' ? '#fff' : 'var(--ink)',
      backdropFilter: 'blur(18px)', boxShadow: '0 12px 30px rgba(31,26,20,.16)',
      border: tone === 'accent' ? '1px solid rgba(255,255,255,.18)' : '1px solid rgba(255,255,255,.65)'
    }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, lineHeight: .9, letterSpacing: '-.04em' }}>{value}</div>
      <div style={{ fontSize: 11, fontWeight: 800, opacity: .72, textTransform: 'uppercase', letterSpacing: .06, marginTop: 6 }}>{label}</div>
    </div>
  );
}

function LandingFeature({ icon, title, text }) {
  return (
    <div style={{ padding: 16, borderRadius: 24, background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.12)', display: 'flex', gap: 13 }}>
      <div style={{ flex: '0 0 auto', width: 38, height: 38, borderRadius: 14, background: 'rgba(194,132,40,.18)', color: 'var(--primary)', display: 'grid', placeItems: 'center', fontSize: 20, fontWeight: 800 }}>
        {icon}
      </div>
      <div>
        <div style={{ fontSize: 15, fontWeight: 800, marginBottom: 4 }}>{title}</div>
        <div style={{ fontSize: 13, lineHeight: 1.45, color: 'rgba(255,255,255,.62)' }}>{text}</div>
      </div>
    </div>
  );
}

function LoginForm({ ctx, onBack, onEnter, onSwitch }) {
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [localError, setLocalError] = React.useState(null);
  const submit = async () => {
    setLoading(true);
    setLocalError(null);
    try {
      await ctx.signIn(email, pw);
      onEnter();
    } catch (error) {
      setLocalError(error.payload?.message || error.message || 'Anmeldung fehlgeschlagen.');
    } finally {
      setLoading(false);
    }
  };
  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>
      {localError && (
        <div style={{ color: '#FFD2CA', fontSize: 12, lineHeight: 1.4, margin: '-6px 0 12px' }}>
          {localError}
        </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({ ctx, onBack, onEnter, onSwitch }) {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [localError, setLocalError] = React.useState(null);
  const submit = async () => {
    setLoading(true);
    setLocalError(null);
    try {
      await ctx.register(name, email, pw);
      onEnter();
    } catch (error) {
      setLocalError(error.payload?.message || error.message || 'Registrierung fehlgeschlagen.');
    } finally {
      setLoading(false);
    }
  };
  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" value={name} onChange={e => setName(e.target.value)} style={authInputStyle} />
        <input placeholder="E-Mail" value={email} onChange={e => setEmail(e.target.value)} style={authInputStyle} />
        <input placeholder="Passwort wählen" type="password" value={pw} onChange={e => setPw(e.target.value)} style={authInputStyle} />
      </div>
      {localError && (
        <div style={{ color: '#FFD2CA', fontSize: 12, lineHeight: 1.4, margin: '-6px 0 12px' }}>
          {localError}
        </div>
      )}
      <button
        onClick={submit}
        className="btn btn-accent"
        disabled={loading}
        style={{ width: '100%', padding: '15px', fontSize: 16, opacity: loading ? .7 : 1 }}
      >
        {loading ? 'Konto wird erstellt...' : '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 });