// HausWhatWeBuild — installation types, typographic + card layout

const buildItems = [
  { n:'01', title:'Climbing Walls', desc:'Birch ply panels, sculpted holds, real climbing hardware. Sized to your wall, finished to your home — warm timber or tonal paint.' },
  { n:'02', title:'Monkey Bars', desc:'Wall-to-wall or floor-to-ceiling bar runs. Birch uprights, powder-coated steel bars, engineered to take a four-year-old and a fourteen-year-old.' },
  { n:'03', title:'Sensory Swings', desc:'Ceiling-mounted hammock and pod swings. Calming, regulating, and quietly one of the most-used pieces in any room we build.' },
  { n:'04', title:'Balance Beams', desc:'Solid timber, low to the ground, integrated into the floor or movement corner. Sculptural when not in use, magnetic to a toddler.' },
  { n:'05', title:'Rope Climbers', desc:'Natural cotton and jute. Knotted climbs, cargo nets, ladder climbs — warm to the hand, built to last a childhood.' },
  { n:'06', title:'Swedish Ladders', desc:'The Scandinavian classic, rebuilt for the modern home. Vertical timber rungs, generous height, endless ways to use it.' },
  { n:'07', title:'Custom Nets', desc:'Bespoke woven nets for any ceiling pitch or awkward corner. Climb up, hang underneath, build a fort on top.' },
  { n:'08', title:'Gymnastic Rings', desc:'Olympic-grade steel, ceiling-mounted at adjustable heights. Builds grip, shoulders, and confidence from age four onwards.' },
];

const BuildCard = ({ item, visible, delay }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
      style={{
        padding:'28px 24px 24px', borderRadius:20, background: hov ? '#f5ede0' : '#fffaf3',
        border:'1px solid', borderColor: hov ? '#d4c4aa' : '#e8d9c5',
        transition:'background 280ms cubic-bezier(0.25,0.46,0.45,0.94), border-color 280ms cubic-bezier(0.25,0.46,0.45,0.94)', cursor:'default',
        opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(16px)',
        transitionDelay: `${delay}ms`,
      }}>
      <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:10, fontWeight:700, letterSpacing:'0.14em', color:'#c4b49e', marginBottom:14}}>{item.n}</div>
      <div style={{fontFamily:"'Fonphoria',serif", fontWeight:600, fontSize:'clamp(18px,1.6vw,22px)', lineHeight:1.2, color:'#1f1f1f', marginBottom:12}}>{item.title}</div>
      <p style={{fontFamily:"'Montserrat',sans-serif", fontWeight:300, fontSize:14, lineHeight:1.75, color:'#5a5248', margin:0, textWrap:'pretty'}}>{item.desc}</p>
    </div>
  );
};

const HausWhatWeBuild = () => {
  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.1});
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section style={{background:'#eef2ea', padding:'clamp(64px,8vw,120px) clamp(20px,5vw,48px)'}}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        {/* Header row */}
        <div ref={ref} className="build-header" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(24px,5vw,80px)', alignItems:'end', marginBottom:56, flexWrap:'wrap',
          opacity:vis?1:0, transform:vis?'none':'translateY(18px)', transition:'opacity 600ms, transform 600ms cubic-bezier(0.25,0.46,0.45,0.94)'}}>
          <div>
            <div style={{fontFamily:"'Montserrat',sans-serif", fontSize:11, fontWeight:600, letterSpacing:'0.16em', textTransform:'uppercase', color:'#899e7b', marginBottom:12}}>What we build</div>
            <h2 style={{fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:'clamp(28px,3.5vw,46px)', lineHeight:1.05, letterSpacing:'-0.02em', color:'#1f1f1f', textWrap:'pretty', margin:0}}>
              Eight ways to get them off the couch.
            </h2>
          </div>
          <p style={{fontFamily:"'Montserrat',sans-serif", fontWeight:300, fontSize:'clamp(14px,1.2vw,16px)', lineHeight:1.8, color:'#5a5248', margin:0, textWrap:'pretty'}}>
            Every element is custom — sized to your room, finished to your home. Mix and match into a wall, a corner, or a full movement zone.
          </p>
        </div>

        {/* Cards grid */}
        <div className="build-grid" style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}}>
          {buildItems.map((item, i) => (
            <BuildCard key={item.n} item={item} visible={vis} delay={i * 50} />
          ))}
        </div>
      </div>

      <style>{`
        @media(max-width:900px){.build-grid{grid-template-columns:repeat(2,1fr)!important;}}
        @media(max-width:480px){.build-grid{grid-template-columns:1fr!important;}}
        .build-grid p, .build-grid p a { color: #5a5248 !important; text-decoration: none; }
        @media(max-width:680px){.build-header{grid-template-columns:1fr!important;}}
      `}</style>
    </section>
  );
};
Object.assign(window, { HausWhatWeBuild, BuildCard });