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

const SITE = "https://socialex.pro";
const PAGE_PATH = "/marques/depot-de-marques";
const PAGE_URL = `${SITE}${PAGE_PATH}`;

export const metadata: Metadata = {
  title: "Dépôt de marque INPI, EUIPO, international : guide complet",
  description:
    "Déposez votre marque en France (INPI), en Europe (EUIPO) ou à l'international (Madrid). Recherche d'antériorité, classes de Nice, opposition, surveillance.",
  keywords: [
    "dépôt de marque",
    "déposer une marque INPI",
    "recherche d'antériorité marque",
    "dépôt marque européenne EUIPO",
    "protocole de Madrid marque internationale",
    "renouvellement marque",
    "opposition marque INPI",
    "surveillance de marque",
    "classes de Nice",
    "marque verbale figurative",
    "protéger une marque",
  ],
  alternates: { canonical: PAGE_PATH },
  openGraph: {
    title: "Dépôt de marque | Cabinet Socialex",
    description:
      "Recherche d'antériorité, dépôt INPI/EUIPO/Madrid, surveillance. Forfait clair, expert en propriété intellectuelle.",
    url: PAGE_URL,
    type: "website",
  },
};

type Territory = {
  name: string;
  scope: string;
  office: string;
  duration: string;
  bestFor: string;
};

const territories: Territory[] = [
  {
    name: "France",
    scope: "Territoire français (DOM-TOM inclus)",
    office: "INPI",
    duration: "≈ 6 mois",
    bestFor:
      "Activité 100 % française. Premier dépôt avant extension internationale.",
  },
  {
    name: "Union Européenne",
    scope: "27 États membres en un seul dépôt",
    office: "EUIPO",
    duration: "≈ 4 à 6 mois",
    bestFor:
      "Activité européenne ou ambition d'expansion UE. Plus économique que 27 dépôts nationaux.",
  },
  {
    name: "International",
    scope: "Jusqu'à 130 pays via le Protocole de Madrid",
    office: "OMPI",
    duration: "12 à 18 mois",
    bestFor:
      "Marque déjà déposée dans un pays d'origine, expansion ciblée hors UE (USA, Chine, UK post-Brexit).",
  },
];

const types = [
  {
    type: "Verbale",
    description:
      "Mots, lettres, chiffres, slogans. Le signe est protégé indépendamment de sa graphie.",
    example: "« Socialex »",
  },
  {
    type: "Figurative",
    description:
      "Logo, dessin, image. La protection porte sur l'élément visuel.",
    example: "Logo type swoosh, étoile, monogramme",
  },
  {
    type: "Semi-figurative",
    description:
      "Combinaison de mots et d'éléments graphiques. Protection plus large.",
    example: "Logo + nom dans une typographie particulière",
  },
  {
    type: "Sonore, 3D, position…",
    description:
      "Marques non-traditionnelles (jingles, formes de produits, motifs). Plus complexes à enregistrer.",
    example: "Jingle de marque, forme de bouteille",
  },
];

const steps = [
  {
    n: "01",
    t: "Recherche d'antériorité",
    d: "Vérification approfondie sur les bases INPI, EUIPO et OMPI : marques identiques ou similaires, dénominations sociales, noms de domaine. Étape déterminante pour éviter les rejets et oppositions.",
  },
  {
    n: "02",
    t: "Choix des classes de Produits et Services concernés",
    d: "Sélection précise des classes à protéger selon votre activité. Une couverture trop large entraîne des taxes excessives et un risque de déchéance ; une couverture trop étroite laisse votre marque vulnérable. Le bon équilibre est stratégique.",
  },
  {
    n: "03",
    t: "Dépôt auprès de l'office (INPI / EUIPO etc.)",
    d: "Rédaction du libellé conforme à la classification, dépôt en ligne sur le portail compétent (INPI pour la France, EUIPO pour l'Union européenne, etc.) et paiement des taxes officielles.",
  },
  {
    n: "04",
    t: "Suivi de la procédure de publication et d'enregistrement",
    d: "Suivi de la publication au bulletin officiel, gestion de la période d'opposition (2 mois INPI, 3 mois EUIPO), réception du certificat d'enregistrement.",
  },
  {
    n: "05",
    t: "Rappel du renouvellement avant l'échéance",
    d: "Mise en place d'un calendrier de renouvellement décennal et alerte plusieurs mois avant l'échéance pour ne jamais perdre votre marque.",
  },
];

