/* Kingstoring Vector — shared components
   Logo, nav, footer, terminal-style ornaments.
*/

/* =========================================================
   VECTOR LOGO — radar sweep mark
   ========================================================= */
function VectorMark({ size = 64, color = "currentColor", accent = "var(--vk-amber)", signal = "var(--vk-blue)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 70 A 32 32 0 0 1 80 70" stroke={color} strokeWidth="1.4" fill="none" />
      <path d="M24 70 A 24 24 0 0 1 72 70" stroke={color} strokeWidth="0.9" fill="none" opacity="0.7" />
      <path d="M32 70 A 16 16 0 0 1 64 70" stroke={color} strokeWidth="0.7" fill="none" opacity="0.5" />
      {Array.from({ length: 9 }).map((_, i) => {
        const a = (180 + i * 22.5) * Math.PI / 180;
        const r1 = 32, r2 = 36;
        return (
          <line key={i}
            x1={48 + r1 * Math.cos(a)} y1={70 + r1 * Math.sin(a)}
            x2={48 + r2 * Math.cos(a)} y2={70 + r2 * Math.sin(a)}
            stroke={color} strokeWidth="1.1" />
        );
      })}
      <path d="M48 70 L80 38 L78 32 Z" fill={accent} opacity="0.9" />
      <line x1="48" y1="70" x2="48" y2="14" stroke={color} strokeWidth="1" strokeDasharray="2 2" opacity="0.5" />
      <circle cx="48" cy="70" r="3" fill={color} />
      <circle cx="80" cy="38" r="2.2" fill={signal} />
      <line x1="10" y1="70" x2="86" y2="70" stroke={color} strokeWidth="1.6" />
    </svg>
  );
}

function VectorLockup({ height = 32, color = "var(--vk-ivory)", accent = "var(--vk-amber)", signal = "var(--vk-blue)", subColor = "var(--vk-mist)" }) {
  return (
    <a href="index.html" style={{ display: "inline-flex", alignItems: "center", gap: height * 0.45, color }}>
      <VectorMark size={height * 1.2} color={color} accent={accent} signal={signal} />
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontFamily: "var(--vk-font-display)", fontSize: height * 0.6, fontWeight: 500, letterSpacing: "-0.025em" }}>kingstoring</span>
        <span style={{ fontFamily: "var(--vk-font-mono)", fontSize: height * 0.22, letterSpacing: "0.32em", textTransform: "uppercase", marginTop: height * 0.14, color: subColor }}>// signal · over · noise</span>
      </div>
    </a>
  );
}

/* =========================================================
   TICKER BAR — top of every page (Bloomberg style)
   ========================================================= */
function TickerBar() {
  const items = [
    { l: "ASSOCIÉS·CONTACTÉS·CUMUL", v: "5000+", t: "+12.4%", up: true },
    { l: "AG·MOBILISÉES·2018-2026", v: "12", t: "+3", up: true },
    { l: "QUORUM·MOYEN·ATTEINT", v: "74%", t: "+2.1pt", up: true },
    { l: "LANGUES·SUPPORTÉES", v: "4", t: "FR·EN·IT·ES", up: null },
    { l: "CANAUX·ACTIFS", v: "4", t: "MAIL·SMS·POST·WEB", up: null },
    { l: "DÉLAI·MOBILISATION·MÉDIAN", v: "45j", t: "-3j", up: true },
    { l: "BUREAU", v: "NICE", t: "—", up: null },
    { l: "ANNÉE·FONDATION", v: "2018", t: "—", up: null },
  ];
  return (
    <div data-ks-ticker style={{ background: "var(--vk-ink)", color: "var(--vk-ivory)", borderBottom: "1px solid var(--vk-ink-3)", overflow: "hidden", position: "relative", height: 36, display: "flex", alignItems: "center" }}>
      <div data-ks-ticker-track style={{ display: "flex", gap: 0, animation: "vk-ticker 60s linear infinite", whiteSpace: "nowrap", paddingLeft: 24 }}>
        {[...items, ...items, ...items].map((x, i) => (
          <div key={i} data-ks-ticker-item data-l={x.l} data-v={x.v} data-t={x.t} data-up={String(x.up)} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "0 24px", borderRight: "1px solid var(--vk-ink-3)", fontFamily: "var(--vk-font-mono)", fontSize: 11, cursor: "pointer" }}>
            <span style={{ color: "var(--vk-mist)", letterSpacing: "0.15em" }}>{x.l}</span>
            <span style={{ color: "var(--vk-ivory)", fontWeight: 600 }}>{x.v}</span>
            <span style={{ color: x.up === true ? "var(--vk-green)" : x.up === false ? "var(--vk-red)" : "var(--vk-mist)" }}>
              {x.up === true ? "▲" : x.up === false ? "▼" : "■"} {x.t}
            </span>
          </div>
        ))}
      </div>
      <style>{`@keyframes vk-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }`}</style>
    </div>
  );
}

