/* global React */
const { Eyebrow, Tag, PhotoCard, SectionHeader } = window.LauxCreativesDesignSystem_2042c0;

// Portfolio galleries — each category maps to its folder under assets/photos/
// and the photos inside it. To update a gallery, edit the `photos` list to match
// the files in assets/photos/<folder>/ (that folder is the source of truth).
const GALLERIES = [
  { cat: 'Weddings', folder: 'weddings', photos: ['DSCF8811.jpg', 'DSCF9235.jpg', 'DSCF9568.jpg', 'DSCF9578-2.jpg', 'IMG_0092.jpg', 'IMG_7770.jpg', 'IMG_8256.jpg', 'IMG_8504.jpg', 'IMG_8868.jpg', 'IMG_8979.jpg', 'IMG_9029.jpg', 'IMG_9204.jpg', 'IMG_9649-2.jpg', 'IMG_9828.jpg', 'IMG_9975.jpg'] },
  { cat: 'Engagements', folder: 'engagements', photos: ['IMG_0002.jpg', 'IMG_0861.jpg', 'IMG_0392.jpg', 'IMG_0434.jpg', 'IMG_0517.jpg', 'IMG_0644.jpg', 'IMG_0374.jpg', 'IMG_6684.jpg', 'IMG_6787.jpg', 'IMG_6926-3.jpg', 'IMG_7141.jpg', 'IMG_7150.jpg', 'IMG_7351-2.jpg', 'IMG_9568.jpg', 'IMG_9808.jpg', 'IMG_9940-2.jpg', 'IMG_9994-2.jpg'] },
  { cat: 'Family', folder: 'family', photos: ['IMG_7850-2.jpg', 'IMG_8076.jpg', 'IMG_8266.jpg', 'IMG_8361-3.jpg', 'IMG_8638.jpg', 'IMG_8807.jpg', 'IMG_8861.jpg', 'IMG_8996.jpg', 'IMG_9244.jpg'] },
  { cat: 'Portraits', folder: 'portraits', photos: ['DSCF1730.jpg', 'DSCF1750.jpg', 'DSCF2141.jpg', 'DSCF3673.jpg', 'DSCF3731.jpg', 'DSCF3824.jpg'] },
];
const CATS = ['All', ...GALLERIES.map((g) => g.cat)];
const PORTFOLIO = GALLERIES.flatMap((g) => g.photos.map((file) => ({ src: `${g.folder}/${file}`, cat: g.cat })));

function PortfolioScreen() {
  const [filter, setFilter] = React.useState('All');
  const shown = PORTFOLIO.filter((p) => filter === 'All' || p.cat === filter);
  const { isMobile, isTablet } = window.useViewport();
  const cols = isMobile ? 1 : isTablet ? 2 : 3;

  return (
    <div style={{ background: 'var(--surface-page)' }}>
      <section style={{ maxWidth: '1180px', margin: '0 auto', padding: isMobile ? '56px 22px 32px' : '72px 48px 40px' }}>
        <Eyebrow tone="accent" style={{ marginBottom: '18px' }}>The Work</Eyebrow>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? '42px' : isTablet ? '54px' : '66px', lineHeight: 0.98, color: 'var(--lc-ink)' }}>Worth Remembering</div>
        <p style={{ fontFamily: 'var(--font-editorial)', fontSize: isMobile ? '17px' : '19px', lineHeight: 1.62, color: 'var(--lc-ink-soft)', marginTop: '20px', maxWidth: '560px' }}>
          A few of the days, fields, and faces we've been trusted with. Warm, candid, unhurried — the in-between moments most worth keeping.
        </p>
        <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
          {CATS.map((c) => (
            <span key={c} onClick={() => setFilter(c)} style={{ cursor: 'pointer' }}>
              <Tag variant={filter === c ? 'solid' : 'outline'}>{c}</Tag>
            </span>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: '1180px', margin: '0 auto', padding: isMobile ? '0 22px 56px' : '0 48px 84px' }}>
        <div style={{ columnCount: cols, columnGap: '18px' }}>
          {shown.map((p, i) => {
            // Portraits gets one tall card per 3-column row so the columns stay
            // even; other tabs keep the original every-third-tall rhythm.
            const tall = filter === 'Portraits' ? i % 2 === 0 : i % 3 === 0;
            return (
              <div key={p.src} style={{ breakInside: 'avoid', marginBottom: '18px' }}>
                <PhotoCard src={`../../assets/photos/${p.src}`} caption={p.cat} fig={`Fig. 0${(i % 9) + 1}`} height={tall ? 360 : 260} />
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}

window.PortfolioScreen = PortfolioScreen;