SponsorCard.astro

---
import { type CollectionEntry, getEntry } from "astro:content";
import { Image } from "astro:assets";
import { sponsorLogos } from "@data/sponsorLogos";
import Icon from "@ui/Icon.astro";
import SocialLinks from "@components/SocialLinks.astro";

const { sponsor: sponsorId, showJobs=false, showLinks=true } = Astro.props;
const sponsor = await getEntry("sponsors", sponsorId);

if (!sponsor) {
  throw new Error(`Sponsor with ID "${sponsorId}" not found`);
}

const {
  name: title,
  url: website,
  location,
  industry,
  description,
  socials,
  tier,
  logo_padding = false,
  draft
} = sponsor.data;

const jobFiles = import.meta.glob("../content/sponsors/*/!(index).md");
const sponsorsJobsMap = {};

for (const path in jobFiles) {
  const match = path.match(/\.\.\/content\/sponsors\/([^/]+)\/([^/]+)\.md$/);
  if (match) {
    const sponsorId = match[1];
    if (!sponsorsJobsMap[sponsorId]) sponsorsJobsMap[sponsorId] = [];
    sponsorsJobsMap[sponsorId].push(
      await getEntry("jobs", `${sponsorId}/${match[2]}`),
    );
  }
}

const jobs: CollectionEntry<"jobs">[] = sponsorsJobsMap[sponsor.id];
const isSponsorPage = Astro.url.pathname == `/sponsor/${sponsor.id}`;
const logo = sponsorLogos[sponsor.id];
---

<div
  class=`lg:max-w-[400px] flex flex-col gap-6 p-6 rounded-lg shadow-md bg-[var(--color-surface-subtle)] mb-6 ${draft ? "draft": "no-draft"}`
>
  <div class="w-full flex justify-center items-center md:items-center min-h-[140px] bg-white rounded-lg p-4">
    {
      logo && (
          <Image
            src={logo}
            alt={`${title} Logo`}
            style={{
              minWidth: "250px",
              maxHeight: "120px",
              objectFit: "contain",
              padding: logo_padding ? logo_padding : undefined,
            }}
          />
      )
    }
  </div>

  {
    description && (
      <div class="flex-1">
        <h2 id=`sponsor-${sponsorId}` class="sponsor text-2xl font-bold mb-2 ">
          { !isSponsorPage && tier !== 'Partners' && (tier === "Diamond" || tier === "Platinum" || sponsor.data.page) ?
            <a href={`/sponsor/${sponsor.id}`}>
            {title}
            </a> :
            <>{title}</>
          }
        </h2>
        <p class="text-[var(--color-text-muted)] mb-4">
          {industry} {industry && location && <>—</>} {location}
        </p>

        <p class="py-6 " style="border: 0 solid var(--color-border); border-width: 1px 0 0 0;">{description}</p>


        {showJobs && jobs && (
          <div class="py-6 " style="border: 0 solid var(--color-border); border-width: 1px 0 0 0;">
            <h3 class="text-xl font-semibold">Job offers</h3>
            <ul class="list-disc list-inside" >
              {Object.values(jobs).map((job) => (
                <li >
                  <a href={`/sponsor/${job.id}`}>{job.data.title}</a>
                </li>
              ))}
            </ul>
          </div>
        )}


      </div>
    )
  }
    <div>

        {website && (
          <div class="website-btn-container flex flex-col sm:flex-row justify-center gap-2 mt-4">

            { !isSponsorPage && sponsor.body && tier && (tier === "Diamond" || tier === "Platinum" || sponsor.data.page) &&
            <a href={`/sponsor/${sponsor.id}`} class="website-btn-outline">
              About {title}
            </a>
          }

            <a href={website} target="_blank" rel="noopener noreferrer" class="website-btn ">
              Visit Website <span class="pl-2"><Icon name="external-link" /></span>
            </a>
          </div>
        )}


      { (tier !== "Partners" || showLinks) &&
        <SocialLinks socials={socials} />
      }
    </div>
</div>

<style>

  /* Website button styles */
  .website-btn-container {
 display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  }

  .website-btn, .website-btn-outline {
    display: inline-block;
    padding: 8px 24px;
    margin: 0 0 12px 0;
    color: var(--color-text-primary);
    border-radius: 9999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.1s ease;
  }

  .website-btn-outline {
    border: 1px solid var(--color-blue);
  }

  .website-btn {
    background: linear-gradient(to right, var(--color-blue), oklch(0.511 0.234 276.9) /* #4f46e5 */);
    box-shadow: 0 2px 4px oklch(0 0 0 / 0.1); /* rgba(0,0,0,0.1) */
    font-weight: 700;
  }

  .website-btn-outline {
    color: var(--color-blue);
  }

  .website-btn:hover ,  .website-btn-outline:hover {
    text-decoration: underline;
  }

  li {
    list-style-type:disc;
    list-style-position: inside;
  }
  h2 a, li a {
    text-decoration: underline;
  }
  h2 a:hover, li a:hover {
    color:var(--color-primary-hover);
  }
</style>