import { MODULOS } from './data/modulos'
import { TarjetaModulo } from './components/TarjetaModulo'
import { ConfiguracionCuenta } from './components/ConfiguracionCuenta'

export default function App() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="px-6 pt-20 pb-16 sm:px-12 lg:px-24">
        <p className="text-xs font-bold tracking-widest text-accent uppercase">FRASA Desarrollos</p>
        <h1 className="mt-4 text-4xl font-light text-neutral-900 sm:text-5xl">
          Ecosistema comercial
        </h1>
      </header>

      <main className="flex-1 px-6 sm:px-12 lg:px-24">
        <nav aria-label="Módulos del ecosistema">
          <ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {MODULOS.map((modulo) => (
              <TarjetaModulo key={modulo.id} modulo={modulo} />
            ))}
          </ul>
        </nav>

        <ConfiguracionCuenta />
      </main>

      <footer className="px-6 pt-24 pb-10 sm:px-12 lg:px-24">
        <p className="text-xs text-neutral-400">Consult (AS) Technology</p>
      </footer>
    </div>
  )
}