// Shared bits used by all three homepage directions.
// - Logo: brand wordmark from PNG
// - QuiltGrid: parametric grid of half-square triangles (HSTs)
// - RainbowDivider: 6-stripe band of brand colors
// - StreamDot, ArrowLink, eyebrows — small atoms

// --- Logo ----------------------------------------------------------
function Logo({ variant = "color", height = 44, style }) {
  // 'color' is the regular logo. 'mono-paper' overlays a knockout for dark backgrounds.
  const src = variant === "color" ? "assets/roco-logo-full.png" : "assets/roco-logo-transparent.png";
  return (
    <img
      src={src}
      alt="RoCo Arts Council"
      style={{ height, width: "auto", display: "block", ...style }}
    />
  );
}

// A simple mono "RoCo / Arts Council" stamp used on dark surfaces in case
// the rasterized logo reads poorly. Wordmark approximation; the real PNG
// stays the canonical mark.
function LogoMono({ height = 44, color = "#FBF7EE", style }) {
  return (
    <div style={{ display: "inline-block", color, lineHeight: 1, ...style }}>
      <div style={{
        fontFamily: "var(--font-display)", fontWeight: 800, fontSize: height * 0.85,
        letterSpacing: "-0.04em", lineHeight: 0.85
      }}>RoCo</div>
      <div style={{
        fontFamily: "'Caveat', cursive, var(--font-body)",
        fontSize: height * 0.32, marginTop: 2, fontStyle: "italic", letterSpacing: "0.04em"
      }}>— Arts Council —</div>
    </div>
  );
}

// --- QuiltGrid -----------------------------------------------------
// Renders an R×C grid of half-square triangles. Each cell is a square split
// diagonally with two colors; orientation alternates pseudo-randomly per seed.
// Used as a hero block in directions A and B.
//
// Palette is the brand 6 + paper. We bias for full saturation in cells and
// occasional empty (paper/navy) tiles to give the grid breathing room.
function QuiltGrid({
  cols = 5, rows = 4, cellSize = 140, seed = 7,
  palette = ["#45217A", "#F3CF03", "#C81344", "#78BE4D", "#4195D3", "#01234B", "#FBF7EE"],
  emptyChance = 0.08,
  style,
}) {
  // simple deterministic RNG so every artboard render is identical
  let s = seed;
  const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };

  const cells = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const x = c * cellSize;
      const y = r * cellSize;
      const orientation = Math.floor(rnd() * 4); // 0..3
      // pick two distinct colors
      const ai = Math.floor(rnd() * palette.length);
      let bi = Math.floor(rnd() * palette.length);
      if (bi === ai) bi = (bi + 1) % palette.length;
      const a = palette[ai];
      const b = palette[bi];
      // small chance of an empty paper square for rhythm
      const empty = rnd() < emptyChance;
      const baseFill = empty ? "#FBF7EE" : a;

      // Triangle paths per orientation (the "top" triangle):
      // 0 = top-left triangle (cuts ↘), 1 = top-right (cuts ↙),
      // 2 = bottom-right, 3 = bottom-left
      const tri = (() => {
        switch (orientation) {
          case 0: return `M${x},${y} L${x + cellSize},${y} L${x},${y + cellSize} Z`;
          case 1: return `M${x},${y} L${x + cellSize},${y} L${x + cellSize},${y + cellSize} Z`;
          case 2: return `M${x + cellSize},${y} L${x + cellSize},${y + cellSize} L${x},${y + cellSize} Z`;
          case 3: default: return `M${x},${y} L${x + cellSize},${y + cellSize} L${x},${y + cellSize} Z`;
        }
      })();
      cells.push(
        <g key={r + "-" + c}>
          <rect x={x} y={y} width={cellSize} height={cellSize} fill={baseFill} />
          {!empty && <path d={tri} fill={b} />}
        </g>
      );
    }
  }
  return (
    <svg
      viewBox={`0 0 ${cols * cellSize} ${rows * cellSize}`}
      width="100%" height="100%"
      preserveAspectRatio="xMidYMid slice"
      style={style}
    >
      {cells}
    </svg>
  );
}

// --- HST corner stamp (small) -------------------------------------
function HstStamp({ size = 48, top = "#45217A", bottom = "#F3CF03", style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style}>
      <polygon points="0,0 100,0 0,100" fill={top} />
      <polygon points="100,0 100,100 0,100" fill={bottom} />
    </svg>
  );
}

// --- Pinwheel block -----------------------------------------------
function Pinwheel({ size = 320, colors = ["#45217A", "#F3CF03", "#C81344", "#78BE4D"], style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" style={style}>
      <rect width="200" height="200" fill="#FBF7EE" />
      <polygon points="0,0 100,0 100,100" fill={colors[0]} />
      <polygon points="100,0 200,0 100,100" fill={colors[1]} />
      <polygon points="200,100 200,200 100,100" fill={colors[2]} />
      <polygon points="0,200 100,200 100,100" fill={colors[3]} />
    </svg>
  );
}

