// Editorial page

function EditorialPage({ articles, onOpen }) {
  const [hero, ...rest] = articles;
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Editorial</div>
          <h1 className="page-title">Guides written by the<br/><em>parents you trust.</em></h1>
          <p className="page-sub">Long-form, opinionated picks for every stage. Updated as new things land in our review queue.</p>
        </div>
      </div>

      {hero && (
        <article className="editorial-hero" onClick={() => onOpen(hero)} style={{ cursor: 'default' }}>
          <div className="editorial-hero-img">
            <img src={hero.cover} alt={hero.title} />
          </div>
          <div className="editorial-hero-l">
            <div className="editorial-kicker">{hero.kicker}</div>
            <h2 className="editorial-title">{hero.title}</h2>
            <p className="editorial-dek">{hero.dek}</p>
            <div className="editorial-byline">
              <div className="avatar" style={{ width: 32, height: 32, fontSize: 13 }}>
                {hero.author.split(' ').map(w => w[0]).slice(0,2).join('')}
              </div>
              <span>{hero.author}</span>
              <span style={{ width: 3, height: 3, background: 'currentColor', borderRadius: '50%' }} />
              <span>{hero.minutes} min read</span>
              <span style={{ width: 3, height: 3, background: 'currentColor', borderRadius: '50%' }} />
              <span>{hero.items} picks</span>
            </div>
          </div>
        </article>
      )}

      <div className="editorial-grid">
        {rest.map(a => (
          <article key={a.id} className="editorial-card" onClick={() => onOpen(a)}>
            <div className="editorial-card-img">
              <img src={a.cover} alt={a.title} loading="lazy" />
            </div>
            <div className="editorial-card-kicker">{a.kicker}</div>
            <h3 className="editorial-card-title">{a.title}</h3>
            <div className="editorial-card-meta">{a.minutes} min read · {a.items} picks</div>
          </article>
        ))}
      </div>
    </div>
  );
}

function EditorialDetailPage({ article, productMap, savedIds, onBack, onOpenProduct, onSave }) {
  // Filter products by article's catFilter & ageStop
  const all = window.PRODUCTS || [];
  const stop = window.AGE_STOPS[article.ageStop] || window.AGE_STOPS[5];
  const products = all.filter(p => {
    if (!article.catFilter.includes(p.category)) return false;
    if (stop.key === 'pre') return p.stage === 'pre-baby';
    return p.ageMax >= stop.ageMin && p.ageMin <= stop.ageMax;
  }).slice(0, article.items);

  return (
    <div className="page" style={{ maxWidth: 1280 }}>
      <button onClick={onBack} className="btn btn-ghost" style={{ width: 'auto', padding: '8px 14px', marginBottom: 24, fontSize: 13 }}>
        <span className="arrow" style={{ transform: 'rotate(180deg)' }}>→</span>
        <span>Back to editorial</span>
      </button>
      <div style={{ maxWidth: 720, margin: '0 auto 56px', textAlign: 'center' }}>
        <div className="editorial-kicker">{article.kicker}</div>
        <h1 className="editorial-title" style={{ fontSize: 'clamp(40px, 5vw, 64px)' }}>{article.title}</h1>
        <p className="editorial-dek">{article.dek}</p>
        <div className="editorial-byline" style={{ justifyContent: 'center' }}>
          <div className="avatar" style={{ width: 32, height: 32, fontSize: 13 }}>
            {article.author.split(' ').map(w => w[0]).slice(0,2).join('')}
          </div>
          <span>{article.author}</span>
          <span style={{ width: 3, height: 3, background: 'currentColor', borderRadius: '50%' }} />
          <span>{article.minutes} min read</span>
        </div>
      </div>

      <div style={{ aspectRatio: '21 / 9', borderRadius: 'var(--r-md)', overflow: 'hidden', marginBottom: 56, background: 'var(--bg-2)' }}>
        <img src={article.cover} alt={article.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </div>

      <div style={{ maxWidth: 720, margin: '0 auto 48px', fontSize: 17, lineHeight: 1.7, color: 'var(--ink-2)' }}>
        <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.5, color: 'var(--ink)', letterSpacing: '-0.01em', marginTop: 0 }}>
          The right toy at the right age is rarely the most expensive — but it’s never the cheapest, either. Here are {article.items} picks we’d send to a friend without hesitation.
        </p>
        <p>
          We’ve weighted these for the things that actually matter: how often kids reach for them six months in, how the materials hold up to daily use, and whether the parents we trust would buy them again.
        </p>
      </div>

      <div className="grid">
        {products.map(p => (
          <ProductCard key={p.id} p={p} isSaved={savedIds.includes(p.id)} showPrice={true}
            onOpen={onOpenProduct} onSave={onSave} />
        ))}
      </div>
    </div>
  );
}

window.EditorialPage = EditorialPage;
window.EditorialDetailPage = EditorialDetailPage;