// HausSpaces — portfolio gallery, id="work"

const galleryImages = [
  { src: '/assets/modular/4.jpg',  alt: 'Custom indoor climbing wall installation' },
  { src: '/assets/modular/1.jpeg', alt: 'Custom climbing wall with sensory swing, pink room' },
  { src: '/assets/modular/2.jpeg', alt: 'Full-wall climbing installation with painted panel and rope' },
  { src: '/assets/modular/3.jpeg', alt: 'Mountain-themed climbing wall with cargo rope' },
];

const HausSpaces = () => {
  const ref = React.useRef();
  const [vis, setVis] = React.useState(false);

  React.useEffect(() => {
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } },
      { threshold: 0.08 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const fadeUp = (delay = 0) => ({
    opacity: vis ? 1 : 0,
    transform: vis ? 'none' : 'translateY(20px)',
    transition: `opacity 700ms ${delay}ms ease, transform 700ms ${delay}ms ease`,
  });

  return (
    <section id="work" style={{ background: '#f5ede0', padding: 'clamp(64px,8vw,120px) clamp(20px,5vw,48px)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>

        {/* Header */}
        <div ref={ref} className="spaces-header" style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 40, flexWrap: 'wrap', gap: 16, ...fadeUp(0),
        }}>
          <div>
            <div style={{ fontFamily: "'Railey',cursive", fontWeight: 400, fontSize: 22, color: '#899e7b', marginBottom: 10, letterSpacing: '0.01em' }}>
              Spaces
            </div>
            <h2 style={{ fontFamily: "'Fonphoria',serif", fontWeight: 700, fontSize: 'clamp(28px,3.5vw,46px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: '#1f1f1f', maxWidth: 480, textWrap: 'pretty', margin: 0 }}>
              No two are the same. That's the point.
            </h2>
          </div>
          <p style={{ fontFamily: "'Montserrat',sans-serif", fontWeight: 300, fontSize: 'clamp(14px,1.2vw,16px)', lineHeight: 1.8, color: '#5a5248', maxWidth: 360, margin: 0, textWrap: 'pretty' }}>
            We don't sell off the shelf. Every Haus & Play install is drawn around your room — your wall, your ceiling height, your finishes, your kids — and built from scratch in our workshop.
          </p>
        </div>

        {/* Editorial image layout — featured full-width on top, three below */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, ...fadeUp(120) }}>

          {/* Featured image — full width, natural proportions (no crop) */}
          <div style={{ borderRadius: 20, overflow: 'hidden', background: '#e8dac8' }}>
            <img
              src={galleryImages[0].src} alt={galleryImages[0].alt}
              style={{ width: '100%', height: 'auto', display: 'block' }}
            />
          </div>

          {/* Three smaller images */}
          <div className="gallery-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            {[1, 2, 3].map((i, idx) => (
              <div key={i} style={{
                borderRadius: 20, overflow: 'hidden', background: ['#e0d4c0','#d8cebb','#cfc8b8'][idx],
                aspectRatio: '4/3',
                ...fadeUp(180 + idx * 60),
              }}>
                <img src={galleryImages[i].src} alt={galleryImages[i].alt}
                  width="400" height="300" loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }} />
              </div>
            ))}
          </div>
        </div>

        {/* Caption row */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginTop: 20, flexWrap: 'wrap', gap: 12, ...fadeUp(380),
        }}>
          <p style={{ fontFamily: "'Montserrat',sans-serif", fontWeight: 300, fontSize: 12, color: '#9a9088', margin: 0, letterSpacing: '0.02em' }}>
            Each space, designed for one family.
          </p>
          <button
            onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
            style={{
              fontFamily: "'Montserrat',sans-serif", fontSize: 12, fontWeight: 600,
              letterSpacing: '0.05em',
              background: '#5a7a4a', color: '#fff',
              border: 'none', borderRadius: 9999,
              padding: '11px 28px', cursor: 'pointer', transition: 'background 220ms',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = '#496840'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#5a7a4a'; }}
          >
            Start your project
          </button>
        </div>

      </div>

      <style>{`
        @media(max-width:600px) {
          .gallery-row { grid-template-columns: 1fr !important; }
        }
        @media(max-width:680px) {
          .spaces-header { flex-direction: column !important; align-items: flex-start !important; }
          .spaces-header p { max-width: none !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { HausSpaces });