// --- Rainbow divider ----------------------------------------------
function RainbowDivider({ height = 8, style }) {
  const colors = ["#45217A", "#F3CF03", "#C81344", "#78BE4D", "#4195D3", "#01234B"];
  return (
    <div style={{ display: "flex", height, width: "100%", ...style }}>
      {colors.map((c, i) => (
        <div key={i} style={{ flex: 1, background: c }} />
      ))}
    </div>
  );
}

// --- Stream-dot indicator (for nav, eyebrows, etc.) -----------------
function StreamDot({ stream, size = 9, style }) {
  const map = {
    council: "#45217A",
    events: "#2F7A2E",
    artists: "#01234B",
    news: "#1F1B2E",
  };
  return (
    <span style={{
      display: "inline-block", width: size, height: size, borderRadius: 999,
      background: map[stream] || "#999", flex: "0 0 auto", ...style
    }} />
  );
}

// --- ArrowLink ----------------------------------------------------
function ArrowLink({ children, color = "var(--roco-purple)", style }) {
  return (
    <span style={{
      color, fontWeight: 700, fontSize: 14, letterSpacing: "0.01em",
      borderBottom: `1.5px solid ${color}`, paddingBottom: 2,
      display: "inline-flex", alignItems: "center", gap: 6, ...style
    }}>
      {children}<span aria-hidden style={{ marginLeft: 2 }}>→</span>
    </span>
  );
}

// --- Eyebrow ------------------------------------------------------
function Eyebrow({ color = "var(--roco-crimson)", children, style }) {
  return (
    <div style={{
      fontFamily: "var(--font-body)",
      fontSize: 11.5, fontWeight: 700, letterSpacing: "0.18em",
      textTransform: "uppercase", color, ...style
    }}>{children}</div>
  );
}

// --- Buttons (per-stream) -----------------------------------------
function Btn({ tone = "primary", stream = "council", children, style, size = "md" }) {
  const streams = {
    council: { primary: { bg: "#45217A", fg: "#FBF7EE" }, deep: { bg: "#2B1450", fg: "#FBF7EE" }, pop: { bg: "#FF7A5C", fg: "#1A0830" }, ghost: { fg: "#45217A", border: "#45217A" } },
    events:  { primary: { bg: "#2F7A2E", fg: "#FBF7EE" }, deep: { bg: "#1A461A", fg: "#FBF7EE" }, pop: { bg: "#EB4D86", fg: "#FBF7EE" }, ghost: { fg: "#1A461A", border: "#1A461A" } },
    artists: { primary: { bg: "#01234B", fg: "#FBF7EE" }, deep: { bg: "#000E22", fg: "#FBF7EE" }, pop: { bg: "#FF9B3D", fg: "#000E22" }, ghost: { fg: "#01234B", border: "#01234B" } },
    news:    { primary: { bg: "#1F1B2E", fg: "#FBF7EE" }, deep: { bg: "#000000", fg: "#FBF7EE" }, pop: { bg: "#F3CF03", fg: "#000000" }, ghost: { fg: "#1F1B2E", border: "#1F1B2E" } },
  };
  const sz = {
    sm: { p: "8px 14px", f: 13 },
    md: { p: "12px 22px", f: 14.5 },
    lg: { p: "16px 28px", f: 16 },
  }[size];
  const set = streams[stream][tone] || streams[stream].primary;
  const isGhost = tone === "ghost";
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: sz.p, borderRadius: 999, fontWeight: 700, fontSize: sz.f,
      background: isGhost ? "transparent" : set.bg,
      color: isGhost ? set.fg : set.fg,
      border: isGhost ? `1.5px solid ${set.border}` : "1.5px solid transparent",
      whiteSpace: "nowrap",
      ...style,
    }}>
      {children}
    </span>
  );
}

// --- HeroTexture --------------------------------------------------
// Subtle paper-color half-square-triangle pattern for use on black hero
// backgrounds. Tiles 60px; uses two opacities so the pattern reads as
// a soft texture, not a hard grid. Place it inside a position:relative
// hero — it absolutely fills its parent and sits behind content.
function HeroTexture({ opacity = 1, color = "#FBF7EE", style }) {
  return (
    <svg
      aria-hidden="true"
      style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        pointerEvents: "none", opacity, ...style,
      }}
    >
      <defs>
        <pattern id="hst-hero" width="60" height="60" patternUnits="userSpaceOnUse">
          <polygon points="0,0 60,0 0,60" fill={color} fillOpacity={0.06} />
          <polygon points="60,0 60,60 0,60" fill={color} fillOpacity={0.025} />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#hst-hero)" />
    </svg>
  );
}

Object.assign(window, { Logo, LogoMono, QuiltGrid, HstStamp, Pinwheel, RainbowDivider, StreamDot, ArrowLink, Eyebrow, Btn, HeroTexture });