import type { ReactNode } from "react";
import Link from "next/link";
import Image from "next/image";
import Icon from "@/components/Icon";
import { images } from "@/lib/images";
import {
  getFeaturedServicesByCategory,
  type Service,
} from "@/lib/services";

export default function HomePage() {
  const societes = getFeaturedServicesByCategory("societes");
  const marques = getFeaturedServicesByCategory("marques");

  return (
    <>
      {/* Hero */}
      <section className="relative min-h-screen flex items-center pt-24 overflow-hidden">
        <Image
          src={images.heroOffice}
          alt=""
          aria-hidden
          fill
          priority
          quality={70}
          sizes="(min-width: 768px) 100vw, 480px"
          className="absolute inset-0 z-0 object-cover object-center grayscale opacity-90"
        />
        <div
          aria-hidden
          className="absolute inset-0 z-[1] bg-gradient-to-r from-white via-white/80 to-transparent"
        />
        <div className="container-page relative z-10">
          <div className="max-w-4xl space-y-8 reveal-hero">
            <h1 className="display-lg text-primary leading-tight">
              L'Excellence Juridique au Service de votre Entreprise
            </h1>
            <p className="body-lg text-on-surface-variant max-w-2xl">
              Accompagnement par un expert pour toutes vos formalités en droit
              des sociétés et droit des marques.
            </p>
            <div className="pt-4">
              <Link
                href="/contact"
                className="btn btn-primary shadow-xl shadow-primary/5"
              >
                Réponse à votre demande en 24h
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Valeurs (Trust / Precision / Results, labels EN volontairement) */}
      <section className="bg-white reveal" aria-labelledby="valeurs-title">
        <h2 id="valeurs-title" className="sr-only">
          Nos valeurs
        </h2>
        <div className="container-page py-24 md:py-32 lg:py-40">
          <div className="grid grid-cols-1 md:grid-cols-3">
            {[
              {
                icon: "bolt",
                title: "Réactivité",
                desc: "Réponse aux demandes en 24h par un expert et suivi en temps réel des formalités, de la prise en charge du dossier jusqu'à validation par l'administration.",
              },
              {
                icon: "monitoring",
                title: "Efficacité",
                desc: "L'expertise des grands cabinets, associée à une maîtrise rigoureuse des honoraires, pour un accompagnement efficace, précis et adapté aux enjeux de chaque dossier.",
              },
              {
                icon: "verified",
                title: "Fiabilité",
                desc: "L'expérience de nos experts, issus de plusieurs années de pratique en tant que juristes-formalistes, garantit un traitement rigoureux et sécurisé de vos dossiers.",
              },
            ].map((v) => (
              <div
                key={v.title}
                className="p-12 border-l border-outline-variant/40 flex flex-col gap-6 group hover:border-primary transition-colors duration-500"
              >
                <Icon name={v.icon} className="!text-4xl text-secondary" />
                <h3 className="headline-md text-primary">{v.title}</h3>
                <p className="body-md text-on-surface-variant">{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Domaines : deux listes éditoriales (Sociétés / Marques) */}
      <section className="bg-surface-container-low reveal">
        <div className="container-page py-24 md:py-32 lg:py-40">
          {/* Header de section */}
          <div className="space-y-4 max-w-2xl mb-20 md:mb-28">
            <span className="eyebrow">Domaines d'intervention</span>
            <h2 className="headline-xl text-primary">
              Deux expertises, un seul interlocuteur.
            </h2>
          </div>

          {/* Deux listes côte à côte */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
            <DomainList
              eyebrow="Droit des Sociétés"
              headline={
                <>
                  Accompagnement de votre société
                  <br />
                  <span className="italic font-normal">de A à Z.</span>
                </>
              }
              intro="Création, modifications statutaires, dépôts des comptes annuels, dissolution. Nous prenons en charge l'intégralité des formalités."
              services={societes}
              ctaHref="/societes"
              ctaLabel="Voir tous les services Sociétés"
            />

            <DomainList
              eyebrow="Droit des Marques"
              headline={
                <>
                  Protégez ce qui vous
                  <br />
                  <span className="italic font-normal">distingue.</span>
                </>
              }
              intro="Recherche d'antériorité, dépôt INPI ou EUIPO, extensions internationales et surveillance active."
              services={marques}
              ctaHref="/marques"
              ctaLabel="Voir tous les services Marques"
            />
          </div>
        </div>
      </section>

      {/* Why Us */}
      <section className="reveal">
        <div className="container-page py-24 md:py-32 lg:py-40">
          <div className="grid grid-cols-12 gap-12 lg:gap-16 items-center">
            <div className="col-span-12 md:col-span-6">
              <div className="relative w-full h-[600px] lg:h-[700px] overflow-hidden">
                <Image
                  src={images.whyUsHallway}
                  alt=""
                  aria-hidden
                  fill
                  loading="lazy"
                  sizes="(min-width: 768px) 50vw, 100vw"
                  className="object-cover object-center grayscale"
                />
              </div>
            </div>

            <div className="col-span-12 md:col-span-6 space-y-12">
              <div className="space-y-6">
                <span className="eyebrow">Pourquoi nous choisir</span>
                <h2 className="headline-xl text-primary">
                  L'efficacité alliée à l'expertise humaine
                </h2>
                <p className="body-lg text-on-surface-variant">
                  Socialex redéfinit le conseil juridique en alliant
                  efficacité opérationnelle et expertise approfondie de
                  juristes expérimentés.
                </p>
              </div>

              <div className="space-y-8">
                {[
                  {
                    n: "01",
                    t: "Plateforme Sécurisée",
                    d: "Un espace client dédié pour suivre l'avancement de vos dossiers en temps réel et stocker vos documents juridiques de manière hautement sécurisée.",
                  },
                  {
                    n: "02",
                    t: "Réactivité assurée",
                    d: "Nos processus optimisés nous permettent de traiter vos demandes de formalités sous 24h, garantissant une agilité maximale pour votre entreprise.",
                  },
                  {
                    n: "03",
                    t: "Expérience Juridique",
                    d: "Une expertise issue de nombreuses années d'expérience et du professionnalisme de juristes aguerris.",
                  },
                ].map((item) => (
                  <div key={item.n} className="flex gap-6 items-start">
                    <div className="w-12 h-12 flex-shrink-0 border border-outline-variant flex items-center justify-center font-serif italic text-xl text-primary">
                      {item.n}
                    </div>
                    <div className="space-y-2">
                      <h3 className="font-serif font-bold text-lg text-primary">
                        {item.t}
                      </h3>
                      <p className="text-on-surface-variant body-md">
                        {item.d}
                      </p>
                    </div>
                  </div>
                ))}
              </div>

              <div className="pt-8">
                <Link
                  href="/contact"
                  className="group inline-flex items-center gap-4 border-b border-primary py-4 px-6 hover:bg-primary hover:text-on-primary transition-all duration-500"
                >
                  <span className="font-serif text-sm tracking-widest uppercase">
                    Contacter un expert
                  </span>
                  <Icon
                    name="east"
                    className="group-hover:translate-x-2 transition-transform"
                  />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="bg-primary text-on-primary reveal">
        <div className="container-page py-24 text-center">
          <div className="max-w-3xl mx-auto space-y-10">
            <h2 className="display-lg !text-4xl md:!text-5xl">
              Besoin d'être accompagné dans vos démarches ?
            </h2>
            <p className="body-lg opacity-70">
              Contactez un de nos juristes pour un traitement rapide de votre
              formalité.
            </p>
            <Link href="/contact" className="btn btn-light">
              Nous contacter
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}

/* ─── DomainList : colonne éditoriale d'un domaine d'expertise ──────── */

function DomainList({
  eyebrow,
  headline,
  intro,
  services,
  ctaHref,
  ctaLabel,
}: {
  eyebrow: string;
  headline: ReactNode;
  intro: string;
  services: Service[];
  ctaHref: string;
  ctaLabel: string;
}) {
  return (
    <div className="flex flex-col">
      {/* En-tête colonne */}
      <span className="eyebrow !text-on-surface-variant block mb-8">
        {eyebrow}
      </span>

      <h3 className="font-serif text-3xl md:text-4xl lg:text-5xl text-primary leading-[1.1] tracking-[-0.02em] mb-8 font-medium">
        {headline}
      </h3>

      <p className="body-md text-on-surface-variant max-w-md mb-12">{intro}</p>

      {/* Liste des services : séparateurs horizontaux, hover or */}
      <ul className="border-t border-outline-variant/60 mb-10">
        {services.map((s, i) => (
          <li
            key={s.slug}
            className="border-b border-outline-variant/60"
          >
            <Link
              href={`/${s.category}/${s.slug}`}
              className="group flex items-center gap-6 py-6 transition-colors hover:bg-white/60"
            >
              <span className="font-serif italic text-sm text-on-surface-variant tabular-nums w-8">
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="flex-1 font-serif text-xl md:text-2xl text-primary group-hover:text-secondary transition-colors leading-tight">
                {s.title}
              </span>
              <Icon
                name="arrow_outward"
                className="!text-xl text-on-surface-variant group-hover:text-secondary group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-300"
              />
            </Link>
          </li>
        ))}
      </ul>

      {/* CTA voir tout */}
      <Link
        href={ctaHref}
        className="group inline-flex items-center gap-3 self-start font-serif text-sm tracking-widest uppercase border-b border-primary pb-1 hover:text-secondary hover:border-secondary transition-colors mt-auto"
      >
        {ctaLabel}
        <Icon
          name="arrow_forward"
          className="!text-base group-hover:translate-x-1 transition-transform"
        />
      </Link>
    </div>
  );
}