const FAQPage = () => {
  const [openIndex, setOpenIndex] = React.useState(null);

  const problemsSolved = [
    { 
      title: 'Organizzazione delle Informazioni', 
      description: 'Il nostro processo guidato ti aiuta a raccogliere e strutturare sistematicamente tutte le informazioni necessarie, evitando di dimenticare dati importanti.',
      icon: '📋'
    },
    { 
      title: 'Riduzione degli Errori', 
      description: 'Il questionario ti aiuta a evitare errori comuni nella preparazione autonoma, come omissioni o incompletezza dei dati.',
      icon: '✓'
    },
    { 
      title: 'Preparazione alla Consulenza', 
      description: 'Ti permette di arrivare preparato dal professionista con documenti strutturati, ottimizzando tempo e costi.',
      icon: '💼'
    }
  ];

  const targetAudience = [
    { 
      title: 'Situazioni Semplici', 
      description: 'Ideale per chi ha una situazione patrimoniale e familiare semplice e vuole organizzare le informazioni.'
    },
    { 
      title: 'Chi Vuole Prepararsi', 
      description: 'Adatto a chi desidera strutturare le informazioni prima della consulenza con un professionista.'
    },
    { 
      title: 'Chi Cerca Chiarezza', 
      description: 'Utile per chi vuole un processo guidato che aiuti a considerare tutti gli aspetti rilevanti.'
    }
  ];

  const faqs = [
    {
      question: "Che tipo di servizio offrite?",
      answer: "Offriamo un servizio di preparazione documentale basato su modelli informativi. Ti guidiamo passo-passo nella raccolta e strutturazione delle informazioni necessarie per documenti successori. I documenti generati sono modelli informativi che richiedono verifica da parte di un professionista legale qualificato. Il nostro servizio ti aiuta a organizzare le informazioni, ridurre errori comuni e prepararti per la consulenza professionale."
    },
    {
      question: "Quali problemi pratici risolve questo servizio?",
      answer: "Il servizio ti aiuta a: 1) Strutturare e organizzare le informazioni in modo sistematico, 2) Evitare omissioni e errori comuni nella preparazione autonoma, 3) Arrivare preparato alla consulenza legale con documenti già strutturati, 4) Considerare tutti gli aspetti rilevanti (beni, eredi, legittima, disposizioni). Questo non sostituisce la consulenza legale, ma facilita il lavoro successivo con un professionista."
    },
    {
      question: "Il documento creato è legalmente vincolante?",
      answer: "Il nostro servizio fornisce modelli documentali informativi basati sui principi generali del diritto civile italiano. Questi modelli devono essere verificati e, se necessario, validati da un professionista legale (avvocato o notaio) prima dell'utilizzo. La validità legale finale dipende dalla corretta esecuzione secondo le leggi italiane e dalla verifica professionale."
    },
    {
      question: "Per chi è adatto questo servizio?",
      answer: "Il servizio è particolarmente utile per: persone con situazioni patrimoniali e familiari relativamente semplici; chi vuole prepararsi e organizzare le informazioni prima di consultare un professionista; chi cerca un processo guidato per evitare omissioni. Per situazioni complesse, il servizio aiuta a strutturare i dati, ma la consulenza professionale diventa ancora più essenziale."
    },
    {
      question: "Quanto tempo richiede il processo?",
      answer: "Il questionario richiede generalmente 15-30 minuti per essere completato, a seconda della complessità della tua situazione. Puoi salvare i progressi e tornare in qualsiasi momento. Il tempo investito ti aiuta a raccogliere informazioni complete, riducendo il tempo (e i costi) necessari successivamente con un professionista legale."
    },
    {
      question: "Cosa ricevo dopo aver completato il questionario?",
      answer: "Riceverai un documento in formato PDF basato sulle informazioni fornite. Questo modello informativo include tutte le informazioni strutturate secondo i principi della normativa italiana. Il documento è pronto per essere revisionato da un professionista legale qualificato che potrà validarlo, modificarlo se necessario e assicurarsi della sua conformità alla tua situazione specifica."
    },
    {
      question: "Ho bisogno di un avvocato o notaio?",
      answer: "Sì. Il nostro servizio fornisce modelli documentali informativi che ti aiutano a organizzare le informazioni, ma per qualsiasi documento successorio è necessario consultare un professionista legale qualificato. L'avvocato o notaio potrà: verificare la conformità legale, adattare il documento alla tua situazione specifica, assicurare il rispetto della normativa vigente e, quando necessario, autenticare il documento."
    },
    {
      question: "Qual è la differenza tra testamento olografo e pubblico?",
      answer: "Un testamento olografo deve essere scritto interamente a mano, datato e firmato dal testatore, senza bisogno di testimoni o notaio. Un testamento pubblico è redatto da un notaio alla presenza di due testimoni, offrendo maggiore sicurezza nella conservazione. Il nostro servizio ti aiuta a organizzare le informazioni per entrambi i tipi, ma la redazione finale e la scelta del tipo più adatto alla tua situazione devono essere fatte con un professionista."
    },
    {
      question: "Come vengono protetti i miei dati?",
      answer: "Utilizziamo crittografia a 256 bit per proteggere le tue informazioni durante la trasmissione e l'archiviazione. I dati vengono conservati su server sicuri in conformità con il GDPR. Le tue informazioni personali e patrimoniali sono trattate con la massima riservatezza e non vengono mai condivise con terze parti senza il tuo esplicito consenso."
    },
    {
      question: "Che tipo di supporto offrite?",
      answer: "Il nostro team di supporto può assisterti con: questioni tecniche relative all'uso della piattaforma, aiuto nella compilazione del questionario, spiegazioni sul processo di preparazione documentale. Non forniamo consulenza legale o fiscale. Per domande legali specifiche sulla tua situazione, ti indirizzeremo a consultare un avvocato qualificato."
    },
    {
      question: "Posso modificare il documento in seguito?",
      answer: "Puoi accedere alla piattaforma in qualsiasi momento e generare nuovi documenti basati su informazioni aggiornate. Questo è utile se la tua situazione cambia (nuovi beni, cambiamenti familiari, ecc.). Ricorda che qualsiasi modifica a documenti successori già validati deve essere verificata da un professionista legale qualificato."
    },
    {
      question: "Offrite rimborsi?",
      answer: "Puoi richiedere un rimborso entro 30 giorni dall'acquisto se non sei soddisfatto del servizio tecnico offerto. I rimborsi sono soggetti ai nostri termini e condizioni e si applicano solo ai servizi non ancora utilizzati. La politica di rimborso copre il servizio di preparazione documentale, non eventuali consulenze legali successive che sono responsabilità del professionista scelto."
    }
  ];

  return React.createElement('div', {},
    // Hero Section
    React.createElement('section', { style: { background: 'linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%)', padding: '3rem 0' } },
      React.createElement('div', { className: 'section-container' },
        React.createElement(SectionHeader, {
          title: 'Domande Frequenti',
          subtitle: 'Tutto quello che devi sapere sul nostro servizio di preparazione documentale'
        }),
        React.createElement('p', { style: { fontSize: '0.875rem', color: '#6b7280', fontStyle: 'italic', textAlign: 'center', marginTop: '1rem', maxWidth: '800px', margin: '1rem auto 0' } }, 'Servizio di preparazione documentale basato su modelli informativi. Non sostituisce la consulenza di un professionista.')
      )
    ),

    // Quali Problemi Risolve Section
    React.createElement('section', { style: { background: 'var(--gray-50)' } },
      React.createElement('div', { className: 'section-container' },
        React.createElement('h2', { className: 'text-center mb-4', style: { fontSize: '2rem', fontWeight: 'bold' } }, 'Come Ti Aiutiamo'),
        React.createElement('p', { className: 'text-center mb-8', style: { maxWidth: '700px', margin: '0 auto 2rem', fontSize: '1rem', color: '#4b5563' } }, 'Il nostro servizio risolve problemi pratici nella preparazione di documenti successori:'),
        React.createElement('div', { className: 'grid grid-3', style: { gap: '1.5rem' } },
          problemsSolved.map((problem, idx) =>
            React.createElement(Card, { key: idx, style: { height: '100%', textAlign: 'center' } },
              React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '0.75rem' } }, problem.icon),
              React.createElement('h3', { style: { fontSize: '1.1rem', marginBottom: '0.75rem', color: '#1f2937' } }, problem.title),
              React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6', margin: 0, fontSize: '0.95rem' } }, problem.description)
            )
          )
        )
      )
    ),

    // Per Chi è Adatto Section
    React.createElement('section', {},
      React.createElement('div', { className: 'section-container' },
        React.createElement('h2', { className: 'text-center mb-4', style: { fontSize: '2rem', fontWeight: 'bold' } }, 'Per Chi è Adatto'),
        React.createElement('p', { className: 'text-center mb-8', style: { maxWidth: '700px', margin: '0 auto 2rem', fontSize: '1rem', color: '#4b5563' } }, 'Questo strumento è particolarmente utile per:'),
        React.createElement('div', { className: 'grid grid-3', style: { gap: '1.5rem' } },
          targetAudience.map((audience, idx) =>
            React.createElement(Card, { key: idx, style: { height: '100%' } },
              React.createElement('h3', { style: { fontSize: '1.1rem', marginBottom: '0.75rem', color: '#1f2937' } }, audience.title),
              React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6', margin: 0, fontSize: '0.95rem' } }, audience.description)
            )
          )
        )
      )
    ),

    // FAQ Section
    React.createElement('section', { style: { background: 'var(--gray-50)' } },
      React.createElement('div', { className: 'section-container' },
        React.createElement('h2', { className: 'text-center mb-8', style: { fontSize: '2rem', fontWeight: 'bold' } }, 'Domande e Risposte'),
        React.createElement('h2', { className: 'text-center mb-8', style: { fontSize: '2rem', fontWeight: 'bold' } }, 'Domande e Risposte'),

        React.createElement('style', {}, `
          @media (max-width: 768px) {
            .faq-grid-container {
              grid-template-columns: 1fr !important;
            }
          }
        `),

        React.createElement('div', { 
          className: 'faq-grid-container',
          style: { 
            display: 'grid', 
            gridTemplateColumns: '3fr 1fr', 
            gap: '3rem', 
            alignItems: 'flex-start' 
          } 
        },
          // Main FAQ Section
          React.createElement('div', { className: 'mt-8' },
            faqs.map((faq, index) => 
              React.createElement('div', { key: index, className: 'faq-item' },
                React.createElement('div', {
                  className: 'faq-question',
                  onClick: () => setOpenIndex(openIndex === index ? null : index)
                },
                  React.createElement('h3', { className: 'mb-0' }, faq.question),
                  React.createElement('div', { 
                    className: 'faq-toggle',
                    style: { 
                      transform: openIndex === index ? 'rotate(180deg)' : 'rotate(0deg)',
                      transition: 'transform 0.3s ease'
                    }
                  }, Icon.ChevronDown())
                ),
                openIndex === index && React.createElement('div', { 
                  className: 'faq-answer',
                  style: { 
                    padding: '1.5rem',
                    lineHeight: '1.7',
                    color: '#4a5568',
                    maxHeight: 'none',
                    overflow: 'visible'
                  }
                }, faq.answer)
              )
            )
          ),

          // Aside Section
          React.createElement('aside', { className: 'mt-8' },
            React.createElement(Card, { 
              className: 'card',
              style: { 
                position: 'sticky', 
                top: '2rem', 
                marginBottom: '2rem',
                boxShadow: '0 10px 30px rgba(0,0,0,0.1)',
                border: '1px solid #e2e8f0'
              } 
            },
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' } },
                React.createElement('div', { style: { color: '#7c3aed', fontSize: '1.5rem' } }, Icon.Mail()),
                React.createElement('h3', { style: { fontSize: '1.25rem', margin: '0', color: '#1a202c' } }, 'Hai bisogno di aiuto?')
              ),
              React.createElement('p', { style: { fontSize: '0.9rem', color: '#718096', marginBottom: '1.5rem', lineHeight: '1.6' } }, 
                'Il nostro team di supporto tecnico è disponibile per aiutarti'
              ),
              React.createElement('p', { style: { fontSize: '0.8rem', color: '#6b7280', marginBottom: '1rem', lineHeight: '1.4', fontStyle: 'italic' } }, 
                'Servizio di preparazione documentale basato su modelli informativi. Non sostituisce la consulenza di un professionista.'
              ),

              React.createElement('a', { 
                href: 'mailto:info@acantheose.com',
                style: { textDecoration: 'none', width: '100%' }
              },
                React.createElement(Button, { style: { width: '100%' } }, 'Invia Email →')
              ),

              React.createElement('div', { 
                style: { 
                  marginTop: '1.5rem',
                  paddingTop: '1.5rem',
                  borderTop: '1px solid #e2e8f0'
                } 
              },
                React.createElement('h4', { style: { fontSize: '0.95rem', marginBottom: '1rem', color: '#1a202c', fontWeight: '600' } }, 'Risorse Utili'),
                React.createElement('ul', { style: { listStyle: 'none', padding: 0, margin: 0 } },
                  React.createElement('li', { style: { marginBottom: '0.65rem' } },
                    React.createElement('a', { 
                      href: '/pricing', 
                      className: 'resource-link',
                      style: { 
                        color: '#7c3aed', 
                        fontSize: '0.9rem', 
                        textDecoration: 'none',
                        display: 'flex',
                        alignItems: 'center',
                        transition: 'all 0.2s',
                        padding: '0.5rem',
                        borderRadius: '0.375rem'
                      },
                      onMouseOver: (e) => e.target.style.background = '#f7fafc',
                      onMouseOut: (e) => e.target.style.background = 'transparent'
                    }, '→ Vedi i Piani')
                  ),
                  React.createElement('li', { style: { marginBottom: '0.65rem' } },
                    React.createElement('a', { 
                      href: '/services', 
                      className: 'resource-link',
                      style: { 
                        color: '#7c3aed', 
                        fontSize: '0.9rem', 
                        textDecoration: 'none',
                        display: 'flex',
                        alignItems: 'center',
                        transition: 'all 0.2s',
                        padding: '0.5rem',
                        borderRadius: '0.375rem'
                      },
                      onMouseOver: (e) => e.target.style.background = '#f7fafc',
                      onMouseOut: (e) => e.target.style.background = 'transparent'
                    }, '→ Tutti i Servizi')
                  ),
                  React.createElement('li', { style: { marginBottom: '0.65rem' } },
                    React.createElement('a', { 
                      href: '/privacy', 
                      className: 'resource-link',
                      style: { 
                        color: '#7c3aed', 
                        fontSize: '0.9rem', 
                        textDecoration: 'none',
                        display: 'flex',
                        alignItems: 'center',
                        transition: 'all 0.2s',
                        padding: '0.5rem',
                        borderRadius: '0.375rem'
                      },
                      onMouseOver: (e) => e.target.style.background = '#f7fafc',
                      onMouseOut: (e) => e.target.style.background = 'transparent'
                    }, '→ Privacy e Sicurezza')
                  )
                )
              )
            ),

            React.createElement(Card, { 
              style: { 
                position: 'sticky', 
                top: '2rem', 
                background: 'linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)', 
                color: 'white',
                boxShadow: '0 20px 40px rgba(6, 182, 212, 0.3)',
                border: 'none'
              } 
            },
              React.createElement('div', { style: { textAlign: 'center' } },
                React.createElement('img', { 
                  src: '/public/images/signature-or-secure-document.webp',
                  alt: 'Documento Sicuro',
                  style: { 
                    width: '100%',
                    height: 'auto',
                    marginBottom: '1rem',
                    borderRadius: '8px'
                  }
                }),
           
                React.createElement('h4', { style: { fontSize: '1.25rem', marginBottom: '0.5rem', color: 'white', fontWeight: '700' } }, 'Inizia Oggi'),
                React.createElement('p', { style: { fontSize: '0.9rem', marginBottom: '1.5rem', opacity: 0.95, lineHeight: '1.5' } }, 
                  'Inizia la preparazione del documento in 15 minuti'
                ),
                React.createElement('p', { style: { fontSize: '0.75rem', marginBottom: '1rem', opacity: 0.9, lineHeight: '1.3', fontStyle: 'italic' } }, 
                  'Servizio di preparazione documentale basato su modelli informativi. Non sostituisce la consulenza di un professionista.'
                ),
                React.createElement('a', { 
                  href: '/pricing',
                  style: { textDecoration: 'none', width: '100%' }
                },
                  React.createElement(Button, {
                    variant: 'outline',
                    style: { 
                      background: 'white',
                      color: '#06b6d4',
                      width: '100%',
                      border: 'none',
                      boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
                    }
                  }, 'Vedi Piani')
                )
              )
            )
          )
        )
      )
    ),

    // CTA Section
    React.createElement('section', { 
      className: 'cta-section',
      style: { 
        backgroundImage: 'url(/public/images/cta-bg.webp)', 
        backgroundSize: 'cover', 
        backgroundPosition: 'center', 
        backgroundAttachment: 'fixed'
      } 
    },
      React.createElement('div', { className: 'section-container text-center' },
        React.createElement('h2', {}, 'Vuoi saperne di più?'),
        React.createElement('p', { className: 'section-subtitle' }, 
          'Scopri i nostri strumenti di preparazione documentale'
        ),
        React.createElement('a', { href: '/services', style: { textDecoration: 'none' } },
          React.createElement(Button, { className: 'mt-4' }, 'Scopri i Servizi →')
        )
      )
    )
  );
};