/* ===== Rooms — Hilom & Sibol (the clinic's two named therapy rooms) ===== */
function Rooms() {
  const rooms = [
    ['./assets/program-hilom.png', './assets/clinic-room-1.jpg', 'var(--hs-mint-soft)', '“to soothe, to heal.”', 'A calm, private room for settling in, slowing down, and gently mending.'].map((v,i)=>i<2?window.asset(v):v),
    ['./assets/program-sibol.png', './assets/clinic-room-2.jpg', 'var(--hs-sprout-soft)', '“to sprout, to grow.”', 'A bright, private room for reflection, building skills, and growing forward.'].map((v,i)=>i<2?window.asset(v):v),
  ];
  return (
    <Section id="rooms" style={{ padding: '64px 0' }}>
      <div style={{ textAlign: 'center', maxWidth: 580, margin: '0 auto 40px' }}>
        <Eyebrow>Our rooms</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3vw,40px)', color: 'var(--hs-teal)', margin: '12px 0 10px' }}>Two rooms, named with intention</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--hs-ink-2)', margin: 0 }}>Each consultation room carries a Filipino name for the work that happens within.</p>
      </div>
      <div className="hs-prog-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {rooms.map((p, i) => (
          <div key={i} style={{ background: p[2], borderRadius: 'var(--r-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
            <div style={{ position: 'relative', height: 188 }}>
              <img src={p[1]} alt={`${i === 0 ? 'Hilom' : 'Sibol'} therapy room at HealSpace Psychological Clinic, Lipa City`} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', left: 18, bottom: 18, background: 'rgba(255,255,255,.94)', borderRadius: 'var(--r-md)', padding: '10px 16px', boxShadow: 'var(--shadow-sm)' }}>
                <img src={p[0]} alt="room sign" style={{ height: 34, width: 'auto', display: 'block' }} />
              </div>
            </div>
            <div style={{ padding: '24px 30px 30px' }}>
              <div style={{ fontFamily: 'var(--font-script)', fontSize: 24, color: 'var(--hs-teal)', marginBottom: 8 }}>{p[3]}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--hs-ink-2)', margin: 0 }}>{p[4]}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}
Object.assign(window, { Rooms });