/* =========================================================
   NAV — sticky, dark
   ========================================================= */
function Nav({ active = "home" }) {
  const links = [
    { id: "home",      label: "Cabinet",                href: "index.html"     },
    { id: "osint",     label: "OSINT & data research",  href: "osint.html"     },
    { id: "timeshare", label: "Timeshare",              href: "timeshare.html" },
    { id: "quorum",    label: "Quorum",                 href: "quorum.html"    },
    { id: "contact",   label: "Contact",                href: "contact.html"   },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 40, background: "rgba(13,17,23,0.92)", backdropFilter: "blur(8px)", borderBottom: "1px solid var(--vk-ink-3)", color: "var(--vk-ivory)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "16px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
        <VectorLockup height={28} />
        <nav style={{ display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap", justifyContent: "center" }}>
          {links.map(l => (
            <a key={l.id} href={l.href} style={{
              padding: "10px 10px",
              fontFamily: "var(--vk-font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "lowercase",
              whiteSpace: "nowrap",
              color: active === l.id ? "var(--vk-amber)" : "var(--vk-ivory)",
              borderBottom: active === l.id ? "1px solid var(--vk-amber)" : "1px solid transparent",
              transition: "all .2s",
            }}>// {l.label}</a>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-mist)", letterSpacing: "0.15em" }}>FR · EN</span>
          <a href="contact.html" style={{
            fontFamily: "var(--vk-font-mono)", fontSize: 11, letterSpacing: "0.18em",
            padding: "9px 16px", background: "var(--vk-amber)", color: "var(--vk-ink)",
            fontWeight: 600, whiteSpace: "nowrap",
          }}>BRIEFING →</a>
        </div>
      </div>
    </header>
  );
}

/* =========================================================
   FOOTER
   ========================================================= */
function Footer() {
  return (
    <footer style={{ background: "var(--vk-ink)", color: "var(--vk-ivory)", borderTop: "1px solid var(--vk-ink-3)" }}>
      {/* Pre-footer terminal */}
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "80px 32px 48px", display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 1fr", gap: 48 }}>
        <div>
          <VectorLockup height={32} />
          <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--vk-mist)", marginTop: 24, maxWidth: 360 }}>
            Cabinet conseil et opérationnel. Mobilisation actionnariale, multipropriété, OSINT & data research. Multi-canal et multilingue.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
            <span style={{ fontFamily: "var(--vk-font-mono)", fontSize: 10, letterSpacing: "0.15em", padding: "4px 10px", border: "1px solid var(--vk-ink-3)", color: "var(--vk-mist)" }}>NICE</span>
          </div>
          <p style={{ fontFamily: "var(--vk-font-mono)", fontSize: 11, lineHeight: 1.6, color: "var(--vk-mist)", marginTop: 16, letterSpacing: "0.05em" }}>
            20 Avenue Jean Médecin<br />06000 Nice
          </p>
        </div>
        {[
          { title: "// PRATIQUES", links: ["OSINT & data research", "Timeshare", "Quorum", "Toutes les pratiques"] },
          { title: "// CABINET", links: ["L'équipe", "Méthode", "Confidentialité", "Carrières"] },
          { title: "// RESSOURCES", links: ["Études de cas", "Glossaire multipropriété", "Newsletter"] },
          { title: "// CONTACT", links: ["contact@kingstoring.com", "06.27.76.44.16", "Briefing confidentiel", "Demande presse"] },
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontFamily: "var(--vk-font-mono)", fontSize: 10, letterSpacing: "0.2em", color: "var(--vk-amber)", marginBottom: 16 }}>{col.title}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {col.links.map(l => (
                <li key={l}><a href="#" style={{ fontSize: 13, color: "var(--vk-ivory)" }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Bottom bar */}
      <div style={{ borderTop: "1px solid var(--vk-ink-3)" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", padding: "20px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap", fontFamily: "var(--vk-font-mono)", fontSize: 10, letterSpacing: "0.15em", color: "var(--vk-mist)" }}>
          <span>© KINGSTORING SAS · 2018–2026 · TOUS DROITS RÉSERVÉS</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#" style={{ color: "var(--vk-mist)" }}>MENTIONS LÉGALES</a>
            <a href="#" style={{ color: "var(--vk-mist)" }}>CONFIDENTIALITÉ</a>
            <a href="#" style={{ color: "var(--vk-mist)" }}>RGPD</a>
          </div>
          <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
            <button data-ks-tactical-toggle type="button" aria-label="Tactical cursor mode" style={{ background: "transparent", border: "1px solid var(--vk-ink-3)", color: "var(--vk-mist)", fontFamily: "var(--vk-font-mono)", fontSize: 10, letterSpacing: "0.15em", padding: "5px 9px", cursor: "pointer" }}>TACTICAL · <span data-ks-tactical-state>OFF</span></button>
            <button data-ks-theme-toggle type="button" aria-label="Theme toggle" style={{ background: "transparent", border: "1px solid var(--vk-ink-3)", color: "var(--vk-mist)", fontFamily: "var(--vk-font-mono)", fontSize: 10, letterSpacing: "0.15em", padding: "5px 9px", cursor: "pointer" }}>THEME · <span data-ks-theme-state>TRADING</span></button>
            <span data-ks-live-clock style={{ color: "var(--vk-mist)" }}>NICE · --:--:-- GMT+1</span>
            <span><span className="vk-live-dot"></span>SYSTEM · OPERATIONAL</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* Status pill */
function Pill({ kind = "live", text }) {
  const colors = { live: "var(--vk-green)", verified: "var(--vk-blue)", focal: "var(--vk-amber)" };
  const c = colors[kind] || colors.live;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      fontFamily: "var(--vk-font-mono)", fontSize: 10,
      letterSpacing: "0.18em", textTransform: "uppercase",
      color: c, padding: "5px 10px", border: `1px solid ${c}`,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: c, boxShadow: `0 0 6px ${c}` }} />
      {text}
    </span>
  );
}

/* Corner brackets */
function Brackets({ color = "var(--vk-amber)", inset = 12, size = 12 }) {
  const s = { position: "absolute", width: size, height: size, borderColor: color };
  return (
    <>
      <span style={{ ...s, top: inset, left: inset, borderTop: `1px solid ${color}`, borderLeft: `1px solid ${color}` }} />
      <span style={{ ...s, top: inset, right: inset, borderTop: `1px solid ${color}`, borderRight: `1px solid ${color}` }} />
      <span style={{ ...s, bottom: inset, left: inset, borderBottom: `1px solid ${color}`, borderLeft: `1px solid ${color}` }} />
      <span style={{ ...s, bottom: inset, right: inset, borderBottom: `1px solid ${color}`, borderRight: `1px solid ${color}` }} />
    </>
  );
}

/* Page header (for inner pages) */
function PageHeader({ section, code, title, lead }) {
  return (
    <section style={{ background: "var(--vk-ink)", color: "var(--vk-ivory)", padding: "96px 32px 64px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(rgba(88,166,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.04) 1px, transparent 1px)`, backgroundSize: "32px 32px" }} />
      <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 40 }}>
          <span className="vk-mono" style={{ fontSize: 11, color: "var(--vk-amber)", letterSpacing: "0.22em" }}>// {code}</span>
          <span className="vk-mono" style={{ fontSize: 11, color: "var(--vk-mist)", letterSpacing: "0.22em" }}>{section}</span>
          <span style={{ flex: 1, height: 1, background: "var(--vk-ink-3)" }} />
          <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-mist)", letterSpacing: "0.15em" }}>● LIVE</span>
        </div>
        <h1 style={{ fontFamily: "var(--vk-font-display)", fontSize: 80, lineHeight: 0.95, letterSpacing: "-0.04em", fontWeight: 500, margin: "0 0 24px", maxWidth: 1100 }}>{title}</h1>
        {lead && <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--vk-mist)", maxWidth: 760, margin: 0 }}>{lead}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { VectorMark, VectorLockup, TickerBar, Nav, Footer, Pill, Brackets, PageHeader });