// Meals page — meal services for pre & post birth

function MealsPage({ services = [] }) {
  const [whenFilter, setWhenFilter] = useState('all');
  const filtered = services.filter(s =>
    whenFilter === 'all' ? true :
    whenFilter === 'pre' ? (s.when === 'Pre' || s.when === 'Pre & post') :
    (s.when === 'Post' || s.when === 'Pre & post')
  );

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Meals</div>
          <h1 className="page-title">{`Someone else cooks,${' '}`}<br/><em>so you don’t have to.</em></h1>
          <p className="page-sub">{'A short shelf of meal services for the third trimester, the fourth, and beyond — vetted for nutrition, taste, and the realities of one-handed eating.'}</p>
        </div>
      </div>

      <div className="meals-filter">
        {[
          { id: 'all',  label: 'All services' },
          { id: 'pre',  label: 'Pre-birth' },
          { id: 'post', label: 'Post-birth' },
        ].map(f => (
          <button key={f.id} className={`meals-filter-btn${whenFilter === f.id ? ' is-current' : ''}`} onClick={() => setWhenFilter(f.id)}>{f.label}</button>
        ))}
        <span className="meals-filter-count">{`${filtered.length} services`}</span>
      </div>

      <div className="meals-grid">
        {filtered.map((s, i) => (
          <article key={s.id} className={`meal-card${s.highlight ? ' is-highlight' : ''}${i === 0 ? ' is-feature' : ''}`}>
            <div className="meal-img"><img src={s.img} alt="" loading="lazy" /></div>
            <div className="meal-body">
              <div className="meal-tag">{s.tag}</div>
              <h3 className="meal-name">{s.name}</h3>
              <p className="meal-pitch">{s.pitch}</p>
              <ul className="meal-bullets">
                {s.bullets.map((b, j) => (
                  <li key={j}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12l5 5L20 7"/></svg>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <div className="meal-meta">
                <div className="meal-meta-row"><span>When</span><span>{s.when}</span></div>
                <div className="meal-meta-row"><span>Includes</span><span>{s.meals}</span></div>
                <div className="meal-meta-row"><span>Region</span><span>{s.region}</span></div>
              </div>
              <div className="meal-foot">
                <div className="meal-price"><span className="meal-price-amt">{`$${s.price}`}</span><span className="meal-price-unit">{s.unit}</span></div>
                <button className="btn btn-ghost meal-btn"><span>Learn more</span><span className="arrow">{'→'}</span></button>
              </div>
            </div>
          </article>
        ))}
      </div>

      <section className="meals-note">
        <div>
          <div className="page-eyebrow" style={{ marginBottom: 8 }}>How we choose</div>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(22px, 2.4vw, 30px)', letterSpacing: '-0.02em', margin: '0 0 12px', fontWeight: 400 }}>{'Tasted, vetted, and — most importantly — actually used.'}</h3>
          <p style={{ fontSize: 14, color: 'var(--ink-2)', maxWidth: '60ch', lineHeight: 1.6, margin: 0 }}>{'Every service here was eaten through a real postpartum stretch by a member of our editorial team. We look for menus designed by registered dietitians, packaging that holds up, and reheating instructions a tired parent can follow.'}</p>
        </div>
      </section>
    </div>
  );
}

window.MealsPage = MealsPage;