// ─────────────────────────────────────────────────────────────
//  SITE BLOCKS — reusable page sections.
//  All blocks accept overrides so each page can adapt them.
// ─────────────────────────────────────────────────────────────

// ── TRUSTED BY · companies marquee ─────────────────────────
function HLTrustedBy({
  heading = 'trusted by',
  kicker = 'companies & teams who picked the playce',
  bg = HL.bone,
  companies = window.PLAYCE_COMPANIES,
  speed = 60,
}) {
  return (
    <section className="hl-section" style={{ background: bg, padding: '64px 0', borderTop: HL.border(3), borderBottom: HL.border(3) }}>
      <div className="hl-container" style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px', marginBottom: 28 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <h3 style={{ fontFamily: HL.display, fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0, textTransform: 'lowercase', letterSpacing: '-0.02em', color: HL.ink }}>
            {heading}
          </h3>
          <span style={{ fontFamily: HL.body, fontSize: 13, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: HL.ink70 }}>
            ★ {kicker}
          </span>
        </div>
      </div>

      {/* Logo strip */}
      <div style={{ overflow: 'hidden', whiteSpace: 'nowrap', borderTop: HL.border(3), borderBottom: HL.border(3), background: HL.ink, position: 'relative' }}>
        <div style={{ display: 'inline-block', animation: `hl-marq ${speed}s linear infinite`, paddingRight: 0 }}>
          {[...companies, ...companies, ...companies].map((c, i) => (
            <span key={i} style={{
              display: 'inline-flex', alignItems: 'center', gap: 16,
              padding: '24px 36px', borderRight: HL.border(2, 'rgba(242,239,231,0.25)'),
              fontFamily: HL.display, fontSize: 24, color: HL.bone,
              letterSpacing: '-0.01em', textTransform: 'lowercase',
            }}>
              <span style={{ display: 'inline-block', width: 12, height: 12, background: i % 3 === 0 ? HL.lemon : (i % 3 === 1 ? HL.red : HL.cobalt), border: HL.border(2, HL.bone) }}/>
              {c.name}
              {!c.real && <span style={{ fontFamily: HL.mono, fontSize: 13, color: HL.lemon, marginLeft: 4 }}>[placeholder]</span>}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── AMENITY GRID · icon + label cards ──────────────────────
function HLAmenityGrid({
  num = '04',
  kicker = 'amenities · why playce',
  title,
  blurb,
  items = window.PLAYCE_AMENITIES,
  bg = HL.boneDk,
}) {
  return (
    <HLSection bg={bg} pad="96px 0">
      <HLSectionHeader
        num={num} kicker={kicker}
        title={title || <>everything <span style={{ background: HL.lemon, padding: '0 6px', display: 'inline-block', transform: 'rotate(-1deg)' }}>handled.</span></>}
        blurb={blurb || 'A workspace should add to your day, not subtract from it. We handle the boring parts so you can show up and just work.'}
      />
      <div className="hl-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {items.map((it, i) => (
          <div key={i} className="hl-card-hover" style={{
            background: HL.bone, border: HL.border(3), boxShadow: HL.shadow(5, HL.ink),
            padding: '22px 18px', display: 'flex', alignItems: 'center', gap: 16, minHeight: 102,
          }}>
            <div style={{ width: 54, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.HDIcon name={it.icon} size={54}/>
            </div>
            <div style={{ fontFamily: HL.display, fontSize: 17, textTransform: 'lowercase', letterSpacing: '-0.01em', color: HL.ink, lineHeight: 1.1 }}>
              {it.label.toLowerCase()}
            </div>
          </div>
        ))}
      </div>
    </HLSection>
  );
}

// ── TESTIMONIALS · 3 cards (video + text) ──────────────────
function HLTestimonialsBlock({
  num = '05',
  kicker = 'hear from our members',
  title,
  blurb,
  items = window.PLAYCE_TESTIMONIALS,
  bg = HL.boneDk,
}) {
  return (
    <HLSection id="testimonials" bg={bg} pad="96px 0">
      <HLSectionHeader
        num={num} kicker={kicker}
        title={title || <>real <span style={{ color: HL.red }}>playcers.</span><br/>real talk.</>}
        blurb={blurb || 'Video and written testimonials from members across both locations. (Pulling names and quotes from final interviews — placeholders shown here.)'}
      />
      <div className="hl-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {items.map((t, i) => {
          const color = t.color || (i === 0 ? HL.lemon : i === 1 ? HL.red : HL.bone);
          const ink = t.ink || (i === 1 ? HL.bone : HL.ink);
          return (
            <div key={i} style={{
              background: color, color: ink,
              border: HL.border(3), boxShadow: HL.shadow(7, HL.ink),
              display: 'flex', flexDirection: 'column', position: 'relative',
              transform: i === 1 ? 'rotate(-0.5deg)' : 'rotate(0.5deg)',
            }}>
              {t.kind === 'video' ? (
                <div style={{ position: 'relative', borderBottom: HL.border(3) }}>
                  <HLPhoto src={PLAYCE_IMG[t.thumbKey] || PLAYCE_IMG.aesthetic1} ratio="4/3" frame={false} />
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(10,10,10,0.25)' }}>
                    <div style={{ width: 86, height: 86, background: HL.red, border: HL.border(4), boxShadow: HL.shadow(5, HL.ink), display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(-2deg)' }}>
                      <svg width="30" height="30" viewBox="0 0 30 30"><polygon points="6,3 26,15 6,27" fill={HL.bone} /></svg>
                    </div>
                  </div>
                  <div style={{ position: 'absolute', top: 12, right: 12 }}>
                    <HLSticker color={HL.lemon} rotate={6} size={11} padding="4px 8px">▶ VIDEO</HLSticker>
                  </div>
                </div>
              ) : (
                <div style={{ padding: '28px 26px 0', fontFamily: HL.display, fontSize: 100, lineHeight: 0.6, color: ink, opacity: 0.95 }}>“</div>
              )}
              <div style={{ padding: '24px 26px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <blockquote style={{ fontFamily: HL.display, fontSize: 20, lineHeight: 1.2, margin: 0, textTransform: 'lowercase', letterSpacing: '-0.01em' }}>
                  "{t.quote}"
                </blockquote>
                <div style={{ marginTop: 'auto', paddingTop: 24, display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 44, height: 44, background: HL.ink, color: HL.lemon, border: HL.border(2), fontFamily: HL.display, fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>★</div>
                  <div>
                    <div style={{ fontFamily: HL.display, fontSize: 16, textTransform: 'lowercase' }}>{t.name}</div>
                    <div style={{ fontFamily: HL.body, fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', opacity: 0.8 }}>{t.role}</div>
                  </div>
                </div>
              </div>
              <div style={{ position: 'absolute', top: -16, left: 14, zIndex: 2 }}>
                <HLSticker color={i === 0 ? HL.cobalt : (i === 1 ? HL.lemon : HL.red)} ink={(i === 1) ? HL.ink : HL.bone} rotate={-8} size={11}>★ ★ ★ ★ ★</HLSticker>
              </div>
            </div>
          );
        })}
      </div>
    </HLSection>
  );
}

// ── LOCATIONS · cards block ────────────────────────────────
function HLLocationsBlock({
  num = '06',
  kicker = 'our locations',
  title,
  blurb,
  bg = HL.bone,
  showHelper = true,
}) {
  const spots = window.PLAYCE_LOCATIONS;
  return (
    <HLSection id="locations" bg={bg} pad="96px 0">
      <HLSectionHeader
        num={num} kicker={kicker}
        title={title || <>two playces.<br/>one <span style={{ color: HL.red }}>pin code.</span></>}
        blurb={blurb || "Both inside Marathon's towers on LBS Marg, both a minute from Mulund station. Take your pick — or use both."}
      />
      <div className="hl-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {spots.map((s, i) => {
          const accent = HL[s.accentKey];
          const imgKey = s.slug === 'marathon-maxima' ? 'aesthetic2' : 'skyline1';
          return (
            <a key={i} href={s.href} className="hl-card-hover" style={{ background: HL.bone, border: HL.border(3), boxShadow: HL.shadow(8, HL.ink), display: 'flex', flexDirection: 'column', textDecoration: 'none', color: HL.ink }}>
              <div style={{ position: 'relative', borderBottom: HL.border(3) }}>
                <HLPhoto src={PLAYCE_IMG[imgKey]} ratio="16/10" frame={false} />
                <div style={{ position: 'absolute', top: 16, left: 16, background: HL.ink, color: HL.bone, padding: '8px 14px', fontFamily: HL.display, fontSize: 13, letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: 10 }}>
                  <HLPin size={16} fill={accent} insetFill={HL.ink} />
                  LOCATION 0{i + 1}
                </div>
                <div style={{ position: 'absolute', bottom: -18, right: 16, zIndex: 2 }}>
                  <HLSticker color={accent} ink={accent === HL.lemon || accent === HL.cobalt ? HL.ink : HL.bone} rotate={i ? 4 : -4} size={12}>{s.kicker}</HLSticker>
                </div>
              </div>
              <div style={{ padding: '32px 28px 28px' }}>
                <h3 style={{ fontFamily: HL.display, fontSize: 'clamp(32px, 3.5vw, 48px)', color: HL.ink, margin: 0, lineHeight: 0.95, textTransform: 'lowercase', letterSpacing: '-0.02em' }}>{s.name.toLowerCase()}.</h3>
                <p style={{ fontFamily: HL.body, fontSize: 15.5, lineHeight: 1.6, color: HL.ink70, marginTop: 14, fontWeight: 500 }}>{s.body}</p>
                <div style={{ marginTop: 20, fontFamily: HL.display, fontSize: 12, color: HL.ink, letterSpacing: '0.1em' }}>AVAILABLE HERE</div>
                <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {s.types.map((t, j) => (
                    <span key={j} style={{ fontFamily: HL.body, fontWeight: 700, fontSize: 12, padding: '6px 12px', background: HL.bone, border: HL.border(2), letterSpacing: '0.04em', textTransform: 'uppercase', color: HL.ink }}>{t}</span>
                  ))}
                </div>
                <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <HLButton kind="primary" size="md" shadow={accent}>Explore this location →</HLButton>
                  <HLButton kind="bone" size="md" shadow={HL.ink}>Get directions</HLButton>
                </div>
              </div>
            </a>
          );
        })}
      </div>
      {showHelper && (
        <div style={{ marginTop: 28, background: HL.lemon, border: HL.border(3), padding: '18px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, boxShadow: HL.shadow(6, HL.ink), flexWrap: 'wrap' }}>
          <div style={{ fontFamily: HL.display, fontSize: 'clamp(18px, 2vw, 24px)', color: HL.ink, textTransform: 'lowercase', letterSpacing: '-0.01em' }}>
            not sure which location is right for you? talk to us.
          </div>
          <HLButton as="a" href="https://wa.me/919619139133" kind="primary" size="md" shadow={HL.red}>WhatsApp us →</HLButton>
        </div>
      )}
    </HLSection>
  );
}

// ── FAQ ACCORDION ──────────────────────────────────────────
function HLFaqsBlock({
  num = '09',
  kicker = 'faqs',
  title,
  blurb,
  items = window.PLAYCE_FAQS_DEFAULT,
  bg = HL.bone,
}) {
  return (
    <HLSection id="faqs" bg={bg} pad="96px 0">
      <div className="hl-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <div style={{ background: HL.ink, color: HL.lemon, fontFamily: HL.display, fontSize: 14, padding: '5px 10px', letterSpacing: '0.08em' }}>§ {num}</div>
            <div style={{ fontFamily: HL.body, fontWeight: 700, fontSize: 12, letterSpacing: '0.2em', color: HL.ink, textTransform: 'uppercase' }}>{kicker}</div>
          </div>
          <h2 className="hl-h2" style={{ fontFamily: HL.display, fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 0.9, color: HL.ink, letterSpacing: '-0.025em', margin: 0, textTransform: 'lowercase' }}>
            {title || <>stuff people<br/><span style={{ color: HL.red }}>actually ask.</span></>}
          </h2>
          <p style={{ fontFamily: HL.body, fontSize: 16, lineHeight: 1.6, color: HL.ink70, marginTop: 18, fontWeight: 500 }}>
            {blurb || 'Real questions from real members. If yours isn\'t here, hit us on WhatsApp — we reply faster than the internet.'}
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <HLButton as="a" href="https://wa.me/919619139133" kind="red" size="md" shadow={HL.ink}>WhatsApp →</HLButton>
            <HLButton as="a" href="contact.html" kind="bone" size="md" shadow={HL.cobalt}>Email us</HLButton>
          </div>
        </div>
        <div style={{ background: HL.ink, border: HL.border(4), boxShadow: HL.shadow(10, HL.red) }}>
          {items.map((f, i) => (
            <details key={i} className="hl-accordion" style={{ borderBottom: i < items.length - 1 ? HL.border(2, HL.bone) : 'none' }}>
              <summary style={{ padding: '22px 26px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <span style={{ fontFamily: HL.mono, fontSize: 18, color: HL.lemon }}>{(i + 1).toString().padStart(2, '0')}</span>
                  <span style={{ fontFamily: HL.display, fontSize: 'clamp(17px, 2vw, 22px)', color: HL.bone, textTransform: 'lowercase', letterSpacing: '-0.01em', lineHeight: 1.2 }}>{f.q.toLowerCase()}</span>
                </div>
                <span className="hl-chev" style={{ fontFamily: HL.display, fontSize: 26, color: HL.lemon, lineHeight: 1, flexShrink: 0 }}>+</span>
              </summary>
              <div className="hl-faq-answer" style={{ padding: '0 26px 24px 60px', fontFamily: HL.body, fontSize: 15.5, lineHeight: 1.65, color: 'rgba(242,239,231,0.85)', fontWeight: 500 }}>
                {f.a}
              </div>
            </details>
          ))}
        </div>
      </div>
    </HLSection>
  );
}

// ── CTA BLOCK · big centered call-to-action ────────────────
function HLCTABlock({
  bg = HL.red,
  ink = HL.bone,
  kicker = 'NO COMMITMENT · FREE TOUR',
  title,
  blurb,
  primary = 'Book a Tour →',
  primaryHref = 'contact.html',
  secondary = 'Talk on WhatsApp',
  secondaryHref = 'https://wa.me/919619139133',
}) {
  return (
    <section style={{ background: bg, color: ink, padding: '96px 24px', borderTop: HL.border(4), borderBottom: HL.border(4), position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
      <div style={{ position: 'absolute', top: 20, left: 20, opacity: 0.18 }}>
        <HLHalftone size={180} color={ink} dotSize={4} gap={12}/>
      </div>
      <div style={{ position: 'absolute', bottom: 20, right: 20, opacity: 0.18, transform: 'rotate(20deg)' }}>
        <HLHalftone size={180} color={ink} dotSize={4} gap={12}/>
      </div>
      <div style={{ position: 'relative', maxWidth: 920, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginBottom: 26 }}>
          <HLSticker color={HL.lemon} rotate={-4} size={13}>★ {kicker.split(' · ')[0] || kicker}</HLSticker>
          {kicker.includes('·') && <HLSticker color={HL.bone} rotate={3} size={13}>{kicker.split(' · ')[1]}</HLSticker>}
        </div>
        <h2 className="hl-h2" style={{ fontFamily: HL.display, fontSize: 'clamp(44px, 6vw, 88px)', lineHeight: 0.9, color: ink, letterSpacing: '-0.03em', margin: 0, textTransform: 'lowercase' }}>
          {title || <>schedule a tour of our <span style={{ background: HL.lemon, color: HL.ink, padding: '0 10px', display: 'inline-block', transform: 'rotate(-1deg)' }}>coworking space</span> in mulund.</>}
        </h2>
        {blurb && (
          <p style={{ fontFamily: HL.body, fontSize: 18, lineHeight: 1.55, color: ink, opacity: 0.85, marginTop: 22, maxWidth: 620, marginInline: 'auto', fontWeight: 500 }}>{blurb}</p>
        )}
        <div className="hl-flex-mobile-wrap" style={{ marginTop: 32, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <HLButton as="a" href={primaryHref} kind="lemon" size="lg" shadow={HL.ink}>{primary}</HLButton>
          <HLButton as="a" href={secondaryHref} kind="primary" size="lg" shadow={HL.lemon}>{secondary}</HLButton>
        </div>
      </div>
    </section>
  );
}

// ── AUDIENCE TAGS · sticker wall ───────────────────────────
function HLAudienceTags({
  num = '04',
  kicker = 'who is this for',
  title,
  blurb,
  bg = HL.cobalt,
  ink = HL.ink,
  items = window.PLAYCE_AUDIENCES,
}) {
  const onCobalt = bg === HL.cobalt;
  return (
    <HLSection id="community" bg={bg} pad="96px 0" style={{ color: ink }}>
      <div style={{ position: 'absolute', top: 40, right: 60, opacity: 0.25 }}>
        <HLHalftone size={180} color={onCobalt ? HL.ink : HL.lemon} dotSize={4} gap={12} />
      </div>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
          <div style={{ background: HL.lemon, color: HL.ink, fontFamily: HL.display, fontSize: 14, padding: '5px 10px', letterSpacing: '0.08em' }}>§ {num}</div>
          <div style={{ fontFamily: HL.body, fontWeight: 700, fontSize: 12, letterSpacing: '0.2em', color: ink, textTransform: 'uppercase' }}>{kicker}</div>
        </div>
        <h2 className="hl-h2" style={{ fontFamily: HL.display, fontSize: 'clamp(40px, 6vw, 84px)', lineHeight: 0.92, color: ink, letterSpacing: '-0.025em', margin: 0, textTransform: 'lowercase', maxWidth: 920 }}>
          {title || <>if you work for a living, this is <span style={{ color: HL.lemon }}>your playce.</span></>}
        </h2>
        {blurb && (
          <p style={{ fontFamily: HL.body, fontSize: 17, lineHeight: 1.55, color: ink, opacity: 0.85, marginTop: 22, maxWidth: 640, fontWeight: 500 }}>{blurb}</p>
        )}
        <div style={{ marginTop: 44, display: 'flex', flexWrap: 'wrap', gap: 16 }}>
          {items.map((p, i) => {
            const rotate = (i % 5) - 2;
            const palette = [
              { color: HL.lemon, ink: HL.ink },
              { color: HL.bone, ink: HL.ink },
              { color: HL.red, ink: HL.bone },
              { color: HL.lemon, ink: HL.ink },
              { color: HL.bone, ink: HL.ink },
            ];
            const sw = palette[i % palette.length];
            return (
              <div key={i} style={{
                background: sw.color, color: sw.ink,
                fontFamily: HL.display, fontSize: 'clamp(18px, 2vw, 26px)',
                padding: '12px 22px',
                border: HL.border(3),
                boxShadow: HL.shadow(5, HL.ink),
                transform: `rotate(${rotate}deg)`,
                textTransform: 'lowercase', letterSpacing: '-0.01em',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span style={{ fontSize: 18 }}>{p.icon}</span>
                {p.label.toLowerCase()}
              </div>
            );
          })}
        </div>
      </div>
    </HLSection>
  );
}

// ── COMPARISON TABLE ───────────────────────────────────────
function HLComparisonTable({
  num = '07',
  kicker = "what's best for you",
  title,
  columns,        // [{ label, accent }]
  rows,           // [{ label, values: ['a', 'b', 'c'] }]
  ctas,           // ['Choose →', 'Choose →', 'Choose →']
  bg = HL.bone,
}) {
  return (
    <HLSection bg={bg} pad="96px 0">
      <HLSectionHeader num={num} kicker={kicker} title={title || <>which one's <span style={{ color: HL.red }}>your fit?</span></>}/>
      <div style={{ overflowX: 'auto' }}>
        <table style={{
          width: '100%', minWidth: 720,
          borderCollapse: 'collapse',
          background: HL.bone, border: HL.border(4),
          boxShadow: HL.shadow(8, HL.ink),
          fontFamily: HL.body,
        }}>
          <thead>
            <tr>
              <th style={{ background: HL.ink, color: HL.lemon, padding: '20px 18px', textAlign: 'left', fontFamily: HL.display, fontSize: 14, letterSpacing: '0.1em', borderRight: HL.border(2, HL.bone) }}>—</th>
              {columns.map((c, i) => (
                <th key={i} style={{
                  background: c.accent || HL.ink, color: c.accent === HL.lemon || c.accent === HL.cobalt ? HL.ink : HL.lemon,
                  padding: '20px 18px', textAlign: 'left', fontFamily: HL.display, fontSize: 16, letterSpacing: '0.06em',
                  borderRight: i < columns.length - 1 ? HL.border(2, HL.bone) : 'none', textTransform: 'lowercase',
                }}>{c.label.toLowerCase()}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} style={{ borderTop: HL.border(2) }}>
                <td style={{ padding: '18px 18px', fontFamily: HL.display, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: HL.ink, borderRight: HL.border(2), background: HL.boneDk }}>{r.label}</td>
                {r.values.map((v, j) => (
                  <td key={j} style={{ padding: '18px 18px', fontFamily: HL.body, fontSize: 15, fontWeight: 600, color: HL.ink, borderRight: j < r.values.length - 1 ? HL.border(2) : 'none', verticalAlign: 'top' }}>{v}</td>
                ))}
              </tr>
            ))}
            {ctas && (
              <tr style={{ borderTop: HL.border(2) }}>
                <td style={{ padding: '20px 18px', background: HL.boneDk, borderRight: HL.border(2) }}/>
                {ctas.map((cta, j) => (
                  <td key={j} style={{ padding: '20px 18px', borderRight: j < ctas.length - 1 ? HL.border(2) : 'none' }}>
                    <HLButton as="a" href="contact.html" kind="primary" size="sm" shadow={columns[j].accent || HL.red}>{cta}</HLButton>
                  </td>
                ))}
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </HLSection>
  );
}

// ── GALLERY GRID — asymmetric masonry preview ──────────────
function HLGalleryGrid({
  num = '08',
  kicker = 'gallery preview',
  title,
  tiles, // [{ imgKey, label, span: { col, row } }]
  bg = HL.bone,
  showCTA = true,
}) {
  const defaultTiles = [
    { imgKey: 'desk2',     label: 'COWORKING AREA',    span: { col: 'span 2', row: 'span 2' } },
    { imgKey: 'cabin1',    label: 'PRIVATE CABINS',    span: { col: 'span 1', row: 'span 1' } },
    { imgKey: 'meeting1',  label: 'MEETING ROOMS',     span: { col: 'span 1', row: 'span 1' } },
    { imgKey: 'aesthetic1',label: 'EVENT SPACES',      span: { col: 'span 2', row: 'span 1' } },
    { imgKey: 'lounge2',   label: 'COMMON AREAS',      span: { col: 'span 1', row: 'span 1' } },
    { imgKey: 'cafe3',     label: 'EATING SPACE',      span: { col: 'span 1', row: 'span 1' } },
    { imgKey: 'gym2',      label: 'RECREATIONAL AREA', span: { col: 'span 2', row: 'span 1' } },
  ];
  const useTiles = tiles || defaultTiles;
  return (
    <HLSection id="gallery" bg={bg} pad="96px 0">
      <div className="hl-stack-mobile" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 20 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <div style={{ background: HL.ink, color: HL.lemon, fontFamily: HL.display, fontSize: 14, padding: '5px 10px', letterSpacing: '0.08em' }}>§ {num}</div>
            <div style={{ fontFamily: HL.body, fontWeight: 700, fontSize: 12, letterSpacing: '0.2em', color: HL.ink, textTransform: 'uppercase' }}>{kicker}</div>
          </div>
          <h2 className="hl-h2" style={{ fontFamily: HL.display, fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 0.92, color: HL.ink, letterSpacing: '-0.025em', margin: 0, textTransform: 'lowercase', maxWidth: 720 }}>
            {title || <>seven rooms.<br/><span style={{ color: HL.red }}>one address.</span></>}
          </h2>
        </div>
        {showCTA && <HLButton as="a" href="gallery.html" kind="primary" size="md" shadow={HL.red}>View full gallery →</HLButton>}
      </div>
      <div className="hl-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridAutoRows: '220px', gap: 14 }}>
        {useTiles.map((t, i) => (
          <div key={i} style={{ gridColumn: t.span.col, gridRow: t.span.row, position: 'relative', border: HL.border(3), boxShadow: HL.shadow(5, HL.ink), overflow: 'hidden' }} className="hl-card-hover">
            <img src={PLAYCE_IMG[t.imgKey]} alt={t.label} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'linear-gradient(180deg, transparent, rgba(10,10,10,0.85))', padding: '40px 16px 14px' }}>
              <div style={{ fontFamily: HL.display, fontSize: 16, color: HL.lemon, letterSpacing: '0.1em' }}>★ {t.label}</div>
            </div>
          </div>
        ))}
      </div>
    </HLSection>
  );
}

// ── PAGE HERO — reusable hero for non-home pages ───────────
function HLPageHero({
  kicker = '', label,
  title, blurb,
  stickers = [],
  primary = 'Book a Tour →', primaryHref = 'contact.html',
  secondary, secondaryHref,
  imgKey, imgRatio = '4/5', imgShadow = HL.red,
  pad = '72px 0 88px',
  bg = HL.bone,
  trustPoints = [],
}) {
  return (
    <section className="hl-section" style={{ background: bg, padding: pad, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 40, right: 60, opacity: 0.15, transform: 'rotate(20deg)' }}>
        <HLHalftone size={180} color={HL.ink} dotSize={4} gap={12}/>
      </div>
      <div className="hl-container hl-hero-grid" style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px', display: 'grid', gridTemplateColumns: imgKey ? '1.2fr 1fr' : '1fr', gap: 56, alignItems: 'center' }}>
        <div style={{ position: 'relative', zIndex: 2 }}>
          {(kicker || label) && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
              {label && <div style={{ background: HL.ink, color: HL.lemon, fontFamily: HL.display, fontSize: 14, padding: '5px 10px', letterSpacing: '0.08em' }}>{label}</div>}
              {kicker && <div style={{ fontFamily: HL.body, fontWeight: 700, fontSize: 12, letterSpacing: '0.2em', color: HL.ink, textTransform: 'uppercase' }}>{kicker}</div>}
            </div>
          )}
          {stickers.length > 0 && (
            <div style={{ display: 'flex', gap: 10, marginBottom: 24, flexWrap: 'wrap' }}>
              {stickers.map((s, i) => <HLSticker key={i} color={s.color || HL.lemon} ink={s.ink || HL.ink} rotate={s.rotate ?? (i % 2 ? 3 : -3)} size={13}>{s.text}</HLSticker>)}
            </div>
          )}
          <h1 className="hl-h1" style={{ fontFamily: HL.display, fontSize: 'clamp(48px, 6.5vw, 96px)', lineHeight: 0.9, color: HL.ink, letterSpacing: '-0.03em', margin: 0, textTransform: 'lowercase' }}>
            {title}
          </h1>
          {blurb && (
            <p style={{ fontFamily: HL.body, fontSize: 18, lineHeight: 1.55, color: HL.ink, fontWeight: 500, maxWidth: 560, marginTop: 24 }}>{blurb}</p>
          )}
          <div className="hl-flex-mobile-wrap" style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
            <HLButton as="a" href={primaryHref} kind="primary" size="lg" shadow={HL.red}>{primary}</HLButton>
            {secondary && <HLButton as="a" href={secondaryHref || '#'} kind="bone" size="lg" shadow={HL.cobalt}>{secondary}</HLButton>}
          </div>
          {trustPoints.length > 0 && (
            <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, maxWidth: 520 }}>
              {trustPoints.map((t, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, background: HL.bone, border: HL.border(2), padding: '10px 14px' }}>
                  <div style={{ width: 14, height: 14, background: HL.red, border: HL.border(2), flexShrink: 0 }} />
                  <span style={{ fontFamily: HL.display, fontSize: 13, color: HL.ink, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{t}</span>
                </div>
              ))}
            </div>
          )}
        </div>
        {imgKey && (
          <div style={{ position: 'relative' }}>
            <div style={{ transform: 'rotate(-2deg)' }}>
              <HLPhoto src={PLAYCE_IMG[imgKey]} ratio={imgRatio} shadow={imgShadow}/>
            </div>
            <div style={{ position: 'absolute', top: -16, left: -16, zIndex: 3 }}>
              <HLSticker color={HL.lemon} rotate={-8} size={13}>★ MULUND</HLSticker>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ── SIMPLE FEATURE BLOCK — image+text side-by-side ─────────
function HLFeature({
  side = 'right',  // image side
  bg = HL.bone, ink = HL.ink,
  num, kicker, title, body, points = [],
  imgKey, imgRatio = '4/5', imgShadow = HL.red, imgBadge,
  primary, primaryHref = 'contact.html',
  secondary, secondaryHref,
  pad = '96px 0',
}) {
  const imgFirst = side === 'left';
  const Img = imgKey ? (
    <div style={{ position: 'relative' }}>
      <div style={{ transform: side === 'left' ? 'rotate(-1.5deg)' : 'rotate(1.5deg)' }}>
        <HLPhoto src={PLAYCE_IMG[imgKey]} ratio={imgRatio} shadow={imgShadow} badge={imgBadge}/>
      </div>
    </div>
  ) : null;
  const Txt = (
    <div>
      {(num || kicker) && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
          {num && <div style={{ background: HL.ink, color: HL.lemon, fontFamily: HL.display, fontSize: 14, padding: '5px 10px', letterSpacing: '0.08em' }}>§ {num}</div>}
          {kicker && <div style={{ fontFamily: HL.body, fontWeight: 700, fontSize: 12, letterSpacing: '0.2em', color: ink, textTransform: 'uppercase' }}>{kicker}</div>}
        </div>
      )}
      <h2 className="hl-h2" style={{ fontFamily: HL.display, fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 0.92, color: ink, letterSpacing: '-0.025em', margin: 0, textTransform: 'lowercase' }}>{title}</h2>
      {body && <p style={{ fontFamily: HL.body, fontSize: 17, lineHeight: 1.6, color: ink, opacity: 0.78, marginTop: 22, fontWeight: 500 }}>{body}</p>}
      {points.length > 0 && (
        <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'grid', gap: 8 }}>
          {points.map((p, i) => (
            <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontFamily: HL.body, fontSize: 15.5, fontWeight: 600, color: ink, lineHeight: 1.5 }}>
              <span style={{ display: 'inline-block', width: 12, height: 12, background: HL.red, border: HL.border(2), marginTop: 6, flexShrink: 0 }}/>
              {p}
            </li>
          ))}
        </ul>
      )}
      {(primary || secondary) && (
        <div className="hl-flex-mobile-wrap" style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {primary && <HLButton as="a" href={primaryHref} kind="primary" size="md" shadow={HL.red}>{primary}</HLButton>}
          {secondary && <HLButton as="a" href={secondaryHref || '#'} kind="bone" size="md" shadow={HL.cobalt}>{secondary}</HLButton>}
        </div>
      )}
    </div>
  );
  return (
    <HLSection bg={bg} pad={pad} style={{ color: ink }}>
      <div className="hl-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        {imgFirst ? <>{Img}{Txt}</> : <>{Txt}{Img}</>}
      </div>
    </HLSection>
  );
}

Object.assign(window, { HLPageHero, HLFeature });