const Logos = () => {
  const engines = ["ChatGPT", "Claude", "Gemini", "Perplexity"];
  return (
    <section className="compact" style={{ paddingTop: 48, paddingBottom: 48 }}>
      <div className="wrap">
        <div className="mono" style={{
          fontSize: 11, textTransform: "uppercase", letterSpacing: ".14em",
          color: "var(--muted)", textAlign: "center", marginBottom: 24,
        }}>
          We measure citations across the engines your shoppers actually use
        </div>
        <div style={{
          display: "flex", justifyContent: "center", flexWrap: "wrap",
          gap: 56, color: "var(--lt)",
        }} className="logo-row">
          {engines.map((e) => (
            <span key={e} style={{
              fontFamily: "Fraunces, serif", fontSize: 28, fontWeight: 500,
              letterSpacing: "-0.01em", fontStyle: "italic",
              fontVariationSettings: '"opsz" 60',
            }}>
              {e}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Logos = Logos;