/* global React, Icon, Button, Reveal */

const FINAL_SERVICES = [
  { icon: "layout-dashboard", label: "Power BI Dashboards" },
  { icon: "pie-chart",        label: "Business Intelligence" },
  { icon: "zap",              label: "Automation Solutions" },
  { icon: "bar-chart-3",      label: "Analytics Consulting" },
  { icon: "file-bar-chart",   label: "Operational Reporting" },
  { icon: "package",          label: "Digital Product Strategy" },
  { icon: "frame",            label: "UI/UX Design" },
  { icon: "code-2",           label: "Personal / Corporate Website" },
];

function FinalCTA({ onCTA }) {
  return (
    <section className="section final">
      <div className="container">
        <Reveal>
          <div className="final-card">
            <div className="final-grid">
              <div>
                <span className="eyebrow">
                  <Icon name="sparkles" size={12} />
                  Let's collaborate
                </span>
                <h2 className="final-title">
                  Let's build something <span className="grad">meaningful</span> with data &amp; AI.
                </h2>
                <p className="final-sub">
                  Whether you need dashboards, BI systems, automation, or a brand
                  new digital product — I'd love to help transform the idea into
                  an impactful, working solution.
                </p>

                <div className="final-cta-row">
                  <Button variant="primary" size="lg" onClick={onCTA} arrow>
                    Work with me
                  </Button>
                  <Button variant="secondary" size="lg" onClick={onCTA}>
                    Book collaboration
                  </Button>
                  <Button variant="ghost" size="lg" as="a" href="#projects">
                    Explore portfolio
                  </Button>
                </div>
              </div>

              <div className="final-services">
                {FINAL_SERVICES.map(s => (
                  <div className="final-service" key={s.label}>
                    <div className="final-service-icon">
                      <Icon name={s.icon} size={14} />
                    </div>
                    {s.label}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.FinalCTA = FinalCTA;