// site-services.jsx, B+ service page template + the five non-wedding services
function BServicePage({ data }) {
  const realGallery = (typeof window !== 'undefined' && window.SS_GALLERY) ? SS_GALLERY[data.id] : null;
  return (
    <div className="db bx" data-screen-label={data.name}>
      <BTopbar />
      <BNav active="Services" />

      <section className="bx-pagehero tight">
        <div className="wash"></div>
        <p className="crumbs">Home, Services, <b>{data.name}</b></p>
        <h1 className="display">{data.name}</h1>
        <p className="tagline" style={{ font: '400 italic 24px/1.5 var(--serif-b)', color: 'var(--rose)', margin: '20px 0 0', position: 'relative' }}>{data.tagline}</p>
        <div style={{ maxWidth: 880, margin: '56px auto 0', position: 'relative' }}>
          <PH label={data.heroPh.label} tone={data.heroPh.tone} arch={true} h={430} />
        </div>
      </section>

      <section className="db-sec db-wintro">
        <p className="eyebrow">The Service</p>
        <p className="lede">{data.intro}</p>
      </section>

      <section className="db-sec" style={{ paddingTop: 0 }}>
        <div className="db-sechead center">
          <p className="eyebrow">What’s Included</p>
          <h2 className="display">Everything, considered.</h2>
        </div>
        <div className="db-incl-grid" style={{ maxWidth: 980, margin: '56px auto 0' }}>
          {data.includes.map((item, i) => (
            <div className="item" key={i}><span className="dot"></span>{item}</div>
          ))}
        </div>      </section>

      <hr className="bx-divider" />

      <section className="db-sec" style={{ paddingTop: 80 }}>
        <div className="db-sechead center">
          <p className="eyebrow">Gallery</p>
          <h2 className="display">Recent celebrations.</h2>
        </div>
        {realGallery ? (
          <div className="bx-masonry" style={{ marginTop: 56 }}>
            {realGallery.map((g, i) => (
              <figure key={i}>
                <img src={g.src} alt={g.alt} loading="lazy" style={{ width: '100%', height: 'auto', display: 'block', borderRadius: 24 }} />
              </figure>
            ))}
          </div>
        ) : (
          <div className="db-gallery" style={{ marginTop: 56 }}>
            {data.gallery.map((g, i) => (
              <PH key={i} label={g.label} tone={g.tone} h={300} r={24} />
            ))}
          </div>
        )}
        <p style={{ textAlign: 'center', marginTop: 48 }}><a className="btn ghost" href="#">View Full Portfolio</a></p>
      </section>

      <BCta
        title={data.tagline}
        body="Tell us about the occasion, date, guest count, or just the feeling you’re after. We’ll take it from there."
        cta={data.cta}
      />
      <BFooter />
    </div>
  );
}

function BEngagement() { return <BServicePage data={SSX.servicePages[0]} />; }
function BCorporate() { return <BServicePage data={SSX.servicePages[1]} />; }
function BBabyShowers() { return <BServicePage data={SSX.servicePages[2]} />; }
function BReceptions() { return <BServicePage data={SSX.servicePages[3]} />; }
function BBirthdays() { return <BServicePage data={SSX.servicePages[4]} />; }

Object.assign(window, { BServicePage, BEngagement, BCorporate, BBabyShowers, BReceptions, BBirthdays });