// ============== primitives ==============

function Eyebrow({ children, dot = false }) {
  return (
    <div className="eyebrow">
      {dot && <span className="dot" />}
      {children}
    </div>
  );
}

// SVG network field for hero ambient background
function NetworkField() {
  // deterministic layout (no randomness across renders)
  const nodes = React.useMemo(() => {
    const seed = [
      [12, 18], [22, 65], [34, 28], [40, 80], [52, 50],
      [61, 22], [68, 72], [78, 38], [88, 60], [16, 42],
      [46, 12], [58, 88], [73, 12], [83, 84], [28, 92],
    ];
    return seed.map(([x, y], i) => ({ x, y, r: i % 3 === 0 ? 3 : 2 }));
  }, []);
  const edges = [
    [0,9],[9,2],[2,4],[4,3],[3,11],[11,7],[7,8],[8,5],[5,1],[1,9],
    [4,6],[6,7],[10,2],[10,5],[12,7],[13,8],[14,3],[0,2],[6,5],[12,5],
  ];
  return (
    <svg className="network-field" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden>
      <defs>
        <radialGradient id="nodeGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#ffffff" stopOpacity="0.7" />
          <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
        </radialGradient>
      </defs>
      {edges.map(([a, b], i) => (
        <line
          key={i}
          x1={nodes[a].x} y1={nodes[a].y}
          x2={nodes[b].x} y2={nodes[b].y}
          stroke="rgba(255,255,255,0.16)"
          strokeWidth="0.08"
          vectorEffect="non-scaling-stroke"
        />
      ))}
      {nodes.map((n, i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r={n.r * 1.6} fill="url(#nodeGlow)" opacity="0.5" />
          <circle cx={n.x} cy={n.y} r="0.5" fill="#ffffff" />
        </g>
      ))}
    </svg>
  );
}

// Mug + sparkle SVG motif drawn from logo
function MugMark({ size = 64 }) {
  return (
    <svg width={size} height={size * 0.55} viewBox="0 0 120 66" fill="currentColor" aria-hidden style={{ display: "inline-block", verticalAlign: "middle" }}>
      {/* mug body */}
      <path d="M8 12 H68 V46 Q68 56 58 56 H18 Q8 56 8 46 Z" />
      {/* handle */}
      <path d="M68 20 H80 Q92 20 92 32 Q92 44 80 44 H68 V38 H78 Q84 38 84 32 Q84 26 78 26 H68 Z" />
      {/* sparkles */}
      <path d="M104 8 L106 18 L116 20 L106 22 L104 32 L102 22 L92 20 L102 18 Z" />
      <path d="M102 44 L103 50 L109 51 L103 52 L102 58 L101 52 L95 51 L101 50 Z" />
    </svg>
  );
}

// Big serif wordmark hero, styled after the logo
function HeroDisplay() {
  return (
    <div className="hero-display">
      <h1 className="hero-tag">
        Web3 talent,<br /><em>placed quietly.</em>
      </h1>
    </div>
  );
}

function Btn({ kind = "primary", href, onClick, children, arrow = true, target }) {
  const cls = `btn btn--${kind}`;
  const inner = (
    <>
      {children}
      {arrow && <Icon.Arrow />}
    </>
  );
  if (href) return <a className={cls} href={href} onClick={onClick} target={target}>{inner}</a>;
  return <button className={cls} onClick={onClick}>{inner}</button>;
}

function StatRow({ stats }) {
  return (
    <div className="stat-row">
      {stats.map((s, i) => (
        <div className="stat" key={i}>
          <div className="stat-num">{s.num}<span className="unit">{s.unit}</span></div>
          <div className="stat-label">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

function Ticker({ items }) {
  if (!items || items.length === 0) return null;
  // duplicate so the scroll loop is seamless
  const repeated = [...items, ...items];
  return (
    <div className="ticker" aria-label="Live roles">
      <div className="ticker-track">
        {repeated.map((it, i) => (
          <span className="ticker-item" key={i}>
            <span className="pulse" />
            <span>{it.title}</span>
            <span className="sep">/</span>
            <span>{it.chain}</span>
            <span className="sep">/</span>
            <span className="salary">{it.comp}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

window.Eyebrow = Eyebrow;
window.NetworkField = NetworkField;
window.HeroDisplay = HeroDisplay;
window.MugMark = MugMark;
window.Btn = Btn;
window.StatRow = StatRow;
window.Ticker = Ticker;