GRV-Summit-Site/components/tickets/TicketCard.tsx

"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import type { TicketTier } from "@/content/tickets";
import { site } from "@/content/site";
import { AddToCalendar } from "@/components/event/AddToCalendar";
import { RiftCardConnector } from "@/components/brand/RiftFlowLines";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Props = {
  tier: TicketTier;
  index: number;
  featured?: boolean;
};

export function TicketCard({ tier, index, featured }: Props) {
  const price =
    tier.priceLabel ?? (tier.priceUsd === 0 ? "Free" : `$${tier.priceUsd}`);

  return (
    <article
      className={cn(
        "ticket-card-enter flex flex-col",
        featured && "md:-mt-2 md:mb-2"
      )}
      style={{ animationDelay: `${index * 120}ms` }}
    >
      <div
        className={cn(
          "relative rounded-3xl border border-white/10 bg-white p-6 shadow-xl",
          featured && "ring-2 ring-[#ffb300]/40"
        )}
      >
        {featured && (
          <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#ffb300] px-3 py-0.5 text-xs font-bold uppercase tracking-wider text-[#0f0404]">
            Popular
          </span>
        )}
        <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
          {tier.scheduleLabel ?? site.dates.label}
        </p>
        <h3 className="mt-2 text-2xl font-bold text-[#0f0404]">{tier.name}</h3>
        <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
          {tier.description}
        </p>
        <p className="mt-4 text-3xl font-bold text-[#1f3d7e]">{price}</p>
        <div className="mt-6 flex flex-col gap-2">
          <Button
            className={cn(
              "w-full rounded-full bg-[#ffb300] text-[#0f0404] hover:bg-[#ffb300]/90",
              featured && "ticket-cta-pulse"
            )}
            disabled={tier.soldOut}
            asChild={!tier.soldOut}
          >
            {tier.soldOut ? (
              <span>Sold out</span>
            ) : (
              <Link href="/payment">
                Get tickets <ArrowRight className="size-4" />
              </Link>
            )}
          </Button>
          <AddToCalendar variant="outline" className="w-full border-[#1f3d7e]/20" />
        </div>
      </div>

      <RiftCardConnector />

      <div className="rounded-3xl border border-white/10 bg-white/95 p-6 shadow-lg backdrop-blur-sm">
        <p className="text-xs font-semibold uppercase tracking-wider text-[#1f3d7e]">
          Included
        </p>
        <ul className="mt-4 space-y-2.5">
          {tier.features.map((feature) => (
            <li key={feature} className="flex gap-2 text-sm text-[#0f0404]/80">
              <span className="text-[#ffb300]">✓</span>
              {feature}
            </li>
          ))}
        </ul>
      </div>
    </article>
  );
}