import type { Metadata } from "next";
import Icon from "@/components/Icon";
import ContactForm from "@/components/ContactForm";
import JsonLd from "@/components/JsonLd";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Prenez rendez-vous avec un expert Socialex. Consultation initiale confidentielle pour discuter de vos enjeux corporate.",
  alternates: { canonical: "/contact" },
};

const contactFaqs = [
  {
    q: "Comment se déroule un premier échange ?",
    a: "Vous nous écrivez à contact@socialex.pro ou via le formulaire ci-dessous. Un expert vous répond sous 24 heures ouvrées avec une analyse de votre situation, le forfait adapté et la liste des documents à préparer. Aucun engagement n'est pris à ce stade : c'est une consultation initiale gratuite.",
  },
  {
    q: "Êtes-vous tenu au secret professionnel ?",
    a: "Oui. Toutes les informations que vous nous transmettez sont strictement confidentielles. Aucune donnée n'est partagée avec des tiers, et l'accès à votre dossier est limité aux juristes en charge de votre demande.",
  },
  {
    q: "Quel est le délai de réponse à une demande ?",
    a: "Réponse garantie sous 24 heures ouvrées (du lundi au vendredi, hors jours fériés). Pour les dossiers urgents (délai légal imminent, opération de cession en cours), nous priorisons en moins de 4 heures.",
  },
  {
    q: "Les forfaits affichés couvrent-ils tous les frais ?",
    a: "Oui. Nos tarifs sont tout inclus : annonces légales, frais de greffe, taxes officielles (INPI, EUIPO selon le service) sont compris dans le prix affiché. Aucun frais caché. La facture émise au moment de la soumission de votre dossier reflète le montant exact à régler.",
  },
];

const contactPageSchema = {
  "@context": "https://schema.org",
  "@type": "ContactPage",
  name: "Contact Socialex",
  url: "https://socialex.pro/contact",
  about: { "@id": "https://socialex.pro/#organization" },
  mainEntity: {
    "@type": "FAQPage",
    mainEntity: contactFaqs.map((f) => ({
      "@type": "Question",
      name: f.q,
      acceptedAnswer: { "@type": "Answer", text: f.a },
    })),
  },
};

export default function ContactPage() {
  return (
    <>
      <JsonLd data={contactPageSchema} />

      <section className="pt-40 pb-24 md:pb-32">
        <div className="container-page">
          {/* Hero */}
          <div className="mb-24 max-w-4xl reveal-hero">
            <h1 className="display-lg text-primary mb-6">Entrons en Contact</h1>
            <p className="body-lg text-on-surface-variant max-w-2xl">
              Expertise juridique et accompagnement stratégique pour les
              entreprises modernes. Réponse sous 24 h ouvrées, forfait clair
              dès le premier échange.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-start reveal">
            {/* Sidebar : informations */}
            <aside className="lg:col-span-5 space-y-12">
              <div className="space-y-4">
                <span className="eyebrow block">Contact direct</span>
                <a
                  href="mailto:contact@socialex.pro"
                  className="block headline-md text-primary hover:text-secondary transition-colors break-all"
                >
                  contact@socialex.pro
                </a>
                <p className="body-md text-on-surface-variant">
                  Réponse sous 24 heures ouvrées. Pour les dossiers urgents,
                  mention « URGENT » en objet : nous priorisons en moins de 4
                  heures ouvrées.
                </p>
              </div>

              <div className="space-y-3">
                <span className="eyebrow block">Délais d'intervention</span>
                <ul className="space-y-2 text-sm text-on-surface-variant">
                  <li className="flex items-start gap-3">
                    <Icon
                      name="check"
                      className="!text-base text-secondary mt-0.5"
                    />
                    <span>Première analyse : sous 24 h ouvrées</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <Icon
                      name="check"
                      className="!text-base text-secondary mt-0.5"
                    />
                    <span>K-bis création : 4 jours en moyenne</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <Icon
                      name="check"
                      className="!text-base text-secondary mt-0.5"
                    />
                    <span>
                      Dépôt des comptes : sous 30 jours ouvrés
                    </span>
                  </li>
                </ul>
              </div>

              {/* Confidentialité */}
              <div className="flex items-start gap-4 p-6 border border-outline-variant/40 bg-white">
                <Icon name="lock" className="text-secondary mt-0.5" filled />
                <p className="body-md text-on-surface-variant italic">
                  Vos données sont traitées avec la plus stricte
                  confidentialité. En accord avec le secret professionnel,
                  aucun échange n'est partagé avec des tiers.
                </p>
              </div>
            </aside>

            {/* Form */}
            <div className="lg:col-span-7 bg-white p-10 md:p-12 lg:p-16 border border-outline-variant/40">
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

      {/* FAQ contact */}
      <section className="bg-surface-container-low reveal">
        <div className="container-page py-24 md:py-32">
          <div className="grid grid-cols-12 gap-12">
            <div className="col-span-12 lg:col-span-4">
              <span className="eyebrow block mb-4">Questions fréquentes</span>
              <h2 className="headline-xl text-primary mb-6">
                Avant de nous écrire,
                <br />
                <span className="italic font-normal">
                  les réponses utiles.
                </span>
              </h2>
              <p className="body-md text-on-surface-variant">
                Une question manque ? Indiquez-la dans le formulaire,
                réponse sous 24 h ouvrées.
              </p>
            </div>
            <div className="col-span-12 lg:col-span-8">
              {contactFaqs.map((f, i) => (
                <details
                  key={f.q}
                  className="group border-b border-outline-variant/60 py-6"
                >
                  <summary className="flex items-baseline gap-6 list-none cursor-pointer">
                    <span className="font-serif italic text-secondary text-sm w-8 shrink-0">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span className="flex-1 font-serif text-xl md:text-2xl text-primary tracking-[-0.01em] leading-tight">
                      {f.q}
                    </span>
                    <span className="text-xl text-on-surface-variant group-open:rotate-45 transition-transform shrink-0">
                      +
                    </span>
                  </summary>
                  <p className="mt-6 ml-14 body-md text-on-surface-variant max-w-3xl">
                    {f.a}
                  </p>
                </details>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}