// Gate.jsx — Soft-gate screen.
// MNV-warm welcome with a single password input. Checks `kamaaina` case-insensitively.
// On unlock, fades out + sets sessionStorage flag so reloads in the same session skip the gate.

const PASSWORD = 'kamaaina';
const STORAGE_KEY = 'mnv-gate-unlocked';

function Gate({ onUnlock }) {
  const [value, setValue] = React.useState('');
  const [error, setError] = React.useState(false);
  const [unlocking, setUnlocking] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (value.trim().toLowerCase().replace(/['ʻ]/g, '') === PASSWORD) {
      setError(false);
      setUnlocking(true);
      try { sessionStorage.setItem(STORAGE_KEY, '1'); } catch {}
      // Brief acknowledgment, then transition
      setTimeout(() => onUnlock(), 650);
    } else {
      setError(true);
      setTimeout(() => setError(false), 1800);
    }
  };

  return (
    <div role="dialog" aria-modal="true" aria-labelledby="gate-title"
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        background: BRAND.ink,
        color: BRAND.cream,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '40px 24px',
        opacity: unlocking ? 0 : 1,
        pointerEvents: unlocking ? 'none' : 'auto',
        transition: 'opacity .55s cubic-bezier(.4,0,.2,1)',
      }}>
      {/* Soft warm wash */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(900px 600px at 50% 32%, rgba(201,100,66,.18), transparent 70%)',
      }}/>
      {/* Hairline frame */}
      <div aria-hidden style={{
        position: 'absolute', top: 24, left: 24, right: 24, bottom: 24,
        border: '1px solid rgba(245,239,227,.10)', pointerEvents: 'none',
      }}/>

      {/* Top meta */}
      <div style={{
        position: 'absolute', top: 44, left: 44, right: 44,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.4,
        textTransform: 'uppercase', color: 'rgba(245,239,227,.50)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <PlatterMark size={18} rounded={4}/>
          <span>Platter · for Maui Nui Venison</span>
        </div>
        <span>Private link · pre-engagement</span>
      </div>

      {/* Center panel */}
      <form onSubmit={submit} style={{
        position: 'relative',
        maxWidth: 540, width: '100%',
        textAlign: 'center',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28,
      }}>
        <div aria-hidden style={{
          fontFamily: BRAND.serif, fontSize: 13, letterSpacing: 4,
          textTransform: 'uppercase', color: 'rgba(245,239,227,.55)',
        }}>E komo mai</div>

        <h1 id="gate-title" style={{
          fontFamily: BRAND.serif, fontWeight: 400,
          fontSize: 56, lineHeight: 1.05, letterSpacing: -1.6,
          margin: 0, color: BRAND.cream, textWrap: 'balance',
        }}>
          A document we put together <em style={{ fontStyle: 'italic', fontWeight: 300, color: BRAND.clay }}>for you</em>.
        </h1>

        <p style={{
          fontFamily: BRAND.sans, fontSize: 17, lineHeight: 1.55,
          color: 'rgba(245,239,227,.72)', margin: 0, maxWidth: 460,
          textWrap: 'pretty',
        }}>
          Platter's revised migration plan for Maui Nui Venison.
          A soft-gated link, intended for Brian and the MNV team.
        </p>

        <div style={{ width: '100%', maxWidth: 420, marginTop: 8 }}>
          <label htmlFor="gate-pw" style={{
            display: 'block',
            fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.4,
            textTransform: 'uppercase', color: 'rgba(245,239,227,.50)',
            marginBottom: 10, textAlign: 'left',
          }}>Password</label>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 0,
            border: `1px solid ${error ? BRAND.clay : 'rgba(245,239,227,.20)'}`,
            background: 'rgba(245,239,227,.04)',
            transition: 'border-color .25s',
          }}>
            <input
              ref={inputRef}
              id="gate-pw"
              type="password"
              value={value}
              onChange={(e) => setValue(e.target.value)}
              autoComplete="off"
              spellCheck="false"
              aria-describedby={error ? 'gate-err' : undefined}
              placeholder="enter password"
              style={{
                background: 'transparent', border: 'none', outline: 'none',
                color: BRAND.cream, padding: '14px 16px',
                fontFamily: BRAND.mono, fontSize: 15, letterSpacing: 0.5,
              }}
            />
            <button type="submit" style={{
              border: 'none', background: BRAND.clay, color: BRAND.cream,
              padding: '0 22px', cursor: 'pointer',
              fontFamily: BRAND.mono, fontSize: 12, letterSpacing: 1.4,
              textTransform: 'uppercase', fontWeight: 600,
              transition: 'background .15s',
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = '#B5573A'}
              onMouseLeave={(e) => e.currentTarget.style.background = BRAND.clay}
            >Enter</button>
          </div>
          <div
            id={error ? 'gate-err' : undefined}
            aria-live="polite"
            style={{
              minHeight: 20, marginTop: 10, textAlign: 'left',
              fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 0.4,
              color: error ? BRAND.clay : 'rgba(245,239,227,.40)',
              transition: 'color .2s',
            }}>
            {error ? 'Not quite. Try again.' : 'A short word. Local-aware.'}
          </div>
        </div>

        {unlocking && (
          <div aria-live="polite" style={{
            position: 'absolute', bottom: -80, left: 0, right: 0,
            fontFamily: BRAND.serif, fontStyle: 'italic', fontSize: 22,
            color: BRAND.clay, letterSpacing: -0.3,
          }}>
            Welcome in.
          </div>
        )}
      </form>

      {/* Bottom meta */}
      <div style={{
        position: 'absolute', bottom: 44, left: 44, right: 44,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.4,
        textTransform: 'uppercase', color: 'rgba(245,239,227,.35)',
      }}>
        <span>mnv.platter.com</span>
        <span>not real authentication · just a soft welcome</span>
      </div>
    </div>
  );
}

Object.assign(window, { Gate, GATE_STORAGE_KEY: STORAGE_KEY });