// brand.jsx — Kaiju Labs logo system + iconography

// The mark: a hanko-style square containing a stylized kaiju eye + horn silhouette.
// Geometric, intentionally a little brutalist, reads at 16px and at 200px.
function KaijuMark({ size = 32, tone = "ink", style = {} }) {
  // tone: "ink" (paper-on-ink), "paper" (ink-on-paper), "vermillion" (paper-on-red)
  const palette = {
    ink: { bg: "var(--ink)", fg: "var(--paper)" },
    paper: { bg: "var(--paper)", fg: "var(--ink)" },
    vermillion: { bg: "var(--vermillion)", fg: "var(--paper)" },
    outline: { bg: "transparent", fg: "var(--ink)" },
  }[tone] || { bg: "var(--ink)", fg: "var(--paper)" };

  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={style} aria-label="Kaiju Labs">
      <rect x="2" y="2" width="60" height="60" rx="10" fill={palette.bg}
        stroke={tone === "outline" ? palette.fg : "none"} strokeWidth={tone === "outline" ? 2 : 0} />
      {/* horns */}
      <path d="M14 22 L20 10 L24 22 Z" fill={palette.fg} />
      <path d="M40 22 L44 10 L50 22 Z" fill={palette.fg} />
      {/* head silhouette: angular brow */}
      <path d="M10 26 L20 26 L24 22 L40 22 L44 26 L54 26 L54 40 L48 48 L42 44 L22 44 L16 48 L10 40 Z"
        fill={palette.fg} />
      {/* twin eye-slits — the "kaiju glare" */}
      <rect x="20" y="32" width="8" height="3" rx="1.5" fill={palette.bg} />
      <rect x="36" y="32" width="8" height="3" rx="1.5" fill={palette.bg} />
      {/* fang */}
      <path d="M30 44 L32 50 L34 44 Z" fill={palette.fg} />
    </svg>
  );
}

// Compact wordmark for the header
function Wordmark({ withKanji = true, color = "var(--ink)" }) {
  return (
    <span className="brand">
      <KaijuMark size={28} tone="ink" />
      <span className="brand-word" style={{ color }}>Kaiju Labs</span>
      {withKanji && <span className="brand-kanji">怪獣</span>}
    </span>
  );
}

// Big lockup for hero / footer / about
function Lockup({ size = "lg" }) {
  const scale = size === "xl" ? 1.7 : size === "lg" ? 1 : 0.7;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 18 * scale }}>
      <KaijuMark size={64 * scale} tone="ink" />
      <div style={{ display: "flex", flexDirection: "column", gap: 4 * scale }}>
        <span style={{
          fontFamily: "var(--display)", fontWeight: 800,
          fontSize: 32 * scale, letterSpacing: "-.02em", lineHeight: 1
        }}>Kaiju Labs</span>
        <span style={{
          fontFamily: "var(--mono)", fontSize: 10.5 * scale,
          letterSpacing: ".22em", textTransform: "uppercase",
          color: "var(--mist)"
        }}>
          <span style={{ color: "var(--vermillion)", fontFamily: "var(--serif)", letterSpacing: 0, fontWeight: 700, marginRight: 8 }}>怪獣研究所</span>
          Software Studio · Ontario CA
        </span>
      </div>
    </div>
  );
}

// Hanko (red seal) — used as decoration
function Hanko({ children = "怪", size = 56, rotate = -4 }) {
  return (
    <span className="hanko stamp-edge" style={{
      width: size, height: size, fontSize: size * 0.55,
      transform: `rotate(${rotate}deg)`
    }}>{children}</span>
  );
}

// Decorative kaiju silhouette for backgrounds — original, geometric, looming
function KaijuSilhouette({ color = "currentColor" }) {
  return (
    <svg viewBox="0 0 1200 480" preserveAspectRatio="xMidYMax meet" aria-hidden="true">
      {/* skyline ground */}
      <rect x="0" y="460" width="1200" height="20" fill={color} opacity=".35" />
      {/* buildings — minimal */}
      <g fill={color} opacity=".5">
        <rect x="60" y="380" width="50" height="80" />
        <rect x="125" y="340" width="40" height="120" />
        <rect x="180" y="400" width="70" height="60" />
        <rect x="900" y="370" width="50" height="90" />
        <rect x="960" y="340" width="60" height="120" />
        <rect x="1030" y="395" width="80" height="65" />
        <rect x="1120" y="370" width="40" height="90" />
      </g>
      {/* the kaiju — front-on, towering, geometric */}
      <g fill={color}>
        {/* legs */}
        <path d="M500 460 L520 360 L560 360 L555 460 Z" />
        <path d="M640 460 L645 360 L685 360 L700 460 Z" />
        {/* body */}
        <path d="M480 360 L470 240 L490 200 L520 180 L680 180 L710 200 L730 240 L720 360 Z" />
        {/* arms */}
        <path d="M468 250 L420 280 L410 350 L425 360 L445 300 L478 290 Z" />
        <path d="M732 250 L780 280 L790 350 L775 360 L755 300 L722 290 Z" />
        {/* tail */}
        <path d="M720 320 L820 300 L900 340 L920 380 L850 360 L780 360 Z" />
        {/* spinal plates */}
        <path d="M520 180 L530 150 L545 180 Z" />
        <path d="M555 175 L568 140 L585 178 Z" />
        <path d="M600 170 L615 130 L632 172 Z" />
        <path d="M645 175 L660 140 L678 178 Z" />
        {/* head */}
        <path d="M510 200 L520 130 L545 100 L660 100 L685 130 L695 200 Z" />
        {/* horns */}
        <path d="M540 100 L552 70 L562 100 Z" />
        <path d="M642 100 L654 70 L664 100 Z" />
      </g>
      {/* eyes — vermillion */}
      <rect x="555" y="145" width="22" height="6" fill="var(--vermillion)" rx="2" />
      <rect x="625" y="145" width="22" height="6" fill="var(--vermillion)" rx="2" />
    </svg>
  );
}

// Tatami-style subtle grid background
function TatamiBG({ opacity = 0.06 }) {
  return (
    <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, pointerEvents: "none", opacity }} aria-hidden="true">
      <defs>
        <pattern id="tat" width="48" height="48" patternUnits="userSpaceOnUse">
          <path d="M0 0 H48 V48" fill="none" stroke="currentColor" strokeWidth=".5" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#tat)" />
    </svg>
  );
}

// Stripe placeholder for product imagery
function PlaceholderImage({ label = "PRODUCT SHOT", aspect = "3 / 2", style = {} }) {
  return (
    <div style={{
      aspectRatio: aspect, width: "100%",
      background:
        "repeating-linear-gradient(45deg, var(--paper-2) 0 14px, var(--paper) 14px 28px)",
      border: "1px solid var(--line)",
      borderRadius: 14, position: "relative",
      display: "flex", alignItems: "center", justifyContent: "center",
      ...style
    }}>
      <span style={{
        fontFamily: "var(--mono)", fontSize: 11,
        letterSpacing: ".18em", color: "var(--mist)",
        background: "var(--paper)", padding: "5px 10px", borderRadius: 4,
        border: "1px solid var(--line)"
      }}>{label}</span>
    </div>
  );
}

Object.assign(window, { KaijuMark, Wordmark, Lockup, Hanko, KaijuSilhouette, TatamiBG, PlaceholderImage });