/* global React, Icon, SectionHeader, Reveal */

const SERVICES = [
  { icon: "layout-dashboard", title: "Power BI Dashboard Development", desc: "From data model to executive view. Modeling, DAX, design and rollout in one engagement.", meta: "End-to-end · 4–8 weeks", featured: true },
  { icon: "pie-chart",        title: "Business Intelligence Systems",   desc: "BI architecture, semantic layers, self-serve analytics and governance — done right.", meta: "BI architecture" },
  { icon: "zap",              title: "Automation Solutions",            desc: "Workflow automation that gives your team hours back, every single week.", meta: "AI & workflow" },
  { icon: "bar-chart-3",      title: "Analytics Consulting",            desc: "Strategy, audit, and roadmap for organizations starting or scaling analytics.", meta: "Advisory" },
  { icon: "file-bar-chart",   title: "Operational Reporting",           desc: "Automated daily / weekly / monthly ops reporting leadership actually trusts.", meta: "Reporting systems" },
  { icon: "package",          title: "Digital Product Strategy",        desc: "From idea to launch — discovery, scoping, and shipping useful internal tools.", meta: "Product partnership" },
  { icon: "frame",            title: "UI/UX Design",                    desc: "Interface design for dashboards, internal products, and customer-facing apps.", meta: "Design" },
  { icon: "code-2",           title: "Personal / Corporate Website",    desc: "Modern, fast personal or corporate profile sites with clean code and clean visuals.", meta: "Web" },
];

function Services() {
  return (
    <section id="services" className="section services">
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="Services"
            eyebrowIcon="briefcase"
            title='Pick a service. <span class="grad">Get a system.</span>'
            subtitle="Each engagement ships a working system — not a deck, not a slide. Scoped, time-bound, and measured against real outcomes."
          />
        </Reveal>

        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <Reveal key={s.title} delay={(i % 4) * 70}>
              <div className={`service-card ${s.featured ? "is-featured" : ""}`}>
                <span className="service-num">0{i + 1}</span>
                <div className="service-icon">
                  <Icon name={s.icon} size={22} />
                </div>
                <h3 className="service-title" dangerouslySetInnerHTML={{ __html: s.title }} />
                <p className="service-desc">{s.desc}</p>
                <div className="service-meta">
                  <Icon name="check-circle" size={14} />
                  <span>{s.meta}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;