// MLuppens Website — Recent Work editorial page + per-gallery view
// Matches the Naamloos-1 layout: alternating offset rows of text + large image,
// each with a "SEE ALBUM" CTA. Clicking the album opens an immersive gallery view.

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

// Each entry mirrors Marieke's three buckets but described without forcing country names.
const RECENT_ALBUMS = [
  {
    id: 'romance-seaside',
    title: 'Romance at the Seaside',
    titleNl: 'Romantiek aan zee',
    blurb: "A lace veil, the wind off the water, and a long late-afternoon. We chased the light until the sea turned silver.",
    blurbNl: 'Een kanten sluier, de wind van zee en een lange middag die maar door bleef gaan. We jaagden het licht na tot de zee zilver kleurde.',
    cover: RP + '4U4A1554-3n.jpg',
    coverPos: 'center 30%',
    side: 'right', // image on right, text on left
    gallery: [
      RP + '4U4A1554-3n.jpg', RP + '4U4A1551n.jpg', RP + '4U4A1402.jpg',
      RP + '4U4A1116n.jpg',   RP + '4U4A1170n.jpg', RP + '4U4A2533zw.jpg',
      RP + '4U4A1579n.jpg',   RP + '4U4A8076n.jpg',
    ],
  },
  {
    id: 'palazzo-and-marble',
    title: 'Palazzo, marble, midnight',
    titleNl: 'Palazzo, marmer, middernacht',
    blurb: "Antique gilt mirrors, a candlelit corridor, and a couple who moved through the rooms like they'd always belonged.",
    blurbNl: 'Vergulde antieke spiegels, een gang vol kaarslicht en een stel dat door de zalen bewoog alsof ze er altijd al thuishoorden.',
    cover: RP + '4U4A7637n.jpg',
    coverPos: 'center 35%',
    bw: true,
    side: 'left',
    gallery: [
      RP + '4U4A7637n.jpg', RP + '4U4A9052zw1n.jpg', RP + '4U4A5135zwn.jpg',
      RP + '4U4A5661n.jpg', RP + '4U4A2533zw.jpg',  RP + '4U4A5359n.jpg',
    ],
  },
  {
    id: 'intimate-courtyard',
    title: 'Intimate, in a hidden courtyard',
    titleNl: 'Intiem, in een verborgen binnenhof',
    blurb: "Twenty guests, an old garden, an unforgettable kiss in front of the olive trees. The kind of day that finishes by candlelight.",
    blurbNl: 'Twintig gasten, een oude tuin, een onvergetelijke kus voor de olijfbomen. Het soort dag dat eindigt bij kaarslicht.',
    cover: RP + '4U4A6644n.jpg',
    coverPos: 'center 30%',
    side: 'right',
    gallery: [
      RP + '4U4A6644n.jpg', RP + '4U4A6304n.jpg', RP + '4U4A6683zw.jpg',
      RP + '4U4A8888nn.jpg', RP + '4U4A9540n.jpg', RP + '4U4A9644.jpg',
    ],
  },
  {
    id: 'canal-and-stadhuis',
    title: 'A canal, a stadhuis, a quiet "yes"',
    titleNl: 'Een gracht, een stadhuis, een zacht „ja”',
    blurb: "Just the two of them and the witnesses. The vows in a panelled room, the toast on the canal, the city watching politely.",
    blurbNl: 'Alleen zij tweeen en hun getuigen. De geloften in een gelambriseerde zaal, de toost aan de gracht, de stad die beleefd toekeek.',
    cover: RP + '4U4A0005n.jpg',
    coverPos: 'center 35%',
    bw: true,
    side: 'left',
    gallery: [
      RP + '4U4A0005n.jpg', RP + '4U4A0577n.jpg', RP + '4U4A0737n.jpg',
      RP + '4U4A0957n.jpg', RP + '4U4A0964n.jpg', RP + '4U4A2206_1img.jpg',
    ],
  },
  {
    id: 'a-day-on-lake-como',
    title: 'A day on the lake',
    titleNl: 'Een dag op het meer',
    blurb: "A boat at sunrise, the cypress reflections, and an embrace that pretended the rest of the day didn't exist.",
    blurbNl: 'Een boot bij zonsopkomst, de cipressen weerspiegeld in het water en een omhelzing die de rest van de dag wegwiste.',
    cover: RP + '4U4A9990n.jpg',
    coverPos: 'center 35%',
    side: 'right',
    gallery: [
      RP + '4U4A9990n.jpg', RP + '4U4A1648n.jpg', RP + '4U4A2006n.jpg',
      RP + '4U4A2486_img2.jpg', RP + '4U4A2953n.jpg', RP + '4U4A7290n.jpg',
    ],
  },
];

