/* global React, Section, SectionHeader, GlassCard, Icon */

const WHY = [
  { icon: "target",         title: "Niche-fit audience", body: "Working analysts, BI developers, and AI-curious pros. Not random scroll traffic." },
  { icon: "trending-up",    title: "High intent",        body: "Followers come for tools and frameworks they'll actually try — high click-through, high save rate." },
  { icon: "shield-check",   title: "Brand-safe",         body: "Educational tone. No politics. No clickbait. Easy approval cycle." },
  { icon: "pen-tool",       title: "Creator-led concept", body: "I write, design, and shoot every piece. You get a coherent voice, not a templated ad." },
  { icon: "calendar-check", title: "Reliable delivery",  body: "Clear briefs. Two revision rounds. On-time without chasing." },
  { icon: "bar-chart-2",    title: "Post-campaign report", body: "Reach, saves, profile visits, link clicks — sent within 7 days of go-live." },
];

function WhyBrands() {
  return (
    <Section id="why" className="section--why">
      <SectionHeader
        eyebrow="Why brands work with me"
        title="Real outcomes — not vanity metrics."
        subtitle="Six things partners consistently say make this an easy collaboration."
      />
      <div className="why-grid">
        {WHY.map((w) => (
          <GlassCard key={w.title} className="why-card">
            <div className="why-icon"><Icon name={w.icon} size={22} /></div>
            <h3 className="why-title">{w.title}</h3>
            <p className="why-body">{w.body}</p>
          </GlassCard>
        ))}
      </div>
    </Section>
  );
}

window.WhyBrands = WhyBrands;