/* ============ FACILITIES — animated icon grid ============ */
function Facilities() {
  const S = window.SITE;
  return (
    <section className="section bg-alt facilities">
      <div className="container">
        <div className="section-head" style={{ marginInline: "auto", textAlign: "center" }}>
          <Eyebrow>Everything you need</Eyebrow>
          <Reveal as="h2" className="display">Sorted, so you can just <em className="muted-em">wander.</em></Reveal>
        </div>
        <div className="fac-grid">
          {S.facilities.map((f, i) => (
            <Reveal key={f.name} className="fac" delay={(i % 5) * 70}>
              <span className="fac-ic"><Icon name={f.icon} /></span>
              <span className="fac-name">{f.name}</span>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .facilities .section-head { display: flex; flex-direction: column; align-items: center; }
        .fac-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
        .fac {
          background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
          padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
          transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
        }
        .fac:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
        .fac-ic {
          width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
          font-size: 19px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent);
          transition: transform .35s var(--ease), box-shadow .35s;
        }
        .fac:hover .fac-ic { transform: scale(1.12) rotate(-6deg); }
        html[data-theme="dark"] .fac:hover .fac-ic { box-shadow: 0 0 26px -4px var(--glow); }
        .fac-name { font-size: 14px; font-weight: 500; color: var(--text); }
        @media (max-width: 880px) { .fac-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 480px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Facilities });