// Soft gate — single-shared-password splash. Not real auth.
// On success, sets sessionStorage flag and reveals the app.
const GATE_PASSWORD = 'proofofconcept';
const GATE_KEY = 'gm_prototype_gate';

function GMGate({ onPass }) {
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const submit = (e) => {
    e?.preventDefault();
    setLoading(true);
    setErr(false);
    setTimeout(() => {
      if (pw.trim().toLowerCase() === GATE_PASSWORD) {
        sessionStorage.setItem(GATE_KEY, '1');
        onPass();
      } else {
        setErr(true);
        setLoading(false);
        setPw('');
      }
    }, 280);
  };

  return (
    <div className="gate">
      <form className="gate-card" onSubmit={submit}>
        <div className="gate-brand">
          <GMI.shield style={{ color: '#0A0A0A' }}/>
          <span>Guardian Mesh</span>
        </div>
        <div className="gate-title">Prototype preview</div>
        <p className="gate-sub">
          Partner experience concept — enter the shared password to continue.
          This is a design prototype with mock data only.
        </p>
        <div className="gate-field">
          <label htmlFor="gate-pw">Password</label>
          <input
            id="gate-pw"
            type="password"
            autoFocus
            autoComplete="off"
            value={pw}
            onChange={e => setPw(e.target.value)}
            placeholder="••••••••••••"
          />
          {err && (
            <div className="gate-err">
              <GMI.alert style={{ width: 12, height: 12 }}/>
              Not quite. Try again.
            </div>
          )}
        </div>
        <button type="submit" className="btn btn--primary" style={{ width: '100%', justifyContent: 'center' }} disabled={loading || !pw}>
          {loading ? 'Checking…' : 'Continue'}
          {!loading && <GMI.arrowRight />}
        </button>
        <div className="gate-footer">
          Access is restricted. Ask Matt for the password, or try <code>proofofconcept</code>.
        </div>
      </form>
    </div>
  );
}

window.GMGate = GMGate;
window.GATE_KEY = GATE_KEY;