// tokens.jsx - shared primitives used across every page.
// Exports to window so other <script> scopes can use them.

const Mono = ({ children, style, className, ...rest }) => (
  <span className={"mono " + (className || "")} style={style} {...rest}>{children}</span>
);

const Label = ({ children, style, color, ...rest }) => (
  <span className="label" style={{ color: color || "var(--fg-dim)", ...style }} {...rest}>
    {children}
  </span>
);

const Diamond = ({ color = "var(--accent)", size = 7, style }) => (
  <span style={{
    display: "inline-block",
    width: size, height: size,
    background: color,
    transform: "rotate(45deg)",
    marginRight: 8,
    verticalAlign: "middle",
    ...style,
  }} />
);

const Divider = ({ label, style }) => (
  <div style={{
    display: "flex", alignItems: "center", gap: 16,
    margin: "0", ...style,
  }}>
    <span className="label" style={{ whiteSpace: "nowrap" }}>{label}</span>
    <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
  </div>
);

const SectionHead = ({ kicker, title, sub, align = "left" }) => (
  <div style={{
    display: "flex", flexDirection: "column", gap: 18,
    maxWidth: align === "center" ? 780 : 900,
    margin: align === "center" ? "0 auto" : 0,
    textAlign: align,
    alignItems: align === "center" ? "center" : "flex-start",
  }}>
    {kicker && <Label>{kicker}</Label>}
    <h2 className="serif" style={{
      fontSize: "clamp(34px, 4.4vw, 64px)",
      lineHeight: 1.05,
      margin: 0,
      letterSpacing: "-0.015em",
      color: "var(--fg)",
      textWrap: "balance",
    }}>
      {title}
    </h2>
    {sub && (
      <p style={{
        fontSize: 18, lineHeight: 1.55, color: "var(--fg-mute)",
        margin: 0, maxWidth: 640, textWrap: "pretty",
      }}>
        {sub}
      </p>
    )}
  </div>
);

// Status dot with pulse
const Dot = ({ color = "var(--accent)", size = 8, pulse = true }) => (
  <span style={{ position: "relative", display: "inline-block", width: size, height: size }}>
    <span style={{
      position: "absolute", inset: 0, borderRadius: "50%",
      background: color, zIndex: 1,
    }} />
    {pulse && (
      <span style={{
        position: "absolute", inset: 0, borderRadius: "50%",
        background: color, animation: "pulse 2s ease-out infinite",
      }} />
    )}
  </span>
);

// Generic card with thin border
const Card = ({ children, style, hover, ...rest }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        border: "1px solid var(--line)",
        background: hov && hover ? "var(--bg-1)" : "transparent",
        padding: 28,
        transition: "background 160ms, border-color 160ms",
        borderColor: hov && hover ? "var(--fg-dim)" : "var(--line)",
        ...style,
      }}
      {...rest}
    >
      {children}
    </div>
  );
};

// Pill / tag
const Tag = ({ children, color, style }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: 6,
    fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em",
    textTransform: "uppercase",
    padding: "4px 10px",
    border: "1px solid " + (color || "var(--line)"),
    color: color || "var(--fg-mute)",
    borderRadius: 2,
    ...style,
  }}>
    {children}
  </span>
);

// Big stat
const Stat = ({ value, label, color = "var(--fg)" }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
    <div className="serif" style={{ fontSize: "clamp(48px, 6vw, 84px)", lineHeight: 0.95, color, letterSpacing: "-0.02em" }}>
      {value}
    </div>
    <Label>{label}</Label>
  </div>
);

// Horizontal ticker
function Ticker({ items, speed = 55 }) {
  const row = (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 36, padding: "0 18px" }}>
      {items.map((it, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 18, whiteSpace: "nowrap" }}>
          <Diamond size={6} />
          <span className="mono" style={{ fontSize: 12, color: "var(--fg-mute)", letterSpacing: "0.04em" }}>{it}</span>
        </span>
      ))}
    </div>
  );
  return (
    <div style={{
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      overflow: "hidden",
      padding: "14px 0",
      background: "var(--bg)",
    }}>
      <div className="ticker-track" style={{
        display: "inline-flex",
        whiteSpace: "nowrap",
        animationDuration: speed + "s",
      }}>
        {row}{row}
      </div>
    </div>
  );
}

// Image placeholder: subtly-striped bg + monospace explainer
const ImgSlot = ({ label = "image", height = 320, style }) => (
  <div style={{
    position: "relative",
    height,
    border: "1px solid var(--line)",
    background:
      "repeating-linear-gradient(45deg, var(--bg-1) 0 8px, var(--bg) 8px 16px)",
    display: "flex", alignItems: "center", justifyContent: "center",
    ...style,
  }}>
    <span className="mono" style={{
      fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
      color: "var(--fg-dim)",
      padding: "4px 10px", background: "var(--bg)",
    }}>
      [ {label} ]
    </span>
  </div>
);

// Primary logo mark - uses the actual brand asset
const Logo = ({ size = 40, showWordmark = true }) => (
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
    <img
      src="assets/logo-white.png"
      alt="Secure Sleuths"
      style={{ height: size, width: "auto", display: "block" }}
    />
  </div>
);

// Flowing contour lines - the logo's signature diagonal curves
const ContourLines = ({ opacity = 0.18, color = "var(--accent-2)" }) => (
  <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
    pointerEvents: "none", zIndex: 0 }} viewBox="0 0 1600 900" preserveAspectRatio="none">
    <defs>
      <linearGradient id="sl-fade" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={color} stopOpacity="0" />
        <stop offset="50%" stopColor={color} stopOpacity={opacity} />
        <stop offset="100%" stopColor={color} stopOpacity="0" />
      </linearGradient>
    </defs>
    <path d="M -100 780 Q 400 560 900 700 T 1700 520"
      fill="none" stroke="url(#sl-fade)" strokeWidth="1.5" />
    <path d="M -100 850 Q 500 600 1000 760 T 1700 620"
      fill="none" stroke="url(#sl-fade)" strokeWidth="1" opacity="0.7" />
    <path d="M 200 -50 Q 600 300 1000 200 T 1800 350"
      fill="none" stroke="url(#sl-fade)" strokeWidth="1" opacity="0.5" />
    <path d="M -100 300 Q 400 120 900 240 T 1700 180"
      fill="none" stroke="url(#sl-fade)" strokeWidth="1" opacity="0.5" />
  </svg>
);

// Brand background - binary texture + contours, wraps a section
const BrandBackdrop = ({ children, style, binary = true, contours = true }) => (
  <div style={{ position: "relative", overflow: "hidden", ...style }}>
    {binary && <div className="brand-bg" />}
    {contours && <ContourLines />}
    <div style={{ position: "relative", zIndex: 1 }}>{children}</div>
  </div>
);

Object.assign(window, {
  Mono, Label, Diamond, Divider, SectionHead,
  Dot, Card, Tag, Stat, Ticker, ImgSlot, Logo,
  ContourLines, BrandBackdrop,
});