// ServiceCard.jsx and ServicesGrid.jsx
(function () {
  const services = [
    {
      icon: 'wind',
      title: 'Impianti su misura',
      desc: 'Progettazione e installazione di impianti di aspirazione su misura per ristoranti, pizzerie, laboratori di pasticceria e mense.',
      tags: ['Ho.Re.Ca.', 'Progettazione'],
    },
    {
      icon: 'loop',
      title: 'Sistemi a circuito chiuso',
      desc: 'La soluzione per ristoranti, pasticcerie e locali vincolati che non possono installare una canna fumaria: filtri ad alta efficienza, abbattitori e ricircolo dell\'aria. Si lavora in regola anche dove sembra impossibile.',
      tags: ['Centro città', 'Vincoli architettonici'],
      featured: true,
    },
    {
      icon: 'hood',
      title: 'Costruzione di cappe su misura',
      desc: 'Realizziamo cappe su misura in acciaio inox, dimensionate sul tuo locale e sul tipo di cottura: aspirazione efficiente, design pulito, pronte per essere integrate nell\'impianto.',
      tags: ['Cappe su misura', 'Inox'],
    },
    {
      icon: 'wrench',
      title: 'Manutenzione e pulizia',
      desc: 'Revisione periodica, pulizia condotti e filtri, sostituzione componenti usurati. Manteniamo l\'impianto efficiente e a norma.',
      tags: ['HACCP', 'Periodica'],
    },
    {
      icon: 'video',
      title: 'Ispezione con telecamera',
      desc: 'Analisi endoscopica dell\'impianto esistente: interveniamo solo dove serve davvero.',
      tags: ['Diagnostica'],
    },
    {
      icon: 'factory',
      title: 'Impianti industriali',
      desc: 'Aspirazione di polveri, vapori e odori per falegnamerie, verniciature e laboratori. Impianti su misura per ogni esigenza produttiva.',
      tags: ['Industria', 'Safety'],
    },
  ];

  const icons = {
    wind: <path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2 M9.6 4.6A2 2 0 1 1 11 8H2 M12.6 19.4A2 2 0 1 0 14 16H2" />,
    loop: <><path d="M21 12a9 9 0 0 0-15.5-6.3L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 15.5 6.3L21 16"/><path d="M21 21v-5h-5"/></>,
    wrench: <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"/>,
    video: <><path d="m23 7-7 5 7 5V7Z"/><rect width="15" height="14" x="1" y="5" rx="2" ry="2"/></>,
    factory: <><path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M17 18h1"/><path d="M12 18h1"/><path d="M7 18h1"/></>,
    hood: <><path d="M3 4h18l-2 6H5L3 4Z"/><path d="M5 10v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/><path d="M9 20h6"/></>,
  };

  function Icon({ name }) {
    return (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
        {icons[name]}
      </svg>
    );
  }

  function ServiceCard({ service, i, onNav }) {
    const go = () => { if (onNav) onNav('servizi'); };
    return (
      <article
        className={`dg-svc ${service.featured ? 'is-featured' : ''} dg-reveal`}
        style={{ transitionDelay: `${i * 60}ms` }}
        onClick={go}
        role={onNav ? 'button' : undefined}
        tabIndex={onNav ? 0 : undefined}
        onKeyDown={(e) => { if (onNav && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); go(); } }}
      >
        <div className="dg-svc-icon"><Icon name={service.icon} /></div>
        <h3 className="dg-svc-title">{service.title}</h3>
        <p className="dg-svc-desc">{service.desc}</p>
        <div className="dg-svc-tags">
          {service.tags.map((t) => <span key={t} className="dg-tag">{t}</span>)}
        </div>
        <span className="dg-svc-link" aria-hidden="true">
          Scopri
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </span>
      </article>
    );
  }

  function ServicesGrid({ intro = true, compact = false, onNav }) {
    return (
      <section className={`dg-svc-section ${compact ? 'is-compact' : ''}`}>
        {intro && (
          <div className="dg-section-head dg-reveal">
            <div className="dg-overline">I nostri servizi</div>
            <h2 className="dg-section-title">Soluzioni concrete, costruite su misura.</h2>
            <p className="dg-section-sub">
              Non vendiamo servizi standard. Ogni intervento nasce dal problema reale del cliente
              e si adatta alla sua attività.
            </p>
          </div>
        )}
        <div className="dg-svc-grid">
          {services.map((s, i) => <ServiceCard key={s.title} service={s} i={i} onNav={onNav} />)}
        </div>
      </section>
    );
  }

  window.ServicesGrid = ServicesGrid;
  window.ServiceCard = ServiceCard;
  window.SERVICES_DATA = services;
})();