/* Pomona Berries — Importers & Europe page. Exports window.PageImporters. */
(function () {
  const C = window.POMONA.color;

  window.PageImporters = function PageImporters({ t, lang, go }) {
    const s = window.PSITE.pages[lang].importers;
    const certLogos = t.trust.certLogos || [];
    return (
      <div className="imp-page">
        <header className="p-phero imp-hero">
          <div className="p-kick">{s.kick}</div>
          <h1 className="p-disp">{s.title}</h1>
          <p>{s.lead}</p>
          <div className="imp-hero-cta">
            <a className="p-btn" onClick={() => go('contact')}>{s.closeBtn} →</a>
            <window.PWaButton t={t} className="line" />
            <a className="p-btn line" href="assets/catalogo-pomona-en.pdf" target="_blank" rel="noopener noreferrer">{t.cta.catalog}</a>
          </div>
        </header>

        {/* bloques */}
        <section className="p-sec tight">
          <div className="imp-blocks">
            {s.blocks.map((b, i) => (
              <div className="imp-block" key={i}>
                <div className="ic">{b.ic}</div>
                <h3>{b.t}</h3>
                <p>{b.d}</p>
              </div>
            ))}
          </div>
        </section>

        {/* certificaciones */}
        <section className="p-sec tight imp-certs">
          <div className="p-kick">{s.certTitle}</div>
          <h2 className="p-disp">{t.trust.certsLabel}</h2>
          <div className="p-certlogos">
            {certLogos.map((c, i) => (
              <figure key={i}><img src={c.src} alt={c.name} onError={(e) => { e.currentTarget.style.display = 'none'; }} /><figcaption>{c.name}</figcaption></figure>
            ))}
          </div>
          {s.certDetail ? (
            <ul className="p-certdetail">
              {s.certDetail.map((c, i) => <li key={i}><span><strong>{c.k}</strong> · {c.v}</span></li>)}
            </ul>
          ) : null}
        </section>

        {/* mapa de operación */}
        <section className="p-sec tight imp-map">
          <div className="p-kick">{s.mapKick}</div>
          <h2 className="p-disp">{s.mapTitle}</h2>
          <p style={{ fontSize: 17, color: C.inkSoft, maxWidth: 720, lineHeight: 1.6, margin: '12px 0 24px' }}>{s.mapBody}</p>
          <window.POpsMap lang={lang} />
        </section>

        {/* calendario */}
        <section className="p-sec tight imp-cal">
          <div className="p-kick">{t.nav.portfolio}</div>
          <h2 className="p-disp">{s.calTitle}</h2>
          <p style={{ fontSize: 17, color: C.inkSoft, maxWidth: 720, lineHeight: 1.6, margin: '12px 0 28px' }}>{t.cal.sub}</p>
          <window.PSupplyTable lang={lang} />
        </section>

        {/* cierre */}
        <section className="p-cta">
          <h2 className="p-disp">{s.closeTitle}</h2>
          <p>{s.closeBody}</p>
          <div className="imp-hero-cta center">
            <a className="p-btn wht" onClick={() => go('contact')}>{s.closeBtn} →</a>
            <window.PWaButton t={t} className="wht" />
          </div>
          {t.contact.mail3 ? <p className="p-cta-mail"><a href={'mailto:' + t.contact.mail3}>{t.contact.mail3}</a></p> : null}
        </section>
      </div>
    );
  };
})();