const ARTICLES = [
  { tag: "Markets",   title: "The case for boring portfolios in 2026",                read: "8 min", date: "12 May 2026", tone: "cream",      image: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=1000&q=80" },
  { tag: "Tax",       title: "Old regime vs new regime: a worked example for ₹40L CTC", read: "6 min", date: "04 May 2026", tone: "green",     image: "https://images.unsplash.com/photo-1554224155-1696413565d3?w=1000&q=80" },
  { tag: "Behaviour", title: "Why your friend's stock tip is more expensive than it looks", read: "5 min", date: "27 Apr 2026", tone: "green-dark", image: "https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=1000&q=80" },
];

const Insights = () => {
  return (
    <section id="insights" className="block" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 64 }}>
          <div>
            <Marker index={7} total={7} label="The journal"/>
            <h2 className="display" style={{ fontSize: "clamp(33px, 3.8vw, 46px)", marginTop: 24, lineHeight: 1.02, maxWidth: "14ch", color: "var(--green-900)" }}>
              Plain English. No jargon&nbsp;tax.
            </h2>
          </div>
          <a href="#" className="btn btn-ghost">All writing <ArrowIcon/></a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }} className="ins-grid">
          {ARTICLES.map((a, i) => (
            <article key={i} style={{ display: "flex", flexDirection: "column", cursor: "pointer" }}
              onMouseEnter={e => e.currentTarget.querySelector(".ins-img").style.transform = "scale(1.02)"}
              onMouseLeave={e => e.currentTarget.querySelector(".ins-img").style.transform = "scale(1)"}>
              <div className="ins-img" style={{ overflow: "hidden", transition: "transform .5s ease", marginBottom: 22 }}>
                <Placeholder aspect="4 / 3" label={a.tag} tone={a.tone} image={a.image}/>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
                <span className="eyebrow" style={{ color: "var(--gold-500)" }}>{a.tag}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.12em" }}>{a.read}</span>
              </div>
              <h3 className="display" style={{ fontSize: 24, lineHeight: 1.2, marginBottom: 14, color: "var(--green-900)", fontWeight: 600, textWrap: "balance" }}>{a.title}</h3>
              <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.12em" }}>{a.date}</span>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .ins-grid{ grid-template-columns: 1fr !important }
        }
      `}</style>
    </section>
  );
};

window.Insights = Insights;