/* Pomona Berries — Seasonality calendar modal. Exports window.PCalendar. */
(function () {
  const { useEffect } = React;
  const C = window.POMONA.color;

  window.PCalendar = function PCalendar({ lang, onClose }) {
    const t = window.POMONA.t[lang];
    const cal = t.cal;
    const months = window.POMONA.months[lang];
    const berries = window.POMONA.berries;

    useEffect(() => {
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      document.addEventListener('keydown', onKey);
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
    }, [onClose]);

    const curMonth = new Date().getMonth();

    return (
      <div className="p-cal-backdrop" onClick={onClose}>
        <div className="p-cal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
          <button className="p-cal-x" onClick={onClose} aria-label="Cerrar">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 5l10 10M15 5L5 15" /></svg>
          </button>

          <div className="p-cal-head">
            <div className="p-kick">📅 {t.nav.portfolio}</div>
            <h2 className="p-disp">{cal.title}</h2>
            <p>{cal.sub}</p>
          </div>

          <div className="p-cal-legend">
            <span><i className="sw peak" /> {cal.peak}</span>
            <span><i className="sw season" /> {cal.season}</span>
            <span><i className="sw lim" /> {cal.limited}</span>
            {cal.export ? <span><i className="sw exp" /> {cal.export}</span> : null}
          </div>

          <div className="p-cal-grid">
            {/* header row */}
            <div className="p-cal-row head">
              <div className="p-cal-name" />
              {months.map((m, i) => (
                <div className={'p-cal-mh' + (i === curMonth ? ' now' : '')} key={i}>{m}</div>
              ))}
            </div>
            {berries.map((b) => (
              <div className="p-cal-row" key={b.key} style={{ '--bc': b.color }}>
                <div className="p-cal-name">
                  <span className="dot" style={{ background: b.color }} />
                  <span>{b[lang]}{b.limited ? <em className="lim-tag"> · {cal.limited}</em> : null}</span>
                </div>
                {months.map((m, i) => {
                  const inS = b.season.includes(i);
                  const isPeak = b.peak && b.peak.includes(i);
                  let cls = 'p-cal-cell';
                  if (inS) cls += b.limited ? ' lim' : (isPeak ? ' peak' : ' season');
                  if (i === curMonth) cls += ' nowcol';
                  return <div className={cls} key={i} style={inS ? { '--bc': b.color } : null} />;
                })}
              </div>
            ))}
            {/* Exportación: disponibilidad todo el año */}
            {cal.exportRow ? (
              <div className="p-cal-row p-cal-export" style={{ '--bc': '#C9A227' }}>
                <div className="p-cal-name">
                  <span className="dot" style={{ background: '#C9A227' }} />
                  <span>{cal.exportRow}</span>
                </div>
                {months.map((m, i) => (
                  <div className={'p-cal-cell peak' + (i === curMonth ? ' nowcol' : '')} key={i} style={{ '--bc': '#C9A227' }} />
                ))}
              </div>
            ) : null}
          </div>

          <p className="p-cal-note">{cal.note}</p>
        </div>
      </div>
    );
  };
})();