GRV-Summit-Site/components/home/AttendSummitSection.tsx

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 { ScrollReveal } from "@/components/motion/ScrollReveal";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function AttendSummitSection() {
  return (
    <Section id="attend" variant="muted" className="py-14 md:py-20">
      <div className="topo-on-green-bg mx-auto max-w-3xl text-center">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#b9d8c9]">
          {attendCopy.eyebrow}
        </p>
        <h2 className="mt-3 text-3xl font-bold tracking-tight text-white md:text-4xl">
          {attendCopy.headline}
        </h2>
        <p className="mt-4 text-white/85 leading-relaxed">{attendCopy.subheadline}</p>
        <p className="mt-2 text-sm font-medium text-white/75">
          {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, i) => {
          const Icon = path.icon;
          return (
            <ScrollReveal
              key={path.id}
              variant="card"
              delay={i * 75}
              as="article"
              className={cn(
                "topo-card-surface group flex flex-col rounded-2xl border border-border bg-white p-6 text-[#37a47a] shadow-sm",
                "transition-shadow duration-200 hover:border-[#37a47a]/25 hover:shadow-md"
              )}
            >
              <span className="inline-flex size-11 items-center justify-center rounded-xl bg-[#37a47a]/10 text-[#37a47a]">
                <Icon className="size-5" strokeWidth={1.75} aria-hidden />
              </span>
              <h3 className="mt-4 text-lg font-bold text-[#30614c]">{path.title}</h3>
              <p className="mt-2 flex-1 text-sm leading-relaxed text-[#5b5b5b]">
                {path.description}
              </p>
              <Button
                variant="ghost"
                className="topo-card-link mt-5 h-auto justify-start px-0 hover:bg-transparent"
                asChild
              >
                <Link href={path.href}>
                  {path.cta}
                  <ArrowRight className="size-4 text-current transition-transform group-hover:translate-x-0.5" />
                </Link>
              </Button>
            </ScrollReveal>
          );
        })}
      </div>

      <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
        <Button
          className="rounded-full bg-[#37a47a] px-8 text-[#ffffff] hover:bg-[#37a47a]/90"
          asChild
        >
          <Link href="/payment">Get tickets</Link>
        </Button>
        <Button
          variant="outline"
          className="rounded-full border-white/40 bg-transparent text-white hover:bg-white/10 hover:text-white"
          asChild
        >
          <Link href="/contact">Contact the team</Link>
        </Button>
      </div>
    </Section>
  );
}