/* ============================================================
   GlowMerald — Beauty Insight (magazine) + ArticleCard
   ============================================================ */
const { useState:useStateI } = React;

function ArticleCard({ article }){
  const { navigate } = useApp();
  return (
    <article className="article-card" onClick={()=>navigate('insight')}>
      <Placeholder label={article.category}/>
      <span className="acat">{article.category}</span>
      <h3>{article.title}</h3>
      <p className="aexc">{article.excerpt}</p>
      <span className="aread"><Icon name="book" size={13} style={{ verticalAlign:'-2px', marginRight:6 }}/>{article.read} baca</span>
    </article>
  );
}

function InsightPage(){
  const [cat,setCat] = useStateI('Semua');
  const hero = ARTICLES.find(a=>a.featured) || ARTICLES[0];
  const rest = ARTICLES.filter(a=>a!==hero).filter(a=>cat==='Semua'||a.category===cat);

  return (
    <div>
      <div className="page-head">
        <div className="container">
          <div className="eyebrow">Beauty Insight</div>
          <h1 style={{ fontSize:'clamp(2rem,6vw,3rem)' }}>Pengetahuan sebelum perawatan</h1>
          <p className="muted" style={{ maxWidth:540 }}>Artikel tentang kandungan, rutinitas, dan cerita kulit — ditulis dengan tenang dan jujur.</p>
        </div>
      </div>

      {/* Hero article */}
      <div className="container">
        <article className="insight-hero" onClick={()=>{}}>
          <Placeholder label="cover · ingredient science" className="insight-hero-img"/>
          <div className="insight-hero-copy">
            <span className="acat">{hero.category}</span>
            <h2 style={{ margin:'12px 0 14px' }}>{hero.title}</h2>
            <p className="muted" style={{ fontWeight:300, fontSize:'1rem' }}>{hero.excerpt}</p>
            <div style={{ display:'flex', alignItems:'center', gap:16, marginTop:18 }}>
              <span className="aread"><Icon name="book" size={13} style={{ verticalAlign:'-2px', marginRight:6 }}/>{hero.read} baca</span>
              <a className="link-gold">Baca Artikel <Icon name="arrow" size={15}/></a>
            </div>
          </div>
        </article>
      </div>

      {/* Category tabs */}
      <div className="container" style={{ marginTop:48 }}>
        <div className="cat-tabs">
          {ARTICLE_CATS.map(c=>(
            <button key={c} className={'cat-tab'+(cat===c?' active':'')} onClick={()=>setCat(c)}>{c}</button>
          ))}
        </div>
      </div>

      {/* Grid */}
      <div className="container section" style={{ paddingTop:32 }}>
        {rest.length===0
          ? <p className="ital muted center" style={{ fontSize:'1.1rem' }}>Belum ada artikel di kategori ini.</p>
          : <div className="grid grid-3">{rest.map(a=><ArticleCard key={a.id} article={a}/>)}</div>}
      </div>
    </div>
  );
}

window.ArticleCard = ArticleCard;
window.InsightPage = InsightPage;