---
import clsx from 'clsx';
import type { ComponentType, SVGProps } from 'react';
import BrightcoveLogo from '@/assets/logos/brightcove.svg?react';
import BrowserStackLogo from '@/assets/logos/browserstack.svg?react';
import FastlyLogo from '@/assets/logos/fastly.svg?react';
import MuxLogo from '@/assets/logos/mux.svg?react';
import NetlifyLogo from '@/assets/logos/netlify.svg?react';
import { MUX_URL } from '@/consts';

type SponsorItem = {
  Logo: ComponentType<SVGProps<SVGSVGElement>>;
  name: string;
  label: string;
  href: string;
  width: string;
  className?: string;
};

const sponsors: SponsorItem[] = [
  { Logo: FastlyLogo, name: 'Fastly', label: 'CDN', href: 'https://fastly.com/', width: '7.8rem' },
  {
    Logo: BrightcoveLogo,
    name: 'Brightcove',
    label: 'Emeritus Sponsor',
    href: 'https://brightcove.com/',
    width: '11rem',
  },
  {
    Logo: BrowserStackLogo,
    name: 'BrowserStack',
    label: 'Device Testing',
    href: 'https://browserstack.com/',
    width: '12rem',
  },
  { Logo: NetlifyLogo, name: 'Netlify', label: 'Static Hosting', href: 'https://netlify.com/', width: '11rem' },
];
---

<section
  class="row-span-2 mx-auto grid w-full max-w-305 grid-rows-subgrid px-5"
>
  <header class="border-t border-faded-black py-4 dark:border-manila-light">
    <h2
      class="border-b-0 text-center font-display text-h2 text-faded-black uppercase dark:text-manila-light"
    >
      Sponsors
    </h2>
  </header>
  <div
    class="grid grid-cols-1 rounded-xs border border-faded-black p-2 text-manila-light md:grid-cols-2 md:items-center dark:border-manila-light dark:text-faded-black"
  >
    <a
      href={MUX_URL}
      target="_blank"
      rel="noopener"
      aria-label="Mux"
      class="flex h-45 items-center justify-center bg-faded-black md:h-full md:min-h-74 dark:bg-soot dark:text-manila-light"
    >
      <div class="relative w-40 md:w-48">
        <MuxLogo width="100%" />
      </div>
    </a>
    <div class="flex flex-col gap-2 p-2.5 md:px-15">
      <h3
        class="mb-2.5 border-b border-manila-dark py-3 text-center font-display text-h5 font-bold text-orange uppercase md:mb-0 md:border-0 md:py-0 md:text-left dark:border-warm-gray"
      >
        Corporate Shepherd
      </h3>
      <p class="text-p2 text-warm-gray dark:text-manila-light">
        The role of Corporate Shepherd is held by the company that has been
        elected by the Video.js Technical Steering Committee (TSC) to be a
        steward of the project and make significant investment into the
        development of Video.js. The role is currently held by Mux, taking over
        for Brightcove in 2025. Mux is a leader in streaming video technology
        and was founded by Steve Heffernan, the creator of Video.js.
      </p>
    </div>
  </div>
  <div
    class="relative z-0 mt-5 h-max overflow-hidden rounded-xs md:border md:border-faded-black dark:border-manila-light"
  >
    <div
      class="grid gap-4 md:grid-separator-container md:grid-cols-4 md:gap-0 md:border md:border-manila-light dark:border-faded-black dark:text-manila-light"
    >
      {
        sponsors.map(({ Logo, name, label, href, width, className }) => (
          <div
            class={clsx(
              "h-auto rounded-xs border border-faded-black px-2.5 md:border-0 md:border-manila-dark md:px-0 dark:border-manila-light md:dark:border-warm-gray",
              className,
            )}
          >
            <a
              href={href}
              target="_blank"
              rel="noopener"
              aria-label={name}
              class="relative flex h-32.5 items-center justify-center bg-manila-light md:grid-separators md:h-37.5 dark:bg-faded-black"
            >
              <div class="mx-2.5 max-w-full" style={{ width }}>
                <Logo width="100%" />
              </div>
            </a>
            <h3 class="relative block border-t border-manila-dark py-5 text-center font-display text-h5 font-bold text-orange uppercase md:hidden">
              {label}
            </h3>
          </div>
        ))
      }
      {
        sponsors.map(({ label }) => (
          <div class="hidden border-manila-dark md:block dark:border-warm-gray">
            <h3 class="relative grid h-full grid-cols-1 items-center bg-manila-light px-2.5 py-5 text-center font-display text-h5 font-bold text-orange uppercase md:grid-separators dark:bg-faded-black">
              {label}
            </h3>
          </div>
        ))
      }
    </div>
  </div>
</section>
