// MLuppens Website — Online Album landing
//
// A discoverable entry point for couples who lost their direct gallery URL.
// They type their gallery code (slug) and get redirected to /<slug>, where
// the actual password gate lives (screens-client-gallery.jsx).
//
// No private data lives in this file. Auth happens on the real client gallery screen.

const OA_BG = 'assets/photos/portfolio/4U4A1551n.jpg';

function OnlineAlbumScreen({ go }) {
  const t = useT();
  const [code, setCode] = React.useState('');

  const onSubmit = (e) => {
    e.preventDefault();
    const slug = code.trim().toLowerCase().replace(/[^a-z0-9-]/g, '');
    if (slug) go('client-gallery', slug);
  };

  return (
    <section style={{ minHeight: '88vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '120px 40px 80px', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${OA_BG})`,
        backgroundSize: 'cover', backgroundPosition: 'center 20%',
        opacity: 0.18,
      }}></div>
      <div style={{ position: 'relative', maxWidth: 480, width: '100%', textAlign: 'center' }}>
        <Eyebrow>{t('Online Album', 'Online album')}</Eyebrow>
        <h1 className="display" style={{ marginTop: 24, marginBottom: 24, fontSize: 'clamp(40px, 5.5vw, 76px)', letterSpacing: '-0.015em' }}>
          {t(<>A private<br/>door.</>, <>Een privé-<br/>deur.</>)}
        </h1>
        <Rule className="center" />
        <p className="body" style={{ color: 'var(--ink-soft)', marginTop: 28, marginBottom: 44, fontWeight: 300 }}>
          {t(
            "If you've got a direct link from me, use that — it's the fastest way in. Otherwise, type the gallery code I sent you below.",
            'Als jullie een directe link van mij hebben, gebruik die — dat is het snelst. Anders kunnen jullie hieronder de galerijcode invullen die ik jullie stuurde.'
          )}
        </p>

        <form onSubmit={onSubmit} style={{ textAlign: 'left' }}>
          <FormField
            label={t('Gallery code', 'Galerijcode')}
            placeholder={t('e.g. thijs-rianne', 'bijv. thijs-rianne')}
            value={code}
            onChange={(e) => setCode(e.target.value)}
          />
          <div style={{ marginTop: 24 }}>
            <button type="submit" className="btn" style={{ width: '100%', justifyContent: 'center' }}>
              {t('Continue', 'Verder')}
            </button>
          </div>
        </form>

        <p className="small" style={{ marginTop: 36, fontStyle: 'italic', color: 'var(--ink-mute)' }}>
          {t('Lost your details? Send me a quick note at', 'Gegevens kwijt? Stuur me een bericht via')}{' '}
          <a href="mailto:mluppensfotografie@gmail.com" style={{ color: 'var(--ink)', borderBottom: '1px solid var(--hair)', textDecoration: 'none' }}>mluppensfotografie@gmail.com</a>.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { OnlineAlbumScreen });