window.RECENT_ALBUMS = RECENT_ALBUMS;


function RecentWorkScreen({ go, openAlbum }) {
  const t = useT();
  return (
    <>
      {/* HEADER — simple, on-linen ─────────────────────── */}
      <section style={{ padding: '160px 40px 80px', textAlign: 'center' }} data-screen-label="Recent Work · Header">
        <div className="container narrow">
          <Eyebrow>{t('Recent Work', 'Recent werk')}</Eyebrow>
          <h1 className="display" style={{
            marginTop: 24,
            marginBottom: 28,
            fontSize: 'clamp(56px, 8vw, 128px)',
            fontStyle: 'normal',
            textTransform: 'uppercase',
            letterSpacing: '0.005em',
            fontWeight: 400,
          }}>
            {t('Recent', 'Recente')} <em style={{ fontStyle: 'italic', textTransform: 'none', fontWeight: 300, letterSpacing: '-0.015em', display: 'inline-block' }}>{t('weddings & editorials', 'bruiloften & editorials')}</em>
          </h1>
          <Rule className="center" />
          <p className="body-lg" style={{ color: 'var(--ink-soft)', marginTop: 28, fontWeight: 300, maxWidth: '52ch', margin: '28px auto 0' }}>
            {t(
              'New stories from the year. Each album opens in its own gallery.',
              'Nieuwe verhalen uit het jaar. Elk album opent in zijn eigen galerij.'
            )}
          </p>
        </div>
      </section>

      {/* ALTERNATING ROWS ──────────────────────────────────── */}
      <section style={{ padding: '0 40px 96px' }}>
        <div className="container">
          {RECENT_ALBUMS.map((album, i) => (
            <AlbumRow key={album.id} album={album} index={i} onOpen={() => openAlbum(album.id)} />
          ))}
        </div>
      </section>

      {/* CTA ─────────────────────────────────────────────── */}
      <section className="section section-bone" style={{ textAlign: 'center' }}>
        <div className="container narrow">
          <h2 className="h1" style={{ fontStyle: 'italic', fontWeight: 300, marginBottom: 28 }}>
            {t('More to share, more to come.', 'Meer te delen, meer op komst.')}
          </h2>
          <p className="body" style={{ color: 'var(--ink-soft)', maxWidth: '52ch', margin: '0 auto 36px' }}>
            {t(
              'New stories are added through the year. For the curated archive, head to the portfolio.',
              'Door het jaar heen voeg ik nieuwe verhalen toe. Voor de zorgvuldige selectie: bekijk het portfolio.'
            )}
          </p>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-rule" onClick={() => go('portfolio')}>{t('Curated Portfolio', 'Portfolio')}</button>
            <button className="btn" onClick={() => go('book')}>{t('Begin a Conversation', 'Begin een gesprek')}</button>
          </div>
        </div>
      </section>
    </>
  );
}


function AlbumRow({ album, index, onOpen }) {
  const t = useT();
  const lang = useLang();
  const title = lang === 'NL' && album.titleNl ? album.titleNl : album.title;
  const blurb = lang === 'NL' && album.blurbNl ? album.blurbNl : album.blurb;
  const imageOnRight = album.side === 'right';
  // alternating vertical offset for editorial rhythm
  const verticalOffset = index % 2 === 0 ? 0 : 96;

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '5fr 7fr',
      gap: 0,
      marginBottom: 160,
      minHeight: 520,
      alignItems: 'center',
    }}>
      {/* TEXT COL */}
      <div style={{
        order: imageOnRight ? 0 : 1,
        padding: imageOnRight ? '0 64px 0 0' : '0 0 0 64px',
        marginTop: verticalOffset,
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontStyle: 'normal',
          fontWeight: 400,
          fontSize: 'clamp(28px, 2.6vw, 36px)',
          lineHeight: 1.18,
          color: 'var(--ink)',
          margin: '0 0 28px',
          letterSpacing: '-0.005em',
          maxWidth: '20ch',
        }}>
          {title}
        </h2>
        <p className="body" style={{ color: 'var(--ink-soft)', marginBottom: 36, maxWidth: '36ch' }}>
          {blurb}
        </p>
        <button
          onClick={onOpen}
          className="btn btn-rule"
          style={{ padding: '14px 28px' }}
        >
          {t('See Album', 'Bekijk album')}
        </button>
      </div>

      {/* IMAGE COL — overlap the column slightly for editorial feel */}
      <div style={{
        order: imageOnRight ? 1 : 0,
        marginTop: -verticalOffset,
      }}>
        <div
          onClick={onOpen}
          style={{
            aspectRatio: '4/3',
            cursor: 'pointer',
            overflow: 'hidden',
            background: 'var(--ink)',
          }}
        >
          <div
            className="recent-tile-img"
            style={{
              width: '100%',
              height: '100%',
              backgroundImage: `url(${album.cover})`,
              backgroundSize: 'cover',
              backgroundPosition: album.coverPos || 'center',
              transition: 'transform .8s var(--ease)',
              filter: album.bw ? 'grayscale(1)' : 'none',
            }}
          ></div>
        </div>
      </div>
    </div>
  );
}


