ticket-tiers.astro

---
import Headline from "@ui/Headline.astro";

interface Props {
  ticketShopLink: string;
}

interface Feature {
  text: string;
  icon?: string;
}

interface TicketTierProps {
  title: string;
  educationPrice?: number | string;
  personalPrice: number | string;
  subtitle?: string;
  businessPrice: number | string;
  lateBusinessPrice?: number | string;
  latePersonalPrice?: number | string;
  features: Feature[];
}

const tiers: TicketTierProps[] = [
  {
    title: "Tutorial Only",
    educationPrice: 98,
    personalPrice: 196,
    businessPrice: 400,
    features: [
      {
        text: "Access to two full days of workshops, summits, and tutorials across six parallel tracks (13-14 July)",
      },
      {
        text: "<strong>Does NOT include</strong> access to three days of talks across six parallel tracks with 130+ talks (15-17 July)",
        icon: "❌",
      },
      {
        text: "<strong>Does NOT include</strong> access to open spaces throughout the three conference days",
        icon: "❌",
      },
      {
        text: "<strong>Does NOT include</strong> access to sponsor booths with opportunities to connect with sponsoring sponsors",
        icon: "❌",
      },
      { text: "Access to Sprint Weekend (18-19 July)" },
      { text: "Light lunch provided each day" },
      { text: "Break refreshments (coffee, tea, water, and more)" },
      {
        text: "Access to in-person networking opportunities during the tutorial days",
      },
      { text: "Access to free childcare for children aged 19 months and older" },
      { text: "Conference T-shirt included" },
      {
        text: "<strong>Limited to only 300, due to tutorial capacity</strong>",
        icon: "⚠️",
      },
    ],
  },
  {
    title: "Conference Only",
    educationPrice: 132,
    personalPrice: 294,
    businessPrice: 500,
    latePersonalPrice: 441,
    lateBusinessPrice: 750,
    features: [
      {
        text: "Access to two full days of workshops, summits, and tutorials across six parallel tracks (13-14 July)",
        icon: "❌",
      },
      {
        text: "<strong>Access to three days of talks across six parallel tracks with 130+ talks (15-17 July)</strong>",
      },
      { text: "Access to open spaces throughout the three conference days" },
      { text: "Access to Sprint Weekend (18-19 July)" },
      {
        text: "Access to sponsor booths with opportunities to connect with sponsoring sponsors",
      },
      { text: "Access to Sprint Weekend (18-19 July)" },
      { text: "Limited access to specific sponsored workshops" },
      { text: "Light lunch provided each day" },
      { text: "Break refreshments (coffee, tea, water, and more)" },
      {
        text: "Access to in-person networking opportunities during the main conference days",
      },
      { text: "Access to free childcare for children aged 19 months and older" },
      { text: "Conference T-shirt included" },
    ],
  },
  {
    title: "Combined",
    educationPrice: 206,
    personalPrice: 441,
    businessPrice: 800,
    latePersonalPrice: 662,
    lateBusinessPrice: 1200,
    features: [
      {
        text: "Access to two full days of workshops, summits, and tutorials across six parallel tracks (13-14 July)",
      },
      {
        text: "<strong>Access to three days of talks across six parallel tracks with 130+ talks (15-17 July)</strong>",
      },
      { text: "Access to open spaces throughout the three conference days" },
      {
        text: "Access to sponsor booths with opportunities to connect with sponsoring sponsors",
      },
      { text: "Access to Sprint Weekend (18-19 July)" },
      { text: "Limited access to specific sponsored workshops" },
      { text: "Light lunch provided each day" },
      { text: "Break refreshments (coffee, tea, water, and more)" },
      {
        text: "Access to in-person networking opportunities throughout the entire conference",
      },
      { text: "Access to free childcare for children aged 19 months and older" },
      { text: "Conference T-shirt included" },
      {
        text: "<strong>Limited to only 300, due to tutorial capacity</strong>",
        icon: "⚠️",
      },
    ],
  },

  {
  title: "Remote",
  personalPrice: 78,
  businessPrice: 150,
  subtitle: "Conference days only",
  features: [
    {
      text: "Remote participation for Conference Days (15-17 July)",
    },
    {
      text: "Watch live talks, keynotes & panels in all 6 tracks",
    },
    {
      text: "Live text-based Q&A",
    },
    {
      text: "Interact with speakers and attendees in chat channels",
    },
    {
      text: "<strong>Proper VAT invoice with company name (Business only)</strong>. <i>Remote tickets invoiced by the EPS (Sweden); <strong>no VAT charged due to non-profit status</strong></i>.",
      icon: "ℹ️",
    },
  ],
},
];

const formatPrice = (price: number | string) => {
  if (typeof price === "string") return price;
  return new Intl.NumberFormat("en", {
    style: "currency",
    currency: "EUR",
    maximumFractionDigits: 0,
    minimumFractionDigits: 0,
  }).format(price);
};
---

<div class="ticket-tiers-container">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 py-24">
    {
      tiers.map((tier) => (
        <div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
          <div>
            <Headline as="h4" id=`titer-${tier}` title={tier.title} />
            <div class="mt-4 space-y-2">
              {tier.educationPrice !== undefined && (
              <div>
                <div class="font-bold text-lg">
                  Education:
                  <span class="text-xl ml-1">
                    {formatPrice(tier.educationPrice)}
                  </span>
                </div>
              </div>
              )}

              <div>
                <div class="font-bold text-lg">
                  Personal:
                  <span class="text-xl ml-1">
                    {formatPrice(tier.personalPrice)}
                  </span>
                </div>
                {tier.latePersonalPrice && (
                  <div class="text-sm font-normal ml-1">
                    (Late personal: {formatPrice(tier.latePersonalPrice)})
                  </div>
                )}
              </div>

              <div>
                <div class="font-bold text-lg">
                  Business:
                  <span class="text-xl ml-1">
                    {formatPrice(tier.businessPrice)} (+ VAT)
                  </span>
                </div>
                {tier.lateBusinessPrice && (
                  <div class="text-sm font-normal ml-1">
                    (Late business: {formatPrice(tier.lateBusinessPrice)} + VAT)
                  </div>
                )}
              </div>
            </div>
          </div>

          <div class="mt-6">
            <p class="font-bold text-base">This ticket includes:</p>
            <ul class="text-base list-none pl-0">
              {tier.features.map((feature) => (
                <li class="flex items-start">
                  <span class="flex-shrink-0 w-6">
                    {feature.icon ? feature.icon : "✔️"}
                  </span>
                  <span set:html={feature.text} />
                </li>
              ))}
            </ul>
          </div>
        </div>
      ))
    }
  </div>
</div>

<style is:global>
  .ticket-tiers-container {
    width: 97vw;
    max-width: 1115px;
    /*margin-left: 50%;*/
    /*transform: translateX(-50%);*/
    position: relative;
    /*padding: 0 40px;*/
  }

  @media (max-width: 1023px) {
    .ticket-tiers-container {
    max-width: 700px;
    /*max-width: 95vw;*/
      /*width: 100%;*/
      /*width: 100vw;*/
      /*padding: 0 10px;*/
      /*position: relative;*/

    }
  }
</style>