const faqs = [
  {
    q: "Pourquoi déposer sa marque ?",
    a: "Le dépôt confère un monopole d'exploitation de 10 ans renouvelable indéfiniment sur le territoire choisi. Il permet d'agir en contrefaçon contre les imitations, d'opposer la marque à des tiers, de la valoriser financièrement (cession, licence) et de sécuriser un nom de domaine ou un compte sur les plateformes (Amazon Brand Registry, Apple App Store).",
  },
  {
    q: "Quelle est la différence entre dépôt INPI, EUIPO et international ?",
    a: "L'INPI protège votre marque uniquement en France. L'EUIPO (marque de l'Union européenne) protège dans les 27 États membres en un seul dépôt, plus économique que 27 dépôts nationaux. Le système de Madrid (OMPI) permet d'étendre une marque existante à plus de 130 pays selon une logique « à la carte ». Le choix dépend de votre marché actuel et de vos ambitions d'expansion.",
  },
  {
    q: "Combien coûte le dépôt d'une marque ?",
    a: "Nos forfaits sont tout inclus, sans frais cachés. Dépôt en France à l'INPI : 340 € TTC pour 1 classe, +40 € par classe supplémentaire. Dépôt en Union européenne à l'EUIPO : 1 050 € TTC pour 1 classe, +50 € pour la deuxième puis +150 € par classe supplémentaire. Dépôt international via le Protocole de Madrid : sur devis selon les pays choisis. Dans tous les cas, la recherche d'antériorité, le choix des classes, le dépôt et le suivi de la procédure jusqu'à l'enregistrement sont compris.",
  },
  {
    q: "Combien de temps prend une procédure de dépôt de marque ?",
    a: "À l'INPI, comptez environ 6 mois entre le dépôt et l'enregistrement définitif (sauf opposition). À l'EUIPO, 4 à 6 mois. Pour un dépôt international via le Protocole de Madrid, 12 à 18 mois. La marque est cependant protégée dès la date de dépôt (priorité), même si l'enregistrement intervient plus tard.",
  },
  {
    q: "Qu'est-ce qu'une classe de Nice et combien en choisir ?",
    a: "La classification de Nice répartit produits et services en 45 classes (1 à 34 pour les produits, 35 à 45 pour les services). Vous devez désigner les classes correspondant à votre activité réelle ou prévue dans les 5 ans (au-delà, risque de déchéance pour défaut d'usage). Pour une activité de prestations de services en ligne, on cible souvent les classes 35 (publicité, gestion d'entreprise), 41 (formation) et 42 (services informatiques). Nous identifions les classes pertinentes lors de l'audit.",
  },
  {
    q: "Que faire en cas d'opposition au dépôt ?",
    a: "Pendant la période d'opposition (2 mois INPI, 3 mois EUIPO), un tiers titulaire d'un droit antérieur (marque, dénomination, AOP) peut s'opposer à votre dépôt. Nous analysons la recevabilité de l'opposition, rédigeons les observations en réponse et négocions le cas échéant un accord de coexistence. La recherche d'antériorité préalable réduit drastiquement ce risque.",
  },
  {
    q: "Comment renouveler ma marque à 10 ans ?",
    a: "Le renouvellement doit être demandé dans les 6 mois précédant l'expiration ou dans les 6 mois suivants moyennant surtaxe. Il est purement administratif : pas d'examen, pas d'opposition.",
  },
  {
    q: "Que faire si quelqu'un copie ma marque ?",
    a: "Le titulaire dispose d'une action en contrefaçon devant le Tribunal judiciaire compétent. Les sanctions peuvent être civiles (dommages-intérêts, interdiction sous astreinte, destruction des produits) et pénales (3 ans d'emprisonnement, 300 000 € d'amende). En amont, une mise en demeure suffit souvent à faire cesser l'usage litigieux. Nous accompagnons l'ensemble du contentieux.",
  },
  {
    q: "Quelle différence entre marque verbale, figurative et semi-figurative ?",
    a: "La marque verbale protège un mot ou une expression indépendamment de sa graphie (« Socialex » écrit dans n'importe quelle police). La marque figurative protège un visuel pur (logo, pictogramme). La marque semi-figurative combine les deux : nom + traitement graphique spécifique. Le choix dépend de votre stratégie : la marque verbale offre la protection la plus large, la marque figurative protège votre identité visuelle.",
  },
];

