function FAQPage() {
  const [open, setOpen] = React.useState(-1);

  const items = [
    {
      q: 'Quando posso presentare il modello 730?',
      a: 'Il 730 si può presentare da metà aprile fino al 30 settembre. Le consigliamo di prenotare entro maggio per evitare i picchi di lavoro estivi.',
    },
    {
      q: 'Devo prendere appuntamento o posso passare in studio?',
      a: 'Riceviamo solo su appuntamento. Può scriverci via email o chiamare il (+39) 090-981-3440 negli orari di apertura.',
    },
    {
      q: 'Quali documenti devo portare per il 730?',
      a: 'CU del datore di lavoro o ente pensionistico, eventuali documenti di spese sanitarie, mutuo, ristrutturazioni e codice fiscale dei familiari a carico.',
    },
    {
      q: 'Lo studio si occupa anche di NASpI e pensioni?',
      a: 'Sì. Tramite patronato gestiamo domanda di NASpI, pensione di vecchiaia, anticipata, di reversibilità, assegno unico e invalidità civile.',
    },
    {
      q: 'Quanto costa una consulenza?',
      a: 'Il primo incontro conoscitivo è sempre gratuito. Il costo delle pratiche dipende dalla complessità e Le viene comunicato in modo trasparente prima di procedere.',
    },
  ];

  React.useEffect(() => {
    const schema = {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: items.map(item => ({
        '@type': 'Question',
        name: item.q,
        acceptedAnswer: { '@type': 'Answer', text: item.a },
      })),
    };
    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.id = 'as-faq-schema';
    script.text = JSON.stringify(schema);
    document.head.appendChild(script);
    return () => { const el = document.getElementById('as-faq-schema'); if (el) el.remove(); };
  }, []);

  return (
    <section className="as-section as-section-cream">
      <div className="as-container as-narrow">
        <span className="as-eyebrow">DOMANDE FREQUENTI</span>
        <h2 style={{ marginBottom: 32 }}>Le risposte alle domande più comuni.</h2>
        <div className="as-faq">
          {items.map((it, i) => (
            <div key={i} className={`as-faq-item${open === i ? ' is-open' : ''}`}>
              <button className="as-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="as-faq-chev">{open === i ? '–' : '+'}</span>
              </button>
              <div className={`as-faq-a${open === i ? ' is-open' : ''}`}>
                <p>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const W3F_KEY = 'e5da57af-8fee-4085-8aea-7afc6409169c';

function EmailForm() {
  const [name,    setName]    = React.useState('');
  const [email,   setEmail]   = React.useState('');
  const [subject, setSubject] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [status,  setStatus]  = React.useState('idle'); /* idle | sending | ok | error */

  const ready = name.trim() && email.trim() && message.trim();

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!ready) return;
    setStatus('sending');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: W3F_KEY,
          name, email,
          subject: subject || 'Nuovo messaggio da annaserra.it',
          message,
        }),
      });
      const data = await res.json();
      setStatus(data.success ? 'ok' : 'error');
    } catch {
      setStatus('error');
    }
  };

  if (status === 'ok') {
    return (
      <div className="as-form">
        <div className="as-form-ok">Grazie, {name.split(' ')[0]}. Le risponderemo entro 24 ore lavorative.</div>
      </div>
    );
  }

  return (
    <form className="as-form" onSubmit={handleSubmit}>
      <div className="as-form-row">
        <label htmlFor="ef-name">Nome e Cognome</label>
        <input id="ef-name" className="as-input" placeholder="Mario Rossi" value={name} onChange={e => setName(e.target.value)} required />
      </div>
      <div className="as-form-row">
        <label htmlFor="ef-email">Email</label>
        <input id="ef-email" type="email" className="as-input" placeholder="lei@esempio.it" value={email} onChange={e => setEmail(e.target.value)} required />
      </div>
      <div className="as-form-row">
        <label htmlFor="ef-subject">Oggetto</label>
        <input id="ef-subject" className="as-input" placeholder="Es. Modello 730" value={subject} onChange={e => setSubject(e.target.value)} />
      </div>
      <div className="as-form-row">
        <label htmlFor="ef-msg">Messaggio</label>
        <textarea id="ef-msg" className="as-input" placeholder="Scriva il testo del Suo messaggio…" rows="5" value={message} onChange={e => setMessage(e.target.value)} required />
      </div>
      {status === 'error' && (
        <div className="as-form-err">Si è verificato un errore. Riprovi o ci scriva direttamente a info@annaserra.it.</div>
      )}
      <button className="btn btn-primary btn-lg" type="submit" disabled={!ready || status === 'sending'}>
        {status === 'sending' ? 'Invio in corso…' : 'Invia email'}
      </button>
    </form>
  );
}

