function fmtDate(iso) {
  if (!iso) return "";
  const d = new Date(iso + "T00:00:00");
  return d.toLocaleDateString("en-AU", { day: "numeric", month: "long", year: "numeric" });
}

function Resources() {
  const all = (window.BLOG_POSTS || []).slice().sort((a, b) => (b.date || "").localeCompare(a.date || ""));
  const featured = all.find(p => p.featured) || all[0];
  const rest = all.filter(p => p.slug !== featured.slug);

  return (
    <section id="resources" className="section" style={{background:'var(--paper)'}}>
      <div className="wrap">
        <div style={{display:'flex', alignItems:'end', justifyContent:'space-between', gap:40, flexWrap:'wrap', marginBottom:48}}>
          <div>
            <Eyebrow>Journal & Resources</Eyebrow>
            <h2 style={{marginTop:20, fontWeight:300}}>
              Writing for <span className="italic">practitioners and professionals</span>.
            </h2>
          </div>
          <a href="#resources" className="btn-link">Browse the journal <span className="arrow">→</span></a>
        </div>

        {/* Featured */}
        <a href={`posts/${featured.slug}.html`} style={{textDecoration:'none', color:'inherit', display:'block', marginBottom:'clamp(40px, 5vw, 72px)'}}>
          <div className="grid-2" style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:'clamp(24px, 4vw, 64px)', alignItems:'stretch', border:'1px solid var(--rule)'}}>
            <ImgPh label={featured.image || "feature article photo"} aspect="auto" style={{minHeight:360}} />
            <div style={{padding:'clamp(28px, 4vw, 56px)', display:'flex', flexDirection:'column', justifyContent:'center'}}>
              <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:20, flexWrap:'wrap'}}>
                <span className="chip">Featured</span>
                <span style={{fontSize:12, color:'var(--muted)'}}>{featured.category} · {featured.read}</span>
                {featured.date && <span style={{fontSize:12, color:'var(--muted)'}}>· {fmtDate(featured.date)}</span>}
              </div>
              <h3 style={{fontSize:'clamp(26px, 2.4vw, 36px)', fontStyle:'italic', fontWeight:400, lineHeight:1.2}}>{featured.title}</h3>
              <p style={{marginTop:20, fontSize:16, lineHeight:1.7, color:'var(--muted)'}}>{featured.excerpt}</p>
              <div style={{marginTop:28, fontSize:12, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--rose-deep)', display:'flex', alignItems:'center', gap:10}}>
                Read the essay <span>→</span>
              </div>
            </div>
          </div>
        </a>

        <div className="grid-4">
          {rest.map(p => (
            <a key={p.slug} href={`posts/${p.slug}.html`} style={{textDecoration:'none', color:'inherit'}}>
              <div style={{display:'flex', flexDirection:'column', gap:12, borderTop:'1px solid var(--rule)', paddingTop:20, height:'100%'}}>
                <ImgPh label={p.image || p.category.toLowerCase()} aspect="4 / 3" />
                <div style={{fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--rose-deep)'}}>{p.category} · {p.read}</div>
                <h4 style={{fontFamily:'var(--heading-font)', fontSize:22, fontStyle:'italic', fontWeight:400, lineHeight:1.25, color:'var(--charcoal)'}}>{p.title}</h4>
                <p style={{fontSize:14, lineHeight:1.6, color:'var(--muted)'}}>{p.excerpt}</p>
                {p.date && <div style={{fontSize:12, color:'var(--muted)', marginTop:'auto', paddingTop:8}}>{fmtDate(p.date)}</div>}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Resources });