/* 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="../" 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>
            Back
          </a>
          <span className="w-px h-4 bg-line"/>
          <AX.Wordmark markSize={20} fontSize={16} ls={4}/>
        </div>
        <AX.CTA primary href="../venue/">See venue features</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>Ticket security</AX.Eyebrow>
          <h1 id="sec-h1" className="mt-6 font-bold tracking-[-0.04em] leading-[1.0]"
            style={{ fontSize:"clamp(42px,6vw,78px)" }}>
            Every ticket.<br className="hidden sm:block"/>Cryptographically verified.
          </h1>
          <p className="mt-7 text-[18px] text-sub leading-relaxed max-w-[560px]">
            Axxess tickets are signed with asymmetric cryptography. They validate in milliseconds at the door — online or offline — and cannot be faked, duplicated, or reused.
          </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:"Offline", label:"Validates without internet" },
            { val:"<50ms", label:"Per-scan verification time" },
            { val:"0", label:"Duplicate entries allowed" },
          ].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:"Ticket is purchased",
      body:"When a guest buys a ticket, the Axxess backend generates a unique JSON Web Token signed with the event's private key. The token encodes ticket type, event ID, guest name, and a unique nonce.",
    },
    {
      num:"02",
      title:"QR code is delivered",
      body:"The signed JWT is embedded in a QR code delivered to the guest's Axxess wallet. The private key never leaves the server — the QR is the signed payload only.",
    },
    {
      num:"03",
      title:"Scanner verifies the signature",
      body:"At the door, Axxess Ops verifies the signature using the event's public key — which is pre-loaded on each scanner device at door-open time. No network call required.",
    },
    {
      num:"04",
      title:"Ticket is permanently marked",
      body:"Once valid, the scan is committed to the local device log and synced to the server when connectivity returns. Any re-scan of the same token triggers an instant duplicate alert.",
    },
  ];
  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>How it works</AX.Eyebrow>
          <h2 id="how-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            From purchase to door scan.
          </h2>
          <p className="mt-4 text-[15.5px] text-sub leading-relaxed">
            A cryptographically signed ticket is tamper-proof by design. Here's the full chain.
          </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:"Offline validation",
      body:"The event's public key is pushed to every scanner at door-open. Signatures verify locally — no API call, no network dependency. Your door works even if the internet goes down mid-event.",
      detail:"JWT RS256 · Public key pre-loaded at event start · Works indefinitely offline",
      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:"Duplicate blocking",
      body:"Each token has a unique nonce. Once scanned, it's marked in the local scan log and synced when connectivity returns. Any second attempt — same device or different — triggers an immediate rejection.",
      detail:"Per-token nonce · Local log + cloud sync · Cross-device dedup",
      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:"Full audit trail",
      body:"Every scan is logged with: timestamp, scanner device ID, staff account, event ID, and outcome. The log is immutable once written. Your venue has a complete record of every door event.",
      detail:"Immutable event log · Per-staff attribution · Exportable report",
      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>Three guarantees</AX.Eyebrow>
          <h2 id="pil-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            A ticket is valid, used, or fake. Nothing in between.
          </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:"Screenshot re-entry", how:"Duplicate detection catches re-scan of identical token" },
    { threat:"Printed PDF fake", how:"Signature verification fails — payload doesn't match known event key" },
    { threat:"Edited QR code", how:"Any payload modification invalidates the cryptographic signature" },
    { threat:"Resold ticket (used)", how:"Already-scanned tokens are rejected immediately at door" },
    { threat:"Wrong-event ticket", how:"Event ID in token is verified against current event context" },
    { threat:"Offline attack", how:"Public key cannot forge new valid tokens — only server's private key can sign" },
  ];
  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>Attack surface</AX.Eyebrow>
          <h2 id="threat-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(26px,3.4vw,42px)" }}>
            Common fraud vectors, and why they fail.
          </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>Run a secure door</AX.Eyebrow>
            <h2 id="scta-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,52px)" }}>
              Fraud-proof ticketing, free through launch.
            </h2>
            <p className="mt-5 text-[16px] text-sub leading-relaxed">Set up your venue, publish your event, and start scanning — all in under 30 minutes.</p>
            <div className="mt-9 flex flex-wrap gap-4">
              <AX.CTA primary href="mailto:contact@yellogem.com">Partner with us</AX.CTA>
              <AX.CTA href="../venue/">See venue features</AX.CTA>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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