const steps = [
  { num: '01', title: 'Discovery & Strategie', text: 'We duiken diep in uw business, processen en doelen. Geen aannames, alleen feiten. Het resultaat: een helder projectplan met ROI-focus.' },
  { num: '02', title: 'UI/UX Design', text: 'Prototypes en wireframes die uw team al kan gebruiken vóór er een regel code is geschreven. Design dat converteert én prettig werkt.' },
  { num: '03', title: 'Development', text: 'Agile sprints, dagelijkse commits, wekelijkse demo\'s. U ziet de voortgang en stuurt bij waar nodig.' },
  { num: '04', title: 'QA & Launch', text: 'Geautomatiseerde tests, security audits en performance checks. We launchen pas als we 100% tevreden zijn.' },
  { num: '05', title: 'Support & Groei', text: 'Na launch bent u niet alleen. Proactieve monitoring, updates en doorontwikkeling. Uw software groeit mee.' },
];

const serviceCards = [
  { num: '01', title: 'Progressive Web Apps', text: 'Snel, offline-capable en installeerbaar. Native app-gevoel zonder App Store gedoe.' },
  { num: '02', title: 'Multi-tenant Platforms', text: 'SaaS-platforms voor meerdere organisaties op één infrastructuur.' },
  { num: '03', title: 'API Integraties', text: 'Koppel uw systemen naadloos. Van ERP tot CRM tot externe diensten.' },
  { num: '04', title: 'AI Integraties', text: 'Voeg intelligentie toe aan uw processen. Automatisering die echt werkt.' },
  { num: '05', title: 'Dashboards & Analytics', text: 'Real-time inzicht in uw data. Beslissingen op basis van feiten, niet gevoel.' },
  { num: '06', title: 'Portalen & Workflows', text: 'Klantportalen, goedkeuringsflows en documentbeheer op maat.' },
];

function Services() {
  return (
    <section id="services">
      <div className="services-layout">
        <div>
          <span className="section-label">Ons Proces</span>
          <h2>Van idee naar<br />live product.</h2>
          <p className="section-intro">Een gestructureerd proces dat u altijd in controle houdt.</p>
          <div className="process-steps">
            {steps.map((s) => (
              <div className="step" key={s.num}>
                <div className="step-num">{s.num}</div>
                <div className="step-content">
                  <h4>{s.title}</h4>
                  <p>{s.text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <span className="section-label">Wat we bouwen</span>
          <div className="service-cards">
            {serviceCards.map((c) => (
              <div className="service-card" key={c.num}>
                <span className="service-num">{c.num}</span>
                <h4>{c.title}</h4>
                <p>{c.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });