import type { Metadata } from "next";
import Link from "next/link";
import Icon from "@/components/Icon";
import { getServicesByCategory } from "@/lib/services";
import { images } from "@/lib/images";

export const metadata: Metadata = {
  title: "Droit des Sociétés",
  description:
    "Création, secrétariat juridique, dépôt des comptes, clôture. Une gamme complète de solutions corporate alliant rigueur et agilité.",
};

export default function SocietesPage() {
  const services = getServicesByCategory("societes");

  return (
    <>
      {/* Hero */}
      <section className="pt-40 pb-24 md:pb-32">
        <div className="container-page">
          <div className="max-w-4xl space-y-8 reveal-hero">
            <h1 className="display-lg text-primary mb-2">
              Droit des Sociétés
            </h1>
            <p className="body-lg text-outline max-w-2xl">
              De la création à la clôture, nous accompagnons toutes les étapes
              du cycle de vie de votre entreprise : formalités d'immatriculation,
              secrétariat juridique, dépôt des comptes, dissolution.
            </p>
          </div>
        </div>
      </section>

      {/* Services grid */}
      <section className="pb-24 md:pb-32 reveal">
        <div className="container-page">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {services.map((s) => (
              <Link
                key={s.slug}
                href={`/societes/${s.slug}`}
                className="group bg-white border border-outline-variant p-10 lg:p-12 flex flex-col justify-between min-h-[420px] hover:border-primary hover:shadow-[0_20px_40px_rgba(0,0,0,0.04)] transition-all duration-500"
              >
                <div>
                  <Icon name={s.icon} className="!text-4xl text-primary mb-8" />
                  <h3 className="headline-md text-primary mb-4">{s.title}</h3>
                  <p className="body-md text-on-surface-variant mb-6">
                    {s.excerpt}
                  </p>
                </div>
                <span className="font-serif text-sm tracking-wide uppercase border-b border-primary w-fit pb-1 group-hover:text-secondary group-hover:border-secondary transition-colors duration-300 flex items-center gap-2">
                  En savoir plus
                  <Icon name="arrow_forward" className="!text-base" />
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Editorial banner : image seule */}
      <section className="pb-24 md:pb-32 reveal">
        <div className="container-page">
          <div className="relative w-full h-[500px] md:h-[600px] overflow-hidden group">
            <div
              aria-hidden
              style={{ backgroundImage: `url('${images.expertiseBanner}')` }}
              className="absolute inset-0 bg-cover bg-center grayscale group-hover:scale-105 transition-transform duration-700"
            />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="pb-24 md:pb-32 reveal">
        <div className="container-page">
          <div className="max-w-3xl mx-auto text-center border-t border-outline-variant pt-20">
            <span className="eyebrow block mb-4">Prêt à commencer ?</span>
            <h2 className="headline-xl text-primary mb-8">
              Discutons de votre prochain projet.
            </h2>
            <div className="flex justify-center">
              <Link href="/contact" className="btn btn-primary">
                Contacter nos experts
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}