// Login / password gate screen
const { useState, useEffect, useRef } = React;

function Login({ onUnlock }) {
  const [val, setVal] = useState('');
  const [err, setErr] = useState(false);
  const [shake, setShake] = useState(false);
  const PWD = 'herşeyçokgüzel';

  const submit = (e) => {
    if (e) e.preventDefault();
    const clean = val.trim().toLocaleLowerCase('tr-TR');
    if (clean === PWD || clean === 'hersheycokguzel' || clean === 'herseyçokgüzel' || clean === 'herşeycokguzel') {
      onUnlock();
    } else {
      setErr(true);
      setShake(true);
      setTimeout(() => setShake(false), 480);
    }
  };

  return (
    <div style={loginStyles.wrap}>
      {/* Soft floating glow */}
      <div style={loginStyles.glow} />

      <div style={loginStyles.top}>
        <div className="label" style={{opacity:0.7}}>Beyza · Emin</div>
        <div className="label" style={{opacity:0.7}}>27 · 06 · 2026</div>
      </div>

      <div style={loginStyles.center}>
        <div style={loginStyles.lockBadge}>
          <Icons.Lock size={20} />
        </div>
        <div className="hand" style={loginStyles.title}>
          biraz<br/>özelimiz
        </div>
        <p className="body-sm" style={loginStyles.sub}>
          Sitemize girmek için davetiyenin altındaki şifreyi yaz.
        </p>

        <form onSubmit={submit} style={{...loginStyles.form, transform: shake ? 'translateX(0)' : 'translateX(0)', animation: shake ? 'shake 0.42s' : 'none'}}>
          <input
            autoFocus
            value={val}
            onChange={(e) => { setVal(e.target.value); setErr(false); }}
            placeholder="şifre"
            spellCheck={false}
            autoCapitalize="none"
            autoCorrect="off"
            style={{
              ...loginStyles.input,
              borderColor: err ? '#FFD7DE' : 'rgba(255,185,201,0.4)',
            }}
          />
          <button type="submit" style={loginStyles.submitBtn} aria-label="Gir">
            <Icons.Arrow size={20} />
          </button>
        </form>

        <div style={{height:18}}>
          {err && <div className="label-sm" style={{color:'#FFE5EC',opacity:0.9}}>tekrar dener misin ✷</div>}
        </div>
      </div>

      <div style={loginStyles.bottom}>
        <div className="label-sm" style={{opacity:0.55}}>İPUCU · DAVETİYENİN EN ALTINDA</div>
      </div>

      <style>{`
        @keyframes shake {
          0%,100%{transform:translateX(0);}
          20%{transform:translateX(-8px);}
          40%{transform:translateX(8px);}
          60%{transform:translateX(-6px);}
          80%{transform:translateX(6px);}
        }
        input::placeholder{color:rgba(255,185,201,0.45);font-family:'Manrope',sans-serif;font-size:15px;letter-spacing:0.02em;}
      `}</style>
    </div>
  );
}

const loginStyles = {
  wrap:{
    position:'relative',
    minHeight:'100dvh',
    display:'flex',
    flexDirection:'column',
    padding:'28px 28px 32px',
    color:'var(--pink)',
    background:'var(--burgundy)',
  },
  glow:{
    position:'absolute',
    inset:'auto -40% -50% -40%',
    height:'70%',
    background:'radial-gradient(closest-side, rgba(255,185,201,0.18), transparent 70%)',
    pointerEvents:'none',
  },
  top:{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'auto'},
  center:{
    margin:'auto 0',
    textAlign:'left',
    position:'relative',
    zIndex:1,
  },
  lockBadge:{
    width:42,height:42,borderRadius:999,
    border:'1.5px solid rgba(255,185,201,0.5)',
    display:'flex',alignItems:'center',justifyContent:'center',
    marginBottom:22,
  },
  title:{
    fontSize:64,
    lineHeight:0.92,
    color:'var(--pink)',
    margin:'0 0 18px',
    letterSpacing:'0.005em',
  },
  sub:{
    color:'var(--pink)',
    opacity:0.78,
    maxWidth:260,
    margin:'0 0 30px',
  },
  form:{
    display:'flex',
    alignItems:'stretch',
    gap:10,
    marginBottom:6,
  },
  input:{
    flex:1,
    background:'transparent',
    border:'1.5px solid rgba(255,185,201,0.4)',
    borderRadius:999,
    padding:'14px 20px',
    color:'var(--pink)',
    fontSize:15,
    outline:'none',
    fontFamily:"'Manrope',sans-serif",
    letterSpacing:'0.02em',
    transition:'border-color 0.2s',
  },
  submitBtn:{
    width:48,height:48,
    borderRadius:999,
    background:'var(--pink)',
    color:'var(--burgundy)',
    display:'flex',alignItems:'center',justifyContent:'center',
    flexShrink:0,
  },
  bottom:{
    marginTop:'auto',
    paddingTop:24,
    textAlign:'center',
  },
};

window.Login = Login;