// ServicesDetail.jsx — pagina /servizi: 6 sezioni dettagliate alternate con
// chip navigation sticky, animazioni reveal, photo sticky e bullet list inline.
(function () {
  const services = [
    {
      id: 'impianti-su-misura',
      n: '01',
      icon: 'wind',
      title: 'Impianti di aspirazione su misura',
      short: 'Impianti su misura',
      visual: { type: 'photo', src: '../../assets/photos/chrome-ductwork-ceiling.jpg' },
      lead:
        'Realizziamo impianti di aspirazione su misura per tutte le attività legate alla ristorazione, indipendentemente dal tipo di cucina o lavorazione.',
      body: [
        'Che si tratti di ristoranti, pizzerie, bracerie, cucine professionali, laboratori o qualsiasi altra attività alimentare, progettiamo soluzioni pensate per adattarsi perfettamente al tuo spazio e alle tue reali esigenze operative.',
        'Ogni ambiente ha caratteristiche diverse: per questo non utilizziamo soluzioni standard, ma studiamo attentamente il contesto per creare un impianto efficiente, affidabile e duraturo nel tempo. Un sistema ben progettato non si limita a eliminare fumi e odori, ma migliora la qualità dell\'aria, ottimizza il lavoro in cucina e previene problematiche future.',
        'Seguiamo ogni fase, dalla progettazione all\'installazione, mettendo a disposizione un\'esperienza completa nel settore dell\'aspirazione. Questo ci permette di intervenire con precisione anche in situazioni complesse o con vincoli strutturali.',
        'Se stai aprendo una nuova attività o vuoi migliorare un impianto esistente, una soluzione su misura è il modo più efficace per lavorare in sicurezza e senza compromessi.',
      ],
    },
    {
      id: 'circuito-chiuso',
      n: '02',
      icon: 'loop',
      title: 'Sistemi a circuito chiuso',
      short: 'Circuito chiuso',
      featured: true,
      visual: { type: 'photo', src: '../../assets/photos/commercial-kitchen-hoods.jpg' },
      lead:
        'I sistemi a circuito chiuso rappresentano una soluzione tecnica efficace per tutte le attività di ristorazione in cui non è possibile realizzare una canna fumaria tradizionale.',
      body: [
        'Attraverso sistemi di filtrazione specifici, l\'aria viene trattata e purificata prima di essere reimmessa nell\'ambiente, consentendo la gestione di fumi, odori e vapori anche in contesti con vincoli strutturali o architettonici.',
        'Si tratta di impianti particolarmente indicati in locali situati in centri storici, edifici esistenti o spazi dove un sistema di espulsione verso l\'esterno non è realizzabile.',
        'Ogni soluzione viene progettata in base alle caratteristiche del locale e al tipo di attività, tenendo conto dei volumi di lavoro e delle reali esigenze operative. Questo permette di ottenere un impianto equilibrato, funzionale ed efficiente.',
        'L\'esperienza maturata nel settore dell\'aspirazione ci consente di intervenire anche in situazioni complesse, individuando la soluzione più adatta senza compromettere l\'efficienza del lavoro in cucina.',
      ],
    },
    {
      id: 'cappe-su-misura',
      n: '03',
      icon: 'hood',
      title: 'Costruzione di cappe su misura',
      short: 'Cappe su misura',
      visual: { type: 'photo', src: '../../assets/photos/hood-gold-ducting.jpg' },
      lead:
        'Realizziamo cappe di aspirazione su misura per tutte le attività legate alla ristorazione, progettate per garantire un\'efficace gestione di fumi, vapori e odori direttamente alla fonte.',
      body: [
        'Ogni cappa viene costruita in base alle caratteristiche specifiche della cucina, tenendo conto degli spazi disponibili, delle attrezzature utilizzate e dei volumi di lavoro. Questo permette di ottenere una soluzione perfettamente integrata, evitando dispersioni e migliorando l\'efficienza complessiva dell\'impianto.',
        'A differenza delle soluzioni standard, una cappa su misura assicura una captazione più efficace, contribuendo a mantenere l\'ambiente di lavoro più pulito, sicuro e conforme alle normative.',
        'Seguiamo l\'intero processo, dalla progettazione alla realizzazione, con particolare attenzione alla qualità dei materiali, alla funzionalità e alla durata nel tempo.',
        'La nostra esperienza nel settore dell\'aspirazione ci consente di sviluppare soluzioni affidabili anche in contesti complessi o con esigenze specifiche.',
      ],
    },
    {
      id: 'manutenzione-pulizia',
      n: '04',
      icon: 'wrench',
      title: 'Manutenzione e pulizia',
      short: 'Manutenzione',
      visual: { type: 'photo', src: '../../assets/photos/63347.jpg' },
      lead:
        'La manutenzione e la pulizia degli impianti di aspirazione sono fondamentali per garantire efficienza, sicurezza e continuità operativa in tutte le attività legate alla ristorazione.',
      body: [
        'Con il tempo, grassi, residui e impurità si accumulano all\'interno di cappe, canalizzazioni e componenti dell\'impianto, riducendone le prestazioni e aumentando il rischio di malfunzionamenti o situazioni critiche.',
        'Interveniamo con operazioni mirate di pulizia e manutenzione, ripristinando il corretto funzionamento dell\'impianto e contribuendo a mantenere un ambiente di lavoro più sicuro e controllato.',
        { list: { title: 'Un impianto mantenuto correttamente:', items: ['Lavora meglio', 'Consuma meno', 'Dura più a lungo'] } },
        'La manutenzione periodica consente inoltre di prevenire problematiche future e di operare nel rispetto delle normative vigenti. Una pulizia regolare riduce in modo significativo il rischio di incendio negli impianti di aspirazione e permette di superare senza problemi i controlli HACCP e dei Vigili del Fuoco.',
        'Grazie alla nostra esperienza nel settore dell\'aspirazione, siamo in grado di intervenire su impianti di diverse tipologie, garantendo interventi precisi e affidabili.',
      ],
    },
    {
      id: 'ispezione-telecamera',
      n: '05',
      icon: 'video',
      title: 'Ispezione con telecamera',
      short: 'Ispezione',
      visual: { type: 'photo', src: '../../assets/photos/sondatubo.png' },
      lead:
        'L\'ispezione con telecamera permette di verificare in modo preciso lo stato interno degli impianti di aspirazione, senza interventi invasivi o smontaggi.',
      body: [
        'Attraverso strumenti specifici, è possibile analizzare l\'interno di canalizzazioni, condotti e componenti difficilmente accessibili, individuando accumuli di grasso, ostruzioni, anomalie o eventuali criticità.',
        'Questo tipo di controllo consente di avere una valutazione reale delle condizioni dell\'impianto, evitando interventi inutili e permettendo di programmare operazioni mirate di manutenzione o pulizia.',
        { list: { title: 'È particolarmente utile per:', items: ['Verifiche periodiche', 'Controllo dopo interventi di pulizia', 'Diagnosi di problemi o cali di prestazione'] } },
        'L\'ispezione viene effettuata in modo rapido e mirato, fornendo un quadro chiaro della situazione e supportando decisioni tecniche più consapevoli.',
      ],
    },
    {
      id: 'impianti-industriali',
      n: '06',
      icon: 'factory',
      title: 'Impianti industriali',
      short: 'Industria',
      visual: { type: 'photo', src: '../../assets/photos/vent-exterior-white.jpg' },
      lead:
        'Realizziamo impianti di aspirazione per ambienti industriali e produttivi, progettati per la gestione efficace di polveri, vapori e odori generati durante le diverse lavorazioni.',
      body: [
        'Interveniamo in contesti come falegnamerie, reparti di verniciatura, laboratori e spazi produttivi, sviluppando soluzioni su misura in base al tipo di attività, ai materiali trattati e ai volumi di lavoro.',
        'Ogni impianto viene progettato per garantire un\'aspirazione efficiente alla fonte, migliorando la qualità dell\'aria, le condizioni di lavoro e il corretto funzionamento degli ambienti produttivi.',
        'Tra le soluzioni proposte rientra anche la realizzazione di cabine di verniciatura, integrate con sistemi di aspirazione e filtrazione adeguati, per assicurare un ambiente controllato e conforme alle esigenze operative.',
        'Seguiamo ogni fase del lavoro, dalla progettazione alla realizzazione, adattando l\'impianto alle specifiche necessità del cliente e alle caratteristiche dello spazio.',
        'Grazie all\'esperienza nel settore, siamo in grado di sviluppare soluzioni affidabili anche per lavorazioni particolari o contesti complessi.',
      ],
    },
  ];

  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, size = 26 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        {icons[name]}
      </svg>
    );
  }

  function CheckIcon() {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <polyline points="20 6 9 17 4 12" />
      </svg>
    );
  }

  function BodyItem({ item }) {
    if (typeof item === 'string') {
      return <p className="dg-svc-row-para">{item}</p>;
    }
    if (item && item.list) {
      return (
        <div className="dg-svc-row-listblock">
          {item.list.title && (
            <div className="dg-svc-row-coltitle">{item.list.title}</div>
          )}
          <ul className="dg-svc-row-list">
            {item.list.items.map((li, j) => (
              <li key={j}>
                <span className="dg-svc-row-check"><CheckIcon /></span>
                <span>{li}</span>
              </li>
            ))}
          </ul>
        </div>
      );
    }
    return null;
  }

  function ServicesDetail() {
    const [active, setActive] = React.useState(services[0].id);

    React.useEffect(() => {
      const els = services
        .map((s) => document.getElementById(s.id))
        .filter(Boolean);
      if (!els.length) return;
      const io = new IntersectionObserver(
        (entries) => {
          const visible = entries
            .filter((e) => e.isIntersecting)
            .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
          if (visible[0]) setActive(visible[0].target.id);
        },
        { rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] }
      );
      els.forEach((el) => io.observe(el));
      return () => io.disconnect();
    }, []);

    const goTo = (id) => {
      const el = document.getElementById(id);
      if (!el) return;
      const offset = 80;
      const top = el.getBoundingClientRect().top + window.scrollY - offset;
      window.scrollTo({ top, behavior: 'smooth' });
    };

    return (
      <>
        <aside className="dg-svc-side-nav" aria-label="Naviga i servizi">
          <ul>
            {services.map((s) => (
              <li key={s.id}>
                <button
                  type="button"
                  className={`dg-svc-side-link ${active === s.id ? 'is-active' : ''}`}
                  onClick={() => goTo(s.id)}
                  aria-current={active === s.id ? 'true' : undefined}
                >
                  <span className="dg-svc-side-label">
                    <span className="dg-svc-side-n">{s.n}</span>
                    <span>{s.short}</span>
                  </span>
                  <span className="dg-svc-side-dot" />
                </button>
              </li>
            ))}
          </ul>
        </aside>

        <section className="dg-svc-detail">
          {services.map((s, i) => (
            <article
              id={s.id}
              key={s.id}
              className={`dg-svc-row ${i % 2 ? 'is-flip' : ''} ${s.featured ? 'is-featured' : ''}`}
            >
              <div className="dg-svc-row-media dg-reveal">
                <div className="dg-svc-row-photo">
                  <img src={s.visual.src} alt={s.title} loading="lazy" />
                  <div className="dg-svc-row-photo-tag">
                    <Icon name={s.icon} size={16} />
                    <span>{s.short}</span>
                  </div>
                </div>
              </div>

              <div className="dg-svc-row-body dg-reveal" style={{ transitionDelay: '120ms' }}>
                <div className="dg-svc-row-num">{s.n}</div>
                <div className="dg-overline">
                  {s.featured ? 'Soluzione di punta' : 'Servizio'}
                </div>
                <h2 className="dg-svc-row-title">{s.title}</h2>
                <p className="dg-svc-row-lead">{s.lead}</p>
                <div className="dg-svc-row-flow">
                  {s.body.map((item, j) => (
                    <BodyItem key={j} item={item} />
                  ))}
                </div>
              </div>
            </article>
          ))}
        </section>
      </>
    );
  }

  window.ServicesDetail = ServicesDetail;
})();