// MLuppens Website — long-scroll Home + supporting Weddings deep-dive

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

// Photo references
const HOME_HERO = P + '4U4A1402.jpg';
const ABOUT_PORTRAIT = P + '4U4A1551n.jpg';
const ITALY_TILE = P + '4U4A1554-3n.jpg';
const COMO_TILE = P + '4U4A9990n.jpg';
const FRANCE_TILE = P + '4U4A6644n.jpg';
const AMSTERDAM_TILE = P + '4U4A0005n.jpg';
const NL_TILE = P + 'wedding-04.jpg';
const BW_DETAIL = P + '4U4A2533zw.jpg';
const BW_FIRST_DANCE = P + '4U4A9052zw1n.jpg';
const BW_CHAMPAGNE = P + '4U4A5661n.jpg';
const BW_STAIRS = P + '4U4A7637n.jpg';
const BW_PORTRAIT = P + '4U4A1648n.jpg';
const ITALY_BALCONY = P + '4U4A1554-3n.jpg';
const ITALY_PREP = P + '4U4A1116n.jpg';
const FRENCH_RUN = P + '4U4A6304n.jpg';
const HEELS_RING = P + '4U4A5359n.jpg';

// Scrolls a target element into view inside .app-scroll without using scrollIntoView
function scrollToAnchor(anchorAttr) {
  const target = document.querySelector(`[data-anchor="${anchorAttr}"]`);
  const scroller = document.querySelector('.app-scroll');
  if (!target || !scroller) return;
  const scrollerTop = scroller.getBoundingClientRect().top;
  const targetTop = target.getBoundingClientRect().top;
  const offset = targetTop - scrollerTop + scroller.scrollTop - 24;
  scroller.scrollTo({ top: offset, behavior: 'smooth' });
}

