/* Pomona Berries — Productos page (grouped: Core / Diferenciados / Transformados). Exports window.PageProducts. */
(function () {
  const { useState, useEffect } = React;
  const C = window.POMONA.color;
  const sv = window.pSpecVal;
  const SPEC_ORDER = ['present', 'peso', 'temp', 'origen', 'vida', 'conserv'];

  // ---- Single product card with collapsible details ----
  function ProdCard({ p, lang, cats, specLabels }) {
    const [open, setOpen] = useState(false);
    const ph = (window.POMONA.photos || {})[p.key];
    const showLabel = lang === 'es' ? 'Ver detalles' : 'View details';
    const hideLabel = lang === 'es' ? 'Ocultar detalles' : 'Hide details';
    return (
      <article className="p-prod" style={{ '--bc': p.color }}>
        {ph ? (
          <div className="pic photo"><img src={ph.src} alt={p.name[lang]} style={{ objectPosition: ph.pos, transform: `scale(${ph.zoom || 1})` }} /></div>
        ) : (
          <image-slot id={`prod-${p.key}`} className="pic" placeholder={p.name[lang]} fit={p.imgFit || 'cover'} style={{ width: '100%', height: '200px', background: p.imgFit === 'contain' ? 'var(--cream)' : '' }}></image-slot>
        )}
        <div className="body">
          <div className="pcat">{cats[p.cat][lang]}</div>
          <h3>{p.name[lang]}</h3>
          <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' : '')} style={{ maxHeight: open ? '700px' : '0px' }}>
            <div className="p-more-inner">
              <p className="desc">{p.desc[lang]}</p>
              <div className="p-specs">
                {SPEC_ORDER.filter((k) => p.specs[k]).map((k) => (
                  <div className="row" key={k}>
                    <span className="k">{specLabels[k][lang]}</span>
                    <span className="v">{sv(p.specs[k], lang)}</span>
                  </div>
                ))}
              </div>
              <div className="p-ksps">{p.ksp[lang].map((k, i) => <span key={i}>{k}</span>)}</div>
            </div>
          </div>
        </div>
      </article>
    );
  }

  function TransfCard({ tp, lang }) {
    const [open, setOpen] = useState(false);
    const ph = (window.POMONA.photos || {})[tp.key];
    const showLabel = lang === 'es' ? 'Ver detalles' : 'View details';
    const hideLabel = lang === 'es' ? 'Ocultar detalles' : 'Hide details';
    return (
      <article className="p-prod transf" style={{ '--bc': tp.color, position: 'relative' }}>
        {tp.coming && (
          <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 10, background: '#1a1a1a', color: '#fff', fontWeight: 700, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '5px 12px', borderRadius: 4, pointerEvents: 'none' }}>
            {lang === 'es' ? 'Próximamente' : 'Coming soon'}
          </div>
        )}
        {ph ? (
          <div className="pic photo"><img src={ph.src} alt={tp.name[lang]} style={{ objectPosition: ph.pos, transform: `scale(${ph.zoom || 1})` }} /></div>
        ) : (
          <image-slot id={`transf-${tp.key}`} className="pic" placeholder={tp.name[lang]} fit={tp.imgFit || 'cover'} style={{ width: '100%', height: '200px', background: tp.imgFit === 'contain' ? 'var(--cream)' : '' }}></image-slot>
        )}
        <div className="body">
          <div className="pcat">{tp.line[lang]}</div>
          <h3>{tp.name[lang]}</h3>
          <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' : '')} style={{ maxHeight: open ? '700px' : '0px' }}>
            <div className="p-more-inner">
              <p className="desc">{tp.desc[lang]}</p>
              <div className="p-ksps"><span style={{ background: tp.color }}>{sv(tp.detail, lang)}</span></div>
            </div>
          </div>
        </div>
      </article>
    );
  }

  window.PageProducts = function PageProducts({ t, lang, go, pgroup }) {
    const { products, transformados, cats, groups, specLabels, pages } = window.PSITE;
    const s = pages[lang];
    const groupOrder = ['core', 'dif', 'transf'];

    const [active, setActive] = useState(pgroup && pgroup !== 'all' ? pgroup : 'all');
    useEffect(() => { setActive(pgroup && pgroup !== 'all' ? pgroup : 'all'); }, [pgroup]);

    const L = lang === 'es';

    function GroupBlock(gk) {
      const g = groups[gk];
      return (
        <div className="p-cat" key={gk}>
          <div className="p-cat-head">
            <h2 className="p-disp">{g[lang]}</h2>
            <span className="count">{g.sub[lang]}</span>
          </div>
          {gk === 'transf' ? (
            <div className="p-prods">{transformados.map((tp) => <TransfCard key={tp.key} tp={tp} lang={lang} />)}</div>
          ) : (
            <div className="p-prods">{products.filter((p) => g.cats.includes(p.cat)).map((p) => (
              <ProdCard key={p.key} p={p} lang={lang} cats={cats} specLabels={specLabels} />
            ))}</div>
          )}
        </div>
      );
    }

    const shown = active === 'all' ? groupOrder : [active];

    return (
      <div>
        <header className="p-phero" style={{ paddingTop: 56, paddingBottom: 32 }}>
          <h1 className="p-disp" style={{ color: '#677896' }}>{s.productsHero.title}</h1>
        </header>

        {/* filter pills */}
        <div className="p-filter">
          <button className={active === 'all' ? 'on' : ''} onClick={() => go('products')}>{L ? 'Todos' : 'All'}</button>
          {groupOrder.map((gk) => (
            <button key={gk} className={active === gk ? 'on' : ''} onClick={() => go('products', gk)}>{groups[gk][lang]}</button>
          ))}
        </div>

        <section className="p-sec" style={{ paddingTop: 30 }}>
          {shown.map(GroupBlock)}
        </section>

        <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>
    );
  };
})();