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

const PILLARS = [
  { icon: "bar-chart-3",      title: "Data Analytics",     body: "Frameworks, workflows, and habits for everyday analysis." },
  { icon: "layout-dashboard", title: "Power BI",           body: "DAX, modelling, and report-building from a working dev." },
  { icon: "palette",          title: "Dashboard Design",   body: "Layout, color, and clarity — turning charts into stories." },
  { icon: "sparkles",         title: "AI for Productivity", body: "Practical AI tools that save real hours each week." },
  { icon: "package",          title: "Digital Product",    body: "Building and shipping small digital products for analysts." },
  { icon: "workflow",         title: "Business Process",   body: "Mapping and improving the boring stuff that runs companies." },
  { icon: "briefcase",        title: "Career Growth",      body: "Interviewing, levelling up, and standing out in data." },
];

function Pillars() {
  return (
    <Section id="pillars" className="section--pillars">
      <SectionHeader
        eyebrow="Content pillars"
        title="Seven topics — one consistent voice."
        subtitle="Each pillar maps cleanly to specific sponsor categories. Pick the ones that fit your brand."
      />
      <div className="pillars-grid">
        {PILLARS.map((p, i) => (
          <div key={p.title} className="pillar-card" style={{ "--i": i }}>
            <div className="pillar-icon"><Icon name={p.icon} size={20} /></div>
            <div className="pillar-content">
              <h3 className="pillar-title">{p.title}</h3>
              <p className="pillar-body">{p.body}</p>
            </div>
            <Icon name="arrow-up-right" size={16} />
          </div>
        ))}
      </div>
    </Section>
  );
}

window.Pillars = Pillars;