import Link from "next/link";
import type { HeroBlockValue } from "@/types/wagtail";

export default function Hero({ value }: { value: HeroBlockValue }) {
  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-slate-50 to-white py-32">
      <div className="mx-auto flex max-w-5xl flex-col items-center px-6 text-center">
        <h1 className="mb-6 text-5xl font-bold leading-tight text-slate-900">
          {value.title}
        </h1>
        {value.subtitle && (
          <p className="mb-10 max-w-2xl text-lg leading-8 text-slate-600">
            {value.subtitle}
          </p>
        )}
        <div className="flex gap-4">
          {value.buttons?.map((button, index) => (
            <Link
              key={`${button.link}-${index}`}
              href={button.link}
              className="rounded-2xl bg-primary px-8 py-4 text-white"
            >
              {button.text}
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}