/* The Snowberry website — The Home gallery (real photography of 4318 W Crawford) */
function Gallery() {
  const { SectionHeading } = window.TheSnowberryDesignSystem_ed783b;
  const Photo = ({ src, label, style }) => (
    <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', minHeight: 240, ...style }}>
      <img src={src} alt={label} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', minHeight: 240 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 55%, rgba(36,58,32,0.55) 100%)' }} />
      <span style={{ position: 'absolute', left: 18, bottom: 15, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#fff', textShadow: '0 1px 6px rgba(0,0,0,.4)' }}>{label}</span>
    </div>
  );
  return (
    <section id="home" style={{ background: 'var(--parchment)', padding: '112px 40px' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHeading eyebrowNumber="Two" eyebrow="The Home" title="A small home with room for twelve." lead="Twelve private bedrooms, one shared table, and the kind of common rooms you’d actually want to sit in." rule={false} />
        <div className="sb-gallery-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gridAutoRows: '240px', gap: 18, marginTop: 48 }}>
          <Photo src="assets/images/living-room.jpg" label="The Living Room" style={{ gridColumn: '1 / 2', gridRow: '1 / 3' }} />
          <Photo src="assets/images/dining-room.jpg" label="The Dining Room" style={{ gridColumn: '2 / 4' }} />
          <Photo src="assets/images/kitchen.jpg" label="The Kitchen" />
          <Photo src="assets/images/bedroom.jpg" label="A Resident Room" />
          <Photo src="assets/images/sitting-room.jpg" label="The Sitting Room" />
          <Photo src="assets/images/backyard.jpg" label="The Backyard" style={{ gridColumn: '2 / 4' }} />
        </div>
      </div>
    </section>
  );
}
window.Gallery = Gallery;