function WhatsAppForm() {
  const [name, setName] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const href = `https://wa.me/393792800002?text=${encodeURIComponent(`Salve, sono ${name || '…'}.\n\n${msg || ''}`)}`;
  const ready = name.trim() && msg.trim();
  return (
    <form className="as-form" onSubmit={(e) => { e.preventDefault(); if (ready) window.open(href, '_blank'); }}>
      <div className="as-form-row">
        <label htmlFor="wf-name">Nome e Cognome</label>
        <input id="wf-name" className="as-input" placeholder="Mario Rossi" value={name} onChange={(e) => setName(e.target.value)} required />
      </div>
      <div className="as-form-row">
        <label htmlFor="wf-subject">Oggetto</label>
        <input id="wf-subject" className="as-input" placeholder="Es. Modello 730" />
      </div>
      <div className="as-form-row">
        <label htmlFor="wf-msg">Messaggio</label>
        <textarea id="wf-msg" className="as-input" placeholder="Scriva il testo del Suo messaggio…" rows="5" value={msg} onChange={(e) => setMsg(e.target.value)} required />
      </div>
      <div className="as-form-hint">
        Premendo "Apri WhatsApp" verrà reindirizzato all'app con il messaggio già compilato.
      </div>
      {ready
        ? <a href={href} target="_blank" rel="noopener noreferrer" className="btn btn-whatsapp btn-lg">Apri WhatsApp →</a>
        : <button className="btn btn-whatsapp btn-lg" type="button" disabled>Apri WhatsApp →</button>
      }
    </form>
  );
}