// Inline mini-component for an inline enquiry form — kept lean
function InlineEnquiryForm() {
  const [form, setForm] = React.useState({ name: '', email: '', date: '', venue: '', story: '' });
  const [sent, setSent] = React.useState(false);
  const t = useT();
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  if (sent) {
    return (
      <div style={{ padding: '64px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-script)', fontSize: 64, lineHeight: 1, color: 'var(--ink)' }}>
          {t('Thank you.', 'Dank jullie wel.')}
        </div>
        <p className="body" style={{ color: 'var(--ink-soft)', marginTop: 18, fontStyle: 'italic' }}>
          {t("I'll write you back within 48 hours.", 'Ik schrijf jullie binnen 48 uur terug.')}
        </p>
      </div>
    );
  }
  return (
    <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ maxWidth: 720, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FormField label={t('Your name', 'Jullie naam')} placeholder="Cecilia" value={form.name} onChange={upd('name')} />
        <FormField label={t('Email', 'E-mail')} type="email" placeholder="hallo@jullie-domein.nl" value={form.email} onChange={upd('email')} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FormField label={t('Wedding date', 'Trouwdatum')} placeholder="dd / mm / jjjj" value={form.date} onChange={upd('date')} />
        <FormField label={t('Venue / location', 'Locatie')} placeholder="" value={form.venue} onChange={upd('venue')} />
      </div>
      <FormField
        label={t('Tell me your story', 'Vertel jullie verhaal')}
        multiline
        placeholder={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')}
      />
      <div style={{ marginTop: 28 }}>
        <button type="submit" className="btn" style={{ width: '100%', justifyContent: 'center' }}>{t('Send Enquiry', 'Stuur bericht')}</button>
        <p className="small" style={{ marginTop: 14, fontStyle: 'italic', textAlign: 'center' }}>
          {t('I reply within 48 hours, often sooner.', 'Ik reageer binnen 48 uur, vaak sneller.')}
        </p>
      </div>
    </form>
  );
}

// Small reusable section divider — used between major chapters
function ChapterMark({ num, label }) {
  return (
    <div style={{ textAlign: 'center', padding: '32px 0' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 18, color: 'var(--amber)', letterSpacing: '0.04em' }}>
        {num}
      </div>
      <div style={{ marginTop: 6, fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 10, letterSpacing: '0.42em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
        {label}
      </div>
    </div>
  );
}


function HomeScreen({ go }) {
  const t = useT();
  return (
    <>
      {/* ═══════════ I. HERO ═══════════════════════════════ */}
      <section className="hero" data-screen-label="01 Home · Hero">
        <div className="hero-img" style={{ backgroundImage: `url(${HOME_HERO})`, backgroundPosition: 'center 35%' }}></div>
        <div className="hero-inner">
          <div className="hero-eyebrow">{t('Marieke Luppens · Amsterdam & worldwide', 'Marieke Luppens · Amsterdam & wereldwijd')}</div>
          <h1 className="hero-headline-caps">
            {t(
              <>Visual<br/>storyteller<br/>for the wildly<br/><em>in love.</em></>,
              <>Verhalen-<br/>verteller<br/>voor wie wild<br/><em>verliefd zijn.</em></>
            )}
          </h1>
          <div className="hero-meta">
            <button className="btn btn-ghost" onClick={() => go('portfolio')}>{t('View Portfolio', 'Bekijk portfolio')}</button>
            <button className="btn-text-link on-dark" onClick={() => scrollToAnchor('enquiry')}>{t('Enquire →', 'Neem contact op →')}</button>
          </div>
        </div>
        <div className="hero-scroll">
          <span>{t('Scroll', 'Scroll')}</span>
          <div className="hero-scroll-line"></div>
        </div>
      </section>

      {/* ═══════════ II. WELCOME / MANIFESTO ════════════════ */}
      <section className="section">
        <div className="container narrow" style={{ textAlign: 'center' }}>
          <ChapterMark num="i." label={t('Welcome', 'Welkom')} />
          <h2 className="h1" style={{ marginTop: 16, marginBottom: 26, fontStyle: 'italic', fontWeight: 300, letterSpacing: '-0.015em' }}>
            {t(
              'Your wedding day deserves an approach that suits you.',
              'Jullie trouwdag verdient een aanpak die bij jullie past.'
            )}
          </h2>
          <Rule className="center" />
          <p className="body-lg" style={{ color: 'var(--ink-soft)', marginTop: 32, fontWeight: 300 }}>
            {t(
              "From the first contact to the last picture I'll think along with you — from planning the shoot to relaxed guidance during posing, everything revolves around you. Together we bring your vision to life and take pictures that not only reflect your style, but also the love and connection you share with each other and your loved ones.",
              'Vanaf het eerste contact tot de laatste foto denk ik met jullie mee — van het plannen van de reportage tot ontspannen begeleiding tijdens het poseren, alles draait om jullie. Samen brengen we jullie visie tot leven en maken we beelden die niet alleen jullie stijl weerspiegelen, maar ook de liefde en verbinding die jullie met elkaar en met jullie dierbaren delen.'
            )}
          </p>
        </div>
      </section>

      {/* ═══════════ III. RECENT WORK ═══════════════════════ */}
      <section className="section section-tight">
        <div className="container">
          <ChapterMark num="ii." label={t('Recent stories', 'Recente verhalen')} />
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48 }}>
            <h2 className="h1" style={{ fontStyle: 'italic', fontWeight: 300, margin: 0 }}>{t('From the archive', 'Uit het archief')}</h2>
            <button className="btn-text-link" onClick={() => go('recent-work')}>{t('All Recent Work →', 'Al het recente werk →')}</button>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 8 }}>
            <div style={{ gridColumn: 'span 8', aspectRatio: '21/12' }}>
              <PhotoTile src={ITALY_TILE} title="Cecilia &amp; Matteo" meta="Sorrento · Villa Astor" onClick={() => go('real-wedding')} aspect="auto" position="center 35%" />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={BW_DETAIL} title={t('The ring', 'De ring')} meta={t('Detail · B&amp;W', 'Detail · Z/W')} aspect="auto" position="center" bw />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={COMO_TILE} title="Alma &amp; Léon" meta="Lake Como" aspect="auto" position="center 40%" />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={FRANCE_TILE} title="Mathilde &amp; Edouard" meta="Château de Maisons" aspect="auto" position="center 30%" />
            </div>
            <div style={{ gridColumn: 'span 4', aspectRatio: '3/4' }}>
              <PhotoTile src={BW_FIRST_DANCE} title={t('First dance', 'Eerste dans')} meta={t('Naples · B&amp;W', 'Napels · Z/W')} aspect="auto" position="center" bw />
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════ STRIP ══════════════════════════════════ */}
      <section className="brand-strip">
        <div className="brand-strip-inner" style={{ justifyContent: 'center' }}>
          <span className="brand-strip-item">{t('Candid', 'Ongedwongen')}</span>
          <span className="brand-strip-dot"></span>
          <span className="brand-strip-item">{t('Editorial', 'Editorial')}</span>
          <span className="brand-strip-dot"></span>
          <span className="brand-strip-item">{t('A touch of cinematic flair', 'Met een vleugje cinematografie')}</span>
        </div>
      </section>

      {/* ═══════════ III. THEIR EXPERIENCE ═══════════════════ */}
      <section className="section">
        <div className="container narrow" style={{ textAlign: 'center' }}>
          <ChapterMark num="iii." label={t('Their experience', 'Hun ervaring')} />
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 56, fontStyle: 'italic', fontWeight: 300, textAlign: 'center' }}>
            {t('Kind words', 'Lieve woorden')}
          </h2>
          <Testimonial
            quote="Her commitment, warmth and love for her profession radiate from the photos. She perfectly captured not only all the big moments, but also the small, spontaneous ones that make such a day special. Thanks to her, we relive our day over and over again."
            fullQuote="Her commitment, warmth and love for her profession radiate from the photos. She perfectly captured not only all the big moments, but also the small, spontaneous ones that make such a day special. Thanks to her, we relive our day over and over again! Marieke combines professionalism with genuine passion. She works almost invisibly, has a keen sense of humor, and knows exactly when to click. We couldn't have wished for a better photographer and, frankly, a more wonderful person to tell that story. Thank you a thousand times, dear Marieke! We will cherish these memories forever."
            quoteNl="Haar inzet, warmte en liefde voor het vak stralen van de foto's af. Ze heeft niet alleen alle grote momenten perfect vastgelegd, maar ook de kleine, spontane die zo'n dag bijzonder maken. Dankzij haar herbeleven we onze dag keer op keer."
            fullQuoteNl="Haar inzet, warmte en liefde voor het vak stralen van de foto's af. Ze heeft niet alleen alle grote momenten perfect vastgelegd, maar ook de kleine, spontane die zo'n dag bijzonder maken. Dankzij haar herbeleven we onze dag keer op keer! Marieke combineert professionaliteit met oprechte passie. Ze werkt bijna onzichtbaar, heeft een fijn gevoel voor humor en weet precies wanneer ze moet klikken. We hadden ons geen betere fotograaf — en eerlijk gezegd ook geen fijner mens — kunnen wensen om dat verhaal te vertellen. Duizendmaal dank, lieve Marieke! We koesteren deze herinneringen voor altijd."
            attr="Rianne &amp; Thijs"
          />
          <div style={{ marginTop: 72, paddingTop: 56, borderTop: '1px solid var(--hair)' }}></div>
          <Testimonial
            quote="You perfectly sensed when to stay in the background — almost invisible during the most important moments — and yet you managed to capture those moments beautifully. The photos speak volumes: they show not only what happened, but especially who we are."
            fullQuote="Marieke, we're so thrilled you were our wedding photographer! As colleagues, we already knew you had talent and a keen eye, but you truly confirmed that on our summer wedding day. You brought not only your camera, but also your wonderful energy and warm presence. You perfectly sensed when to stay in the background — almost invisible during the most important moments — and yet you managed to capture those moments beautifully. The photos speak volumes: they show not only what happened, but especially who we are. You captured the atmosphere of our intimate day so vividly, and you have a unique way of bringing the personalities of our loved ones to life. What's more, the photos were beautifully edited and quickly made available via the link to our personal page — so wonderful to be able to relive everything, even during our honeymoon! Thank you for your professionalism, your calmness, and your dedication. We are incredibly grateful that you were willing to do this for us!"
            quoteNl="Je voelde perfect aan wanneer je op de achtergrond moest blijven — bijna onzichtbaar op de belangrijkste momenten — en toch wist je die momenten prachtig vast te leggen. De foto's spreken boekdelen: ze laten niet alleen zien wat er gebeurde, maar vooral wie wij zijn."
            fullQuoteNl="Marieke, wat zijn we blij dat jij onze trouwfotograaf was! Als collega's wisten we al dat je talent en een fijn oog hebt, maar op onze zomerse trouwdag heb je dat helemaal bevestigd. Je bracht niet alleen je camera mee, maar ook je heerlijke energie en warme aanwezigheid. Je voelde perfect aan wanneer je op de achtergrond moest blijven — bijna onzichtbaar op de belangrijkste momenten — en toch wist je die momenten prachtig vast te leggen. De foto's spreken boekdelen: ze laten niet alleen zien wat er gebeurde, maar vooral wie wij zijn. Je hebt de sfeer van onze intieme dag zo levendig vastgelegd, en je hebt een unieke manier om de persoonlijkheden van onze dierbaren tot leven te brengen. Bovendien waren de foto's prachtig bewerkt en snel beschikbaar via de link naar onze persoonlijke pagina — wat fijn om alles, zelfs tijdens onze huwelijksreis, te kunnen herbeleven! Bedankt voor je professionaliteit, je rust en je toewijding. We zijn ontzettend dankbaar dat je dit voor ons wilde doen!"
            attr="Anne &amp; Mathijs"
          />
        </div>
      </section>

      {/* ═══════════ V. ABOUT TEASER ════════════════════════ */}
      <section className="section section-bone">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 96, alignItems: 'center' }}>
          <div style={{ aspectRatio: '4/5', backgroundImage: `url(${ABOUT_PORTRAIT})`, backgroundSize: 'cover', backgroundPosition: 'center 25%' }}></div>
          <div>
            <ChapterMark num="iv." label={t('Hi there', 'Hoi')} />
            <h2 className="h1" style={{ marginTop: 14, marginBottom: 28, fontStyle: 'italic', fontWeight: 300, letterSpacing: '-0.015em' }}>
              {t(
                "I'm Marieke. Passionate about documenting your love story.",
                'Ik ben Marieke. Gepassioneerd over het vastleggen van jullie liefdesverhaal.'
              )}
            </h2>
            <Rule />
            <p className="body" style={{ color: 'var(--ink-soft)', marginBottom: 18 }}>
              {t(
                'Based in Amsterdam. My style is a mix of candid and editorial, with a touch of cinematic flair — and an eye for the quiet, in-between moments.',
                'Gevestigd in Amsterdam. Mijn stijl is een mix van ongedwongen en editorial, met een vleugje cinematografie — en oog voor de stille momenten ertussenin.'
              )}
            </p>
            <p className="body" style={{ color: 'var(--ink-soft)', marginBottom: 18 }}>
              {t(
                'I love witnessing genuine moments, capturing authentic emotions, and turning them into a timeless visual storybook.',
                'Ik hou ervan om oprechte momenten te zien gebeuren, echte emoties vast te leggen en die om te zetten in een tijdloos verhaal in beeld.'
              )}
            </p>
            <p className="body" style={{ color: 'var(--ink-soft)', marginBottom: 36, fontStyle: 'italic' }}>
              {t('Warm, pure, and with an eye for detail.', 'Warm, puur en met oog voor detail.')}
            </p>
            <button className="btn btn-rule" onClick={() => go('over-mij')}>{t('Read My Full Story', 'Lees mijn hele verhaal')}</button>
          </div>
        </div>
      </section>

      {/* ═══════════ V. PROCESS ════════════════════════════ */}
      <section className="section section-bone">
        <div className="container">
          <ChapterMark num="v." label={t('The process', 'Het proces')} />
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 72, fontStyle: 'italic', fontWeight: 300, textAlign: 'center' }}>
            {t('Our journey together', 'Onze reis samen')}
          </h2>
          <div className="steps-grid">
            <div>
              <div className="step-num">01</div>
              <h3 className="step-title">{t('A coffee', 'Een kop koffie')}</h3>
              <p className="step-body">{t(
                'We start with a relaxed conversation — in person or over video. You tell me about your day, your story, the moments that matter most.',
                'We beginnen met een ontspannen gesprek — live of via video. Jullie vertellen over jullie dag, jullie verhaal, de momenten die er het meest toe doen.'
              )}</p>
            </div>
            <div>
              <div className="step-num">02</div>
              <h3 className="step-title">{t('Preparation', 'Voorbereiding')}</h3>
              <p className="step-body">{t(
                'An optional loveshoot so the camera feels familiar long before the day. In the months between, I share trusted recommendations and stay close to your planner — a final review keeps everything flowing.',
                'Een optionele loveshoot, zodat de camera al lang voor de dag vertrouwd voelt. In de maanden ertussen deel ik vertrouwde adressen en sta ik in contact met jullie planner — een laatste afstemming zorgt dat alles soepel verloopt.'
              )}</p>
            </div>
            <div>
              <div className="step-num">03</div>
              <h3 className="step-title">{t('Your day', 'Jullie dag')}</h3>
              <p className="step-body">{t(
                "On the day itself, I gently blend into the rhythm of it all. I'll guide when needed and step back when moments unfold naturally — documenting the in-between, the emotions, and everything you'll want to remember years from now.",
                'Op de dag zelf voeg ik me rustig in het ritme. Ik begeleid waar nodig en stap terug zodra de momenten vanzelf gebeuren — het kleine ertussenin, de emoties, en alles wat jullie over jaren nog willen onthouden.'
              )}</p>
            </div>
            <div>
              <div className="step-num">04</div>
              <h3 className="step-title">{t('The gallery', 'De galerij')}</h3>
              <p className="step-body">{t(
                'A sneak peek lands in your inbox within 48 hours, and your full private gallery within six weeks. A handmade luxury album is always an option to hold it all together.',
                'Een eerste preview komt binnen 48 uur in jullie inbox, de volledige privé-galerij binnen zes weken. Een handgemaakt luxe album is altijd een optie om alles samen te brengen.'
              )}</p>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════ VI. INVESTMENT ════════════════════════ */}
      <section className="section section-tight" data-anchor="investment">
        <div className="container">
          <ChapterMark num="vi." label="Investment" />
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 20, fontStyle: 'italic', fontWeight: 300, textAlign: 'center' }}>
            Three collections
          </h2>
          <p className="body" style={{ color: 'var(--ink-soft)', maxWidth: '52ch', margin: '0 auto 56px', textAlign: 'center' }}>
            Three starting points for your day. Travel within the Netherlands is included in
            every collection; destinations beyond are quoted on request.
          </p>
          <div className="package-grid">
            <div className="package">
              <div className="package-tag">6 hours</div>
              <h3 className="package-name">Enchanted</h3>
              <div className="package-price"><b>€2.250</b></div>
              <ul className="package-list">
                <li>6 hours of photography</li>
                <li>Sneak preview within 72 hours</li>
                <li>Private online gallery</li>
                <li>250 high-res photos on luxury USB</li>
                <li>Travel within the Netherlands included</li>
              </ul>
              <button className="btn btn-rule" onClick={() => scrollToAnchor('enquiry')}>Enquire</button>
            </div>
            <div className="package">
              <div className="package-tag">8 hours</div>
              <h3 className="package-name">You belong with me</h3>
              <div className="package-price"><b>€2.995</b></div>
              <ul className="package-list">
                <li>8 hours of photography</li>
                <li>Sneak preview within 48 hours</li>
                <li>Private online gallery</li>
                <li>425 high-res photos on luxury USB</li>
                <li>Travel within the Netherlands included</li>
              </ul>
              <button className="btn btn-rule" onClick={() => scrollToAnchor('enquiry')}>Enquire</button>
            </div>
            <div className="package featured">
              <div className="package-tag">Most chosen · 12 hours</div>
              <h3 className="package-name">Love Story</h3>
              <div className="package-price"><b>€4.495</b></div>
              <ul className="package-list">
                <li>12 hours of photography</li>
                <li>Sneak preview within 24 hours</li>
                <li>Extensive online gallery</li>
                <li>650 high-res photos on luxury USB</li>
                <li>Luxury mini-album 20×20 cm</li>
                <li>Travel within the Netherlands included</li>
              </ul>
              <button className="btn" onClick={() => scrollToAnchor('enquiry')}>Reserve a Date</button>
            </div>
          </div>
          <p className="small" style={{ textAlign: 'center', marginTop: 36, fontStyle: 'italic' }}>
            Travel within the Netherlands included · VAT inclusive · Destination weddings quoted on request
          </p>
          <p className="small" style={{ textAlign: 'center', marginTop: 28, color: 'var(--ink-mute)', maxWidth: '60ch', margin: '28px auto 0', lineHeight: 1.7 }}>
            Alongside weddings, I also photograph intimate portrait sessions, couples and motherhood stories.{' '}
            <button onClick={() => go('book-sessions')} className="btn-text-link" style={{ fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', textTransform: 'none', fontWeight: 'inherit', padding: 0, color: 'var(--ink)' }}>Enquire</button>{' '}
            for availability and a tailored experience.
          </p>
        </div>
      </section>

      {/* ═══════════ VII. FAQ ════════════════════════════════ */}
      <section className="section section-bone">
        <div className="container narrow">
          <ChapterMark num="vii." label="Frequently asked" />
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 48, fontStyle: 'italic', fontWeight: 300, textAlign: 'center' }}>
            Good to know
          </h2>
          <FAQItem q="How many images do we receive?" a="Around 250 for an elopement; 500+ for a full day; 800+ for the three-day package. Hand-selected, hand-edited — quality over volume." />
          <FAQItem q="When do we get them?" a="A sneak peek of 10–15 images within 48 hours. The full private gallery within six weeks." />
          <FAQItem q="Do you travel?" a="Often. I shoot regularly in Italy (Sorrento, Lake Como, Tuscany), France, and across Europe — and am available for world travel wherever love takes you." />
          <FAQItem q="Is a loveshoot necessary?" a="Not strictly — but I do recommend it. It's the easiest way for you to get used to the camera and for me to learn how you move together." />
          <FAQItem q="What if the weather turns?" a="Some of the best frames in my portfolio were made under mist or grey skies. I always have a plan B; weather is rarely a problem." />
          <FAQItem q="How do we book?" a="Send your date, venue, and a sentence about your story below. If I'm available we'll schedule a call; a 25% deposit reserves the date." />
        </div>
      </section>

      {/* ═══════════ VIII. ENQUIRE ═══════════════════════════ */}
      <section className="section section-dark" data-anchor="enquiry">
        <div className="container narrow">
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(242,237,229,.7)' }}>
              {t('viii. Enquire', 'viii. Neem contact op')}
            </div>
            <h2 className="display on-dark" style={{ marginTop: 24, marginBottom: 36, color: 'var(--linen)', fontSize: 'clamp(48px, 6.5vw, 104px)' }}>
              {t(<>Tell me<br/>your story.</>, <>Vertel mij<br/>jullie verhaal.</>)}
            </h2>
            <p className="body" style={{ color: 'rgba(242,237,229,0.78)', maxWidth: '52ch', margin: '0 auto 32px', fontWeight: 300 }}>
              {t(
                "It doesn't have to be a perfect message. A few sentences about your date, your place, and your story — I'll write you back within 48 hours.",
                'Het hoeft geen perfect bericht te zijn. Een paar zinnen over jullie datum, jullie plek en jullie verhaal — ik schrijf binnen 48 uur terug.'
              )}
            </p>
          </div>
          <div style={{ background: 'var(--linen)', padding: '56px 48px' }}>
            <InlineEnquiryForm />
          </div>
        </div>
      </section>

      {/* SIGNATURE close ──────────────────────────────────── */}
      <section style={{ padding: '128px 40px 80px', textAlign: 'center', background: 'var(--linen)' }}>
        <Signature size={88} />
      </section>
    </>
  );
}


// TrouwenScreen kept as a thin redirect-to-home stub since the nav no longer points to it.
// The full content lives on the Home page now.
function TrouwenScreen({ go }) {
  const t = useT();
  React.useEffect(() => { go('home'); }, []);
  return <div style={{ padding: '160px 40px', textAlign: 'center' }}><p className="body">{t('Everything you need is on the home page →', 'Alles wat je zoekt staat op de homepagina →')}</p></div>;
}

Object.assign(window, { HomeScreen, TrouwenScreen, InlineEnquiryForm });