// PricingCard.jsx — annual license card (responsive)
const PricingCard = ({ lang }) => {
  const mobile = window.useIsMobile(768);
  const copy = {
    it: {
      eyebrow: 'Licenza Annuale',
      price: '€ —',
      period: 'per sede / anno',
      features: [
        '7 strumenti in un solo file .dll',
        'Revit 2023 – 2026, Windows',
        'Aggiornamenti inclusi per 12 mesi',
        'Validazione cloud via Keygen.sh',
        'Supporto via email entro 48h',
        'Licenza hardware-bound, un dispositivo',
      ],
      cta: 'Scarica ora',
      note: 'Il prezzo definitivo sarà comunicato al lancio.',
      faqTitle: 'Domande frequenti',
      faq: [
        { q: 'Come funziona la licenza?', a: 'La licenza è annuale, legata all\'hardware del tuo PC. Puoi richiedere lo sblocco del dispositivo via supporto.' },
        { q: 'Funziona con Revit LT?', a: 'No. Strato BIM richiede Revit completo (non LT) 2023–2026 su Windows.' },
        { q: 'Posso provarlo prima?', a: 'Una versione lite con strumenti selezionati sarà disponibile su Autodesk AppStore.' },
      ],
    },
    en: {
      eyebrow: 'Annual License',
      price: '€ —',
      period: 'per seat / year',
      features: [
        '7 tools in a single .dll',
        'Revit 2023 – 2026, Windows',
        'Updates included for 12 months',
        'Cloud validation via Keygen.sh',
        'Email support within 48h',
        'Hardware-bound, one device',
      ],
      cta: 'Download now',
      note: 'Pricing will be announced at launch.',
      faqTitle: 'FAQ',
      faq: [
        { q: 'How does the license work?', a: 'Annual license, bound to your PC hardware. You can request a device unbind via support.' },
        { q: 'Does it work with Revit LT?', a: 'No. Strato BIM requires full Revit (not LT) 2023–2026 on Windows.' },
        { q: 'Can I try it first?', a: 'A lite version with selected tools will be available on the Autodesk AppStore.' },
      ],
    },
  }[lang];

  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '48px 20px' : '80px 32px' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '380px 1fr',
        gap: mobile ? 40 : 64,
      }}>
        {/* Card */}
        <div style={{
          background: 'var(--white)', border: '1px solid var(--border)',
          borderRadius: 10, boxShadow: 'var(--shadow-2)', padding: mobile ? 24 : 32,
        }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500,
            letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand)',
            marginBottom: 16,
          }}>{copy.eyebrow}</div>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: mobile ? 36 : 48, fontWeight: 600,
            color: 'var(--fg-1)', letterSpacing: '-0.03em', lineHeight: 1,
            marginBottom: 4,
          }}>{copy.price}</div>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-4)',
            marginBottom: 28,
          }}>{copy.period}</div>
          <div style={{ height: 1, background: 'var(--border)', marginBottom: 24 }}/>
          <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
            {copy.features.map((f, i) => (
              <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
                  <circle cx="8" cy="8" r="7" stroke="var(--brand)" strokeWidth="1.2"/>
                  <path d="M5 8l2 2 4-4" stroke="var(--brand)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.5 }}>{f}</span>
              </li>
            ))}
          </ul>
          <a href="#" style={{
            display: 'block', textAlign: 'center', background: 'var(--brand)',
            color: 'var(--white)', padding: '12px 0', borderRadius: 'var(--radius-md)',
            fontSize: 15, fontWeight: 500, textDecoration: 'none',
            fontFamily: 'var(--font-sans)', transition: 'background 120ms',
          }}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--brand-hover)'}
          onMouseLeave={e => e.currentTarget.style.background = 'var(--brand)'}>
            {copy.cta}
          </a>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-4)', marginTop: 12, textAlign: 'center', lineHeight: 1.5 }}>
            {copy.note}
          </p>
        </div>

        {/* FAQ */}
        <div>
          <h3 style={{
            fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 600,
            color: 'var(--fg-1)', letterSpacing: '-0.01em', marginBottom: 28,
          }}>{copy.faqTitle}</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {copy.faq.map((item, i) => (
              <div key={i} style={{
                borderTop: '1px solid var(--border)',
                padding: '20px 0',
                ...(i === copy.faq.length - 1 ? { borderBottom: '1px solid var(--border)' } : {}),
              }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500, color: 'var(--fg-1)', marginBottom: 8 }}>{item.q}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.6 }}>{item.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PricingCard });