falah-os-ce/src/screens/Login.tsx

import { useState } from 'react'
import { useApp } from '../store'

function Logo({ size }: { size: number }) {
  return (
    <div
      style={{
        width: size,
        height: size,
        borderRadius: size * 0.225,
        background: 'linear-gradient(145deg, #10B981, #059669)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: size * 0.45,
        fontWeight: 800,
        color: 'white',
        flexShrink: 0,
        boxShadow: '0 8px 32px rgba(16,185,129,0.4)',
      }}
    >
      F
    </div>
  )
}

export default function Login() {
  const { navigate } = useApp()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [emailFocused, setEmailFocused] = useState(false)
  const [passwordFocused, setPasswordFocused] = useState(false)

  const inputStyle = (focused: boolean): React.CSSProperties => ({
    width: '100%',
    padding: '12px 16px',
    background: focused ? 'rgba(16,185,129,0.08)' : 'rgba(255,255,255,0.06)',
    border: `1px solid ${focused ? 'var(--brand)' : 'var(--glass-border)'}`,
    borderRadius: 8,
    color: 'var(--text)',
    fontSize: 14,
    outline: 'none',
    transition: 'border-color 0.15s, background 0.15s',
  })

  const labelStyle: React.CSSProperties = {
    display: 'block',
    fontSize: 11,
    fontWeight: 600,
    color: 'var(--text-muted)',
    letterSpacing: 1,
    marginBottom: 6,
  }

  const handleSignIn = (e: React.FormEvent) => {
    e.preventDefault()
    navigate('desktop')
  }

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 24,
      }}
    >
      <form
        onSubmit={handleSignIn}
        style={{
          width: '100%',
          maxWidth: 400,
          background: 'rgba(12,26,46,0.92)',
          backdropFilter: 'blur(24px)',
          WebkitBackdropFilter: 'blur(24px)',
          border: '1px solid var(--glass-border)',
          borderRadius: 24,
          padding: 40,
          boxShadow: 'var(--shadow-modal)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 0,
        }}
      >
        {/* Arabic */}
        <div
          style={{
            color: 'var(--green)',
            fontSize: 14,
            letterSpacing: 1.5,
            opacity: 0.7,
            marginBottom: 20,
            fontFamily: 'serif',
          }}
        >
          بِسْمِ اللَّهِ
        </div>

        {/* Logo */}
        <Logo size={72} />

        {/* Title */}
        <h1
          style={{
            fontSize: 26,
            fontWeight: 700,
            color: 'var(--text)',
            margin: '16px 0 4px',
          }}
        >
          Falah OS
        </h1>

        {/* Subtitle */}
        <p
          style={{
            fontSize: 13,
            color: 'var(--text-muted)',
            margin: '0 0 32px',
          }}
        >
          Sovereign Digital Economy
        </p>

        {/* Email field */}
        <div style={{ width: '100%', marginBottom: 16 }}>
          <label style={labelStyle}>EMAIL</label>
          <input
            type="email"
            placeholder="operator@falah.os"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            onFocus={() => setEmailFocused(true)}
            onBlur={() => setEmailFocused(false)}
            style={inputStyle(emailFocused)}
            autoComplete="email"
          />
        </div>

        {/* Password field */}
        <div style={{ width: '100%', marginBottom: 28 }}>
          <label style={labelStyle}>PASSWORD</label>
          <input
            type="password"
            placeholder="••••••••"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            onFocus={() => setPasswordFocused(true)}
            onBlur={() => setPasswordFocused(false)}
            style={inputStyle(passwordFocused)}
            autoComplete="current-password"
          />
        </div>

        {/* Sign In button */}
        <button
          type="submit"
          className="btn-primary"
          style={{ width: '100%', marginBottom: 24 }}
        >
          Sign In
        </button>

        {/* Footer */}
        <p
          style={{
            fontSize: 11,
            color: 'var(--text-dim)',
            textAlign: 'center',
            margin: 0,
          }}
        >
          Falah OS CE v1.3 · Community Edition
        </p>
      </form>
    </div>
  )
}