function ContattiPage({ consent, onNav }) {
  const [mode, setMode] = React.useState('email');
  return (
    <section className="as-section as-section-cream">
      <div className="as-container as-contatti">
        <div className="as-contatti-info">
          <span className="as-eyebrow">CONTATTI</span>
          <h2>Trova lo studio.</h2>
          <p className="lead">Riceviamo su appuntamento in Vicolo Grappa, 21.</p>
          <div className="as-fields-stack">
            <div className="as-field">
              <h6 className="as-field-h">Indirizzo</h6>
              <p>Vicolo Grappa, 21 — Lipari (ME) 98055</p>
            </div>
            <div className="as-field">
              <h6 className="as-field-h">Telefono</h6>
              <p>Tel: (+39) 090-981-3440<br />Cell: (+39) 379-280-0002</p>
            </div>
            <div className="as-field">
              <h6 className="as-field-h">Email</h6>
              <p>info@annaserra.it</p>
            </div>
            <div className="as-field">
              <h6 className="as-field-h">Orario</h6>
              <p>Lun · Mer · Ven 9:00–13:00<br />Mar · Gio 15:00–19:00</p>
            </div>
          </div>
        </div>
        <div className="as-form-wrap">
          <div className="as-form-tabs" data-mode={mode} role="tablist">
            <button
              role="tab"
              className={`as-form-tab${mode === 'email' ? ' is-active' : ''}`}
              onClick={() => setMode('email')}
            >
              Email
            </button>
            <button
              role="tab"
              className={`as-form-tab${mode === 'whatsapp' ? ' is-active' : ''}`}
              onClick={() => setMode('whatsapp')}
            >
              WhatsApp
            </button>
          </div>
          {mode === 'email' ? <EmailForm /> : <WhatsAppForm />}
        </div>
      </div>

      <div className="as-container">
        <div className="as-map-wrap">
          <div className="as-map-label">
            <span>Studio Anna Serra · Vicolo Grappa, 21 · Lipari</span>
            <a
              href="https://www.google.com/maps/search/?api=1&query=Vicolo+Grappa+21+Lipari+ME+98055"
              target="_blank"
              rel="noopener noreferrer"
              className="as-map-open"
            >
              Apri in Google Maps →
            </a>
          </div>
          {consent === 'accepted' ? (
            <iframe
              title="Posizione studio Anna Serra"
              src="https://maps.google.com/maps?q=Vicolo+Grappa+21,+Lipari,+ME,+98055&z=15&output=embed"
              width="100%" height="400"
              style={{ border: 0, display: 'block' }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          ) : (
            <div className="as-map-blocked">
              <p>
                La mappa non è disponibile perché i cookie di terze parti non sono stati accettati.
              </p>
              <div className="as-map-blocked-actions">
                <a
                  href="https://www.google.com/maps/search/?api=1&query=Vicolo+Grappa+21+Lipari+ME+98055"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-secondary"
                >
                  Apri in Google Maps →
                </a>
                {consent !== 'accepted' && onNav && (
                  <button className="btn btn-ghost" onClick={() => {
                    localStorage.setItem('as_cookie_consent', 'accepted');
                    window.dispatchEvent(new Event('as_consent_changed'));
                  }}>
                    Accetta i cookie e mostra la mappa
                  </button>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function ScadenzePage() {
  const [rows, setRows] = React.useState([]);

  React.useEffect(() => {
    fetch('data/scadenze.json')
      .then(r => r.json())
      .then(setRows)
      .catch(() => {});
  }, []);

  return (
    <section className="as-section as-section-cream">
      <div className="as-container as-narrow">
        <span className="as-eyebrow">SCADENZE FISCALI</span>
        <h2>Le date da segnare in agenda.</h2>
        <p className="lead" style={{ marginBottom: 32 }}>
          Aggiornato a maggio 2026. Le invieremo un promemoria via email se ce lo richiede in studio.
        </p>
        <div className="as-table">
          {rows.map((r, i) => (
            <div key={i} className="as-table-row">
              <div className="as-table-date">{r.d}</div>
              <div className="as-table-title">{r.t}</div>
              <div>
                <span className={`as-badge ${r.tag === 'In evidenza' ? 'as-badge-amber' : 'as-badge-soft'}`}>
                  {r.tag}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ChiSiamoPage() {
  return (
    <section className="as-section as-section-cream">
      <div className="as-container as-narrow">
        <span className="as-eyebrow">CHI SIAMO</span>
        <h2>Uno studio, una persona, un'isola.</h2>
        <p className="lead">
          Anna Serra è Consulente del Lavoro iscritta all'Ordine, con sede operativa a Lipari, nelle Eolie.
        </p>
        <p>
          Lo studio nasce per offrire ai residenti dell'arcipelago un punto di riferimento stabile
          per le pratiche fiscali, previdenziali e di lavoro: dalla busta paga del primo dipendente
          all'invio del 730, dalla domanda di pensione alla pratica di successione.
        </p>
        <p>
          Lavoriamo in modo riservato, senza fretta, con un'unica regola: rispondere a chi scrive entro 24 ore.
        </p>
        <div className="as-bio-stats">
          <div className="as-stat"><b>2014</b><small>Apertura studio</small></div>
          <div className="as-stat"><b>+800</b><small>Pratiche all'anno</small></div>
          <div className="as-stat"><b>24h</b><small>Tempo di risposta</small></div>
        </div>
      </div>
    </section>
  );
}

function ServiziPage({ onNav }) {
  return <HomePage onNav={onNav} />;
}

function PrivacyPolicyPage({ onNav }) {
  return (
    <section className="as-section as-section-cream">
      <div className="as-container as-narrow">
        <span className="as-eyebrow">INFORMATIVA</span>
        <h2>Privacy Policy</h2>
        <p className="lead">Aggiornata al 10 maggio 2026 — ai sensi del Reg. UE 679/2016 (GDPR)</p>
        <div className="as-policy-body">
          <h3>1. Titolare del trattamento</h3>
          <p>Anna Serra, Consulente del Lavoro<br />
          Vicolo Grappa, 21 · 98055 Lipari (ME)<br />
          <a href="mailto:info@annaserra.it">info@annaserra.it</a> · (+39) 090-981-3440</p>

          <h3>2. Dati raccolti</h3>
          <p>Quando compila il modulo di contatto raccogliamo: nome e cognome, indirizzo email e il testo del messaggio inviato. Non raccogliamo dati sensibili né utilizziamo sistemi di profilazione automatica.</p>

          <h3>3. Finalità e base giuridica</h3>
          <p>I dati vengono trattati esclusivamente per rispondere alla Sua richiesta di contatto. La base giuridica è il consenso prestato al momento dell'invio del modulo (art. 6, par. 1, lett. a, GDPR).</p>

          <h3>4. Conservazione</h3>
          <p>I dati sono conservati per il tempo strettamente necessario a evadere la richiesta, e comunque non oltre 24 mesi dalla ricezione del messaggio.</p>

          <h3>5. Destinatari</h3>
          <p>I dati vengono trasmessi a <b>Web3Forms</b> (Cybrancee Inc.), utilizzato come sistema di recapito delle email. Web3Forms non utilizza i dati per finalità proprie. Per maggiori informazioni: <a href="https://web3forms.com/privacy" target="_blank" rel="noopener noreferrer">web3forms.com/privacy</a>.</p>

          <h3>6. Trasferimenti extra-UE</h3>
          <p>Web3Forms può processare i dati su server situati fuori dall'Unione Europea. Il trasferimento avviene nel rispetto delle garanzie previste dal GDPR (Standard Contractual Clauses).</p>

          <h3>7. I Suoi diritti</h3>
          <p>Ha diritto di accedere ai Suoi dati, chiederne la rettifica o la cancellazione, opporsi al trattamento, richiederne la limitazione o la portabilità. Può revocare il consenso in qualsiasi momento. Per esercitare questi diritti scriva a <a href="mailto:info@annaserra.it">info@annaserra.it</a>.</p>
          <p>Ha inoltre il diritto di proporre reclamo all'Autorità Garante per la protezione dei dati personali (<a href="https://www.garanteprivacy.it" target="_blank" rel="noopener noreferrer">garanteprivacy.it</a>).</p>

          <h3>8. Cookie</h3>
          <p>Per informazioni sui cookie utilizzati da questo sito consulti la <a href="#" onClick={(e) => { e.preventDefault(); onNav('cookie-policy'); }}>Cookie Policy</a>.</p>
        </div>
      </div>
    </section>
  );
}

function CookiePolicyPage({ onNav }) {
  return (
    <section className="as-section as-section-cream">
      <div className="as-container as-narrow">
        <span className="as-eyebrow">INFORMATIVA</span>
        <h2>Cookie Policy</h2>
        <p className="lead">Aggiornata al 10 maggio 2026 — ai sensi della Direttiva ePrivacy e del GDPR</p>
        <div className="as-policy-body">
          <h3>Cosa sono i cookie</h3>
          <p>I cookie sono piccoli file di testo salvati dal browser durante la navigazione. Possono essere impostati dal sito stesso ("cookie di prima parte") o da servizi esterni ("cookie di terze parti").</p>

          <h3>Cookie di prima parte</h3>
          <p>Questo sito non imposta alcun cookie di prima parte. La preferenza relativa al consenso viene salvata <em>localmente</em> nel Suo browser tramite <code>localStorage</code>, senza coinvolgere server esterni.</p>

          <h3>Cookie di terze parti — Google Maps</h3>
          <p>Previa accettazione del consenso, la pagina Contatti carica una mappa interattiva tramite <b>Google Maps</b> (Google LLC, 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA). Il servizio può impostare cookie tecnici e analitici propri. Consulti la privacy policy di Google: <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">policies.google.com/privacy</a>.</p>
          <p>Se non presta il consenso, la mappa non viene caricata e Google non riceve alcun dato dalla Sua visita.</p>

          <h3>Gestione del consenso</h3>
          <p>Alla prima visita compare un banner che Le chiede di accettare o rifiutare i cookie di terze parti. La Sua scelta viene memorizzata localmente nel browser. Può cambiare la Sua preferenza svuotando la cronologia del browser oppure scrivendoci a <a href="mailto:info@annaserra.it">info@annaserra.it</a>.</p>

          <h3>Disabilitare i cookie dal browser</h3>
          <p>Può configurare il browser per bloccare o eliminare tutti i cookie. Attenzione: questa operazione potrebbe compromettere il funzionamento di alcuni siti web.</p>
          <ul className="as-policy-list">
            <li><a href="https://support.google.com/chrome/answer/95647" target="_blank" rel="noopener noreferrer">Google Chrome</a></li>
            <li><a href="https://support.mozilla.org/it/kb/Attivare%20e%20disattivare%20i%20cookie" target="_blank" rel="noopener noreferrer">Mozilla Firefox</a></li>
            <li><a href="https://support.apple.com/it-it/guide/safari/sfri11471/mac" target="_blank" rel="noopener noreferrer">Apple Safari</a></li>
            <li><a href="https://support.microsoft.com/it-it/microsoft-edge/eliminare-i-cookie-in-microsoft-edge-63947406-40ac-c3b8-57b9-2a946a29ae09" target="_blank" rel="noopener noreferrer">Microsoft Edge</a></li>
          </ul>

          <h3>Contatti</h3>
          <p>Per qualsiasi domanda relativa ai cookie scriva a <a href="mailto:info@annaserra.it">info@annaserra.it</a>. Per l'informativa sul trattamento dei dati personali consulti la <a href="#" onClick={(e) => { e.preventDefault(); onNav('privacy'); }}>Privacy Policy</a>.</p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQPage, ContattiPage, ScadenzePage, ChiSiamoPage, ServiziPage, PrivacyPolicyPage, CookiePolicyPage });