// MLuppens Website — Portfolio, Real Wedding, Over Mij, Booking screens

const PP = 'assets/photos/portfolio/';

// Portfolio list — grouped by region; mix of color + B&W cover shots
const WEDDINGS = [
  { id: 'cecilia-matteo', couple: 'Cecilia & Matteo', venue: 'Villa Astor', region: 'Sorrento, Italy', cover: PP + '4U4A1402.jpg', pos: 'center 35%', bw: false },
  { id: 'alma-leon',      couple: 'Alma & Léon',     venue: 'Villa Pizzo',  region: 'Lake Como, Italy', cover: PP + '4U4A9990n.jpg', pos: 'center 30%', bw: false },
  { id: 'mathilde-edouard', couple: 'Mathilde & Edouard', venue: 'Château de Maisons', region: 'Île-de-France', cover: PP + '4U4A6644n.jpg', pos: 'center 30%', bw: false },
  { id: 'lieke-joris',    couple: 'Lieke & Joris',   venue: 'De Wittenburg',   region: 'Wassenaar, NL',   cover: PP + 'wedding-04.jpg', pos: 'center 30%', bw: false },
  { id: 'sara-thomas',    couple: 'Sara & Thomas',   venue: 'Stadhuis',        region: 'Amsterdam, NL',   cover: PP + '4U4A0005n.jpg', pos: 'center 30%', bw: true },
  { id: 'noor-vincent',   couple: 'Noor & Vincent',  venue: 'Villa Tritone',   region: 'Sorrento, Italy', cover: PP + '4U4A1554-3n.jpg', pos: 'center 35%', bw: false },
  { id: 'eline-jasper',   couple: 'Eline & Jasper',  venue: 'Mansion Carlotta', region: 'Naples, Italy',  cover: PP + '4U4A9052zw1n.jpg', pos: 'center', bw: true },
  { id: 'fenna-otis',     couple: 'Fenna & Otis',    venue: 'Domaine de Joinville', region: 'Picardie, France', cover: PP + '4U4A6304n.jpg', pos: 'center 30%', bw: false },
];

function PortfolioScreen({ go }) {
  const t = useT();
  return (
    <>
      {/* HEADER ──────────────────────────────────────────── */}
      <section style={{ padding: '120px 40px 64px', textAlign: 'center' }} data-screen-label="Portfolio · Header">
        <div className="container narrow">
          <Eyebrow>{t('Portfolio', 'Portfolio')}</Eyebrow>
          <h1 className="display" style={{ marginTop: 24, marginBottom: 28, fontSize: 'clamp(56px, 8vw, 128px)' }}>
            {t(<>A curated<br/>collection.</>, <>Een zorgvuldige<br/>selectie.</>)}
          </h1>
          <Rule className="center" />
          <p className="body-lg" style={{ color: 'var(--ink-soft)', marginTop: 28, fontWeight: 300 }}>
            {t(
              'A small selection of favourite frames from the last few years — quiet moments, big moments, and everything between.',
              'Een kleine selectie favoriete beelden uit de afgelopen jaren — stille momenten, grote momenten en alles ertussenin.'
            )}
          </p>
        </div>
      </section>

      {/* CURATED GRID — no captions, no country names ───── */}
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 10 }}>
            <div style={{ gridColumn: 'span 7', aspectRatio: '4/3' }}>
              <PhotoTile src={PP + '4U4A1402.jpg'} aspect="auto" position="center 35%" />
            </div>
            <div style={{ gridColumn: 'span 5', aspectRatio: '4/5' }}>
              <PhotoTile src={PP + '4U4A2533zw.jpg'} aspect="auto" position="center" bw />
            </div>

            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A1554-3n.jpg'} aspect="auto" position="center 35%" />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A9052zw1n.jpg'} aspect="auto" position="center" bw />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A6644n.jpg'} aspect="auto" position="center 30%" />
            </div>

            <div style={{ gridColumn: 'span 5', aspectRatio: '4/5' }}>
              <PhotoTile src={PP + '4U4A1551n.jpg'} aspect="auto" position="center 25%" />
            </div>
            <div style={{ gridColumn: 'span 7', aspectRatio: '4/3' }}>
              <PhotoTile src={PP + '4U4A9990n.jpg'} aspect="auto" position="center 40%" />
            </div>

            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A0577n.jpg'} aspect="auto" position="center 35%" />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A5135zwn.jpg'} aspect="auto" position="center" bw />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A8888nn.jpg'} aspect="auto" position="center 30%" />
            </div>

            <div style={{ gridColumn: 'span 8', aspectRatio: '21/9' }}>
              <PhotoTile src={PP + '4U4A0005n.jpg'} aspect="auto" position="center 30%" />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '12/9' }}>
              <PhotoTile src={PP + '4U4A6304n.jpg'} aspect="auto" position="center 30%" bw />
            </div>

            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A1116n.jpg'} aspect="auto" position="center" />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A5661n.jpg'} aspect="auto" position="center" bw />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={PP + '4U4A1648n.jpg'} aspect="auto" position="center 40%" />
            </div>

            <div style={{ gridColumn: 'span 12', aspectRatio: '21/9' }}>
              <PhotoTile src={PP + '4U4A7637n.jpg'} aspect="auto" position="center 30%" bw />
            </div>
          </div>
        </div>
      </section>

      {/* CTA ─────────────────────────────────────────────── */}
      <section className="section section-bone" style={{ textAlign: 'center' }}>
        <div className="container narrow">
          <h2 className="h1" style={{ fontStyle: 'italic', fontWeight: 300, marginBottom: 16 }}>
            {t('Could yours be next?', 'Wordt die van jullie de volgende?')}
          </h2>
          <p className="body" style={{ color: 'var(--ink-soft)', maxWidth: '48ch', margin: '0 auto 36px' }}>
            {t(
              'See more recent work in full stories, or send me a message about your day.',
              'Bekijk meer recent werk in volledige verhalen, of stuur me een bericht over jullie dag.'
            )}
          </p>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-rule" onClick={() => go('recent-work')}>{t('Recent Work', 'Recent werk')}</button>
            <button className="btn" onClick={() => go('book')}>{t('Check Availability', 'Check beschikbaarheid')}</button>
          </div>
        </div>
      </section>
    </>
  );
}


