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

export const metadata: Metadata = {
  title: "Le Cabinet",
  description:
    "L'équilibre entre l'héritage et l'innovation. Trois piliers : précision, transparence, sur-mesure.",
  // Page volontairement hors nav et hors index : contenu en cours de validation.
  robots: { index: false, follow: false },
};

export default function PhilosophiePage() {
  return (
    <>
      {/* Hero */}
      <section className="pt-40 pb-24 md:pb-32 lg:pb-40">
        <div className="container-page">
          <div className="max-w-screen-xl space-y-6 reveal-hero">
            <p className="eyebrow tracking-[0.2em]">À Propos de Nous</p>
            <h1 className="display-lg text-on-background max-w-4xl">
              L'Équilibre entre l'Héritage et l'Innovation.
            </h1>
          </div>
        </div>
      </section>

      {/* Section 1 - L'Histoire du Cabinet */}
      <section className="pb-24 md:pb-32 lg:pb-40 reveal">
        <div className="container-page">
          <div className="grid grid-cols-12 gap-8 lg:gap-16 items-center">
            <div className="col-span-12 lg:col-span-6">
              <h2 className="headline-xl text-primary mb-12">
                L'Histoire du Cabinet
              </h2>
              <div className="space-y-8 body-lg text-on-surface-variant pr-0 lg:pr-12">
                <p>
                  Fondé sur une vision de clarté juridique absolue, Socialex a
                  émergé d'un désir de redéfinir la pratique du droit des
                  affaires. Notre parcours est marqué par une recherche
                  constante de l'excellence et une adaptation aux complexités
                  du monde moderne.
                </p>
                <p>
                  La vision est simple : créer une structure où l'expertise
                  technique rencontre une dimension humaine profonde,
                  permettant de transformer les défis réglementaires en
                  opportunités stratégiques pour nos clients.
                </p>
              </div>
            </div>
            <div className="col-span-12 lg:col-span-6 aspect-[4/5] overflow-hidden rounded-lg">
              <div
                aria-hidden
                style={{ backgroundImage: `url('${images.cabinetOffice}')` }}
                className="w-full h-full bg-cover bg-center grayscale-[0.2] hover:scale-105 transition-transform duration-700"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Section 2 - Notre Philosophie */}
      <section className="bg-surface-container py-24 md:py-32 lg:py-40 reveal">
        <div className="container-page">
          <div className="text-center mb-20 md:mb-24 max-w-2xl mx-auto">
            <h2 className="headline-xl text-primary mb-4">Notre Philosophie</h2>
            <p className="body-lg text-on-surface-variant">
              Trois piliers fondamentaux qui guident chaque décision et chaque
              dossier au sein de notre cabinet.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12">
            {[
              {
                icon: "precision_manufacturing",
                t: "Précision",
                d: "Dans un environnement juridique de plus en plus complexe, la rigueur est notre boussole. Chaque clause, chaque conseil est pesé avec une exactitude mathématique.",
              },
              {
                icon: "visibility",
                t: "Transparence",
                d: "La confiance se construit sur la clarté. Nous offrons une visibilité totale sur nos processus, nos honoraires et les enjeux réels de vos dossiers.",
              },
              {
                icon: "architecture",
                t: "Sur Mesure",
                d: "Il n'existe pas de solution universelle. Nous concevons des stratégies juridiques artisanales, adaptées aux spécificités uniques de votre secteur.",
              },
            ].map((p) => (
              <div
                key={p.t}
                className="p-10 lg:p-12 bg-surface border border-outline-variant hover:shadow-[0_20px_40px_rgba(0,0,0,0.04)] transition-all"
              >
                <Icon name={p.icon} className="!text-4xl text-primary mb-8" />
                <h3 className="headline-md text-primary mb-6">{p.t}</h3>
                <p className="body-md text-on-surface-variant">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 3 - Profil fondateur */}
      <section className="py-24 md:py-32 lg:py-40 reveal">
        <div className="container-page">
          <div className="grid grid-cols-12 gap-8 lg:gap-16 items-center">
            <div className="col-span-12 lg:col-span-5 aspect-square relative">
              <div
                aria-hidden
                style={{ backgroundImage: `url('${images.cabinetPortrait}')` }}
                className="w-full h-full bg-cover bg-center grayscale shadow-2xl"
              />
              <div className="absolute -bottom-10 -right-6 lg:-right-10 bg-secondary-container p-8 hidden xl:block">
                <p className="display-lg !text-4xl text-on-secondary-container">
                  8+
                </p>
                <p className="eyebrow !text-on-secondary-container">
                  Années d'Expertise
                </p>
              </div>
            </div>
            <div className="col-span-12 lg:col-span-6 lg:col-start-7 space-y-2">
              <p className="eyebrow tracking-[0.2em]">
                Fondateur &amp; Associé Principal
              </p>
              <h2 className="headline-xl text-primary mt-4 mb-2">
                Me Jean-Baptiste Lefebvre
              </h2>
              <p className="font-serif italic text-xl text-on-surface-variant !mb-12">
                Expert en Droit des Sociétés &amp; Fusions-Acquisitions
              </p>
              <div className="space-y-8 body-lg text-on-surface-variant">
                <p>
                  Spécialisé depuis plus de 8 ans dans l'accompagnement des
                  groupes internationaux et des ETI en croissance, Me Lefebvre
                  a développé une approche du conseil juridique alliant
                  pragmatisme économique et sécurité contractuelle absolue.
                </p>
                <p>
                  Ancien élève de la Sorbonne et titulaire d'un LL.M de
                  Harvard, il intervient régulièrement sur des opérations
                  complexes de restructuration et de gouvernance d'entreprise.
                  Son expertise est reconnue pour sa capacité à dénouer des
                  situations de crise avec calme et détermination.
                </p>
                <div className="pt-8 border-t border-outline-variant flex flex-col sm:flex-row gap-12">
                  <div>
                    <p className="font-sans text-[10px] tracking-[0.1em] uppercase font-semibold text-on-surface-variant mb-2">
                      Qualifications
                    </p>
                    <ul className="text-sm font-medium text-primary space-y-1">
                      <li>Expert en droit des sociétés</li>
                      <li>Expert en droit des marques</li>
                      <li>Expert en stratégie fiscale</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-sans text-[10px] tracking-[0.1em] uppercase font-semibold text-on-surface-variant mb-2">
                      Contact
                    </p>
                    <a
                      href="mailto:contact@socialex.pro"
                      className="block text-sm font-medium text-primary hover:text-secondary transition-colors"
                    >
                      contact@socialex.pro
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA - bloc inset primary-container */}
      <section className="pb-24 md:pb-32 lg:pb-40 reveal">
        <div className="container-page">
          <div className="bg-primary-container text-on-primary p-12 md:p-20 text-center">
            <h2 className="display-lg !text-3xl md:!text-4xl text-white mb-8">
              Prêt à sécuriser votre avenir ?
            </h2>
            <Link href="/contact" className="btn btn-light">
              Prendre Rendez-vous
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}