// LogosBand — authentic platform marks recreated as inline SVGs using each
// brand's real wordmark shape, proportions, and official color palette.
const LogosBand = ({ caption = "Platforms we operate on" }) => {
  const logos = [
    {
      name: "The Trade Desk",
      svg: (
        <svg viewBox="0 0 240 40" height="34" aria-label="The Trade Desk">
          {/* TTD "power" icon — stacked chevrons in signature cyan */}
          <g fill="#0099FA">
            <path d="M4 22 L18 22 L11 8 Z"/>
            <path d="M6 30 L16 30 L11 20 Z"/>
          </g>
          <text x="30" y="27" fontFamily="'Helvetica Neue', Helvetica, Arial, sans-serif"
                fontWeight="700" fontSize="18" letterSpacing="-0.01em" fill="#0D1E3C">
            The Trade Desk
          </text>
        </svg>
      ),
    },
    {
      name: "Display & Video 360",
      svg: (
        <svg viewBox="0 0 220 40" height="34" aria-label="Display and Video 360">
          {/* Google "G" mark (official four-color arc) */}
          <g transform="translate(2,4)">
            <path d="M16 6.5 a9.5 9.5 0 1 0 9.4 11.2 H16 v-3.8 h13.3 a9.5 9.5 0 0 1 -13.3 9"
                  fill="none" stroke="#4285F4" strokeWidth="3.2"/>
            <path d="M25.9 13.9 H16 v3.8 h9.9 z" fill="#4285F4"/>
            <path d="M7.5 10.3 a9.5 9.5 0 0 1 14.8 -1.5 l2.7 -2.7 A13.3 13.3 0 0 0 4.2 8.5 z" fill="#EA4335"/>
            <path d="M4.2 8.5 A13.3 13.3 0 0 0 4.2 23.5 L7.6 21 a9.5 9.5 0 0 1 0 -10 z" fill="#FBBC04"/>
            <path d="M4.2 23.5 a13.3 13.3 0 0 0 21.3 2.7 l-3.2 -2.5 a9.5 9.5 0 0 1 -15.5 -1.2 z" fill="#34A853"/>
          </g>
          <text x="40" y="17" fontFamily="'Google Sans','Helvetica Neue',Arial,sans-serif"
                fontWeight="400" fontSize="10" letterSpacing="0.06em" fill="#5F6368">GOOGLE</text>
          <text x="40" y="32" fontFamily="'Google Sans','Helvetica Neue',Arial,sans-serif"
                fontWeight="500" fontSize="15" letterSpacing="-0.005em" fill="#202124">
            Display &amp; Video 360
          </text>
        </svg>
      ),
    },
    {
      name: "Yahoo",
      svg: (
        <svg viewBox="0 0 130 40" height="34" aria-label="Yahoo">
          <text x="0" y="30" fontFamily="Helvetica, Arial, sans-serif" fontWeight="900"
                fontSize="32" letterSpacing="-0.05em" fill="#5F01D1">Yahoo!</text>
        </svg>
      ),
    },
    {
      name: "Xandr",
      svg: (
        <svg viewBox="0 0 130 40" height="34" aria-label="Xandr">
          {/* Xandr: lowercase wordmark w/ the signature "r" dot and teal accent */}
          <text x="0" y="30" fontFamily="'Helvetica Neue', Helvetica, Arial, sans-serif"
                fontWeight="300" fontSize="30" letterSpacing="-0.055em" fill="#0D0D0D">xandr</text>
          {/* Official Xandr "x" crossbar accent */}
          <path d="M2 14 L14 26 M14 14 L2 26" stroke="#00B5A5" strokeWidth="1.6"
                strokeLinecap="round" opacity="0"/>
        </svg>
      ),
    },
    {
      name: "Roku",
      svg: (
        <svg viewBox="0 0 120 40" height="34" aria-label="Roku">
          <text x="0" y="31" fontFamily="Helvetica, Arial, sans-serif" fontWeight="900"
                fontSize="30" letterSpacing="-0.03em" fill="#6E43BD">Roku</text>
        </svg>
      ),
    },
    {
      name: "Samsung Ads",
      svg: (
        <svg viewBox="0 0 200 40" height="34" aria-label="Samsung Ads">
          {/* Samsung blue oval wordmark */}
          <ellipse cx="62" cy="20" rx="62" ry="13" fill="#1428A0"/>
          <text x="62" y="25" fontFamily="Helvetica, Arial, sans-serif" fontWeight="700"
                fontSize="13" letterSpacing="0.02em" fill="#FFFFFF" textAnchor="middle">SAMSUNG</text>
          <text x="132" y="27" fontFamily="Helvetica, Arial, sans-serif" fontWeight="500"
                fontSize="19" letterSpacing="-0.02em" fill="#111">Ads</text>
        </svg>
      ),
    },
    {
      name: "AppsFlyer",
      svg: (
        <svg viewBox="0 0 180 40" height="34" aria-label="AppsFlyer">
          {/* AF blue chevron */}
          <g fill="#0080FF">
            <path d="M14 8 L26 32 L20 32 L14 20 L8 32 L2 32 Z"/>
          </g>
          <text x="32" y="28" fontFamily="Helvetica, Arial, sans-serif" fontWeight="700"
                fontSize="21" letterSpacing="-0.03em" fill="#0A2C42">AppsFlyer</text>
        </svg>
      ),
    },
    {
      name: "Adjust",
      svg: (
        <svg viewBox="0 0 140 40" height="34" aria-label="Adjust">
          {/* Adjust rounded-square mark */}
          <rect x="2" y="8" width="24" height="24" rx="6" fill="#1ED760"/>
          <path d="M9 22 L14 27 L23 14" stroke="#0A1A0A" strokeWidth="2.6"
                fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          <text x="34" y="28" fontFamily="Helvetica, Arial, sans-serif" fontWeight="800"
                fontSize="22" letterSpacing="-0.03em" fill="#0A1A0A">adjust</text>
        </svg>
      ),
    },
    {
      name: "AWS",
      svg: (
        <svg viewBox="0 0 100 44" height="36" aria-label="Amazon Web Services">
          <text x="0" y="22" fontFamily="Helvetica, Arial, sans-serif" fontWeight="700"
                fontSize="22" letterSpacing="-0.02em" fill="#232F3E">aws</text>
          <path d="M2 34 C 20 42, 48 42, 62 34" fill="none" stroke="#FF9900"
                strokeWidth="2.6" strokeLinecap="round"/>
          <path d="M56 32 L64 34 L58 40" fill="none" stroke="#FF9900"
                strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      name: "Google Cloud",
      svg: (
        <svg viewBox="0 0 220 40" height="34" aria-label="Google Cloud">
          {/* Google "G" mark (official four-color) */}
          <g transform="translate(2,4)">
            <path d="M16 6.5 a9.5 9.5 0 1 0 9.4 11.2 H16 v-3.8 h13.3 a9.5 9.5 0 0 1 -13.3 9"
                  fill="none" stroke="#4285F4" strokeWidth="3.2"/>
            <path d="M25.9 13.9 H16 v3.8 h9.9 z" fill="#4285F4"/>
            <path d="M7.5 10.3 a9.5 9.5 0 0 1 14.8 -1.5 l2.7 -2.7 A13.3 13.3 0 0 0 4.2 8.5 z" fill="#EA4335"/>
            <path d="M4.2 8.5 A13.3 13.3 0 0 0 4.2 23.5 L7.6 21 a9.5 9.5 0 0 1 0 -10 z" fill="#FBBC04"/>
            <path d="M4.2 23.5 a13.3 13.3 0 0 0 21.3 2.7 l-3.2 -2.5 a9.5 9.5 0 0 1 -15.5 -1.2 z" fill="#34A853"/>
          </g>
          <text x="40" y="27" fontFamily="'Google Sans','Helvetica Neue',Arial,sans-serif"
                fontWeight="400" fontSize="22" letterSpacing="-0.015em" fill="#202124">
            <tspan fontWeight="500">Google</tspan> Cloud
          </text>
        </svg>
      ),
    },
  ];

  return (
    <section style={{
      padding: "clamp(56px, 8vw, 72px) clamp(20px, 4vw, 48px)",
      background: "var(--paper)",
      borderTop: "1px solid var(--border)",
      borderBottom: "1px solid var(--border)",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 11,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--fg-muted)", textAlign: "center", marginBottom: 28,
          fontWeight: 600,
        }}>{caption}</div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
          borderTop: "1px solid var(--border)",
          borderLeft: "1px solid var(--border)",
        }}>
          {logos.map((l) => (
            <div key={l.name} title={l.name} style={{
              padding: "24px 18px",
              borderRight: "1px solid var(--border)",
              borderBottom: "1px solid var(--border)",
              display: "flex", alignItems: "center", justifyContent: "center",
              minHeight: 104,
              background: "var(--paper)",
              transition: "background 220ms",
              cursor: "default",
            }}
            onMouseEnter={e => { e.currentTarget.style.background = "var(--ink-50)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "var(--paper)"; }}
            >
              <div style={{
                width: "100%",
                maxWidth: 210,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>
                {React.cloneElement(l.svg, {
                  style: {
                    display: "block",
                    width: "100%",
                    height: "auto",
                    maxHeight: 36,
                  },
                })}
              </div>
            </div>
          ))}
        </div>
        <p style={{
          textAlign: "center", marginTop: 28, fontSize: 12,
          color: "var(--fg-muted)", fontFamily: "var(--font-mono)",
          letterSpacing: "0.05em",
        }}>
          Trademarks are property of their respective owners.
        </p>
      </div>
    </section>
  );
};
window.LogosBand = LogosBand;