/* Pomona Berries — Home page (Direction C). Exports window.PageHome. */
(function () {
  const C = window.POMONA.color;
  const berries = window.POMONA.berries;

  window.PageHome = function PageHome({ t, lang, go, onCalendar }) {
    return (
      <div>
        {/* hero */}
        <header className="p-hero">
          <img className="p-hero-photo" src={(window.__resources&&window.__resources.heroFresa)||'assets/hero-fresa.jpg'} alt="Fresa premium en el campo" />
          <div className="scrim" />
          <div className="inner">
            <div className="eyebrow">{t.hero.eyebrow}</div>
            <h1 className="p-disp">{t.hero.title}</h1>
            <p>{t.hero.sub}</p>
            <div className="cta">
              <a className="p-btn" onClick={onCalendar}>
                <svg width="17" height="17" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><rect x="2.5" y="3.5" width="13" height="12" rx="2"/><path d="M2.5 7h13M6 2v3M12 2v3"/></svg>
                {t.cal.btn}
              </a>
              <a className="p-btn line light" onClick={() => go('products')}>{t.cta.secondary}</a>
            </div>
          </div>
        </header>

        {/* lineup */}
        <section className="p-sec">
          <div className="p-head">
            <div>
              <div className="p-kick">{t.lineup.eyebrow}</div>
              <h2 className="p-disp">{t.lineup.title}</h2>
            </div>
            <a className="p-btn line" onClick={() => go('products')}>{t.cta.secondary} →</a>
          </div>
          <div className="p-grid5" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: '24px' }}>
            {berries.filter((b) => b.key !== 'pineberry').map((b) => {
              const ph = (window.POMONA.photos || {})[b.key];
              return (
                <div className="p-item link" key={b.key} style={{ '--bc': b.color }}
                  onClick={() => go('products')}>
                  {ph ? (
                    <div className="pic photo"><img src={ph.src} alt={b[lang]} style={{ objectPosition: ph.pos, transform: `scale(${ph.zoom || 1})` }} /></div>
                  ) : (
                    <image-slot id={`home-berry-${b.key}`} className="pic" placeholder={b[lang]} style={{ width: '100%', height: '300px' }}></image-slot>
                  )}
                  <h3>{b[lang]}</h3>
                </div>
              );
            })}
          </div>
        </section>

        {/* pineberry band */}
        <section className="p-pine">
          <div className="grid">
            <div className="pic photo p-pine-photo" style={{ height: 580, width: '100%', borderRadius: 'var(--img-radius)', overflow: 'hidden' }}><img src={(window.__resources&&window.__resources.heroPineberry)||'assets/pineberry.jpg'} alt="Pineberry — fresa blanca" style={{ objectPosition: 'center 38%', width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /></div>
            <div className="tx">
              <div className="tag">{t.pine.eyebrow}</div>
              <h2 className="p-disp">{t.pine.title}</h2>
              <p>{t.pine.body}</p>
              <a className="p-btn" onClick={() => go('pineberry')}>{t.pine.cta} →</a>
            </div>
          </div>
        </section>

        {/* about + trust */}
        <section className="p-trust">
          <div>
            <div className="p-kick">{t.about.eyebrow}</div>
            <h2 className="p-disp">{t.about.title}</h2>
            <p>{t.about.body}</p>
            <div className="p-certs" style={{ 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((s, 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] }}>{s.n}</div><div className="l">{s.l}</div></div>;
            })}
          </div>
        </section>

        {/* reviews */}
        <section className="p-rev">
          <div className="p-kick">{t.reviews.eyebrow}</div>
          <h2 className="p-disp">{t.reviews.title}</h2>
          <div className="note">{t.reviews.note}</div>
          <div className="p-rcards">
            {t.reviews.items.map((it, i) => (
              <div className="p-rcard" key={i}>
                <div className="stars">★★★★★</div>
                <p className="q">“{it.q}”</p>
                <div className="who">
                  <div className="av">{['🛒', '🍓', '📦'][i]}</div>
                  <div><div className="nm">{it.n}</div><div className="rl">{it.r}</div></div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* buyers 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>
    );
  };
})();