/* eslint-disable */
// About / Over ons screen, institutional intro to CBM, pillar grid, contact info.
// No "Featured editorial" section here.

const AboutScreen = ({ setRoute }) => {
  const t = (window.useT && window.useT()) || ((k) => k);
  React.useEffect(() => {
    if (window.lucide && window.lucide.createIcons) window.lucide.createIcons();
    window.scrollTo({top: 0, behavior: 'instant'});
  }, []);

  return (
    <div data-screen-label="About">
      <section className="cbm-section cbm-section--dark" style={{paddingTop: 80, paddingBottom: 56}}>
        <div className="cbm-section__inner" style={{maxWidth: 820}}>
          <span className="cbm-eyebrow">{t('about_eyebrow')}</span>
          <div className="cbm-section-rule" />
          <h1 className="cbm-section__title">{t('about_title')}</h1>
          <p className="cbm-section__lede" style={{marginTop: 16}}>{t('about_lede')}</p>
        </div>
      </section>

      <PillarRow />

      <section className="cbm-section" id="contact">
        <div className="cbm-section__inner" style={{display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56}}>
          <div>
            <span className="cbm-eyebrow">{t('about_contact_eyebrow')}</span>
            <div className="cbm-section-rule" />
            <h2 className="cbm-section__title">{t('about_contact_title')}</h2>
            <p className="cbm-section__lede" style={{marginTop: 14}}>{t('about_contact_lede')}</p>
          </div>
          <div className="cbm-contact-card">
            <h3>{t('about_contact_visit')}</h3>
            <p>Chuchubiweg 17<br />Willemstad, Curaçao</p>
            <h3>{t('about_contact_email')}</h3>
            <p><a href="mailto:info@cbm.cw">info@cbm.cw</a></p>
            <h3>{t('about_contact_phone')}</h3>
            <p><a href="tel:+59998440057">+599 9 844 0057</a></p>
          </div>
        </div>
      </section>

      <NewsletterCTA />
    </div>
  );
};

Object.assign(window, { AboutScreen });