/* Sweep Geophysical — Services page */
const { Button: SvB, Eyebrow: SvE, SectionHeading: SvH, ZoomImage: SvZoom, Badge: SvBadge } = window.SweepGeophysicalDesignSystem_5187bc;

function PageHero({ eyebrow, title, children }) {
  return (
    <section className="phero">
      <div className="phero__bg" />
      <div className="phero__contours"><img src="./assets/contours.svg" alt="" /></div>
      <div className="wrap wrap--wide phero__inner">
        <SvE>{eyebrow}</SvE>
        <h1>{title}</h1>
        <p>{children}</p>
      </div>
    </section>
  );
}

function ServicesPage({ navigate }) {
  const I = window.Icons;
  return (
    <React.Fragment>
      <PageHero eyebrow="Our Services" title="Professional geophysical services">
        Non-invasive subsurface intelligence across radar, electromagnetic, seismic and electrical methods — scoped to the exact question your project needs answered.
      </PageHero>
      <section className="section">
        <div className="wrap wrap--wide">
          {window.SERVICES.map((s, i) => {
            const Ic = I[s.icon];
            const rev = i % 2 === 1;
            return (
              <div className={'altrow' + (rev ? ' altrow--rev' : '')} key={s.id}>
                <div className="altrow__copy">
                  <SvBadge variant={rev ? 'blue' : 'accent'}>{('0' + (i + 1)).slice(-2)} · Method</SvBadge>
                  <h3>{s.title}</h3>
                  <p>{s.short}</p>
                  <ul className="benefits">
                    {s.benefits.map((b) => (
                      <li key={b}><span className="bi"><I.check size={14} /></span>{b}</li>
                    ))}
                  </ul>
                  <div>
                    <SvB variant="primary" iconRight={<I.arrowRight size={18} />} onClick={() => navigate('contact')}>Request this survey</SvB>
                  </div>
                </div>
                <SvZoom className="altrow__media" src={s.img} alt={s.title} caption={s.title + ' · field survey'} />
              </div>
            );
          })}
        </div>
      </section>
      <section className="section section--alt">
        <div className="wrap wrap--wide">
          <div className="ctaband">
            <div className="ctaband__contours"><img src="./assets/contours.svg" alt="" /></div>
            <div className="ctaband__inner">
              <h2>Not sure which method fits your site?</h2>
              <p>Send us the question you need answered. We'll recommend the right combination of methods and a clear scope.</p>
              <div className="ctaband__btns">
                <SvB className="btn-onorange" size="lg" iconRight={<I.arrowRight size={20} />} onClick={() => navigate('contact')}>Talk to a geophysicist</SvB>
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.ServicesPage = ServicesPage;
window.PageHero = PageHero;