const ComingSoon = ({ onAccess }) => {
  const [code, setCode] = React.useState('');
  const [error, setError] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (code.trim().toUpperCase() === 'LOKAT2026') {
      sessionStorage.setItem('lokat_access', 'true');
      onAccess();
    } else {
      setError(true);
      setCode('');
      setTimeout(() => setError(false), 3000);
    }
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #0f2027, #203a43, #2c5364)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
      padding: '24px',
    }}>
      <div style={{
        textAlign: 'center',
        maxWidth: 480,
        width: '100%',
        animation: 'fadeIn 0.5s ease',
      }}>

        {/* Logo */}
        <div style={{marginBottom: 12}}>
          <img src="uploads/lokat_logo.png" alt="Lokat" style={{height:60, objectFit:'contain', filter:'brightness(0) invert(1)'}} />
        </div>

        {/* Badge */}
        <div style={{
          display: 'inline-block',
          background: 'rgba(255,255,255,0.12)',
          border: '1px solid rgba(255,255,255,0.2)',
          color: '#fff',
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: 2,
          textTransform: 'uppercase',
          padding: '5px 16px',
          borderRadius: 20,
          marginBottom: 32,
        }}>
          Próximamente
        </div>

        {/* Slogan principal */}
        <p style={{
          fontSize: 22,
          fontWeight: 600,
          color: '#fff',
          lineHeight: 1.4,
          marginBottom: 20,
        }}>
          El espacio que necesitas,<br />sin el arriendo que no quieres.
        </p>

        {/* Frases secundarias */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 6,
          marginBottom: 36,
        }}>
          {[
            'Reserva. Trabaja. Listo.',
            'Sin contratos. Sin complicaciones.',
            'Un espacio para cada profesional.',
          ].map((frase, i) => (
            <p key={i} style={{
              fontSize: 14,
              color: 'rgba(255,255,255,0.6)',
              margin: 0,
            }}>
              {frase}
            </p>
          ))}
        </div>

        {/* Separador */}
        <div style={{
          width: 48,
          height: 2,
          background: 'rgba(255,255,255,0.2)',
          borderRadius: 1,
          margin: '0 auto 32px',
        }} />

        {/* Formulario código de acceso */}
        <form onSubmit={handleSubmit} style={{display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center'}}>
          <p style={{fontSize: 13, color: 'rgba(255,255,255,0.5)', margin: 0}}>
            ¿Tienes un código de acceso?
          </p>
          <div style={{display: 'flex', gap: 8, width: '100%', maxWidth: 340}}>
            <input
              type="text"
              value={code}
              onChange={e => { setCode(e.target.value); setError(false); }}
              placeholder="Código de acceso"
              style={{
                flex: 1,
                padding: '12px 16px',
                borderRadius: 8,
                border: error ? '1.5px solid #e17055' : '1.5px solid rgba(255,255,255,0.2)',
                background: 'rgba(255,255,255,0.08)',
                color: '#fff',
                fontSize: 14,
                fontFamily: 'inherit',
                outline: 'none',
                letterSpacing: 1,
              }}
              autoComplete="off"
              spellCheck="false"
            />
            <button
              type="submit"
              style={{
                padding: '12px 20px',
                borderRadius: 8,
                background: '#0984e3',
                border: 'none',
                color: '#fff',
                fontSize: 14,
                fontWeight: 600,
                cursor: 'pointer',
                fontFamily: 'inherit',
                whiteSpace: 'nowrap',
                transition: 'background 0.15s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = '#0773c5'}
              onMouseLeave={e => e.currentTarget.style.background = '#0984e3'}
            >
              Entrar
            </button>
          </div>
          {error && (
            <p style={{fontSize: 13, color: '#e17055', margin: 0, animation: 'fadeIn 0.2s ease'}}>
              Código incorrecto. Inténtalo de nuevo.
            </p>
          )}
        </form>

      </div>
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        input::placeholder { color: rgba(255,255,255,0.3); }
      `}</style>
    </div>
  );
};

window.ComingSoon = ComingSoon;