function ServiceCards() {
  const services = [
    { icon: "package",          tag: "01", title: "Obsługa zamówień",      desc: "Automatyczne potwierdzenia, statusy, faktury, integracja z magazynem. Klient dostaje info od ręki.", tone: "blue" },
    { icon: "target",           tag: "02", title: "Pozyskiwanie leadów",   desc: "Formularze, chatboty kwalifikujące, scoring. Same dobre kontakty trafiają do CRM.",          tone: "orange" },
    { icon: "trending-up",      tag: "03", title: "Proces sprzedaży",      desc: "Automatyzacja follow-upów, ofert, kalendarza. Mniej rzeczy do pamiętania, więcej zamknięć.", tone: "yellow" },
    { icon: "bot",              tag: "04", title: "Obsługa klienta",       desc: "Chatbot AI po polsku, 24/7. Odpowiada na 80% pytań, resztę przekazuje Tobie z kontekstem.",    tone: "blue" },
    { icon: "repeat",           tag: "05", title: "Powracający klienci",   desc: "Sekwencje retencyjne, przypomnienia, oferty dla stałych klientów. Klient wraca sam.",        tone: "orange" },
    { icon: "layout-dashboard", tag: "06", title: "Dedykowane aplikacje",  desc: "Board klienta, panele zarządzania, custom narzędzia pod Twój proces. Dokładnie pod Ciebie.",  tone: "yellow" },
  ];
  return (
    <section className="g-section" id="uslugi">
      <SectionHeader num="01" eyebrow="Co robię" title={<>Jak wpłynę na <em>Twój wzrost</em>.</>}
                     lead="Sześć obszarów, w których automatyzacja i AI dają konkretne pieniądze. Resztę zostawiam ludziom, którzy znają się lepiej." />
      <div className="g-services-grid">
        {services.map((s) => (
          <article key={s.tag} className={`g-service-card g-tone-${s.tone}`}>
            <div className="g-service-icon"><i data-lucide={s.icon}></i></div>
            <div className="g-service-tag">{s.tag}</div>
            <h3 className="g-service-title">{s.title}</h3>
            <p className="g-service-desc">{s.desc}</p>
            <a className="g-service-link" href="#">Dowiedz się więcej <i data-lucide="arrow-right"></i></a>
          </article>
        ))}
      </div>
    </section>
  );
}

function SectionHeader({ num, eyebrow, title, lead }) {
  return (
    <div className="g-section-header">
      <div className="g-section-num">
        <span>{num}</span>
        <div className="g-section-line" />
      </div>
      <div className="g-section-head-body">
        <h2 className="g-h2">{title}</h2>
        {lead ? <p className="g-lead g-lead--narrow">{lead}</p> : null}
      </div>
    </div>
  );
}

window.ServiceCards = ServiceCards;
window.SectionHeader = SectionHeader;