// Topographic contour pattern — abstract SVG of nested closed curves,
// reading like contour lines on a map. Procedurally generated so we can
// tune density / softness via props.

function makeContourPath(seed, scale, points, jitter) {
  // Random-walk a closed shape using deterministic pseudo-random from seed.
  let s = seed;
  const rnd = () => {
    s = (s * 9301 + 49297) % 233280;
    return s / 233280;
  };
  const pts = [];
  for (let i = 0; i < points; i++) {
    const a = (i / points) * Math.PI * 2;
    const r = scale * (1 + (rnd() - 0.5) * jitter);
    pts.push([Math.cos(a) * r, Math.sin(a) * r]);
  }
  // Build cubic-bezier closed curve through pts
  let d = `M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)}`;
  for (let i = 0; i < pts.length; i++) {
    const p0 = pts[(i - 1 + pts.length) % pts.length];
    const p1 = pts[i];
    const p2 = pts[(i + 1) % pts.length];
    const p3 = pts[(i + 2) % pts.length];
    const c1x = p1[0] + (p2[0] - p0[0]) / 6;
    const c1y = p1[1] + (p2[1] - p0[1]) / 6;
    const c2x = p2[0] - (p3[0] - p1[0]) / 6;
    const c2y = p2[1] - (p3[1] - p1[1]) / 6;
    d += ` C ${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${p2[0].toFixed(2)} ${p2[1].toFixed(2)}`;
  }
  d += " Z";
  return d;
}

// A panel of nested contour lines, like a topo map
function TopoContours({ cx = 50, cy = 55, rings = 14, baseScale = 6, step = 3.6, jitter = 0.18, stroke = "currentColor", strokeWidth = 0.45, opacity = 0.7, accentEvery = 5, accentStroke = null, viewBox = "0 0 100 120", style }) {
  const paths = [];
  for (let i = 0; i < rings; i++) {
    const scale = baseScale + i * step;
    const seed = 1000 + i * 137;
    const d = makeContourPath(seed, scale, 28, jitter * (1 + i * 0.02));
    const isAccent = accentEvery > 0 && (i + 1) % accentEvery === 0;
    paths.push(
      <path
        key={i}
        d={d}
        transform={`translate(${cx} ${cy})`}
        fill="none"
        stroke={isAccent && accentStroke ? accentStroke : stroke}
        strokeWidth={isAccent ? strokeWidth * 1.8 : strokeWidth}
        opacity={opacity}
      />
    );
  }
  return (
    <svg viewBox={viewBox} preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block", ...style }}>
      {paths}
    </svg>
  );
}

// Wide horizontal contour band (for hero variant C)
function TopoBand({ stroke = "currentColor", accentStroke = null }) {
  const paths = [];
  const centers = [
    { x: 22, y: 55, rings: 10, scale: 4, step: 2.6 },
    { x: 62, y: 50, rings: 12, scale: 5, step: 2.8 },
    { x: 92, y: 58, rings: 9, scale: 4.5, step: 2.5 },
    { x: 130, y: 52, rings: 11, scale: 4, step: 2.9 },
    { x: 168, y: 58, rings: 8, scale: 3.8, step: 2.4 },
  ];
  let key = 0;
  centers.forEach((c, ci) => {
    for (let i = 0; i < c.rings; i++) {
      const scale = c.scale + i * c.step;
      const seed = 500 + ci * 211 + i * 43;
      const d = makeContourPath(seed, scale, 26, 0.16);
      const isAccent = (i + 1) % 4 === 0;
      paths.push(
        <path
          key={key++}
          d={d}
          transform={`translate(${c.x} ${c.y})`}
          fill="none"
          stroke={isAccent && accentStroke ? accentStroke : stroke}
          strokeWidth={isAccent ? 0.55 : 0.35}
          opacity={0.65}
        />
      );
    }
  });
  return (
    <svg viewBox="0 0 190 120" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      {paths}
    </svg>
  );
}

// Full-bleed topographic backdrop (for hero variant B)
function TopoBackdrop({ stroke = "currentColor", accentStroke = null }) {
  const paths = [];
  const centers = [
    { x: 30, y: 35, rings: 18, scale: 6, step: 4 },
    { x: 75, y: 70, rings: 16, scale: 5, step: 3.6 },
    { x: 130, y: 30, rings: 14, scale: 4, step: 3.4 },
    { x: 175, y: 75, rings: 12, scale: 4, step: 3.2 },
  ];
  let key = 0;
  centers.forEach((c, ci) => {
    for (let i = 0; i < c.rings; i++) {
      const scale = c.scale + i * c.step;
      const seed = 100 + ci * 311 + i * 71;
      const d = makeContourPath(seed, scale, 30, 0.2);
      const isAccent = (i + 1) % 5 === 0;
      paths.push(
        <path
          key={key++}
          d={d}
          transform={`translate(${c.x} ${c.y})`}
          fill="none"
          stroke={isAccent && accentStroke ? accentStroke : stroke}
          strokeWidth={isAccent ? 0.6 : 0.32}
          opacity={0.55}
        />
      );
    }
  });
  return (
    <svg viewBox="0 0 200 110" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      {paths}
    </svg>
  );
}

// Tiny brand mark — concentric topographic rings, simple geometry
function BrandMark({ size = 22, stroke = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: "block" }}>
      <circle cx="12" cy="12" r="10.5" fill="none" stroke={stroke} strokeWidth="0.9" opacity="0.35" />
      <circle cx="12" cy="12" r="7.5" fill="none" stroke={stroke} strokeWidth="0.9" opacity="0.55" />
      <circle cx="12" cy="12" r="4.5" fill="none" stroke="var(--accent)" strokeWidth="1.2" />
      <circle cx="12" cy="12" r="1.6" fill="var(--accent)" />
    </svg>
  );
}

Object.assign(window, { TopoContours, TopoBand, TopoBackdrop, BrandMark });