// Networks marquee — every network we operate on + Platinum
function HpMarquee({ bg }) {
  const items = [
    "ClickBank", "Digistore24", "Buygoods", "Maxweb", "MarketCall",
    "Aragon Advertising", "Ray Advertising",
    "ClickBank Platinum · 2024", "ClickBank Platinum · 2025",
    "Nutra & Supplements", "Digital Products", "Pay-per-Call Insurance",
  ];
  const reel = [...items, ...items, ...items];
  return (
    <section style={{
      background: bg, padding: "44px 0",
      borderBottom: "1px solid var(--rule)", overflow: "hidden",
    }}>
      <div className="hp-container" style={{ padding: "0 32px", marginBottom: 22, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
        <span className="eyebrow">Operating on · networks &amp; awards</span>
        <span className="eyebrow hp-hide-sm">Verified partners</span>
      </div>
      <div className="hp-marquee-reel" style={{
        display: "flex", gap: 64, whiteSpace: "nowrap",
        animation: "hp-scroll 16s linear infinite",
        fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 36,
        letterSpacing: "-0.04em", color: "var(--ink)",
      }}>
        {reel.map((c, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 64 }}>
            {c}
            <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--coral)" }} />
          </span>
        ))}
      </div>
      <style>{`@keyframes hp-scroll { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }`}</style>
    </section>
  );
}
window.HpMarquee = HpMarquee;