import Link from "next/link";
import { ticketTiers } from "@/content/tickets";
import { site } from "@/content/site";
import { Section } from "@/components/layout/Section";
import { TicketCard } from "@/components/tickets/TicketCard";
export function TicketsBand() {
  return (
    <Section variant="inverse" id="register" riftPattern="arc-top">
      <div className="relative text-center">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
          Register
        </p>
        <h2 className="mt-2 text-3xl font-bold uppercase tracking-tight md:text-4xl">
          Get your ticket
        </h2>
        <p className="mx-auto mt-3 max-w-lg text-white/70">
          Join 500+ attendees at {site.venue.name}, {site.venue.address}. Add the summit to your
          calendar when you choose a pass.
        </p>
      </div>

      <div className="relative mx-auto mt-14 grid max-w-5xl gap-8 md:grid-cols-3 md:items-end">
        {ticketTiers.map((tier, index) => (
          <TicketCard
            key={tier.id}
            tier={tier}
            index={index}
            featured={tier.id === "summit-pass"}
          />
        ))}
      </div>

      <p className="mt-10 text-center text-sm text-white/50">
        Accepted: Visa, Mastercard, AMEX ·{" "}
        <Link href="/payment" className="text-[#ffb300] hover:underline">
          Bank transfer & invoice
        </Link>
      </p>
    </Section>
  );
}