const PricingPage = () => {
  const { navigate } = React.useContext(RouterContext);
  const [showOrderForm, setShowOrderForm] = React.useState(false);
  const [selectedPlan, setSelectedPlan] = React.useState(null);

  const plans = [
    {
      name: 'Testamento Base',
      price: '99',
      desc: 'Modelli documentali informativi per situazioni semplici',
      features: ['Documento testamentario', 'Distribuzione beni', 'Designazione tutori', 'Download digitale', 'Supporto email']
    },
    {
      name: 'Piano Completo',
      price: '249',
      desc: 'Modelli documentali informativi per famiglie',
      popular: true,
      features: ['Testamento ed eredità', 'Procura', 'Direttiva sanitaria', 'Opzioni trust', 'Aggiornamenti 1 anno', 'Supporto prioritario', 'Guida dettagliata']
    },
    {
      name: 'Pacchetto Premium',
      price: '499',
      desc: 'Modelli documentali informativi per situazioni complesse',
      features: ['Tutto nel Piano Completo', 'Modelli per beni complessi', 'Informazioni generali fiscali', 'Modelli per pianificazione aziendale', 'Aggiornamenti a vita', 'Supporto tecnico dedicato', 'Accesso esteso']
    }
  ];

  if (showOrderForm && selectedPlan) {
    return React.createElement('div', { style: { padding: '2rem 0' } },
      React.createElement('div', { className: 'section-container text-center', style: { maxWidth: '600px', margin: '0 auto' } },
        React.createElement('div', { style: { display: 'flex', justifyContent: 'center', marginBottom: '1rem', color: '#10b981' } }, 
          Icon.CheckCircle()
        ),
        React.createElement('h2', {}, 'Ordine Confermato!'),
        React.createElement('p', { className: 'mt-4 mb-6' }, `Hai selezionato il piano: ${selectedPlan.name}`),
        React.createElement('p', { className: 'mb-6', style: { color: 'var(--gray-600)' } }, 'Riceverai un\'email di conferma con i prossimi passi.'),
        React.createElement(Button, { onClick: () => { setShowOrderForm(false); setSelectedPlan(null); } }, 'Torna ai Prezzi')
      )
    );
  }

  return React.createElement('div', {},
    React.createElement('section', {},
      React.createElement('div', { className: 'section-container' },
        React.createElement('div', { className: 'section-header text-center' },
          React.createElement('h1', {}, 'Prezzi Semplici e Trasparenti'),
          React.createElement('p', { className: 'section-subtitle' }, 'Scegli il piano giusto per le tue esigenze. Servizio di preparazione documentale, non consulenza legale.'),
          React.createElement('p', { style: { fontSize: '0.875rem', color: '#6b7280', fontStyle: 'italic', 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-3 mt-8' },
          plans.map((plan, idx) =>
            React.createElement(Card, {
              key: idx,
              className: 'pricing-card text-center',
              featured: plan.popular,
              style: { position: 'relative' }
            },
              plan.popular && React.createElement('div', { 
                className: 'pricing-badge',
                style: { position: 'absolute', top: '-1rem', left: '50%', transform: 'translateX(-50%)' }
              }, 'Più Popolare'),
              React.createElement('h3', { className: 'mt-4' }, plan.name),
              React.createElement('div', { className: 'pricing-amount' },
                React.createElement('span', { className: 'pricing-currency' }, '€'),
                plan.price
              ),
              React.createElement('p', { className: 'pricing-period mb-4' }, 'una tantum'),
              React.createElement('p', { className: 'mb-6', style: { fontSize: '0.95rem', color: 'var(--gray-600)' } }, plan.desc),
              React.createElement('ul', { className: 'pricing-features text-left mb-6' },
                plan.features.map((feature, i) =>
                  React.createElement('li', { key: i, style: { display: 'flex', gap: '0.5rem', alignItems: 'flex-start', fontSize: '0.9rem', marginBottom: '0.5rem' } },
                    React.createElement('span', { style: { color: '#10b981', marginTop: '0.2rem', flexShrink: 0, display: 'flex' } }, Icon.CheckCircle({ size: 16 })),
                    React.createElement('span', {}, feature)
                  )
                )
              ),
              React.createElement(Button, {
                variant: plan.popular ? 'primary' : 'outline',
                className: 'w-full',
                style: { width: '100%', marginTop: '1rem' },
                onClick: () => navigate('/application')
              }, 'Inizia')
            )
          )
        ),

        React.createElement('div', { style: { marginTop: '3rem', padding: '2rem', background: '#f3f4f6', borderRadius: '0.75rem' } },
          React.createElement('h3', { style: { textAlign: 'center', marginBottom: '1.5rem' } }, 'Tutti i Piani Includono'),
          React.createElement('div', { className: 'grid grid-3' },
            React.createElement('div', { style: { textAlign: 'center' } },
              React.createElement('div', { className: 'feature-icon' },
                Icon.Lock()
              ),
              React.createElement('h4', { style: { fontWeight: '600', marginBottom: '0.5rem' } }, 'Sicurezza'),
              React.createElement('p', { style: { fontSize: '0.9rem', color: 'var(--gray-600)' } }, 'Crittografia 256-bit per i tuoi dati')
            ),
            React.createElement('div', { style: { textAlign: 'center' } },
              React.createElement('div', { className: 'feature-icon' },
                Icon.CheckCircle()
              ),
              React.createElement('h4', { style: { fontWeight: '600', marginBottom: '0.5rem' } }, 'Basato su Normativa'),
              React.createElement('p', { style: { fontSize: '0.9rem', color: 'var(--gray-600)' } }, 'Modelli basati sul Codice Civile')
            ),
            React.createElement('div', { style: { textAlign: 'center' } },
              React.createElement('div', { className: 'feature-icon' },
                Icon.Mail()
              ),
              React.createElement('h4', { style: { fontWeight: '600', marginBottom: '0.5rem' } }, 'Supporto'),
              React.createElement('p', { style: { fontSize: '0.9rem', color: 'var(--gray-600)' } }, 'Assistenza tecnica disponibile')
            )
          )
        )
      )
    )
  );
};