// Full-bleed photo mosaic across both cottages + the farm.
// Uses CSS grid w/ varied row spans for a printed-magazine feel.
const Gallery = () => {
  const photos = [
    // The mosaic blends both cottages + the farm context, with a curated rhythm.
    // Buttercup = barn (assets/countryside/*) · Countryside View = stone (assets/buttercup/*)
    { src: 'assets/countryside/exterior.jpg',     cap: 'Buttercup at first light',          tag: 'buttercup', span: 'big' },
    { src: 'assets/farm/foxgloves.jpg',           cap: 'Foxgloves in the lane',             tag: 'farm',      span: 'tall' },
    { src: 'assets/countryside/livingroom.jpg',   cap: 'The snug, French doors to the hill',tag: 'buttercup', span: 'sq' },
    { src: 'assets/buttercup/livingroom.jpg',     cap: 'Countryside View, William Morris',  tag: 'countryside', span: 'wide' },
    { src: 'assets/countryside/kitchen.jpg',      cap: 'Sage tongue-and-groove',            tag: 'buttercup', span: 'sq' },
    { src: 'assets/buttercup/fireplace.jpg',      cap: 'Wood-burner, lit',                  tag: 'countryside', span: 'big' },
    { src: 'assets/farm/bluebells.jpg',           cap: 'Bluebells in May',                  tag: 'farm',      span: 'sq' },
    { src: 'assets/countryside/bedroom.jpg',      cap: 'Buttercup, master',                 tag: 'buttercup', span: 'tall' },
    { src: 'assets/buttercup/bedroom.jpg',        cap: 'Countryside View, master',          tag: 'countryside', span: 'sq' },
    { src: 'assets/farm/lane-trees.jpg',          cap: 'The lane up',                       tag: 'farm',      span: 'wide' },
    { src: 'assets/buttercup/garden-roses.jpg',   cap: 'Roses in June',                     tag: 'farm',      span: 'sq' },
    { src: 'assets/countryside/dining.jpg',       cap: 'Marble breakfast bar',              tag: 'buttercup', span: 'sq' },
  ];

  const [filter, setFilter] = React.useState('all');
  const [lightbox, setLightbox] = React.useState(null);

  const visible = filter === 'all' ? photos : photos.filter((p) => p.tag === filter);

  // Buttercup is now sage; Countryside View is now terracotta.
  const tagColor = (t) => t === 'buttercup' ? 'var(--sage-deep)' : t === 'countryside' ? 'var(--terracotta-deep)' : 'var(--slate-2)';

  return (
    <section id="gallery" style={{ padding: '120px 56px', background: 'var(--bg-3)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="slf-gallery-toolbar" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Gallery</div>
            <h2 style={{ fontSize: 'var(--fs-h2)', margin: 0 }}>Both cottages, &amp; the farm.</h2>
          </div>
          {/* Filter pills */}
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {[
              { id: 'all',        label: 'Everything' },
              { id: 'buttercup',  label: 'Buttercup' },
              { id: 'countryside',label: 'Countryside View' },
              { id: 'farm',       label: 'The farm' },
            ].map((f) => (
              <button key={f.id} onClick={() => setFilter(f.id)} className="slf-btn" style={{
                padding: '8px 16px', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
                background: filter === f.id ? 'var(--slate)' : 'transparent',
                color: filter === f.id ? 'var(--cream)' : 'var(--fg-2)',
                border: filter === f.id ? '1px solid var(--slate)' : '1px solid var(--border-strong)',
              }}>{f.label}</button>
            ))}
          </div>
        </div>

        <div className="slf-gallery-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gridAutoRows: 220, gap: 12,
        }}>
          {visible.map((p, i) => {
            const span = p.span === 'big'  ? { gridColumn: 'span 2', gridRow: 'span 2' }
                       : p.span === 'wide' ? { gridColumn: 'span 2' }
                       : p.span === 'tall' ? { gridRow: 'span 2' }
                       : {};
            return (
              <figure key={i} className="slf-zoom" style={{
                ...span, position: 'relative', margin: 0,
                borderRadius: 'var(--radius-md)', cursor: 'zoom-in',
              }} onClick={() => setLightbox(p)}>
                <img src={p.src} alt={p.cap} loading="lazy"/>
                <figcaption style={{
                  position: 'absolute', left: 12, bottom: 10, right: 12,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 8,
                  fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                  fontSize: 13, color: 'var(--cream)',
                  textShadow: '0 1px 2px rgba(0,0,0,0.5)',
                  opacity: 0, transition: 'opacity var(--dur-mid) var(--ease-out)',
                  pointerEvents: 'none',
                }} className="slf-cap">
                  <span>{p.cap}</span>
                </figcaption>
                <span style={{
                  position: 'absolute', top: 10, left: 10,
                  fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 700,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--cream)', background: tagColor(p.tag),
                  padding: '4px 10px', borderRadius: 999,
                }}>{p.tag}</span>
              </figure>
            );
          })}
        </div>
      </div>

      <style>{`
        #gallery figure:hover .slf-cap { opacity: 1; }
      `}</style>

      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{
          position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(46,42,38,0.94)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32, cursor: 'zoom-out',
        }}>
          <figure style={{ margin: 0, maxWidth: '92%', maxHeight: '92%' }}>
            <img src={lightbox.src} alt={lightbox.cap} style={{ maxWidth: '100%', maxHeight: '85vh', display: 'block', borderRadius: 4 }}/>
            <figcaption style={{ color: 'var(--cream)', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 16, marginTop: 16, textAlign: 'center' }}>{lightbox.cap}</figcaption>
          </figure>
        </div>
      )}
    </section>
  );
};

window.Gallery = Gallery;