---
import type { ServicesIntroSection } from '../../types/home-sections';
interface Props { section: ServicesIntroSection }
const { section } = Astro.props;
---
<style>
  .services-grid { display: grid; gap: clamp(2rem, 6vw, 5rem); }
  .feature-grid--intro { grid-template-columns: .75fr 1.25fr; }
  .feature-grid--reverse { grid-template-columns: 1.25fr .75fr; }
  .gear-photo { justify-self: center; max-width: 270px; }
  .gear-photo-right { outline-color: #dce0e5; }
  .two-column-list { columns: 2; }
  @media (max-width: 760px) {
    .services-grid { gap: 2rem; }
    .services-grid .feature-grid { grid-template-columns: 1fr; }
    .feature-grid > .gear-photo-right { grid-row: 3; }
    .two-column-list { columns: 1; }
  }
</style>

<section class="section services-intro">
  <div class="container services-grid">
    <div class="feature-grid feature-grid--intro">
      <img class="gear-photo" src={`/assets/images/${section.servicesImage}`} alt={section.servicesImageAlt} />
      <div>
        <h2>{section.servicesHeading}</h2>
        <ul class="source-list">{section.services.map((item) => <li>{item}</li>)}</ul>
      </div>
    </div>
    <div class="feature-grid feature-grid--intro feature-grid--reverse">
      <div>
        <h2 class="no-balance">{section.commitmentsHeading}</h2>
        <ul class="source-list two-column-list">{section.commitments.map((item) => <li>{item}</li>)}</ul>
        <a class="button" href={section.commitmentsCta.href}>{section.commitmentsCta.label}</a>
      </div>
      <img class="gear-photo gear-photo-right" src={`/assets/images/${section.commitmentsImage}`} alt={section.commitmentsImageAlt} />
    </div>
  </div>
</section>