function Services() {
  const techs = [
    {
      name: "Sur mesure",
      desc: "Sans abonnement,\nentièrement personnalisé.",
      dark: true,
      logo: (
        <svg viewBox="0 0 40 40" fill="none" width="36" height="36">
          <text x="50%" y="55%" dominantBaseline="middle" textAnchor="middle" fontFamily="monospace" fontSize="13" fontWeight="700" fill="white">{"</>"}</text>
        </svg>
      )
    },
    {
      name: "WordPress",
      logo: <img src="https://upload.wikimedia.org/wikipedia/commons/9/98/WordPress_blue_logo.svg" alt="WordPress" style={{width:44,height:44,objectFit:"contain"}} />
    },
    {
      name: "Shopify",
      logo: <img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Shopify_logo_2018.svg" alt="Shopify" style={{width:44,height:44,objectFit:"contain"}} />
    },
    {
      name: "WooCommerce",
      logo: <img src="./woo%20commerce.png" alt="WooCommerce" style={{width:52,height:44,objectFit:"contain"}} />
    },
    {
      name: "Wix",
      logo: <img src="https://upload.wikimedia.org/wikipedia/commons/7/76/Wix.com_website_logo.svg" alt="Wix" style={{width:44,height:44,objectFit:"contain"}} />
    },
    {
      name: "Next.js",
      logo: <img src="./nextjs%20logo.png" alt="Next.js" style={{width:44,height:44,objectFit:"contain"}} />
    },
  ];

  return (
    <section id="services" className="services" data-screen-label="02 Services">
      <div className="container">
        <div className="services-grid">
          <div className="reveal">
            <h2>Nous concevons une<br />expérience digitale</h2>
            <p className="sub">
              De la stratégie aux pixels, nos équipes prennent en charge tout le parcours de ton projet :
              audit, design, développement et accompagnement.
            </p>
          </div>
          <div className="cards-row">
            <div className="service-card reveal delay-1">
              <div className="service-icon warm"><Icon.Users /></div>
              <h3>Sites web sur mesure</h3>
              <p>
                Vitrines, e-commerce et plateformes métier conçues pour convertir et durer.
                Performance, SEO et accessibilité par défaut.
              </p>
              <a className="learn-more" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("openContactModal")); }}>En savoir plus <span className="arr"></span></a>
            </div>
            <div className="service-card shift-up reveal delay-2">
              <div className="service-icon cool"><Icon.Code /></div>
              <h3>Solutions IT & infogérance</h3>
              <p>
                Hébergement, sécurité, intégrations API et automatisations.
                On gère ton stack technique pour te laisser libre de créer.
              </p>
              <a className="learn-more" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("openContactModal")); }}>En savoir plus <span className="arr"></span></a>
            </div>
          </div>
        </div>

        {/* Bloc technologies */}
        <div className="tech-stack reveal">
          <div className="tech-stack-label">NOUS DÉVELOPPONS AVEC</div>
          <div className="tech-stack-grid">
            {techs.map((t, i) => (
              <div key={i} className={`tech-item${t.dark ? " tech-item-dark" : ""}`}>
                <div className="tech-logo">{t.logo}</div>
                <div className="tech-name">{t.name}</div>
                {t.desc && <div className="tech-desc">{t.desc}</div>}
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

window.Services = Services;