import type { Metadata } from "next";
import { Badge } from "@/components/ui/badge";
import { Reveal } from "@/components/ui/reveal";
import { CtaPanel } from "@/components/marketing/expertise-blocks";
import { RealisationCard } from "@/components/marketing/realisation-card";
import { JsonLdBreadcrumb, JsonLdItemList } from "@/components/marketing/json-ld";
import { loadRealisations } from "@/lib/realisations-server";

export const metadata: Metadata = {
  title: "Réalisations",
  description:
    "Quelques projets web récents : sites vitrines, plateformes SaaS, outils en ligne. Du sur-mesure, codé proprement, pensé pour durer.",
  keywords: [
    "agence web réalisations",
    "portfolio agence",
    "exemples sites internet sur-mesure",
    "création site SaaS",
    "création outil web",
  ],
  openGraph: {
    title: "Réalisations",
    description:
      "Quelques projets web récents : sites vitrines, plateformes SaaS, outils en ligne. Du sur-mesure, pensé pour durer.",
    type: "website",
  },
};

export default function RealisationsPage() {
  const realisations = loadRealisations();
  return (
    <div className="relative overflow-hidden">

      {/* Hero */}
      <section className="relative z-10 mx-auto max-w-5xl px-4 sm:px-6 md:px-10 pt-16 pb-12 sm:pt-24 sm:pb-16 md:pt-36 md:pb-24 text-center">
        <Reveal>
          <Badge tone="muted">Réalisations</Badge>
        </Reveal>
        <Reveal delay={140}>
          <h1 className="font-editorial mt-6 text-3xl sm:text-4xl md:text-6xl font-medium text-text leading-[1.05] tracking-tight">
            Des sites qui travaillent vraiment
            <br />
            pour ceux qui les utilisent.
          </h1>
        </Reveal>
        <Reveal delay={300}>
          <p className="mt-7 text-base sm:text-lg md:text-xl text-text-muted max-w-2xl mx-auto leading-relaxed">
            Chaque projet répond à un besoin précis : être visible, présenter une activité
            ou proposer un service en ligne.
          </p>
        </Reveal>
      </section>

      {/* Grille */}
      <section className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pb-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {realisations.map((r, i) => (
            <RealisationCard key={r.slug} r={r} delay={i * 80} />
          ))}
        </div>
      </section>

      {/* Projets en cours */}
      <section className="relative z-10 border-t border-border/60">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 text-center">
          <Reveal>
            <Badge tone="muted">Projets en cours</Badge>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="font-editorial mt-5 text-3xl md:text-4xl font-medium text-text leading-tight">
              D'autres projets en cours{" "}
              de création.
            </h2>
          </Reveal>
          <Reveal delay={240}>
            <p className="mt-5 text-text-muted leading-relaxed">
              Plusieurs projets sont actuellement en cours de création et seront présentés
              prochainement.
            </p>
          </Reveal>
        </div>
      </section>

      <CtaPanel
        title={
          <>
            Et si le prochain projet,{" "}
            c'était le vôtre ?
          </>
        }
        text="On regarde ensemble votre activité, on imagine le site qui irait avec, et on vous l'envoie. Sans engagement."
        primaryLabel="Recevoir un aperçu de mon site"
        showSecondary={false}
      />

      <JsonLdBreadcrumb
        items={[
          { name: "Accueil", path: "/" },
          { name: "Réalisations", path: "/realisations" },
        ]}
      />
      <JsonLdItemList
        name="Réalisations Novelia"
        items={realisations.map((r) => ({
          name: r.name,
          path: `/realisations/${r.slug}`,
          description: r.tagline,
        }))}
      />
    </div>
  );
}