// ─── LOGIN GATE ───────────────────────────────────────────────────
// A cute family-photo password screen. Password: Porter&Tate
// Persists auth in sessionStorage so a refresh keeps you in.

const PW_HASH_INPUT = "Porter&Tate";
const SESSION_KEY = "kgp_auth_v1";

function LoginGate({ children }) {
  const [authed, setAuthed] = React.useState(() => {
    try { return sessionStorage.getItem(SESSION_KEY) === "yes"; } catch (e) { return false; }
  });
  const [value, setValue] = React.useState("");
  const [shake, setShake] = React.useState(false);
  const [revealed, setRevealed] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (!authed && inputRef.current) inputRef.current.focus();
  }, [authed]);

  const submit = (e) => {
    e?.preventDefault?.();
    if (value.trim() === PW_HASH_INPUT) {
      try { sessionStorage.setItem(SESSION_KEY, "yes"); } catch (e) {}
      setAuthed(true);
    } else {
      setShake(true);
      setTimeout(() => setShake(false), 500);
      setValue("");
    }
  };

  if (authed) return children;

  return (
    <div style={{
      position: "relative",
      minHeight: "100vh",
      width: "100%",
      overflow: "hidden",
      background: "var(--forest-deep)",
    }}>
      {/* Family photo full bleed */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `url(${(window.__resources && window.__resources.familyImg) || "assets/family.png"})`,
        backgroundSize: "cover",
        backgroundPosition: "center 30%",
        filter: "saturate(0.95)",
      }} />
      {/* Cream wash + bottom darken */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(to bottom, rgba(26,38,32,0.10) 0%, rgba(26,38,32,0.15) 40%, rgba(26,38,32,0.85) 88%, rgba(26,38,32,0.96) 100%)",
      }} />

      {/* Top mark */}
      <div style={{
        position: "absolute", top: 32, left: 0, right: 0,
        display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
        zIndex: 2,
      }}>
        <Ornament size={11} color="rgba(245,239,230,0.85)" />
        <div style={{
          fontFamily: "var(--sans)", fontSize: 9.5, fontWeight: 500,
          letterSpacing: "0.22em", textTransform: "uppercase",
          color: "rgba(245,239,230,0.85)",
        }}>
          The Bates Family · Private
        </div>
      </div>

      {/* Login card */}
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0,
        padding: "40px 28px 56px",
        zIndex: 2,
      }}>
        <div style={{
          maxWidth: 420, margin: "0 auto",
          textAlign: "center",
        }}>
          <h1 className="serif" style={{
            margin: 0, fontSize: 44, fontWeight: 300, lineHeight: 0.98,
            letterSpacing: "-0.02em", color: "var(--cream)",
          }}>
            Welcome,<br/>
            <em style={{ fontStyle: "italic", fontWeight: 400 }}>Bates family.</em>
          </h1>
          <p style={{
            margin: "16px 0 28px",
            fontSize: 13, lineHeight: 1.6,
            color: "rgba(245,239,230,0.72)",
            letterSpacing: "0.01em",
          }}>
            A quiet place to think about Porter and Tate's
            kindergarten years. <em>Hint: the boys, ampersand.</em>
          </p>

          <form onSubmit={submit} style={{
            display: "flex", flexDirection: "column", alignItems: "stretch", gap: 12,
            animation: shake ? "kgp-shake 0.4s ease" : "none",
          }}>
            <div style={{
              position: "relative",
              display: "flex", alignItems: "center",
            }}>
              <input
                ref={inputRef}
                type={revealed ? "text" : "password"}
                value={value}
                onChange={(e) => setValue(e.target.value)}
                placeholder="Passphrase"
                autoComplete="off"
                spellCheck={false}
                style={{
                  flex: 1,
                  background: "rgba(245,239,230,0.10)",
                  border: "1px solid rgba(245,239,230,0.30)",
                  borderRadius: 0,
                  padding: "16px 48px 16px 18px",
                  fontFamily: "var(--sans)",
                  fontSize: 14,
                  letterSpacing: "0.05em",
                  color: "var(--cream)",
                  outline: "none",
                  textAlign: "center",
                  backdropFilter: "blur(6px)",
                  WebkitBackdropFilter: "blur(6px)",
                  caretColor: "var(--gold-soft)",
                }}
                onFocus={(e) => { e.target.style.borderColor = "rgba(200,169,104,0.7)"; }}
                onBlur={(e) => { e.target.style.borderColor = "rgba(245,239,230,0.30)"; }}
              />
              <button type="button" onClick={() => setRevealed(r => !r)}
                style={{
                  position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)",
                  background: "transparent", border: "none",
                  color: "rgba(245,239,230,0.55)",
                  fontFamily: "var(--sans)", fontSize: 9, fontWeight: 500,
                  letterSpacing: "0.16em", textTransform: "uppercase",
                  cursor: "pointer", padding: "8px 4px",
                }}>
                {revealed ? "Hide" : "Show"}
              </button>
            </div>

            <button type="submit"
              style={{
                background: "var(--forest-mid)",
                border: "1px solid rgba(245,239,230,0.25)",
                color: "var(--cream)",
                padding: "16px 18px",
                fontFamily: "var(--sans)", fontSize: 10, fontWeight: 600,
                letterSpacing: "0.22em", textTransform: "uppercase",
                cursor: "pointer",
                transition: "background 0.15s ease",
              }}
              onMouseEnter={(e) => e.target.style.background = "var(--moss)"}
              onMouseLeave={(e) => e.target.style.background = "var(--forest-mid)"}
            >
              Enter
            </button>
          </form>

          <div style={{
            marginTop: 32, paddingTop: 20,
            borderTop: "1px solid rgba(245,239,230,0.15)",
          }}>
            <Ornament size={9} color="rgba(245,239,230,0.5)" />
            <div style={{
              marginTop: 10,
              fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 13,
              color: "rgba(245,239,230,0.55)",
              letterSpacing: "0.01em",
            }}>
              Made with care for Jamie &amp; Tom.
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes kgp-shake {
          0%, 100% { transform: translateX(0); }
          20% { transform: translateX(-8px); }
          40% { transform: translateX(8px); }
          60% { transform: translateX(-5px); }
          80% { transform: translateX(5px); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { LoginGate });