/* Pomona Berries — Nosotros / About page. Exports window.PageAbout. */
(function () {
  const { useState } = React;
  const C = window.POMONA.color;

  // Tarjeta de valor expandible (patrón de las product cards)
  function ValueCard({ v, lang }) {
    const [open, setOpen] = useState(false);
    const showLabel = lang === 'es' ? 'Ver más' : 'Learn more';
    const hideLabel = lang === 'es' ? 'Ocultar' : 'Hide';
    const hasMore = v.long || (v.ksp && v.ksp.length);
    return (
      <div className={'f p-valcard' + (open ? ' open' : '')}>
        <div className="ic">{v.ic}</div>
        <h4>{v.t}</h4>
        <p>{v.d}</p>
        {hasMore ? (
          <>
            <button className={'p-prod-toggle' + (open ? ' open' : '')} onClick={() => setOpen(!open)} aria-expanded={open}>
              <span>{open ? hideLabel : showLabel}</span>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 5l3.5 3.5L10 5" /></svg>
            </button>
            <div className={'p-more' + (open ? ' open' : '')}>
              <div className="p-more-inner">
                {v.long ? <p className="desc" style={{ fontSize: 15, color: C.inkSoft, lineHeight: 1.6, margin: '14px 0 12px' }}>{v.long}</p> : null}
                {v.ksp && v.ksp.length ? <div className="p-ksps">{v.ksp.map((k, i) => <span key={i}>{k}</span>)}</div> : null}
              </div>
            </div>
          </>
        ) : null}
      </div>
    );
  }

  window.PageAbout = function PageAbout({ t, lang, go }) {
    const s = window.PSITE.pages[lang];
    const a = s.about;
    return (
      <div className="about-page">
        <header className="p-phero about-hero">
          <div className="ah-inner">
            <div className="p-kick">{t.nav.about}</div>
            <h1 className="p-disp" dangerouslySetInnerHTML={{ __html: s.aboutHero.title.replace(/(confianza|trust)/i, '<em>$1</em>') }} />
            <p>{s.aboutHero.sub}</p>
          </div>
        </header>

        {/* story split */}
        <section className="p-sec">
          <div className="p-split">
            <div>
              <div className="p-kick">{a.story.eyebrow}</div>
              <h2 className="p-disp" style={{ fontSize: 40, marginBottom: 20 }}>{a.story.title}</h2>
              {a.story.body.map((p, i) => (
                <p key={i} style={{ fontSize: 18, lineHeight: 1.65, color: C.inkSoft, margin: '0 0 18px' }}>{p}</p>
              ))}
            </div>
            <div className="pic photo p-about-photo"><img src={(window.__resources&&window.__resources.campoEquipo)||'assets/campo-equipo.jpg'} alt="Equipo Pomona inspeccionando el cultivo de fresa" style={{ objectPosition: 'center 30%' }} /></div>
          </div>
        </section>

        {/* naming — por qué Pomona */}
        {a.naming ? (
          <section className="p-sec tight p-naming">
            <div className="p-naming-inner">
              <div className="p-naming-mark" aria-hidden="true">🏛️</div>
              <div className="p-kick">{a.naming.eyebrow}</div>
              <h2 className="p-disp" style={{ fontSize: 36, margin: '6px auto 18px', textAlign: 'center', maxWidth: 'none' }}>{a.naming.title}</h2>
              <p style={{ fontSize: 18.5, lineHeight: 1.7, color: C.inkSoft, maxWidth: 760, margin: '0 auto' }}>{a.naming.body}</p>
            </div>
          </section>
        ) : null}

        {/* values */}
        <section className="p-sec tight" style={{ background: C.cream }}>
          <h2 className="p-disp" style={{ marginBottom: a.valuesHint ? 8 : 40 }}>{a.valuesTitle}</h2>
          {a.valuesHint ? <p className="p-kick" style={{ marginBottom: 34 }}>{a.valuesHint}</p> : null}
          <div className="p-pfeat">
            {a.values.map((v, i) => <ValueCard key={i} v={v} lang={lang} />)}
          </div>
        </section>

        {/* process timeline */}
        <section className="p-sec">
          <h2 className="p-disp" style={{ marginBottom: 48 }}>{a.processTitle}</h2>
          <div className="p-grid5" style={{ gridTemplateColumns: 'repeat(3,1fr)', gap: 40 }}>
            {a.process.map((p, i) => (
              <div key={i} style={{ borderTop: '2px solid ' + C.ink, paddingTop: 22 }}>
                <div className="p-disp" style={{ fontSize: 28, color: C.red, marginBottom: 12 }}>{p.n}</div>
                <h4 className="p-disp" style={{ fontSize: 26, margin: '0 0 10px' }}>{p.t}</h4>
                <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.55, margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </section>

        {/* trust stats */}
        <section className="p-trust" style={{ background: C.cream }}>
          <div>
            <div className="p-kick">{t.trust.eyebrow}</div>
            <h2 className="p-disp">{t.trust.title}</h2>
            <p style={{ marginBottom: 18 }}>{t.trust.certsLabel}.</p>
            {t.trust.certLogos ? (
              <div className="p-certlogos">
                {t.trust.certLogos.map((c, i) => (
                  <figure className="p-certlogo" key={i}>
                    <img src={c.src} alt={c.name} onError={(e) => { e.currentTarget.style.display = 'none'; }} />
                    <figcaption>{c.name}</figcaption>
                  </figure>
                ))}
              </div>
            ) : (
              <div className="p-certs" style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: 'auto auto', gridAutoFlow: 'column', gap: '20px 48px', maxWidth: 560 }}>{t.trust.certs.map((c, i) => <span key={i}>{c}</span>)}</div>
            )}
          </div>
          <div className="p-statg">
            {t.trust.stats.map((st, i) => {
              const cols = [C.red, C.blue, C.magenta, C.green];
              return <div className="p-st" key={i}><div className="n" style={{ color: cols[i] }}>{st.n}</div><div className="l">{st.l}</div></div>;
            })}
          </div>
        </section>

        {/* brands */}
        <section style={{ textAlign: 'center', padding: '48px 0', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div className="p-kick" style={{ textAlign: 'center' }}>{a.brandsTitle}</div>
          <div className="p-brands">
            <img src={(window.__resources&&window.__resources.logo)||'assets/pomona-logo.png'} alt="Pomona Berries" className="brand-pomona" />
            <span className="brand-div" aria-hidden="true"></span>
            <img src={(window.__resources&&window.__resources.auraLogo)||'assets/aura-logo.png'} alt="Aura by Pomona" className="brand-aura" />
          </div>
        </section>

        {/* CTA */}
        <section className="p-cta">
          <h2 className="p-disp">{t.buyers.title}</h2>
          <p>{t.buyers.body}</p>
          <a className="p-btn wht" onClick={() => go('contact')}>{t.cta.buyers} →</a>
        </section>
      </div>
    );
  };
})();