export default function Home() {
  return (
    <main className="min-h-screen bg-[linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)] px-6 py-10 text-slate-900">
      <div className="mx-auto flex min-h-[calc(100vh-5rem)] w-full max-w-5xl flex-col justify-center gap-10">
        <div className="max-w-2xl space-y-6">
          <span className="inline-flex rounded-full border border-slate-200 bg-white px-4 py-1 text-sm font-medium text-slate-600 shadow-sm">
            Site d’accueil
          </span>
          <div className="space-y-4">
            <h1 className="text-4xl font-semibold tracking-tight sm:text-6xl">
              Un départ propre pour ton monorepo.
            </h1>
            <p className="max-w-xl text-lg leading-8 text-slate-600">
              Une page d’accueil claire, rapide à lire, et facile à faire évoluer pour
              présenter ton projet dès le premier écran.
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row">
            <a
              href="#contact"
              className="inline-flex h-12 items-center justify-center rounded-full bg-slate-900 px-6 text-sm font-semibold text-white transition hover:bg-slate-700"
            >
              Me contacter
            </a>
            <a
              href="#services"
              className="inline-flex h-12 items-center justify-center rounded-full border border-slate-300 bg-white px-6 text-sm font-semibold text-slate-900 transition hover:border-slate-400"
            >
              Voir les services
            </a>
          </div>
        </div>

        <section id="services" className="grid gap-4 md:grid-cols-3">
          <article className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <p className="text-sm font-semibold text-slate-500">01</p>
            <h2 className="mt-3 text-xl font-semibold">Simple</h2>
            <p className="mt-2 text-sm leading-6 text-slate-600">
              Une structure minimale, sans surcharge visuelle.
            </p>
          </article>
          <article className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <p className="text-sm font-semibold text-slate-500">02</p>
            <h2 className="mt-3 text-xl font-semibold">Rapide</h2>
            <p className="mt-2 text-sm leading-6 text-slate-600">
              Pensée pour être modifiée vite quand tu ajoutes du contenu.
            </p>
          </article>
          <article className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <p className="text-sm font-semibold text-slate-500">03</p>
            <h2 className="mt-3 text-xl font-semibold">Propre</h2>
            <p className="mt-2 text-sm leading-6 text-slate-600">
              Une base saine pour un monorepo Next.js clair et organisé.
            </p>
          </article>
        </section>

        <footer
          id="contact"
          className="flex flex-col gap-2 border-t border-slate-200 pt-6 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between"
        >
          <span>Projet monorepo Next.js</span>
          <span>Contact: contact@arthurp.fr</span>
        </footer>
      </div>
    </main>
  );
}