const breadcrumbSchema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    { "@type": "ListItem", position: 1, name: "Accueil", item: SITE },
    {
      "@type": "ListItem",
      position: 2,
      name: "Marques",
      item: `${SITE}/marques`,
    },
    {
      "@type": "ListItem",
      position: 3,
      name: "Dépôt de marque",
      item: PAGE_URL,
    },
  ],
};

const serviceSchema = {
  "@context": "https://schema.org",
  "@type": "Service",
  name: "Dépôt de marque",
  serviceType: "Dépôt et protection de marque",
  description:
    "Recherche d'antériorité, dépôt de marque à l'INPI, à l'EUIPO ou via le Protocole de Madrid. Surveillance, opposition, renouvellement décennal et action en contrefaçon.",
  provider: { "@id": "https://socialex.pro/#organization" },
  areaServed: { "@type": "Country", name: "France" },
  url: PAGE_URL,
  offers: {
    "@type": "Offer",
    name: "Dépôt de marque",
    price: "340",
    priceCurrency: "EUR",
    url: `${PAGE_URL}/formulaire`,
    availability: "https://schema.org/InStock",
  },
};

const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: faqs.map((f) => ({
    "@type": "Question",
    name: f.q,
    acceptedAnswer: { "@type": "Answer", text: f.a },
  })),
};

