// StatBand.jsx, Gallery.jsx, Process.jsx, CTABand.jsx, Testimonial.jsx, Sectors.jsx
(function () {
  function StatBand() {
    const stats = [
      { n: '40+', l: 'anni di esperienza' },
      { n: '1200+', l: 'impianti realizzati' },
      { n: '24h', l: 'tempo di risposta medio' },
      { n: '100%', l: 'a norma di legge' },
    ];
    return (
      <section className="dg-statband dg-reveal">
        <div className="dg-statband-inner">
          {stats.map((s, i) => (
            <React.Fragment key={s.l}>
              <div className="dg-stat">
                <div className="dg-stat-n">{s.n}</div>
                <div className="dg-stat-l">{s.l}</div>
              </div>
              {i < stats.length - 1 && <div className="dg-stat-sep" />}
            </React.Fragment>
          ))}
        </div>
      </section>
    );
  }

  const galleryItems = [
    { src: '../../assets/photos/hood-gold-ducting.jpg', tag: 'Ristorante · Milano', span: 'tall' },
    { src: '../../assets/photos/chrome-ductwork-ceiling.jpg', tag: 'Laboratorio · Torino' },
    { src: '../../assets/photos/pizzeria-oven-hood.jpg', tag: 'Pizzeria · Bergamo' },
    { src: '../../assets/photos/butcher-shop-interior.jpg', tag: 'Macelleria · Brescia' },
    { src: '../../assets/photos/photo-02.jpg', tag: 'Ristorante · Verona' },
    { src: '../../assets/photos/commercial-kitchen-hoods.jpg', tag: 'Mensa · Monza', span: 'wide' },
  ];

  function Gallery() {
    const [active, setActive] = React.useState(null);
    return (
      <section className="dg-gallery-section">
        <div className="dg-section-head dg-reveal">
          <div className="dg-overline">Lavori realizzati</div>
          <h2 className="dg-section-title">Da progetto a realtà.</h2>
          <p className="dg-section-sub">
            Alcune installazioni recenti tra ristoranti, pizzerie e attività industriali.
          </p>
        </div>
        <div className="dg-gallery-grid">
          {galleryItems.map((it, i) => (
            <figure
              key={i}
              className={`dg-gallery-item dg-reveal span-${it.span || 'sq'}`}
              style={{ transitionDelay: `${i * 50}ms` }}
              onClick={() => setActive(it)}
            >
              <img src={it.src} alt={it.tag} />
              <figcaption>
                <span>{it.tag}</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="m10 14 11-11"/><path d="M21 14v7h-7"/><path d="m14 10-11 11"/></svg>
              </figcaption>
            </figure>
          ))}
        </div>
        {active && (
          <div className="dg-lightbox" onClick={() => setActive(null)}>
            <img src={active.src} alt={active.tag} />
            <div className="dg-lightbox-tag">{active.tag}</div>
            <button className="dg-lightbox-close" onClick={() => setActive(null)}>×</button>
          </div>
        )}
      </section>
    );
  }

  function Process() {
    const steps = [
      { n: '01', t: 'Ci chiami o scrivi', d: 'Ti richiamiamo entro 24 ore per capire il problema.' },
      { n: '02', t: 'Sopralluogo gratuito', d: 'Veniamo nel tuo locale e analizziamo la situazione.' },
      { n: '03', t: 'Preventivo chiaro', d: 'Soluzione su misura, costi e tempi trasparenti. Niente sorprese.' },
      { n: '04', t: 'Installazione', d: 'Interveniamo con il minor impatto possibile sulla tua attività.' },
      { n: '05', t: 'Assistenza continua', d: 'Manutenzione, pulizia, ispezioni. Siamo qui nel tempo.' },
    ];
    return (
      <section className="dg-process">
        <div className="dg-section-head dg-reveal">
          <div className="dg-overline">Come lavoriamo</div>
          <h2 className="dg-section-title">Cinque passi, senza complicazioni.</h2>
        </div>
        <ol className="dg-process-list">
          {steps.map((s, i) => (
            <li key={s.n} className="dg-process-step dg-reveal" style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="dg-process-n">{s.n}</div>
              <div className="dg-process-body">
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>
    );
  }

  function Sectors() {
    const s = [
      { t: 'Ristorazione', d: 'Ristoranti, pizzerie, trattorie, laboratori.', img: '../../assets/photos/pizzeria-oven-hood.jpg' },
      { t: 'Ho.Re.Ca.', d: 'Hotel, mense, catering, pasticcerie.', img: '../../assets/photos/commercial-kitchen-hoods.jpg' },
      { t: 'Industria', d: 'Falegnamerie, verniciature, laboratori.', img: '../../assets/photos/vent-exterior-white.jpg' },
    ];
    return (
      <section className="dg-sectors">
        <div className="dg-section-head dg-reveal">
          <div className="dg-overline">Per chi lavoriamo</div>
          <h2 className="dg-section-title">Tre settori, lo stesso approccio.</h2>
        </div>
        <div className="dg-sectors-grid">
          {s.map((x, i) => (
            <article key={x.t} className="dg-sector dg-reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="dg-sector-media">
                <img src={x.img} alt="" />
              </div>
              <div className="dg-sector-tag">{String(i + 1).padStart(2, '0')} · Settore</div>
              <div className="dg-sector-content">
                <h3>{x.t}</h3>
                <p>{x.d}</p>
              </div>
            </article>
          ))}
        </div>
      </section>
    );
  }

  function CTABand({ onCta }) {
    return (
      <section className="dg-ctaband">
        <div className="dg-ctaband-inner dg-reveal">
          <div className="dg-overline light">Non aspettare che il problema peggiori</div>
          <h2 className="dg-ctaband-title">
            <span>Fumi, vapori e odori</span>
            <span>compromettono la qualità del tuo <em className="dg-ctaband-highlight">locale</em>?</span>
          </h2>
          <p className="dg-ctaband-sub">
            Impianti su misura, cappe su misura e sistemi a circuito chiuso: progettiamo
            la soluzione giusta per il tuo locale. Parliamone — il sopralluogo è gratuito.
          </p>
          <div className="dg-ctaband-actions">
            <button className="dg-btn dg-btn-white dg-btn-lg" onClick={onCta}>
              Richiedi un sopralluogo gratuito
              <svg width="16" height="16" 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>
            </button>
          </div>
        </div>
      </section>
    );
  }

  function Testimonial() {
    const reviews = [
      { text: '«Ho chiamato per una pizzeria nuova senza canna fumaria. Hanno progettato un impianto a circuito chiuso che funziona perfettamente — e hanno finito in tempo per l\'apertura.»', name: 'Marco B.', role: 'Pizzeria La Piazza · Bergamo' },
      { text: '«Professionisti seri. Ci hanno ristrutturato l\'impianto della cucina in tre giorni, senza fermare il servizio.»', name: 'Silvia T.', role: 'Ristorante Da Nonna Rina · Milano' },
      { text: '«Ispezione con telecamera che ci ha salvato da un intervento inutile. Onesti e competenti.»', name: 'Gianluca R.', role: 'Trattoria Il Rustico · Verona' },
      { text: '«Manutenzione puntuale da anni. Quando chiami rispondono, quando vengono risolvono.»', name: 'Fabrizio M.', role: 'Hotel Centrale · Torino' },
      { text: '«Per la nostra falegnameria hanno studiato un sistema su misura per le polveri sottili. Ambiente di lavoro trasformato.»', name: 'Paola C.', role: 'Falegnameria Colombo · Brescia' },
      { text: '«Lavoro fatto bene, nessuna sorpresa in fattura. Tornerò a chiamarli per il secondo locale.»', name: 'Andrea D.', role: 'Pizzeria Bella Napoli · Como' },
      { text: '«Pulizia condotti seria, con foto e report. Da quando li abbiamo non abbiamo più avuto problemi HACCP.»', name: 'Laura G.', role: 'Catering Buongusto · Monza' },
      { text: '«Hanno realizzato tavoli e cappa inox per la nostra pasticceria. Qualità artigianale vera.»', name: 'Riccardo V.', role: 'Pasticceria Dolcenote · Mantova' },
      { text: '«Sopralluogo gratuito, preventivo chiaro, installazione veloce. Consigliatissimi.»', name: 'Elena P.', role: 'Mensa aziendale · Novara' },
    ];
    const perPage = 3;
    const pages = Math.ceil(reviews.length / perPage);
    const [page, setPage] = React.useState(0);
    const [paused, setPaused] = React.useState(false);

    React.useEffect(() => {
      if (paused) return;
      const id = setInterval(() => setPage((p) => (p + 1) % pages), 7000);
      return () => clearInterval(id);
    }, [pages, paused]);

    const prev = () => setPage((p) => (p - 1 + pages) % pages);
    const next = () => setPage((p) => (p + 1) % pages);

    return (
      <section className="dg-quote">
        <div className="dg-section-head dg-reveal">
          <div className="dg-overline">Dicono di noi</div>
          <h2 className="dg-section-title">Chi ci ha scelto, racconta.</h2>
        </div>
        <div
          className="dg-reviews dg-reveal"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <div className="dg-reviews-viewport">
            <div className="dg-reviews-track" style={{ transform: `translateX(-${page * 100}%)` }}>
              {Array.from({ length: pages }).map((_, pi) => (
                <div className="dg-reviews-page" key={pi} aria-hidden={page !== pi}>
                  {reviews.slice(pi * perPage, pi * perPage + perPage).map((r, ri) => (
                    <article className="dg-review-card" key={ri}>
                      <svg className="dg-review-mark" width="32" height="26" viewBox="0 0 32 26" fill="currentColor" aria-hidden="true">
                        <path d="M0 26V15.6C0 11 0.9 7.2 2.8 4.3C4.7 1.4 7.7 0 11.8 0V4.5C9.6 4.8 7.9 5.6 6.8 6.8C5.8 8 5.1 9.6 4.9 11.7H11.8V26H0ZM19.1 26V15.6C19.1 11 20 7.2 21.9 4.3C23.8 1.4 26.8 0 30.9 0V4.5C28.7 4.8 27 5.6 25.9 6.8C24.9 8 24.2 9.6 24 11.7H30.9V26H19.1Z"/>
                      </svg>
                      <blockquote className="dg-review-text">{r.text}</blockquote>
                      <div className="dg-review-by">
                        <strong>{r.name}</strong>
                        <span>{r.role}</span>
                      </div>
                    </article>
                  ))}
                </div>
              ))}
            </div>
          </div>
          <div className="dg-reviews-controls">
            <button className="dg-reviews-btn" onClick={prev} aria-label="Recensioni precedenti" type="button">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>
            <div className="dg-reviews-dots" role="tablist">
              {Array.from({ length: pages }).map((_, i) => (
                <button
                  key={i}
                  className={`dg-reviews-dot ${i === page ? 'is-active' : ''}`}
                  onClick={() => setPage(i)}
                  aria-label={`Vai al gruppo ${i + 1}`}
                  aria-selected={i === page}
                  role="tab"
                  type="button"
                />
              ))}
            </div>
            <button className="dg-reviews-btn" onClick={next} aria-label="Recensioni successive" type="button">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { StatBand, Gallery, Process, Sectors, CTABand, Testimonial });
})();
