// Pages.jsx — PageHome, PageServizi, PageContatti
(function () {
  const { Hero, ServicesGrid, ServicesDetail, StatBand, Gallery, Process, Sectors, CTABand, Testimonial, ContactForm } = window;

  function PageHome({ onNav }) {
    return (
      <>
        <Hero onNav={onNav} />
        <StatBand />
        <ServicesGrid onNav={onNav} />
        <Sectors />
        <Gallery />
        <Testimonial />
        <CTABand onCta={() => onNav('contatti')} />
      </>
    );
  }

  function PageServizi({ onNav }) {
    return (
      <>
        <section className="dg-pagehead dg-pagehead--center">
          <div className="dg-pagehead-inner dg-reveal">
            <div className="dg-overline">Servizi</div>
            <h1 className="dg-pagehead-title">
              <span>Ogni impianto è una</span>
              <span className="dg-hero-italic">soluzione su misura.</span>
            </h1>
            <p className="dg-pagehead-sub">
              Progettazione, installazione, manutenzione e ispezione. Lavoriamo con ristoranti,
              Ho.Re.Ca. e industrie in tutta Italia — dal piccolo locale al grande laboratorio.
            </p>
          </div>
        </section>
        <ServicesDetail />
        <Process />
        <CTABand onCta={() => onNav('contatti')} />
      </>
    );
  }

  function PageContatti() {
    const [openFaq, setOpenFaq] = React.useState(0);
    const arrow = (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M5 12h14" />
        <path d="m12 5 7 7-7 7" />
      </svg>
    );
    const contacts = [
      {
        href: 'tel:+390000000000',
        value: '+39 000 000 0000',
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.8 12.8 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.8 12.8 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
          </svg>
        ),
      },
      {
        href: 'mailto:info@dgaspirazione.it',
        value: 'info@dgaspirazione.it',
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect width="20" height="16" x="2" y="4" rx="2"/>
            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
          </svg>
        ),
      },
      {
        value: 'Italia · interventi in tutta la penisola',
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
        ),
      },
      {
        value: 'Lun–Ven · 8:00–18:00',
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="12" cy="12" r="10"/>
            <polyline points="12 6 12 12 16 14"/>
          </svg>
        ),
      },
    ];

    const nextSteps = [
      { n: '01', t: 'Riceviamo la richiesta', d: 'Ti chiamiamo entro 24 ore per capire le esigenze del tuo locale.' },
      { n: '02', t: 'Sopralluogo gratuito', d: 'Veniamo a vedere di persona il locale, senza impegno.' },
      { n: '03', t: 'Preventivo chiaro', d: 'Soluzione su misura, costi e tempi trasparenti. Niente sorprese.' },
    ];

    const faqs = [
      {
        q: 'Il sopralluogo è davvero gratuito?',
        a: 'Sì. Veniamo nel tuo locale, valutiamo la situazione e ti diamo un parere tecnico senza alcun costo né impegno. Il preventivo arriva solo dopo, in caso di interesse.',
      },
      {
        q: 'Posso aprire un locale anche senza canna fumaria?',
        a: 'In molti casi sì. Con un sistema a circuito chiuso progettato correttamente — filtri ad alta efficienza, abbattitori di odori e ricircolo dell\'aria — puoi gestire fumi e vapori anche dove un\'espulsione tradizionale non è realizzabile. Verifichiamo la fattibilità durante il sopralluogo.',
      },
      {
        q: 'Quanto tempo richiede l\'installazione di un impianto?',
        a: 'Dipende dalla complessità. Per una cappa singola si va da 1 a 2 settimane. Per un impianto completo i tempi variano da 3 settimane a 2 mesi, in base ai materiali, alle autorizzazioni e alla disponibilità del cantiere.',
      },
      {
        q: 'Lavorate in tutta Italia?',
        a: 'Sì. Interveniamo su tutto il territorio nazionale, sia per nuove installazioni sia per manutenzione e ispezioni.',
      },
      {
        q: 'Ogni quanto va pulito un impianto di aspirazione?',
        a: 'Le linee guida HACCP e dei Vigili del Fuoco indicano frequenze minime in base al tipo di cottura. Una pulizia annuale è il riferimento per la maggior parte delle cucine; per locali ad alto utilizzo o cotture grasse (frittura, griglia) può essere semestrale o trimestrale.',
      },
      {
        q: 'Come capisco se il mio impianto ha bisogno di interventi?',
        a: 'Con un\'ispezione con telecamera analizziamo lo stato interno di condotti e ventole senza smontaggi. In poche ore hai un quadro reale dell\'impianto e sai esattamente se e dove serve intervenire.',
      },
    ];

    return (
      <>
        <section className="dg-pagehead dg-pagehead--center">
          <div className="dg-pagehead-inner dg-reveal">
            <div className="dg-overline">Contattaci</div>
            <h1 className="dg-pagehead-title">
              <span>Raccontaci il tuo</span>
              <span className="dg-hero-italic">progetto.</span>
            </h1>
            <p className="dg-pagehead-sub">
              Sopralluogo gratuito entro 24 ore. Senza impegno, senza pressioni —
              solo una valutazione tecnica seria sul tuo locale.
            </p>
          </div>
        </section>

        <section className="dg-cnt-split">
          <div className="dg-cnt-split-inner">
            <div className="dg-cnt-info dg-reveal">
              <div className="dg-overline">Mettiti in contatto</div>
              <h2 className="dg-cnt-info-title">
                <span>Scegli il canale,</span>{' '}
                <span className="dg-hero-italic">noi rispondiamo.</span>
              </h2>
              <p className="dg-cnt-info-sub">
                Telefono, email o il modulo qui a fianco — qualunque scelga, ti risponderemo entro 24 ore.
              </p>

              <div className="dg-cnt-info-boxes">
                {contacts.map((c, i) => {
                  const inner = (
                    <>
                      <div className="dg-cnt-info-box-ic">{c.icon}</div>
                      <div className="dg-cnt-info-box-value">{c.value}</div>
                      {c.href && <div className="dg-cnt-info-box-arrow">{arrow}</div>}
                    </>
                  );
                  const style = { transitionDelay: `${i * 60}ms` };
                  return c.href ? (
                    <a
                      key={i}
                      className="dg-cnt-info-box is-link"
                      href={c.href}
                      style={style}
                    >
                      {inner}
                    </a>
                  ) : (
                    <div key={i} className="dg-cnt-info-box" style={style}>
                      {inner}
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="dg-cnt-form-side dg-reveal" style={{ transitionDelay: '140ms' }}>
              <ContactForm />
            </div>
          </div>
        </section>

        <section className="dg-cnt-next">
          <div className="dg-section-head dg-reveal">
            <div className="dg-overline">Cosa succede dopo</div>
            <h2 className="dg-section-title">Tre passi e siamo al lavoro.</h2>
          </div>
          <ol className="dg-cnt-next-list dg-reveal">
            <span className="dg-cnt-next-line" aria-hidden="true" />
            {nextSteps.map((s, i) => (
              <li
                key={s.n}
                className="dg-cnt-next-step dg-reveal"
                style={{ transitionDelay: `${i * 120}ms` }}
              >
                <div className="dg-cnt-next-n">{s.n}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </li>
            ))}
          </ol>
        </section>

        <section className="dg-cnt-faq">
          <div className="dg-section-head dg-reveal">
            <div className="dg-overline">Domande frequenti</div>
            <h2 className="dg-section-title">Le risposte alle domande più comuni.</h2>
          </div>
          <ul className="dg-cnt-faq-list dg-reveal">
            {faqs.map((f, i) => (
              <li
                key={i}
                className={`dg-cnt-faq-item ${openFaq === i ? 'is-open' : ''}`}
              >
                <button
                  type="button"
                  className="dg-cnt-faq-q"
                  onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                  aria-expanded={openFaq === i}
                >
                  <span>{f.q}</span>
                  <span className="dg-cnt-faq-icon" aria-hidden="true">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="6 9 12 15 18 9" />
                    </svg>
                  </span>
                </button>
                <div className="dg-cnt-faq-a">
                  <p>{f.a}</p>
                </div>
              </li>
            ))}
          </ul>
        </section>
      </>
    );
  }

  Object.assign(window, { PageHome, PageServizi, PageContatti });
})();