function AlbumGalleryScreen({ albumId, onBack, onEnquire }) {
  const t = useT();
  const lang = useLang();
  const album = RECENT_ALBUMS.find(a => a.id === albumId) || RECENT_ALBUMS[0];
  const photos = album.gallery;
  const title = lang === 'NL' && album.titleNl ? album.titleNl : album.title;
  const blurb = lang === 'NL' && album.blurbNl ? album.blurbNl : album.blurb;

  // Split photos into three editorial sections so the layout breathes
  // exactly like the Real Wedding story page.
  const first = photos.slice(0, Math.min(3, photos.length));
  const middle = photos.slice(3, Math.min(5, photos.length));
  const rest = photos.slice(5);

  return (
    <>
      {/* HERO ────────────────────────────────────────────── */}
      <section className="hero">
        <div
          className={`hero-img ${album.bw ? 'bw' : ''}`}
          style={{ backgroundImage: `url(${album.cover})`, backgroundPosition: album.coverPos || 'center' }}
        ></div>
        <div className="hero-inner">
          <button
            onClick={onBack}
            className="btn-text-link on-dark"
            style={{ marginBottom: 28 }}
          >
            {t('← Back to Recent Work', '← Terug naar recent werk')}
          </button>
          <div className="hero-eyebrow">{t('Recent Work · Story', 'Recent werk · Verhaal')}</div>
          <h1 className="hero-title" style={{ fontSize: 'clamp(48px, 8vw, 128px)' }}>
            {title}
          </h1>
        </div>
      </section>

      {/* OPENING ─────────────────────────────────────────── */}
      <section className="section">
        <div className="container narrow">
          <Rule className="center" />
          <p
            className="body-lg"
            style={{
              color: 'var(--ink-soft)',
              marginTop: 36,
              fontWeight: 300,
              fontStyle: 'italic',
              textAlign: 'center',
            }}
          >
            "{blurb}"
          </p>
        </div>
      </section>

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

          {/* Triptych — opening */}
          {first.length === 3 && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 8, marginBottom: 96 }}>
              <div style={{ aspectRatio: '3/4', background: `url(${first[0]}) center/cover` }}></div>
              <div style={{ aspectRatio: '21/16', background: `url(${first[1]}) center 30%/cover` }}></div>
              <div style={{ aspectRatio: '3/4', background: `url(${first[2]}) center/cover` }}></div>
            </div>
          )}

          {/* Full-bleed wide */}
          {middle[0] && (
            <div
              style={{
                aspectRatio: '21/9',
                background: `url(${middle[0]}) 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('In the quiet of it all', 'In de stilte van alles')}
            </h3>
          </div>

          {/* Two-up tall */}
          {middle[1] && rest[0] && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 96 }}>
              <div style={{ aspectRatio: '3/4', background: `url(${middle[1]}) center 25%/cover` }}></div>
              <div style={{ aspectRatio: '3/4', background: `url(${rest[0]}) center 25%/cover` }}></div>
            </div>
          )}

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

          {/* Three-up celebration */}
          {rest.length >= 5 && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 96 }}>
              <div style={{ aspectRatio: '3/4', background: `url(${rest[2]}) center/cover`, filter: 'grayscale(1)' }}></div>
              <div style={{ aspectRatio: '3/4', background: `url(${rest[3]}) center/cover`, filter: 'grayscale(1)' }}></div>
              <div style={{ aspectRatio: '3/4', background: `url(${rest[4]}) 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('Could yours be next?', 'Wordt die van jullie de volgende?')}</Eyebrow>
          <h2 className="display on-dark" style={{ marginTop: 28, marginBottom: 32, color: 'var(--linen)', fontSize: 'clamp(48px, 6vw, 96px)' }}>
            {t(<>Let's begin<br/>with a coffee.</>, <>Laten we beginnen<br/>met koffie.</>)}
          </h2>
          <button className="btn btn-ghost" onClick={onEnquire}>{t('Begin a Conversation', 'Begin een gesprek')}</button>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { RecentWorkScreen, AlbumGalleryScreen, AlbumRow });