// site-core.jsx, B+ shared chrome + About + Services landing
function BTopbar() {
  // Top bar hidden for now — re-enable by returning the markup below.
  return null;
  /* return (
    <div className="bx-topbar">
      <span>New York · Tri-State · Destination</span>
      <span>Inquiries, hello@samsetevents.com</span>
    </div>
  ); */
}

function BXHero({ crumbs, eyebrow, h1, intro, tight, children }) {
  return (
    <section className={'bx-pagehero' + (tight ? ' tight' : '')}>
      <div className="wash"></div>
      {crumbs ? <p className="crumbs">{crumbs[0]}, <b>{crumbs[1]}</b></p> : null}
      {eyebrow ? <p className="eyebrow" style={{ position: 'relative' }}>{eyebrow}</p> : null}
      <h1 className="display">{h1}</h1>
      {intro ? <p className="lede">{intro}</p> : null}
      {children}
    </section>
  );
}

function BXProcess({ center }) {
  return (
    <section className="db-sec" style={{ paddingTop: 20 }}>
      <div className="db-sechead center">
        <p className="eyebrow">How We Work</p>
        <h2 className="display">A calm, considered process.</h2>
      </div>
      <div className="db-proc-grid">
        {SS_COPY.process.map((p) => (
          <div className="step" key={p.n}>
            <div className="bub">{p.n}</div>
            <h4>{p.t}</h4>
            <p>{p.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function BAbout() {
  const a = SSX.about;
  return (
    <div className="db bx" data-screen-label="About">
      <BTopbar />
      <BNav active="About" />
      <BXHero eyebrow="Our Story" h1={a.h1} />

      <section className="db-sec bx-fstory" style={{ paddingTop: 30 }}>
        <div className="db-story-img">
          <span className="accent" style={{ right: -38, top: -30, bottom: 'auto' }}></span>
          <PH label="samia tayar, portrait, studio" tone="blush" arch={true} h={540} style={{ position: 'relative', zIndex: 1 }} />
        </div>
        <div>
          <p className="eyebrow">Founded on a Simple Belief</p>
          <h2 className="display" style={{ fontSize: 42, lineHeight: 1.18 }}>Considered, warm, effortless, like the people at its heart.</h2>
          <p className="lede">{a.story1}</p>
          <p className="lede" style={{ marginTop: 18 }}>{a.story2}</p>        </div>
      </section>

      <hr className="bx-divider" />

      <section className="db-sec">
        <div className="db-sechead center">
          <p className="eyebrow">What We Believe</p>
          <h2 className="display">Values we plan by.</h2>
        </div>
        <div className="bx-values">
          {a.values.map((v, i) => (
            <div className="v" key={i}>              <h4>{v.t}</h4>
              <p>{v.b}</p>
            </div>
          ))}
        </div>
      </section>

      <BXProcess />

      <section className="db-trust" style={{ paddingBottom: 90 }}>
        <p>Trusted by couples, families &amp; companies across New York</p>
        <div className="logos">{SS_COPY.venues.map((v, i) => <span key={i}>{v}</span>)}</div>
      </section>

      <BCta
        title="Let’s plan something beautiful."
        body="Tell us about your celebration, we’ll be in touch within two business days."
        cta="Start Planning"
      />
      <BFooter />
    </div>
  );
}

function BServicesLanding() {
  const s = SSX.servicesLanding;
  const cardWash = ['w-blush', 'w-line', 'w-sage', 'w-line', 'w-blush', 'w-line'];
  return (
    <div className="db bx" data-screen-label="Services">
      <BTopbar />
      <BNav active="Services" />
      <BXHero eyebrow="Our Services" h1={s.h1} intro={s.intro} />

      <section className="db-sec" style={{ paddingTop: 10 }}>
        <div className="db-svc-grid">
          {SS_COPY.services.map((sv, i) => (
            <a className={'db-svc-card ' + cardWash[i]} href="#" key={sv.n}>              <h4>{sv.name}</h4>
              <p>{sv.blurb}</p>
              <span className="go">Explore →</span>
            </a>
          ))}
        </div>
      </section>

      <hr className="bx-divider" />
      <BXProcess />

      <BCta
        title="Not sure where to start?"
        body="Tell us what you’re celebrating, we’ll recommend the right level of support in one relaxed conversation."
        cta="Book a Consultation"
      />
      <BFooter />
    </div>
  );
}

Object.assign(window, { BTopbar, BXHero, BXProcess, BAbout, BServicesLanding });