function Hero() {
  const tiles = [
    { n: '01', label: 'Software',   bar: '#537EBE', title: 'Software',   copy: 'NetLex Cloud, gestionale, PCT, firma remota, fatturazione elettronica.' },
    { n: '02', label: 'Assistenza', bar: '#E3AC21', title: 'Assistenza', copy: 'SLA garantito 4 ore lavorative. Unici in Italia sul PCT.' },
    { n: '03', label: 'Formazione', bar: '#D3482F', title: 'Formazione', copy: 'Corsi PCT e deontologia con gli Ordini di Piemonte e Liguria.' },
    { n: '04', label: 'Consulenza', bar: '#009458', title: 'Consulenza', copy: 'GDPR, sistemistica, sicurezza. Il vostro IT in outsourcing.' },
  ];
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-eyebrow"># ilpiaceredifarelecoseperbene</div>
        <h1>
          Il tuo <span className="c1">Partner Tecnologico</span><br/>
          per l&apos;<span className="c2">Avvocatura 4.0</span>.<br/>
          <span className="c3">Software</span>, <span className="c4">assistenza</span> e formazione<br/>
          per Avvocati e Studi Legali.
        </h1>
        <p>Dal 2007 accompagniamo Avvocati e Studi Legali nella digitalizzazione. Software TeamSystem Legal, assistenza PCT con SLA garantito in 4 ore, formazione accreditata con gli Ordini: l&apos;avvocato deve fare l&apos;avvocato — a tutto il resto ci pensiamo noi.</p>
        <div className="hero-ctas">
          <a href="#contact" className="nx-btn nx-btn--primary">Prenota una call <i data-lucide="arrow-right"></i></a>
          <a href="#quadrants" className="nx-btn nx-btn--ghost">Scopri i servizi</a>
        </div>

        <div className="hero-visual">
          {tiles.map(t => (
            <div key={t.n} className="hero-tile">
              <div>
                <div className="num">{t.n} / 04</div>
                <div className="bar" style={{background: t.bar, marginTop: 18}}></div>
                <div className="label" style={{color: t.bar, marginTop: 16}}>{t.label}</div>
              </div>
              <div>
                <h3>{t.title}</h3>
                <p>{t.copy}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;