// Shared decorative motifs — reused across landing sections.
// "Signal Horizon" arcs (same geometry as the logo) + a faint cartographic grid.
function HorizonArcs({ color = "rgba(255,255,255,0.14)", width = 640 }) {
  return (
    <svg viewBox="0 0 640 260" width={width} style={{ display: "block" }}>
      <path d="M 40 220 A 280 280 0 0 1 600 220" stroke={color} strokeWidth="2" fill="none" />
      <path d="M 130 220 A 190 190 0 0 1 510 220" stroke={color} strokeWidth="2.5" fill="none" />
      <path d="M 220 220 A 100 100 0 0 1 420 220" stroke={color} strokeWidth="3" fill="none" />
      <circle cx="320" cy="220" r="5" fill={color} />
    </svg>
  );
}

function MapGrid({ opacity = 0.06, size = "100%" }) {
  return (
    <svg width={size} height={size} style={{ position: "absolute", inset: 0, pointerEvents: "none" }} preserveAspectRatio="none">
      <defs>
        <pattern id="sentinel-grid" width="48" height="48" patternUnits="userSpaceOnUse">
          <path d="M 48 0 L 0 0 0 48" fill="none" stroke={`rgba(255,255,255,${opacity})`} strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#sentinel-grid)" />
    </svg>
  );
}

function SectionEyebrow({ children, dark = false }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      fontSize: 12.5, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase",
      color: dark ? "var(--teal-300)" : "var(--teal-600)", marginBottom: 14,
    }}>
      <span style={{ width: 18, height: 2, background: dark ? "var(--teal-300)" : "var(--teal-500)", borderRadius: 2 }} />
      {children}
    </div>
  );
}

window.HorizonArcs = HorizonArcs;
window.MapGrid = MapGrid;
window.SectionEyebrow = SectionEyebrow;