---
import { aboutSections, contactInfo, memberInfo } from '../data/about';

interface Props {
  showMaps?: boolean;
}

const { showMaps = true } = Astro.props;
---

<section class="section" id="apropos">
  <h2>Qui sommes-nous ?</h2>
  <div class="columns is-centered">
    <div class="column is-three-quarters-desktop is-full-tablet">
      <div class="columns is-centered">
        {
          aboutSections.map((section) => (
            <div class="column is-one-third-tablet is-full-mobile">
              <img class="is-quarter" src={section.icon} alt={section.title} />
              <h3>{section.title}</h3>
              <p>{section.description}</p>
            </div>
          ))
        }
      </div>

      <div class="columns is-centered">
        {showMaps && (
          <div class="column is-half-tablet is-hidden-mobile sub-section-contact">
            <h3>Contactez-nous</h3>
            <iframe
              width="500"
              height="600"
              src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJB5eDqmAayUwR9kVcpBmnMrc&key=AIzaSyDa73RDd5rn0c6jqn8nAXKh01L8NfrQGQM"
              allowfullscreen></iframe>
            <address>
              {contactInfo.address}
              <br />
              {contactInfo.room}
              <br />
              <a href={`mailto:${contactInfo.email}`}>{contactInfo.email}</a>
              <br />
            </address>
          </div>
        )}

        <div class="column is-half-tablet is-full-mobile sub-section-members">
          <h3>Membres</h3>
          {memberInfo.split('\n\n').map((paragraph) => <p>{paragraph}</p>)}
        </div>
      </div>
    </div>
  </div>
</section>
