// insights.jsx - editorial with finance art placeholders
const INSIGHT_ARTS = [InsightArtD, InsightArtB, InsightArtC, InsightArtA];

const Insights = () => {
  const { t } = useLang();
  const ins = t.insights;
  return (
    <section className="insights" id="insights">
      <div className="insights-head">
        <div>
          <Reveal><div className="eyebrow">{ins.eyebrow}</div></Reveal>
          <Reveal delay={1}><h2 className="section-title">{ins.title}</h2></Reveal>
        </div>
        <Reveal delay={2}>
          <a href="#" className="cta-btn ghost">
            {ins.cta}
            <ArrowDiag/>
          </a>
        </Reveal>
      </div>
      <div className="insights-grid">
        {ins.items.map((it, i) => {
          const Art = INSIGHT_ARTS[i % INSIGHT_ARTS.length];
          return (
            <Reveal key={i} delay={Math.min(i+1,3)} as="a" className="insight-card">
              <span className="tag">{it.tag}</span>
              <div className="art"><Art/></div>
              <h3>{it.title}</h3>
              <div className="meta">
                <span>{it.date}</span>
                <span>{it.read}</span>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
};

window.Insights = Insights;