function Quadrants() {
  const quads = [
    { n: '01', color: '#537EBE', tone: '#537EBE', label: 'Software',
      title: 'Il gestionale che libera il tuo studio.',
      copy: 'NetLex Cloud: gestionale, telematico, agenda condivisa e firma remota senza token USB. Dove, come e quando vuoi.',
      tags: ['NetLex Cloud', 'PCT', 'Firma remota', 'Fatturazione elettronica', 'Conservazione'] },
    { n: '02', color: '#E3AC21', tone: '#A57A0E', label: 'Assistenza',
      title: 'Quando il telematico si ferma, rispondiamo.',
      copy: 'Tre tipologie di Assistenza PCT con SLA garantito in 4 ore lavorative. Gli unici in Italia a offrirlo per contratto.',
      tags: ['SLA 4h', 'Assistenza PCT', 'Help desk', 'Teleassistenza', 'Certificata'] },
    { n: '03', color: '#D3482F', tone: '#D3482F', label: 'Formazione',
      title: 'Crediti formativi che ti servono davvero.',
      copy: 'Dal 2013 oltre 35 corsi PCT e deontologia con gli Ordini di Piemonte e Liguria. 2.500+ avvocati formati, 8.000+ crediti.',
      tags: ['Corsi PCT', 'Deontologia', 'Ordini', 'Crediti formativi', 'In aula e online'] },
    { n: '04', color: '#009458', tone: '#009458', label: 'Consulenza',
      title: 'IT, privacy e sicurezza in outsourcing.',
      copy: 'GDPR, analisi dei rischi, adeguamento continuo, sistemistica e sicurezza. L\u2019avvocato deve fare l\u2019avvocato.',
      tags: ['GDPR', 'DPO', 'Sistemistica', 'Privacy Risk', 'Reti e backup'] },
  ];
  return (
    <section id="quadrants" className="quadrants">
      <div className="container">
        <div className="section-head">
          <h2>Quattro servizi, un unico modo di lavorare.</h2>
          <span className="hash"># servizi</span>
        </div>
        <div className="quad-grid">
          {quads.map(q => (
            <article key={q.n} className="quad">
              <span className="num">{q.n} / 04</span>
              <div className="quad-bar" style={{background: q.color}}></div>
              <div className="quad-label" style={{color: q.tone}}>{q.label}</div>
              <h3>{q.title}</h3>
              <p>{q.copy}</p>
              <ul>{q.tags.map(t => <li key={t}>{t}</li>)}</ul>
              <a className="arrow" href="#">Scopri di più <i data-lucide="arrow-up-right"></i></a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Quadrants = Quadrants;