import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { attendCopy, attendPaths } from "@/content/attend";
import { site } from "@/content/site";
import { Section } from "@/components/layout/Section";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function AttendSummitSection() {
  return (
    <Section id="attend" variant="muted" riftPattern="vein-left" className="py-14 md:py-20">
      <div className="mx-auto max-w-3xl text-center">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#1a5c38]">
          {attendCopy.eyebrow}
        </p>
        <h2 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl">
          {attendCopy.headline}
        </h2>
        <p className="mt-4 text-muted-foreground leading-relaxed">{attendCopy.subheadline}</p>
        <p className="mt-2 text-sm font-medium text-[#1a5c38]/80">
          {site.dates.label} · {site.venue.name}
        </p>
      </div>

      <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {attendPaths.map((path) => {
          const Icon = path.icon;
          return (
            <article
              key={path.id}
              className={cn(
                "group flex flex-col rounded-2xl border border-border bg-white p-6 shadow-sm",
                "transition-shadow duration-200 hover:border-[#1a5c38]/25 hover:shadow-md"
              )}
            >
              <span className="inline-flex size-11 items-center justify-center rounded-xl bg-[#1a5c38]/10 text-[#1a5c38]">
                <Icon className="size-5" strokeWidth={1.75} aria-hidden />
              </span>
              <h3 className="mt-4 text-lg font-bold text-foreground">{path.title}</h3>
              <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">
                {path.description}
              </p>
              <Button
                variant="ghost"
                className="mt-5 h-auto justify-start px-0 text-[#1a5c38] hover:bg-transparent hover:text-[#0d3d26]"
                asChild
              >
                <Link href={path.href}>
                  {path.cta}
                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
                </Link>
              </Button>
            </article>
          );
        })}
      </div>

      <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
        <Button
          className="rounded-full bg-[#ffb300] px-8 text-[#0f0404] hover:bg-[#ffb300]/90"
          asChild
        >
          <Link href="/payment">Get tickets</Link>
        </Button>
        <Button variant="outline" className="rounded-full border-[#1a5c38]/30 text-[#1a5c38]" asChild>
          <Link href="/contact">Contact the team</Link>
        </Button>
      </div>
    </Section>
  );
}