const ServicesPage = () => {
  const { navigate } = React.useContext(RouterContext);

  const services = [
    { 
      id: 'testamento',
      icon: Icon.FileText, 
      title: 'Testamento ed Eredità', 
      desc: 'Strumenti informativi per la preparazione di modelli documentali testamentari sulla base delle informazioni fornite dall\'utente. I modelli seguono i principi generali del diritto civile italiano.',
      image: '/public/images/professional-reviewing-documents.webp',
      path: '/service/testamento'
    },
    { 
      id: 'pianificazione',
      icon: Icon.TrendingUp, 
      title: 'Pianificazione Successoria', 
      desc: 'Strumenti informativi e modelli documentali per la pianificazione del trasferimento patrimoniale basati sui principi generali della normativa italiana in materia successoria.',
      image: '/public/images/advisor-discussing.webp',
      path: '/service/pianificazione'
    },
    { 
      id: 'trust',
      icon: Icon.Lock, 
      title: 'Servizi di Trust', 
      desc: 'Informazioni e modelli documentali relativi agli strumenti di protezione patrimoniale riconosciuti dalla normativa italiana.',
      image: '/public/images/security-concept.webp',
      path: '/service/trust'
    },
    { 
      id: 'procura',
      icon: Icon.Award, 
      title: 'Procura e Mandato', 
      desc: 'Strumenti informativi per la preparazione di modelli documentali di delega e procura sulla base delle tue indicazioni. I modelli seguono i principi generali della normativa italiana.',
      image: '/public/images/stamping-important.webp',
      path: '/service/procura'
    }
  ];

  return React.createElement('div', {},
    React.createElement('section', {},
      React.createElement('div', { className: 'section-container' },
        React.createElement(SectionHeader, {
          title: 'I Nostri Servizi',
          subtitle: 'Strumenti informativi di preparazione documentale per la pianificazione successoria in Italia'
        }),
        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.'),

        React.createElement('div', { className: 'grid grid-2' },
          services.map((service, idx) => 
            React.createElement(Card, { key: idx, className: 'cursor-pointer' },
              React.createElement('img', { 
                src: service.image,
                alt: service.title,
                style: { width: '100%', height: '300px', objectFit: 'cover', borderRadius: '0.75rem', marginBottom: '1rem' }
              }),
              React.createElement('div', { className: 'feature-icon' }, service.icon()),
              React.createElement('h3', { className: 'mb-3' }, service.title),
              React.createElement('p', { className: 'mb-4' }, service.desc),
              React.createElement(Button, { 
                variant: 'outline',
                onClick: () => navigate(service.path)
              }, 'Scopri di Più →')
            )
          )
        )
      )
    ),

    // Trust and Statistics Section - Unique Design
    React.createElement('section', { style: { background: 'linear-gradient(135deg, rgba(124, 58, 237, 0.03) 0%, rgba(6, 182, 212, 0.03) 100%)', padding: '5rem 0', position: 'relative', overflow: 'hidden' } },
      React.createElement('div', { className: 'section-container' },
        React.createElement('div', { className: 'grid grid-2', style: { gap: '4rem', alignItems: 'center' } },
          React.createElement('div', {},
            React.createElement('h2', { style: { fontSize: '2.5rem', marginBottom: '1.5rem', color: 'var(--gray-900)' } }, 'Servizio di Preparazione Documenti'),
            React.createElement('p', { style: { fontSize: '1.125rem', color: 'var(--gray-600)', lineHeight: '1.8', marginBottom: '2rem' } }, 'Offriamo un servizio di preparazione guidata di documenti successori sulla base delle informazioni fornite dagli utenti. Semplicità, velocità e conformità alla normativa italiana.'),
            React.createElement('div', { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } },
              React.createElement('div', { style: { background: 'white', padding: '1rem 1.5rem', borderRadius: '0.75rem', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', gap: '0.75rem' } },
                Icon.Shield({ style: { color: '#06b6d4' } }),
                React.createElement('span', { style: { fontWeight: '600', color: 'var(--gray-700)' } }, 'Conformità GDPR')
              ),
              React.createElement('div', { style: { background: 'white', padding: '1rem 1.5rem', borderRadius: '0.75rem', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', gap: '0.75rem' } },
                Icon.Lock({ style: { color: '#7c3aed' } }),
                React.createElement('span', { style: { fontWeight: '600', color: 'var(--gray-700)' } }, 'Crittografia 256-bit')
              ),
              React.createElement('div', { style: { background: 'white', padding: '1rem 1.5rem', borderRadius: '0.75rem', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', gap: '0.75rem' } },
                Icon.FileText({ style: { color: '#f59e0b' } }),
                React.createElement('span', { style: { fontWeight: '600', color: 'var(--gray-700)' } }, 'Modelli Documentali')
              )
            )
          ),
          React.createElement('div', { className: 'grid grid-2', style: { gap: '1.5rem' } },
            React.createElement('div', { style: { background: 'linear-gradient(135deg, #7c3aed, #6d28d9)', padding: '2rem', borderRadius: '1.5rem', color: 'white', textAlign: 'center' } },
              React.createElement('div', { style: { fontSize: '3rem', fontWeight: '700', marginBottom: '0.5rem' } }, '10-15'),
              React.createElement('div', { style: { fontSize: '1rem', opacity: '0.9' } }, 'Minuti per completare')
            ),
            React.createElement('div', { style: { background: 'linear-gradient(135deg, #06b6d4, #0891b2)', padding: '2rem', borderRadius: '1.5rem', color: 'white', textAlign: 'center' } },
              React.createElement('div', { style: { fontSize: '3rem', fontWeight: '700', marginBottom: '0.5rem' } }, '100%'),
              React.createElement('div', { style: { fontSize: '1rem', opacity: '0.9' } }, 'Online e sicuro')
            ),
            React.createElement('div', { style: { background: 'linear-gradient(135deg, #ec4899, #db2777)', padding: '2rem', borderRadius: '1.5rem', color: 'white', textAlign: 'center' } },
              React.createElement('div', { style: { fontSize: '3rem', fontWeight: '700', marginBottom: '0.5rem' } }, 'Base'),
              React.createElement('div', { style: { fontSize: '1rem', opacity: '0.9' } }, 'Normativa italiana')
            ),
            React.createElement('div', { style: { background: 'linear-gradient(135deg, #10b981, #059669)', padding: '2rem', borderRadius: '1.5rem', color: 'white', textAlign: 'center' } },
              React.createElement('div', { style: { fontSize: '3rem', fontWeight: '700', marginBottom: '0.5rem' } }, 'Info'),
              React.createElement('div', { style: { fontSize: '1rem', opacity: '0.9' } }, 'Supporto tecnico')
            )
          )
        )
      )
    ),

    // Quali Problemi Risolve Section
    React.createElement('section', { style: { background: 'var(--gray-50)' } },
      React.createElement('div', { className: 'section-container' },
        React.createElement('div', { className: 'section-header text-center' },
          React.createElement('h2', {}, 'Quali Problemi Risolve il Nostro Servizio'),
          React.createElement('p', { className: 'section-subtitle' }, 'Strumenti pratici per facilitare la preparazione di documenti successori')
        ),

        React.createElement('div', { className: 'grid grid-2 mt-8', style: { gap: '2rem' } },
          React.createElement(Card, { style: { height: '100%' } },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', textAlign: 'center' } }, '📋'),
            React.createElement('h3', { style: { fontSize: '1.25rem', marginBottom: '0.75rem', color: '#1f2937' } }, 'Strutturazione delle Informazioni'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6', margin: 0 } }, 
              'Il nostro processo guidato ti aiuta a organizzare e raccogliere sistematicamente tutte le informazioni necessarie per i documenti successori, evitando di dimenticare elementi importanti come beni, eredi o disposizioni specifiche.'
            )
          ),

          React.createElement(Card, { style: { height: '100%' } },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', textAlign: 'center' } }, '✓'),
            React.createElement('h3', { style: { fontSize: '1.25rem', marginBottom: '0.75rem', color: '#1f2937' } }, 'Riduzione degli Errori Comuni'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6', margin: 0 } }, 
              'Il questionario guidato ti aiuta a evitare errori frequenti nella preparazione autonoma di documenti, come omissioni di informazioni essenziali, mancanza di chiarezza nelle disposizioni o incompletezza dei dati.'
            )
          ),

          React.createElement(Card, { style: { height: '100%' } },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', textAlign: 'center' } }, '💼'),
            React.createElement('h3', { style: { fontSize: '1.25rem', marginBottom: '0.75rem', color: '#1f2937' } }, 'Preparazione per la Consulenza Professionale'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6', margin: 0 } }, 
              'Ti permette di arrivare preparato alla consulenza legale o notarile con documenti strutturati e informazioni organizzate, facilitando il lavoro del professionista e ottimizzando tempo e costi di consultazione.'
            )
          ),

          React.createElement(Card, { style: { height: '100%' } },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', textAlign: 'center' } }, '📝'),
            React.createElement('h3', { style: { fontSize: '1.25rem', marginBottom: '0.75rem', color: '#1f2937' } }, 'Chiarezza e Completezza'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6', margin: 0 } }, 
              'I modelli ti guidano a considerare tutti gli aspetti rilevanti della pianificazione successoria (beni, eredi, legittima, disposizioni speciali) per creare documenti più completi e chiari.'
            )
          )
        )
      )
    ),

    // Per Chi è Adatto Section
    React.createElement('section', {},
      React.createElement('div', { className: 'section-container' },
        React.createElement('div', { className: 'section-header text-center' },
          React.createElement('h2', {}, 'Per Chi è Adatto Questo Servizio'),
          React.createElement('p', { className: 'section-subtitle' }, 'I nostri strumenti sono particolarmente utili per diverse situazioni')
        ),

        React.createElement('div', { className: 'grid grid-3 mt-8' },
          React.createElement(Card, {},
            React.createElement('div', { className: 'feature-icon' }, Icon.Users()),
            React.createElement('h3', {}, 'Situazioni Patrimoniali Semplici'),
            React.createElement('p', {}, 'Ideale per chi ha una situazione familiare e patrimoniale relativamente semplice e desidera organizzare le informazioni prima di consultare un professionista qualificato.')
          ),

          React.createElement(Card, {},
            React.createElement('div', { className: 'feature-icon' }, Icon.FileText()),
            React.createElement('h3', {}, 'Chi Vuole Prepararsi'),
            React.createElement('p', {}, 'Adatto a chi vuole preparare e strutturare le proprie informazioni in anticipo, per arrivare più organizzato e consapevole alla consulenza legale o notarile.')
          ),

          React.createElement(Card, {},
            React.createElement('div', { className: 'feature-icon' }, Icon.CheckCircle()),
            React.createElement('h3', {}, 'Chi Cerca Chiarezza'),
            React.createElement('p', {}, 'Utile per chi desidera un processo guidato che aiuti a considerare tutti gli aspetti rilevanti e a evitare omissioni comuni nella preparazione autonoma.')
          )
        )
      )
    ),

    // Additional Services Information Section
    React.createElement('section', { style: { background: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)' } },
      React.createElement('div', { className: 'section-container' },
        React.createElement('div', { className: 'section-header text-center' },
          React.createElement('h2', {}, 'Caratteristiche del Servizio'),
          React.createElement('p', { className: 'section-subtitle' }, 'Un servizio di preparazione documentale basato su modelli e informazioni fornite dall\'utente')
        ),

        React.createElement('div', { className: 'grid grid-3 mt-8' },
          React.createElement(Card, {},
            React.createElement('div', { className: 'feature-icon' }, Icon.FileText()),
            React.createElement('h3', {}, 'Modelli Documentali Informativi'),
            React.createElement('p', {}, 'Utilizziamo modelli basati sui principi del diritto civile italiano. I documenti generati sono informativi e richiedono verifica da parte di un professionista legale.')
          ),

          React.createElement(Card, {},
            React.createElement('div', { className: 'feature-icon' }, Icon.Zap()),
            React.createElement('h3', {}, 'Processo Guidato Passo-Passo'),
            React.createElement('p', {}, 'Un questionario intuitivo ti guida nella compilazione delle informazioni necessarie, aiutandoti a strutturare i dati in modo organizzato e completo.')
          ),

          React.createElement(Card, {},
            React.createElement('div', { className: 'feature-icon' }, Icon.Shield()),
            React.createElement('h3', {}, 'Sicurezza e Privacy'),
            React.createElement('p', {}, 'Le tue informazioni sono protette con crittografia a 256-bit e conservate secondo le normative GDPR sulla protezione dei dati personali.')
          )
        )
      )
    ),

    // Process Overview Section
    React.createElement('section', {},
      React.createElement('div', { className: 'section-container' },
        React.createElement('div', { className: 'section-header text-center' },
          React.createElement('h2', {}, 'Come Funziona il Processo'),
          React.createElement('p', { className: 'section-subtitle' }, 'Un processo semplice e guidato che ti aiuta a strutturare le informazioni')
        ),

        React.createElement('div', { className: 'grid grid-4 mt-8' },
          React.createElement(Card, { className: 'text-center' },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', fontWeight: 'bold', color: 'var(--primary-color)' } }, '1'),
            React.createElement('h3', { style: { marginBottom: '0.75rem' } }, 'Raccolta Informazioni'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6' } }, 'Compila il questionario guidato con le tue informazioni su beni, eredi e disposizioni')
          ),

          React.createElement(Card, { className: 'text-center' },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', fontWeight: 'bold', color: 'var(--primary-color)' } }, '2'),
            React.createElement('h3', { style: { marginBottom: '0.75rem' } }, 'Strutturazione Dati'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6' } }, 'Le informazioni vengono organizzate secondo i principi della normativa italiana')
          ),

          React.createElement(Card, { className: 'text-center' },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', fontWeight: 'bold', color: 'var(--primary-color)' } }, '3'),
            React.createElement('h3', { style: { marginBottom: '0.75rem' } }, 'Generazione Modello'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6' } }, 'Il sistema genera un modello documentale informativo basato sui dati forniti')
          ),

          React.createElement(Card, { className: 'text-center' },
            React.createElement('div', { style: { fontSize: '2.5rem', marginBottom: '1rem', fontWeight: 'bold', color: 'var(--primary-color)' } }, '4'),
            React.createElement('h3', { style: { marginBottom: '0.75rem' } }, 'Revisione Professionale'),
            React.createElement('p', { style: { color: '#6b7280', lineHeight: '1.6' } }, 'Il documento è pronto per la revisione da parte di un professionista qualificato')
          )
        ),
        
        React.createElement('div', { style: { marginTop: '3rem', padding: '1.5rem', background: '#fef3c7', borderRadius: '0.75rem', border: '1px solid #fbbf24' } },
          React.createElement('div', { style: { display: 'flex', gap: '1rem', alignItems: 'flex-start' } },
            React.createElement('div', { style: { fontSize: '1.5rem', flexShrink: 0 } }, '⚠️'),
            React.createElement('p', { style: { margin: 0, fontSize: '0.95rem', color: '#92400e', lineHeight: '1.6' } },
              'Importante: Questo servizio fornisce modelli documentali informativi per aiutarti a organizzare le informazioni. Non sostituisce la consulenza di un avvocato o notaio. Per situazioni patrimoniali complesse, questioni legali specifiche o per la validazione finale dei documenti, si raccomanda vivamente di consultare un professionista qualificato.'
            )
          )
        )
      )
    )
  );
};