/* Pomona Berries — dedicated Pineberry page. Exports window.PagePineberry. */
(function () {
  const C = window.POMONA.color;

  window.PagePineberry = function PagePineberry({ t, lang, go }) {
    const p = window.PSITE.pages[lang].pine;
    const prod = window.PSITE.products.find((x) => x.key === 'pineberry');
    const { specLabels } = window.PSITE;
    const sv = window.pSpecVal;
    const specOrder = ['present', 'temp', 'origen', 'vida', 'conserv'];

    return (
      <div>


        <section className="p-sec" style={{ paddingTop: 56 }}>
          <div className="p-split" style={{ gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
            <img src={(window.__resources&&window.__resources.pineberry)||'assets/pineberry.jpg'} alt="Pineberry en close-up" style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', objectPosition: 'center', borderRadius: 'var(--img-radius)', display: 'block' }} />
            <div>
              <div className="p-kick">{t.pine.eyebrow}</div>
              <h2 className="p-disp" style={{ fontSize: 40, marginBottom: 20, color: '#E63B55' }}>{t.pine.title}</h2>
              <p style={{ fontSize: 19, lineHeight: 1.6, color: C.inkSoft, margin: 0 }}>{p.intro}</p>
            </div>
          </div>
        </section>

        {/* why it sells */}
        <section className="p-sec tight" style={{ background: C.cream, paddingTop: 56, paddingBottom: 56 }}>
          <h2 className="p-disp" style={{ marginBottom: 40 }}>{p.featuresTitle}</h2>
          <div className="p-pfeat">
            {p.features.map((f, i) => (
              <div className="f" key={i}>
                <div className="ic">{f.ic}</div>
                <h4>{f.t}</h4>
                <p>{f.d}</p>
              </div>
            ))}
          </div>
        </section>

        {/* split + spec card */}
        <section className="p-sec">
          <div className="p-split" style={{ alignItems: 'stretch' }}>
            <div>
              <h2 className="p-disp" style={{ fontSize: 40, marginBottom: 18 }}>{p.splitTitle}</h2>
              <p style={{ fontSize: 19, lineHeight: 1.6, color: C.inkSoft, marginBottom: 28 }}>{p.splitBody}</p>
              <div className="p-prod" style={{ '--bc': C.pineberry, maxWidth: 420 }}>
                <div className="body" style={{ paddingTop: 24 }}>
                  <h3>{prod.name[lang]}</h3>
                  <div className="p-specs" style={{ marginBottom: 0 }}>
                    {specOrder.map((k) => (
                      <div className="row" key={k}>
                        <span className="k">{specLabels[k][lang]}</span>
                        <span className="v">{sv(prod.specs[k], lang)}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
            <img src={(window.__resources&&window.__resources.pinePackaging)||'assets/pine-packaging.jpg'} alt="Empaque Pineberry Pomona" style={{ width: '100%', height: '100%', minHeight: 460, objectFit: 'cover', objectPosition: 'center', borderRadius: 'var(--img-radius)', display: 'block' }} />
          </div>
        </section>

        {/* CTA */}
        <section className="p-cta">
          <h2 className="p-disp">{p.cta}</h2>
          <p>{lang === 'es' ? 'Producción limitada bajo programas especiales. Escríbenos para reservar volumen.' : 'Limited production under special programs. Reach out to reserve volume.'}</p>
          <a className="p-btn wht" onClick={() => go('contact')}>{t.cta.primary} →</a>
        </section>
      </div>
    );
  };
})();