// Primitives: logo, nav, glyphs

const Logo = ({ size = 22 }) => (
  <span className="brand-mark" style={{ width: size, height: size }}>
    <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 16 16" fill="none">
      <path d="M2 8 L6 4 L8 8 L11 5 L14 11" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="14" cy="11" r="1.3" fill="white" />
    </svg>
  </span>
);

const Brand = () => (
  <a href="#" className="brand">
    <Logo />
    <span>Livingstone <span style={{ color: "var(--text-3)" }}>Marketing</span></span>
  </a>
);

const Nav = () => (
  <nav className="nav">
    <div className="nav-inner">
      <Brand />
      <div className="row gap-6 hide-mobile" style={{ marginLeft: 8 }}>
        <a className="nav-link" href="#services">Services</a>
        <a className="nav-link" href="#geo">GEO</a>
        <a className="nav-link" href="#analytics">Analytics</a>
        <a className="nav-link" href="#work">Work</a>
        <a className="nav-link" href="#stack">Stack</a>
      </div>
      <a href="#contact" className="btn btn-primary" style={{ padding: "8px 14px", fontSize: 13 }}>
        Strategy call <Arrow />
      </a>
    </div>
  </nav>
);

const Arrow = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M2 6 H10 M7 3 L10 6 L7 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const ChevDown = ({ size = 10 }) => (
  <svg width={size} height={size} viewBox="0 0 10 10" fill="none">
    <path d="M2 4 L5 7 L8 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Sparkle = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M6 1 L6.9 5.1 L11 6 L6.9 6.9 L6 11 L5.1 6.9 L1 6 L5.1 5.1 Z" fill="currentColor" />
  </svg>
);

// Sparkline / chart helper
const Sparkline = ({ data, color = "var(--blue)", height = 40, width = 200, fill = true }) => {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const step = width / (data.length - 1);
  const points = data.map((d, i) => `${i * step},${height - ((d - min) / range) * (height - 4) - 2}`);
  const d = `M ${points.join(" L ")}`;
  const area = `${d} L ${width},${height} L 0,${height} Z`;
  const id = "spk-" + Math.random().toString(36).slice(2, 7);
  return (
    <svg
      width="100%"
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      preserveAspectRatio="none"
      style={{ display: "block" }}
    >
      <defs>
        <linearGradient id={id} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.35" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      {fill && <path d={area} fill={`url(#${id})`} />}
      <path d={d} stroke={color} strokeWidth="1.6" fill="none" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
    </svg>
  );
};

Object.assign(window, { Logo, Brand, Nav, Arrow, ChevDown, Sparkle, Sparkline });