// ui_kits/marketing/primitives.jsx
// The small set of brand primitives used across the marketing surface.

const { useEffect, useState } = React;

// ---- Container — the 1160px max-width gutter ----
function Container({ children, style }) {
  return (
    <div
      style={{
        width: "min(1160px, calc(100vw - 48px))",
        margin: "0 auto",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

// ---- Mark — the master mark, with optional breath animation ----
// Locked geometry per Brand Guidelines v1.3.
function Mark({ size = 56, breathing = true, color = "var(--fg-1)" }) {
  return (
    <svg
      viewBox="0 0 80 60"
      width={size}
      height={(size * 60) / 80}
      style={{ overflow: "visible", display: "block", color }}
      aria-hidden="true"
    >
      <circle
        cx="40"
        cy="18"
        r="3.5"
        fill="currentColor"
        className={breathing ? "breathing" : ""}
      />
      <path d="M20 30 H60" stroke="currentColor" strokeWidth="1.25" fill="none" strokeLinecap="round" />
      <path d="M32 30 A8 8 0 0 0 48 30" stroke="currentColor" strokeWidth="1.25" fill="none" strokeLinecap="round" />
      <path d="M26 30 A14 14 0 0 0 54 30" stroke="currentColor" strokeWidth="1.25" fill="none" strokeLinecap="round" />
      <path d="M20 30 A20 20 0 0 0 60 30" stroke="currentColor" strokeWidth="1.25" fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ---- Wordmark — live text version. The SVG asset is preferred for production. ----
function Wordmark({ size = 32, text = "tehom" }) {
  return (
    <span
      style={{
        fontFamily: "var(--font-display)",
        fontWeight: 300,
        fontVariationSettings: '"opsz" 144',
        fontSize: size,
        letterSpacing: "-0.035em",
        lineHeight: 1,
        color: "var(--fg-1)",
      }}
    >
      {text}
    </span>
  );
}

// ---- BrandLockup — Mark + Wordmark inline ----
function BrandLockup({ breathing = true, size = 56 }) {
  return (
    <a
      href="#top"
      aria-label="Tehom AI home"
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 14,
        textDecoration: "none",
      }}
    >
      <Mark size={size} breathing={breathing} />
      <Wordmark size={(size * 32) / 56} />
    </a>
  );
}

// ---- Eyebrow — the .meta classification label ----
function Eyebrow({ children }) {
  return (
    <div
      className="meta"
      style={{
        fontFamily: "var(--font-mono)",
        color: "var(--fg-4)",
        fontSize: 12,
        letterSpacing: "0.08em",
        textTransform: "uppercase",
      }}
    >
      {children}
    </div>
  );
}

// ---- TextLink — slate underline rest, light underline hover ----
function TextLink({ href = "#", children }) {
  const [hover, setHover] = useState(false);
  return (
    <a
      href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        color: "var(--fg-1)",
        textDecoration: "none",
        borderBottom: `1px solid ${hover ? "var(--fg-1)" : "var(--tehom-utility)"}`,
        paddingBottom: 5,
        fontFamily: "var(--font-body)",
        fontWeight: 500,
        transition: "border-color 160ms cubic-bezier(0.4,0,0.2,1)",
      }}
    >
      {children}
    </a>
  );
}

// ---- StatusDot — idle / active (signal) / complete / error ----
function StatusDot({ state = "idle" }) {
  const config = {
    idle:     { fill: "transparent", border: "1.5px solid var(--tehom-muted)", animate: false },
    active:   { fill: "var(--tehom-signal)", border: "none", animate: true },
    complete: { fill: "var(--fg-1)", border: "none", animate: false },
    error:    { fill: "var(--tehom-error)", border: "none", animate: false },
  }[state];
  return (
    <span
      aria-label={state}
      style={{
        display: "inline-block",
        width: 9,
        height: 9,
        borderRadius: 999,
        background: config.fill,
        border: config.border,
        animation: config.animate
          ? "tehom-breath var(--dur-breath) var(--ease-quiet) infinite"
          : "none",
      }}
    />
  );
}

Object.assign(window, {
  Container,
  Mark,
  Wordmark,
  BrandLockup,
  Eyebrow,
  TextLink,
  StatusDot,
});