export default function DepotDeMarquesPage() {
  return (
    <>
      <JsonLd
        data={[breadcrumbSchema, serviceSchema, faqSchema]}
      />

      {/* Hero */}
      <section className="pt-32 pb-24 md:pb-32">
        <div className="container-page">
          <nav
            aria-label="Fil d'ariane"
            className="flex items-center gap-2 text-xs uppercase tracking-widest text-on-surface-variant mb-12 font-serif"
          >
            <Link href="/" className="hover:text-primary transition-colors">
              Accueil
            </Link>
            <span className="opacity-50">/</span>
            <Link
              href="/marques"
              className="hover:text-primary transition-colors"
            >
              Marques
            </Link>
            <span className="opacity-50">/</span>
            <span className="text-primary">Dépôt de marque</span>
          </nav>

          <div className="grid grid-cols-12 gap-8 lg:gap-16 items-start">
            <div className="col-span-12 lg:col-span-7 space-y-8 reveal-hero">
              <Icon
                name="branding_watermark"
                className="!text-5xl text-secondary"
              />
              <span className="eyebrow block">Droit des Marques</span>
              <h1 className="display-lg text-primary">
                Dépôt de marque :<br />
                <span className="italic font-normal">protégez ce qui vous distingue.</span>
              </h1>
              <p className="body-lg text-on-surface-variant">
                Recherche d'antériorité, dépôt à l'INPI, à l'EUIPO ou à
                l'international, surveillance et renouvellement. Une protection
                juridique solide pour votre identité commerciale.
              </p>
              <div className="flex flex-wrap gap-3 pt-4">
                <Link
                  href="/marques/depot-de-marques/formulaire"
                  className="btn btn-primary"
                >
                  Démarrer mon dépôt
                </Link>
                <a href="#territoires" className="btn btn-secondary">
                  Quelle protection ?
                </a>
              </div>
            </div>

            <aside className="col-span-12 lg:col-span-5 lg:sticky lg:top-32">
              <div className="bg-white border border-outline-variant p-10">
                <p className="eyebrow mb-6">Ce qui est inclus</p>
                <ul className="space-y-3">
                  {[
                    "Recherche d'antériorité",
                    "Choix des classes de Produits et Services concernés",
                    "Dépôt auprès de l'office (INPI / EUIPO etc.)",
                    "Suivi de la procédure de publication et d'enregistrement",
                    "Rappel du renouvellement avant l'échéance",
                  ].map((h) => (
                    <li
                      key={h}
                      className="flex items-start gap-3 body-md text-on-surface"
                    >
                      <Icon
                        name="check_circle"
                        className="!text-base text-secondary mt-1"
                      />
                      <span>{h}</span>
                    </li>
                  ))}
                </ul>
                <div className="border-t border-outline-variant/40 mt-8 pt-8 space-y-3">
                  <p className="eyebrow">Protection</p>
                  <p className="body-md text-on-surface">
                    <span className="font-semibold">10 ans</span> renouvelables
                    indéfiniment.
                  </p>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* Comparatif territoires */}
      <section
        id="territoires"
        className="bg-surface-container-low reveal scroll-mt-32"
      >
        <div className="container-page py-24 md:py-32">
          <div className="max-w-3xl mb-20">
            <span className="eyebrow block mb-4">Choisir la portée</span>
            <h2 className="headline-xl text-primary mb-6">
              France, Europe, international :<br />
              <span className="italic font-normal">quelle protection choisir ?</span>
            </h2>
            <p className="body-lg text-on-surface-variant">
              La marque protège uniquement le territoire pour lequel elle a
              été déposée. Le bon arbitrage dépend de votre marché actuel et
              de vos ambitions d'expansion à 5 ans.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
            {territories.map((t) => (
              <article
                key={t.name}
                className="bg-white border border-outline-variant p-8 lg:p-10 flex flex-col"
              >
                <div className="flex items-baseline gap-3 mb-6">
                  <span className="font-serif italic text-secondary text-lg">
                    {t.name}
                  </span>
                </div>
                <p className="body-md text-on-surface-variant mb-6">
                  {t.scope}
                </p>

                <dl className="space-y-3 mb-6 text-sm flex-1">
                  <Row label="Office" value={t.office} />
                  <Row label="Délai" value={t.duration} />
                </dl>

                <div className="border-t border-outline-variant/40 pt-6">
                  <p className="eyebrow mb-2 !text-secondary">
                    Recommandé pour
                  </p>
                  <p className="body-md text-on-surface-variant">
                    {t.bestFor}
                  </p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Types de marques */}
      <section className="reveal">
        <div className="container-page py-24 md:py-32">
          <div className="max-w-3xl mb-20">
            <span className="eyebrow block mb-4">Types de marques</span>
            <h2 className="headline-xl text-primary mb-6">
              Verbale, figurative ou
              <br />
              <span className="italic font-normal">semi-figurative ?</span>
            </h2>
            <p className="body-lg text-on-surface-variant">
              Le type de marque détermine l'étendue de votre protection.
              Beaucoup de jeunes marques sous-protègent leur identité en
              choisissant uniquement le logo.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
            {types.map((t) => (
              <div
                key={t.type}
                className="bg-white border border-outline-variant p-8 lg:p-10"
              >
                <h3 className="font-serif italic text-secondary text-lg mb-3">
                  Marque {t.type.toLowerCase()}
                </h3>
                <p className="body-md text-on-surface-variant mb-6">
                  {t.description}
                </p>
                <p className="text-sm text-on-surface italic">
                  Ex. {t.example}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Méthodologie */}
      <section className="bg-surface-container-low reveal">
        <div className="container-page py-24 md:py-32">
          <div className="max-w-3xl mb-20">
            <span className="eyebrow block mb-4">Notre méthodologie</span>
            <h2 className="headline-xl text-primary mb-6">
              De la recherche d'antériorité
              <br />
              <span className="italic font-normal">à la surveillance active.</span>
            </h2>
          </div>
          <ol className="space-y-0 border-t border-outline-variant/60">
            {steps.map((s) => (
              <li
                key={s.n}
                className="grid grid-cols-12 gap-6 py-10 border-b border-outline-variant/60"
              >
                <div className="col-span-12 md:col-span-2">
                  <p className="font-serif italic text-secondary text-3xl">
                    {s.n}
                  </p>
                </div>
                <div className="col-span-12 md:col-span-10 space-y-3">
                  <h3 className="headline-md !text-xl text-primary">
                    {s.t}
                  </h3>
                  <p className="body-md text-on-surface-variant">{s.d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Tarif */}
      <section id="tarif" className="reveal scroll-mt-32">
        <div className="container-page py-24 md:py-32">
          <div className="max-w-3xl mb-16 mx-auto text-center">
            <span className="eyebrow block mb-4">Tarif transparent</span>
            <h2 className="headline-xl text-primary mb-6">
              Trois portées,
              <br />
              <span className="italic font-normal">trois forfaits.</span>
            </h2>
            <p className="body-lg text-on-surface-variant">
              Tous nos forfaits incluent la recherche d'antériorité, le choix
              des classes, le dépôt et le suivi de la procédure jusqu'à
              l'enregistrement.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 max-w-6xl mx-auto">
            {[
              {
                eyebrow: "Dépôt en France",
                title: "INPI",
                price: "340 €",
                description:
                  "1 classe incluse. +40 € par classe supplémentaire. Couverture du territoire français (DOM-TOM inclus).",
              },
              {
                eyebrow: "Dépôt en UE",
                title: "EUIPO",
                price: "1 050 €",
                description:
                  "1 classe incluse. +50 € pour la deuxième classe, puis +150 € par classe supplémentaire. Couverture des 27 États membres en un seul dépôt.",
              },
              {
                eyebrow: "Dépôt international",
                title: "OMPI",
                price: "Sur devis",
                description:
                  "Tarif établi selon les pays choisis. Jusqu'à 130 pays via le Protocole de Madrid (USA, Chine, UK, etc.).",
              },
            ].map((card) => (
              <article
                key={card.eyebrow}
                className="bg-primary text-on-primary p-10 lg:p-12 flex flex-col"
              >
                <span className="eyebrow !text-secondary block mb-4">
                  {card.eyebrow}
                </span>
                <h3 className="font-serif text-2xl md:text-3xl mb-8 leading-tight">
                  {card.title}
                </h3>
                <p className="font-serif font-medium leading-none mb-6 text-4xl md:text-5xl tracking-[-0.02em] text-secondary">
                  {card.price}
                </p>
                <p className="body-md opacity-70 mb-10 flex-1">
                  {card.description}
                </p>
                <Link
                  href="/marques/depot-de-marques/formulaire"
                  className="btn btn-light w-full justify-center"
                >
                  Démarrer mon dépôt
                </Link>
              </article>
            ))}
          </div>

          <p className="text-xs uppercase tracking-widest text-on-surface-variant mt-12 font-serif text-center">
            Réponse sous 24 h ouvrées · Sans engagement
          </p>
        </div>
      </section>

      {/* FAQ */}
      <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">
                Les vraies questions.
                <br />
                <span className="italic font-normal">
                  Les vraies réponses.
                </span>
              </h2>
              <p className="body-md text-on-surface-variant">
                Une question manque ?{" "}
                <Link
                  href="/contact"
                  className="text-primary underline hover:text-secondary"
                >
                  Contactez-nous
                </Link>
                , réponse sous 24 h ouvrées.
              </p>
            </div>
            <div className="col-span-12 lg:col-span-8">
              {faqs.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>

      {/* Cross-links */}
      <section className="reveal">
        <div className="container-page py-24 md:py-32">
          <div className="flex items-end justify-between mb-12 flex-wrap gap-6">
            <h2 className="headline-xl text-primary">
              Continuer votre démarche
            </h2>
            <Link
              href="/marques"
              className="font-serif text-sm tracking-wide uppercase border-b border-primary pb-1 hover:text-secondary hover:border-secondary transition-colors"
            >
              Tous les services Marques
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
            {[
              {
                href: "/societes/creation-de-societe",
                icon: "corporate_fare",
                title: "Création de société",
                desc: "Statuts sur-mesure, immatriculation au RCS, K-bis en 4 jours en moyenne.",
              },
              {
                href: "/societes/dissolution-de-societe",
                icon: "gavel",
                title: "Dissolution de société",
                desc: "Dissolution amiable, liquidation, radiation : fin d'activité sécurisée.",
              },
              {
                href: "/contact",
                icon: "mail",
                title: "Échange découverte",
                desc: "30 minutes pour cadrer votre stratégie de protection. Sans engagement.",
              },
            ].map((l) => (
              <Link
                key={l.href}
                href={l.href}
                className="group bg-white border border-outline-variant p-8 hover:border-primary transition-colors duration-500"
              >
                <Icon name={l.icon} className="!text-3xl text-primary mb-6" />
                <h3 className="font-serif font-medium text-xl text-primary mb-3 group-hover:text-secondary transition-colors">
                  {l.title}
                </h3>
                <p className="body-md text-on-surface-variant">{l.desc}</p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* CTA final */}
      <section className="bg-primary text-on-primary reveal">
        <div className="container-page py-24 md:py-28 text-center">
          <div className="max-w-3xl mx-auto space-y-8">
            <h2 className="display-lg !text-4xl md:!text-5xl">
              Une marque non déposée n'existe pas juridiquement.
            </h2>
            <p className="body-lg opacity-70">
              Sécurisez votre identité commerciale avant qu'un tiers ne le
              fasse à votre place. Recherche d'antériorité offerte sur le
              forfait dépôt.
            </p>
            <Link href="/contact" className="btn btn-light">
              Contacter nos experts
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-baseline justify-between gap-4 border-b border-outline-variant/40 pb-2">
      <dt className="text-on-surface-variant text-xs uppercase tracking-widest font-serif shrink-0">
        {label}
      </dt>
      <dd className="text-on-surface text-right">{value}</dd>
    </div>
  );
}