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

function About() {
  const pillars = [
    {
      icon: "graduation-cap",
      title: "Practical, not theoretical",
      body: "Every post is something you can apply at work tomorrow — built from real BI and analytics work.",
    },
    {
      icon: "user-check",
      title: "A real working audience",
      body: "Analysts, BI developers, product folks, and learners actively levelling up. Engaged daily.",
    },
    {
      icon: "shield-check",
      title: "Brand-safe & professional",
      body: "Educational, on-brand, on-deadline. No clickbait, no controversy, no missed deliverables.",
    },
  ];

  return (
    <Section id="about" className="section--about">
      <div className="about-grid">
        <div className="about-intro">
          <SectionHeader
            eyebrow="About"
            title="AI Developer & Educator with a working audience."
            subtitle="I've been creating practical, no-fluff content around Power BI, data analytics, and AI for productivity for years — for the people who actually do this work for a living."
          />
          <div className="about-tags">
            <span className="pill pill--soft">AI Developer</span>
            <span className="pill pill--soft">AI Educator</span>
            <span className="pill pill--soft">Power BI</span>
            <span className="pill pill--soft">Data Analytics</span>
            <span className="pill pill--soft">AI for Productivity</span>
            <span className="pill pill--soft">Dashboard Design</span>
            <span className="pill pill--soft">Career Growth</span>
          </div>
        </div>
        <div className="about-pillars">
          {pillars.map((p) => (
            <GlassCard key={p.title} className="about-pillar">
              <div className="about-pillar-icon"><Icon name={p.icon} size={22} /></div>
              <div>
                <h3 className="about-pillar-title">{p.title}</h3>
                <p className="about-pillar-body">{p.body}</p>
              </div>
            </GlassCard>
          ))}
        </div>
      </div>
    </Section>
  );
}

window.About = About;