import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { site } from "@/content/site";
import { AddToCalendar } from "@/components/event/AddToCalendar";
import { HeroGrantLine } from "@/components/home/HeroGrantLine";
import { Button } from "@/components/ui/button";

export function Hero() {
  return (
    <section className="relative overflow-hidden bg-white pb-0 pt-24 md:pt-28">
      <div className="mx-auto max-w-4xl px-4 text-center md:px-6">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:text-sm">
          {site.dates.label} · {site.venue.address}
        </p>
        <h1 className="mt-6 text-4xl font-bold leading-[1.05] tracking-tight md:text-6xl lg:text-7xl">
          Great Rift Valley
          <br />
          <span className="text-[#ffb300]">Innovation</span> Summit
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl">
          {site.tagline} Presented by {site.presentedBy}.
        </p>
        <div className="mt-8 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={site.links.ticketsUrl}>
              Register <ArrowRight className="size-4" />
            </Link>
          </Button>
          <Button variant="outline" className="rounded-full" asChild>
            <Link href="/pitch-competition">Apply to pitch</Link>
          </Button>
          <AddToCalendar />
        </div>
        <p className="mt-4 text-sm text-muted-foreground">
          <HeroGrantLine />
        </p>
      </div>
      <div className="relative mt-12 h-[280px] overflow-hidden md:h-[360px]">
        <div
          className="absolute inset-x-0 top-0 h-16 bg-white"
          style={{
            clipPath: "ellipse(55% 100% at 50% 100%)",
          }}
        />
        <Image
          src="/branding/booth-mockup.png"
          alt="Summit exhibition"
          fill
          className="object-cover object-center"
          priority
        />
      </div>
    </section>
  );
}