const layers = [
  {
    title: "Portal",
    body: "Interfaccia centrale per landing, dashboard, schede modulo e configurazione mock."
  },
  {
    title: "Backend Hub",
    body: "Scaffold API per auth, tenants, modules e futuro coordinamento applicativo."
  },
  {
    title: "Legacy Modules",
    body: "Prenotazioni e Menu restano isolati, raggiungibili come servizi dedicati e non rifattorizzati."
  },
  {
    title: "Packages",
    body: "Spazi condivisi per tipi, config, utility e futuro layer auth/tenancy/billing."
  },
  {
    title: "Remote LLM",
    body: "Endpoint esterno centralizzato e configurabile una sola volta tramite variabili ambiente."
  }
];

export function ArchitecturePage() {
  return (
    <section className="stack-lg">
      <section className="panel">
        <p className="eyebrow">Architettura</p>
        <h2 className="page-title">Piattaforma unica con moduli separati e crescita controllata.</h2>
        <p className="muted-copy">
          La struttura evita fusioni premature delle bozze legacy e prepara un core ordinato per tenancy, billing e
          centralizzazione dei servizi.
        </p>
      </section>

      <section className="section-grid">
        {layers.map((layer) => (
          <article key={layer.title} className="highlight-card">
            <p className="eyebrow">Layer</p>
            <h3>{layer.title}</h3>
            <p>{layer.body}</p>
          </article>
        ))}
      </section>
    </section>
  );
}

