/* global React, AX */

/* ---- NAV ---- */
function SecurityNav() {
  return (
    <header className="sticky top-0 z-50 border-b border-line"
      style={{ background:"rgba(10,10,10,0.92)", backdropFilter:"blur(18px)", WebkitBackdropFilter:"blur(18px)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between gap-8">
        <div className="flex items-center gap-6">
          <a href="../../fr/" className="focusable flex items-center gap-1.5 text-[13px] text-sub hover:text-paper transition-colors">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M9 11L5 7L9 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Retour
          </a>
          <span className="w-px h-4 bg-line"/>
          <AX.Wordmark markSize={20} fontSize={16} ls={4}/>
        </div>
        <AX.CTA primary href="../venue/">Voir les fonctionnalités</AX.CTA>
      </div>
    </header>
  );
}

/* ---- HERO ---- */
function SecurityHero() {
  return (
    <section aria-labelledby="sec-h1" className="relative pt-24 pb-20 lg:pt-32 lg:pb-28 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[450px] rounded-full blur-[150px]"
          style={{ background:"radial-gradient(ellipse,rgba(250,250,250,0.05),transparent 70%)" }}/>
      </div>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 relative">
        <div className="reveal max-w-[720px]">
          <AX.Eyebrow>Sécurité billetterie</AX.Eyebrow>
          <h1 id="sec-h1" className="mt-6 font-bold tracking-[-0.04em] leading-[1.0]"
            style={{ fontSize:"clamp(42px,6vw,78px)" }}>
            Chaque billet.<br className="hidden sm:block"/>Vérifié cryptographiquement.
          </h1>
          <p className="mt-7 text-[18px] text-sub leading-relaxed max-w-[560px]">
            Les billets Axxess sont signés avec une cryptographie asymétrique. Ils se valident en quelques millisecondes à l'entrée — avec ou sans internet — et ne peuvent être falsifiés, dupliqués ou réutilisés.
          </p>
        </div>
        <div className="reveal mt-12 grid grid-cols-3 gap-px rounded-[20px] overflow-hidden" data-d="1"
          style={{ background:"rgba(250,250,250,0.07)" }}>
          {[
            { val:"Hors ligne", label:"Valide sans connexion" },
            { val:"<50ms", label:"Temps de vérification" },
            { val:"0", label:"Doublons autorisés" },
          ].map(({ val, label }) => (
            <div key={label} className="px-7 py-6" style={{ background:"#0A0A0A" }}>
              <div className="text-[28px] lg:text-[36px] font-bold tracking-[-0.03em]">{val}</div>
              <div className="mt-1.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-faint">{label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- HOW IT WORKS ---- */
function SecurityHow() {
  const steps = [
    { num:"01", title:"Achat du billet", body:"Lorsqu'un invité achète un billet, le backend Axxess génère un JSON Web Token unique signé avec la clé privée de l'événement. Le token encode le type de billet, l'ID de l'événement, le nom de l'invité et un nonce unique." },
    { num:"02", title:"Livraison du QR code", body:"Le JWT signé est intégré dans un QR code livré dans le portefeuille Axxess de l'invité. La clé privée ne quitte jamais le serveur — le QR contient uniquement le payload signé." },
    { num:"03", title:"Le scanner vérifie la signature", body:"À l'entrée, Axxess Ops vérifie la signature à l'aide de la clé publique de l'événement — préchargée sur chaque appareil scanner à l'ouverture des portes. Aucun appel réseau nécessaire." },
    { num:"04", title:"Billet marqué définitivement", body:"Une fois valide, le scan est enregistré dans le journal local et synchronisé avec le serveur dès que la connexion revient. Tout nouveau scan du même token déclenche une alerte doublon immédiate." },
  ];
  return (
    <section aria-labelledby="how-h" className="relative py-20 lg:py-28"
      style={{ background:"linear-gradient(180deg,transparent,rgba(250,250,250,0.025),transparent)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[560px]">
          <AX.Eyebrow>Comment ça marche</AX.Eyebrow>
          <h2 id="how-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            De l'achat au scan à l'entrée.
          </h2>
          <p className="mt-4 text-[15.5px] text-sub leading-relaxed">Un billet signé cryptographiquement est infalsifiable par conception. Voici la chaîne complète.</p>
        </div>
        <div className="mt-14 space-y-4">
          {steps.map((s,i) => (
            <div key={i} className="reveal flex gap-8 rounded-[1.5rem] p-7 items-start" data-d={(i%2)+1}
              style={{ background:"rgba(255,255,255,0.025)", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.07)" }}>
              <span className="text-[28px] font-bold font-mono text-faint shrink-0 leading-tight">{s.num}</span>
              <div>
                <h3 className="text-[18px] font-bold tracking-[-0.01em]">{s.title}</h3>
                <p className="mt-2.5 text-[14.5px] text-sub leading-relaxed max-w-[680px]">{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- PILLARS ---- */
function SecurityPillars() {
  const pillars = [
    {
      title:"Validation hors ligne",
      body:"La clé publique de l'événement est envoyée à chaque scanner à l'ouverture. Les signatures se vérifient localement — pas d'appel API, pas de dépendance réseau. Votre entrée fonctionne même si internet coupe en plein événement.",
      detail:"JWT RS256 · Clé publique préchargée · Hors ligne illimité",
      icon:<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 22C12 22 4 18 4 12V5l8-3 8 3v7c0 6-8 10-8 10Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/><path d="M9 12l2 2 4-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    },
    {
      title:"Blocage des doublons",
      body:"Chaque token a un nonce unique. Une fois scanné, il est marqué dans le journal local et synchronisé. Toute deuxième tentative — même appareil ou autre — déclenche un rejet immédiat.",
      detail:"Nonce par token · Journal local + sync cloud · Dédup multi-appareils",
      icon:<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/><path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
    },
    {
      title:"Journal d'audit complet",
      body:"Chaque scan est enregistré avec : horodatage, ID de l'appareil, compte du personnel, ID de l'événement et résultat. Le journal est immuable. Votre salle dispose d'un historique complet de chaque événement à l'entrée.",
      detail:"Journal immuable · Attribution par agent · Export rapport",
      icon:<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><rect x="9" y="3" width="6" height="4" rx="1" stroke="currentColor" strokeWidth="1.5"/><path d="M9 12h6M9 16h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
    },
  ];
  return (
    <section aria-labelledby="pil-h" className="relative py-20 lg:py-28">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[520px]">
          <AX.Eyebrow>Trois garanties</AX.Eyebrow>
          <h2 id="pil-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            Un billet est valide, utilisé ou faux. Rien entre les deux.
          </h2>
        </div>
        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {pillars.map(({ title, body, detail, icon },i) => (
            <div key={i} className="reveal rounded-[1.5rem] p-8 flex flex-col" data-d={i+1}
              style={{ background:"rgba(255,255,255,0.025)", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.07)" }}>
              <div className="w-11 h-11 rounded-xl flex items-center justify-center text-sub mb-6"
                style={{ background:"rgba(250,250,250,0.06)", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.1)" }}>
                {icon}
              </div>
              <h3 className="text-[18px] font-bold tracking-[-0.01em]">{title}</h3>
              <p className="mt-3 text-[14.5px] text-sub leading-relaxed flex-1">{body}</p>
              <p className="mt-6 pt-5 border-t border-line text-[11.5px] font-mono text-faint">{detail}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- THREAT TABLE ---- */
function SecurityThreats() {
  const threats = [
    { threat:"Capture d'écran réutilisée", how:"La détection des doublons bloque le re-scan du token identique" },
    { threat:"PDF imprimé falsifié", how:"La vérification de signature échoue — payload ne correspond pas à la clé de l'événement" },
    { threat:"QR code modifié", how:"Toute modification du payload invalide la signature cryptographique" },
    { threat:"Billet revendu (utilisé)", how:"Les tokens déjà scannés sont rejetés immédiatement à l'entrée" },
    { threat:"Billet mauvais événement", how:"L'ID événement dans le token est vérifié contre le contexte de l'événement en cours" },
    { threat:"Attaque hors ligne", how:"La clé publique ne peut pas forger de nouveaux tokens valides — seule la clé privée du serveur peut signer" },
  ];
  return (
    <section aria-labelledby="threat-h" className="relative py-20 lg:py-24"
      style={{ background:"linear-gradient(180deg,transparent,rgba(250,250,250,0.02),transparent)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[520px]">
          <AX.Eyebrow>Surface d'attaque</AX.Eyebrow>
          <h2 id="threat-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(26px,3.4vw,42px)" }}>
            Vecteurs de fraude courants, et pourquoi ils échouent.
          </h2>
        </div>
        <div className="reveal mt-10 rounded-[1.5rem] overflow-hidden" data-d="1"
          style={{ background:"#0f0f12", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
          {threats.map(({ threat, how },i) => (
            <div key={i} className="flex items-start gap-6 px-7 py-5 border-b border-line last:border-0"
              style={{ background: i%2===0?"transparent":"rgba(250,250,250,0.015)" }}>
              <div className="flex items-center gap-2.5 w-52 shrink-0">
                <div className="w-1.5 h-1.5 rounded-full" style={{ background:"rgba(248,113,113,0.8)" }} aria-hidden="true"/>
                <span className="text-[14px] font-semibold text-sub">{threat}</span>
              </div>
              <div className="flex items-center gap-2.5 flex-1">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                  <path d="M3 7.5l2.5 2.5 5.5-6" stroke="rgba(74,222,128,0.7)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <span className="text-[14px] text-sub">{how}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA ---- */
function SecurityCTA() {
  return (
    <section aria-labelledby="scta-h" className="relative pt-12 pb-24 lg:pt-16 lg:pb-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal rounded-[2.5rem] p-10 lg:p-16 relative overflow-hidden"
          style={{ background:"linear-gradient(140deg,rgba(250,250,250,0.07),rgba(250,250,250,0.02))", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.2)" }}>
          <div className="absolute -top-16 -right-16 w-72 h-72 rounded-full blur-3xl pointer-events-none" aria-hidden="true"
            style={{ background:"radial-gradient(circle,rgba(250,250,250,0.07),transparent 70%)" }}/>
          <div className="relative max-w-[560px]">
            <AX.Eyebrow>Une entrée sécurisée</AX.Eyebrow>
            <h2 id="scta-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,52px)" }}>
              Billetterie infalsifiable, gratuite pendant le lancement.
            </h2>
            <p className="mt-5 text-[16px] text-sub leading-relaxed">Créez votre salle, publiez votre événement et commencez à scanner — en moins de 30 minutes.</p>
            <div className="mt-9 flex flex-wrap gap-4">
              <AX.CTA primary href="mailto:contact@yellogem.com">Devenir partenaire</AX.CTA>
              <AX.CTA href="../venue/">Voir les fonctionnalités</AX.CTA>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AX = Object.assign(window.AX||{}, {
  SecurityNav, SecurityHero, SecurityHow, SecurityPillars, SecurityThreats, SecurityCTA,
});