function RealWeddingScreen({ go }) {
  const t = useT();
  return (
    <>
      {/* HERO ────────────────────────────────────────────── */}
      <section className="hero">
        <div className="hero-img" style={{ backgroundImage: `url(${PP}4U4A1402.jpg)`, backgroundPosition: 'center 40%' }}></div>
        <div className="hero-inner">
          <div className="hero-eyebrow">{t('Real wedding · Sorrento, Italy', 'Echte bruiloft · Sorrento, Italië')}</div>
          <h1 className="hero-title">Cecilia<br/>&amp; Matteo.</h1>
        </div>
      </section>

      {/* OPENING ─────────────────────────────────────────── */}
      <section className="section">
        <div className="container narrow">
          <div style={{ display: 'flex', gap: 56, justifyContent: 'center', marginBottom: 40, flexWrap: 'wrap' }}>
            <div style={{ textAlign: 'center' }}>
              <Eyebrow>{t('Where', 'Waar')}</Eyebrow>
              <div style={{ marginTop: 10, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 24 }}>Villa Astor, Sorrento</div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <Eyebrow>{t('When', 'Wanneer')}</Eyebrow>
              <div style={{ marginTop: 10, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 24 }}>{t('September, golden hour', 'September, het gouden uur')}</div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <Eyebrow>{t('Reportage', 'Reportage')}</Eyebrow>
              <div style={{ marginTop: 10, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 24 }}>{t('Three days, two countries', 'Drie dagen, twee landen')}</div>
            </div>
          </div>
          <Rule className="center" />
          <p className="body-lg" style={{ color: 'var(--ink-soft)', marginTop: 36, fontWeight: 300, fontStyle: 'italic', textAlign: 'center' }}>
            {t(
              '"They wanted Italy. They wanted their family there. They wanted the kind of light that only Sorrento gives you in late September. We spent three days in the villa, and the sea was never out of frame."',
              '„Ze wilden Italië. Ze wilden hun familie erbij. Ze wilden het soort licht dat alleen Sorrento je in eind september geeft. We brachten drie dagen door in de villa en de zee was nooit uit beeld.”'
            )}
          </p>
        </div>
      </section>

      {/* EDITORIAL GALLERY — alternating layouts ─────────── */}
      <section style={{ padding: '0 40px' }}>
        <div className="container">

          {/* Triptych: getting-ready */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 8, marginBottom: 96 }}>
            <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A1116n.jpg) center/cover` }}></div>
            <div style={{ aspectRatio: '21/16', background: `url(${PP}4U4A1170n.jpg) center 30%/cover` }}></div>
            <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A8076n.jpg) center/cover` }}></div>
          </div>

          {/* Full-bleed wide */}
          <div style={{ aspectRatio: '21/9', background: `url(${PP}4U4A1554-3n.jpg) center 35%/cover`, marginBottom: 96 }}></div>

          {/* Chapter break */}
          <div style={{ textAlign: 'center', padding: '64px 0 96px' }}>
            <Eyebrow amber>{t('Chapter ii', 'Hoofdstuk ii')}</Eyebrow>
            <h3 className="h2" style={{ marginTop: 18, fontStyle: 'italic', fontWeight: 300 }}>{t('The ceremony', 'De ceremonie')}</h3>
          </div>

          {/* Two-up tall */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 96 }}>
            <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A1551n.jpg) center 25%/cover` }}></div>
            <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A1579n.jpg) center 25%/cover` }}></div>
          </div>

          {/* B&W single detail */}
          <div style={{ aspectRatio: '21/9', background: `url(${PP}4U4A2533zw.jpg) center/cover`, filter: 'grayscale(1)', marginBottom: 96 }}></div>

          {/* Pull quote */}
          <div style={{ maxWidth: 720, margin: '64px auto 96px', textAlign: 'center' }}>
            <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 36, lineHeight: 1.3, color: 'var(--ink)', margin: 0 }}>
              {t(
                '"We didn\'t realise how much we\'d want these photographs until we lived with them. Then we couldn\'t stop."',
                '„We wisten niet hoezeer we deze foto’s zouden willen, tot we ermee leefden. Toen konden we niet meer stoppen.”'
              )}
            </p>
            <div style={{ marginTop: 24, fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
              Cecilia &amp; Matteo
            </div>
          </div>

          {/* Three-up celebration */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 96 }}>
            <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A5135zwn.jpg) center/cover`, filter: 'grayscale(1)' }}></div>
            <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A5661n.jpg) center/cover`, filter: 'grayscale(1)' }}></div>
            <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A9052zw1n.jpg) center/cover`, filter: 'grayscale(1)' }}></div>
          </div>

        </div>
      </section>

      {/* CTA ─────────────────────────────────────────────── */}
      <section className="section section-dark">
        <div className="container narrow" style={{ textAlign: 'center' }}>
          <Eyebrow light>{t('A wedding in Italy of your own?', 'Een eigen bruiloft in Italië?')}</Eyebrow>
          <h2 className="display on-dark" style={{ marginTop: 28, marginBottom: 32, color: 'var(--linen)', fontSize: 'clamp(48px, 6vw, 96px)' }}>
            {t(<>Let's start<br/>with a coffee.</>, <>Laten we beginnen<br/>met koffie.</>)}
          </h2>
          <button className="btn btn-ghost" onClick={() => go('book')}>{t('Begin a Conversation', 'Begin een gesprek')}</button>
        </div>
      </section>
    </>
  );
}


function OverMijScreen({ go }) {
  const t = useT();
  return (
    <>
      {/* OPENING — split portrait + intro ─────────────────── */}
      <section style={{ padding: '120px 40px 96px' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 96, alignItems: 'center' }}>
          <div style={{ aspectRatio: '3/4', background: `url(${PP}4U4A1551n.jpg) center 20%/cover` }}></div>
          <div>
            <Eyebrow>{t('About', 'Over mij')}</Eyebrow>
            <h1 className="display" style={{ marginTop: 24, marginBottom: 32, fontSize: 'clamp(48px, 6vw, 92px)' }}>
              {t('Hi there!', 'Hoi!')}
            </h1>
            <Rule />
            <p className="body-lg" style={{ color: 'var(--ink-soft)', marginTop: 28, fontWeight: 300 }}>
              {t(
                "My name is Marieke, and I'm passionate about documenting love stories through honest, emotion-filled imagery. I love witnessing genuine moments, capturing authentic emotions, and turning them into a timeless visual storybook.",
                'Ik ben Marieke, en ik hou ervan om liefdesverhalen vast te leggen met eerlijke, emotievolle beelden. Ik geniet ervan om echte momenten te zien gebeuren, oprechte emoties vast te leggen en daar een tijdloos beeldverhaal van te maken.'
              )}
            </p>
            <p className="body" style={{ color: 'var(--ink-soft)', marginTop: 20 }}>
              {t(
                "I'm drawn to the quiet, candid moments just as much as I love creating editorial-inspired imagery with intention and style. Together, we'll bring your vision to life and create photographs that truly reflect who you are — your connection, your energy, and the love you share with the people around you.",
                'Ik voel me net zo aangetrokken tot de stille, ongedwongen momenten als tot het maken van editorial beelden met intentie en stijl. Samen brengen we jullie visie tot leven en maken we foto’s die echt weergeven wie jullie zijn — jullie verbinding, jullie energie en de liefde die jullie delen met de mensen om jullie heen.'
              )}
            </p>
          </div>
        </div>
      </section>

      {/* SECOND PHOTO ────────────────────────────────────── */}
      <section style={{ padding: '0 40px 96px' }}>
        <div className="container">
          <div style={{ aspectRatio: '21/9', background: `url(${PP}4U4A1648n.jpg) center 40%/cover` }}></div>
        </div>
      </section>

      {/* WHERE IT STARTED ────────────────────────────────── */}
      <section className="section">
        <div className="container narrow">
          <Eyebrow>{t('Where it started', 'Waar het begon')}</Eyebrow>
          <h2 className="h1" style={{ marginTop: 20, marginBottom: 28, fontStyle: 'italic', fontWeight: 300, letterSpacing: '-0.015em' }}>
            {t(<>A camera<br/>from my grandfather.</>, <>Een camera<br/>van mijn opa.</>)}
          </h2>
          <p className="body-lg" style={{ color: 'var(--ink-soft)', marginBottom: 22, fontWeight: 300 }}>
            {t(
              'My love for photography started early, when I watched as a little girl with admiration as my grandfather developed photos in his dark room. From him and my grandmother I got my first camera — and from that moment on I wanted to capture everything.',
              'Mijn liefde voor fotografie begon vroeg, toen ik als klein meisje bewonderend toekeek hoe mijn opa foto’s ontwikkelde in zijn donkere kamer. Van hem en oma kreeg ik mijn eerste camera — en vanaf dat moment wilde ik alles vastleggen.'
            )}
          </p>
          <p className="body" style={{ color: 'var(--ink-soft)', marginBottom: 22 }}>
            {t(
              "Because that's what makes photography so special to me: catching moments that are over, but which you can experience again and again through images.",
              'Want dat is wat fotografie voor mij zo bijzonder maakt: momenten vangen die voorbij zijn, maar die je via beelden steeds opnieuw kunt beleven.'
            )}
          </p>
          <p className="body" style={{ color: 'var(--ink-soft)', marginBottom: 22 }}>
            {t(
              'I love working with natural light and am always looking for how light can give even the most ordinary places something magical. You can see that in my style:',
              'Ik werk het liefst met natuurlijk licht en zoek altijd naar de manier waarop licht zelfs de meest gewone plekken iets magisch kan geven. Dat zie je terug in mijn stijl:'
            )}
            <strong style={{ fontWeight: 500, color: 'var(--ink)' }}> {t('warm, pure and with an eye for detail', 'warm, puur en met oog voor detail')}</strong>.
          </p>
        </div>
      </section>

      {/* FACTS GRID ─────────────────────────────────────── */}
      <section className="section section-bone">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 64, textAlign: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 64, color: 'var(--amber)', lineHeight: 1 }}>10+</div>
              <div style={{ marginTop: 12, fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{t('Years photographing weddings', 'Jaar bruiloften fotograferen')}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 64, color: 'var(--amber)', lineHeight: 1 }}>120+</div>
              <div style={{ marginTop: 12, fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{t('Couples photographed', 'Stellen gefotografeerd')}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 64, color: 'var(--amber)', lineHeight: 1 }}>7</div>
              <div style={{ marginTop: 12, fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{t('Countries on location', 'Landen op locatie')}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 64, color: 'var(--amber)', lineHeight: 1 }}>20</div>
              <div style={{ marginTop: 12, fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{t('Weddings per year, max', 'Bruiloften per jaar, max')}</div>
            </div>
          </div>
        </div>
      </section>

      {/* SIGNATURE ──────────────────────────────────────── */}
      <section className="section">
        <div className="container narrow" style={{ textAlign: 'center' }}>
          <p className="body-lg" style={{ color: 'var(--ink-soft)', marginBottom: 24, fontWeight: 300, fontStyle: 'italic' }}>
            {t('Visual storyteller for the wildly in love.', 'Verhalenverteller voor wie wild verliefd zijn.')}
          </p>
          <Signature size={72} />
          <div style={{ marginTop: 40 }}>
            <button className="btn btn-rule" onClick={() => go('book')}>{t("Let's Talk", 'Laten we praten')}</button>
          </div>
        </div>
      </section>
    </>
  );
}


function BookScreen({ go, sessions = false }) {
  const t = useT();
  const [form, setForm] = React.useState({ name: '', email: '', date: '', venue: '', kind: '', moodboard: '', story: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  if (submitted) {
    return (
      <section className="section" style={{ padding: '160px 40px', textAlign: 'center' }}>
        <div className="container narrow">
          <Eyebrow amber>{t('Message received', 'Bericht ontvangen')}</Eyebrow>
          <h1 className="display" style={{ marginTop: 28, marginBottom: 32, fontSize: 'clamp(48px, 6vw, 92px)' }}>{t('Thank you.', 'Dank jullie wel.')}</h1>
          <Rule className="center" />
          <p className="body-lg" style={{ color: 'var(--ink-soft)', marginTop: 28, fontWeight: 300 }}>
            {t(
              "I read every message myself and write back within two days — often sooner. If your date is available we'll schedule a call.",
              'Ik lees elk bericht zelf en reageer binnen twee dagen — vaak sneller. Als jullie datum beschikbaar is plannen we een gesprek.'
            )}
          </p>
          <div style={{ marginTop: 48 }}><Signature size={64} /></div>
        </div>
      </section>
    );
  }

  return (
    <section style={{ padding: 0 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '100vh' }}>
        {/* LEFT — image + intro */}
        <div style={{
          background: `url(${PP}4U4A8888nn.jpg) center 30% / cover`,
          minHeight: '100%',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to bottom, rgba(26,24,22,.35), rgba(26,24,22,.65))',
            color: 'var(--linen)',
            padding: '80px 56px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, letterSpacing: '0.42em', textTransform: 'uppercase', opacity: 0.85 }}>{sessions ? t('Sessions · Enquire', 'Sessies · Informeren') : t('Enquire', 'Neem contact op')}</div>
            </div>
            <div>
              <h1 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(48px, 5.5vw, 88px)', lineHeight: 0.98, margin: 0, color: 'var(--linen)', letterSpacing: '-0.02em' }}>
                {sessions
                  ? t(<>Tell me about<br/>your session.</>, <>Vertel over<br/>jullie sessie.</>)
                  : t(<>Tell me about<br/>your day.</>, <>Vertel over<br/>jullie dag.</>)}
              </h1>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7, color: 'rgba(242,237,229,.85)', marginTop: 28, maxWidth: '44ch', fontWeight: 300 }}>
                {sessions
                  ? t(
                      "Portraits, couples, motherhood — every session is tailored. Tell me a little about what you'd love to capture and I'll come back with a quote.",
                      'Portretten, koppels, moederschap — elke sessie is op maat. Vertel een beetje wat jullie graag vastgelegd willen zien en ik kom terug met een offerte.'
                    )
                  : t(
                      "It doesn't have to be a perfect message. A few sentences about your story, the date, the place — and I'll write you back.",
                      'Het hoeft geen perfect bericht te zijn. Een paar zinnen over jullie verhaal, de datum, de plek — ik schrijf jullie terug.'
                    )}
              </p>
              <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(242,237,229,.7)', letterSpacing: '0.04em' }}>mluppensfotografie@gmail.com</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(242,237,229,.7)', letterSpacing: '0.04em' }}>06 — 40 83 92 58</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(242,237,229,.7)', letterSpacing: '0.04em' }}>{t('Amsterdam · available for world travel', 'Amsterdam · beschikbaar voor wereldwijd reizen')}</div>
              </div>
              <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid rgba(242,237,229,.2)' }}>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, letterSpacing: '0.42em', textTransform: 'uppercase', color: 'rgba(242,237,229,.55)', marginBottom: 14 }}>{t('Have a moodboard?', 'Heb je een moodboard?')}</div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.7, color: 'rgba(242,237,229,.78)', margin: 0, maxWidth: '38ch', fontWeight: 300 }}>
                  {t(
                    "If you've been collecting images on Pinterest or anywhere else, share the link with me. It tells me so much about how you see your day.",
                    'Verzamel je beelden op Pinterest of ergens anders? Deel gerust de link met me. Het vertelt me zoveel over hoe jullie de dag voor je zien.'
                  )}
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — form */}
        <div style={{ padding: '80px 64px', background: 'var(--linen)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Eyebrow>{sessions ? t('Sessions Enquiry', 'Sessie aanvraag') : t('Enquiry', 'Aanvraag')}</Eyebrow>
          <h2 className="h2" style={{ marginTop: 20, marginBottom: 48, fontStyle: 'italic', fontWeight: 300 }}>
            {t('A few small things first.', 'Eerst een paar kleine dingen.')}
          </h2>

          <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <FormField label={t('Your name', 'Jullie naam')} placeholder={sessions ? 'Anna' : 'Cecilia'} value={form.name} onChange={upd('name')} />
              <FormField label={t('Email', 'E-mail')} type="email" placeholder={t('hello@yourdomain.com', 'hallo@jullie-domein.nl')} value={form.email} onChange={upd('email')} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <FormField
                label={sessions ? t('Preferred date / month', 'Voorkeursdatum / maand') : t('Wedding date', 'Trouwdatum')}
                placeholder={sessions ? t('Flexible? Tell me a window.', 'Flexibel? Geef een periode aan.') : t('dd / mm / yyyy', 'dd / mm / jjjj')}
                value={form.date}
                onChange={upd('date')}
              />
              <FormField
                label={sessions ? t('Location / city', 'Locatie / stad') : t('Venue / location', 'Locatie')}
                placeholder=""
                value={form.venue}
                onChange={upd('venue')}
              />
            </div>
            {sessions ? (
              <FormField
                label={t('Type of session', 'Type sessie')}
                placeholder={t('Choose a session', 'Kies een sessie')}
                options={[
                  t('Portrait', 'Portret'),
                  t('Couple', 'Koppel'),
                  t('Motherhood', 'Moederschap'),
                  t('Family', 'Familie'),
                  t('Other', 'Anders'),
                ]}
                value={form.kind}
                onChange={upd('kind')}
              />
            ) : (
              <FormField
                label={t('Collection', 'Collectie')}
                placeholder={t('Choose a collection', 'Kies een collectie')}
                options={[
                  t('Enchanted · 6 hours', 'Enchanted · 6 uur'),
                  t('You belong with me · 8 hours', 'You belong with me · 8 uur'),
                  t('Love Story · 12 hours', 'Love Story · 12 uur'),
                  t('Destination — custom quote', 'Destination — offerte op maat'),
                  t('Not sure yet', 'Nog niet zeker'),
                ]}
                value={form.kind}
                onChange={upd('kind')}
              />
            )}
            <FormField
              label={t('Moodboard link (optional)', 'Moodboard-link (optioneel)')}
              placeholder={t('Pinterest, Instagram saves, anywhere…', 'Pinterest, Instagram saves, overal…')}
              value={form.moodboard}
              onChange={upd('moodboard')}
            />
            <FormField
              label={sessions ? t('Tell me your idea', 'Vertel jullie idee') : t('Tell me your story', 'Vertel jullie verhaal')}
              multiline
              placeholder={sessions
                ? t(
                    "A few sentences — the feeling you want, who's in front of the camera, why this moment matters…",
                    'Een paar zinnen — het gevoel dat jullie willen, wie er voor de camera staat, waarom dit moment belangrijk is…'
                  )
                : t(
                    'A few sentences — how you met, what the day means, the images you most want kept…',
                    'Een paar zinnen — hoe jullie elkaar ontmoetten, wat de dag betekent, welke beelden jullie het liefst willen bewaren…'
                  )}
              value={form.story}
              onChange={upd('story')}
              helper={t(
                'The more detail you share, the better I can think along.',
                'Hoe meer jullie delen, hoe beter ik kan meedenken.'
              )}
            />
            <div style={{ marginTop: 36 }}>
              <button type="submit" className="btn" style={{ width: '100%', justifyContent: 'center' }}>{t('Send Enquiry', 'Stuur bericht')}</button>
              <p className="small" style={{ marginTop: 16, fontStyle: 'italic', textAlign: 'center' }}>
                {t('I reply within 48 hours, often sooner.', 'Ik reageer binnen 48 uur, vaak sneller.')}
              </p>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PortfolioScreen, RealWeddingScreen, OverMijScreen, BookScreen });