// Soft password gate. Client-side only — keeps the URL out of public search
// results and adds a "you were invited" moment. Not real security.
//
// Change the password by editing PASSWORD below. Case-insensitive, trims spaces.

const PASSWORD = 'lisbon2027';
const STORAGE_KEY = 'jd-unlocked-v1';

function PasswordGate({ children }) {
  const [unlocked, setUnlocked] = React.useState(() => {
    try { return sessionStorage.getItem(STORAGE_KEY) === '1'; } catch { return false; }
  });
  const [value, setValue] = React.useState('');
  const [error, setError] = React.useState(false);
  const [shaking, setShaking] = React.useState(false);
  const [leaving, setLeaving] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const ok = value.trim().toLowerCase() === PASSWORD.toLowerCase();
    if (ok) {
      try { sessionStorage.setItem(STORAGE_KEY, '1'); } catch {}
      setLeaving(true);
      setTimeout(() => setUnlocked(true), 700);
    } else {
      setError(true);
      setShaking(true);
      setTimeout(() => setShaking(false), 500);
    }
  };

  if (unlocked) return children;

  return (
    <div className={`gate ${leaving ? 'gate--leaving' : ''}`} aria-live="polite">
      {/* Botanical backdrop */}
      <div className="gate__botanicals" aria-hidden>
        <window.PalmLeaf size={420} color="var(--fern)" animated
          style={{ position: 'absolute', top: -120, left: -100, opacity: 0.32, transform: 'rotate(-15deg)' }} />
        <window.MonsteraLeaf size={340} color="var(--fern-deep)" animated
          style={{ position: 'absolute', bottom: -80, right: -60, opacity: 0.35 }} />
        <window.FernFrond size={260} color="var(--moss)" animated
          style={{ position: 'absolute', top: '20%', right: '8%', opacity: 0.45 }} />
        <window.Eucalyptus size={200} color="var(--fern-bright)" animated
          style={{ position: 'absolute', bottom: '18%', left: '6%', opacity: 0.4, transform: 'rotate(20deg)' }} />
        <window.JacarandaSprig size={140} color="#9b7fb8" animated
          style={{ position: 'absolute', top: '12%', right: '32%', opacity: 0.55 }} />
        <window.Butterfly size={36} color="var(--bloom)" animated
          style={{ position: 'absolute', top: '38%', left: '18%' }} />
      </div>

      <div className={`gate__card ${shaking ? 'gate__card--shake' : ''}`}>
        <div className="gate__eyebrow">— By invitation —</div>
        <div className="gate__monogram">
          <span>J</span>
          <span className="gate__amp">&amp;</span>
          <span>D</span>
        </div>
        <h1 className="gate__title">A wedding<br/>in Lisbon.</h1>
        <p className="gate__sub">
          Please enter the word printed on your invitation to continue.
        </p>

        <form className="gate__form" onSubmit={submit} autoComplete="off">
          <label className="gate__label" htmlFor="gate-pw">Password</label>
          <input
            id="gate-pw"
            type="text"
            value={value}
            onChange={(e) => { setValue(e.target.value); if (error) setError(false); }}
            className={`gate__input ${error ? 'gate__input--error' : ''}`}
            spellCheck={false}
            autoCapitalize="off"
            autoCorrect="off"
            autoFocus
            placeholder="—"
          />
          <button type="submit" className="gate__btn">Enter the garden</button>
          <div className={`gate__error ${error ? 'is-shown' : ''}`}>
            That isn't quite it — check your invitation.
          </div>
        </form>

        <div className="gate__foot">
          <span>Lisbon · 18 June 2027</span>
          <span className="gate__dot">·</span>
          <span>Lost the word? Email <a href="mailto:jenna.and.dillon@hello.com">jenna.and.dillon@hello.com</a></span>
        </div>
      </div>
    </div>
  );
}

window.PasswordGate = PasswordGate;