import DemoButton from "@/components/demo/DemoButton";

import type { Locale } from "@/lib/locales";

type PageHeroProps = {
  bookDemo: string;
  description: string;
  eyebrow: string;
  locale: Locale;
  title: string;
};

export default function PageHero({
  bookDemo,
  description,
  eyebrow,
  locale,
  title,
}: PageHeroProps) {
  return (
    <section className="relative overflow-hidden border-b border-[#edf0f7] bg-white px-6 py-16 sm:py-20">
      <div className="pointer-events-none absolute -left-20 top-0 h-64 w-64 rounded-full bg-[#eef0ff] blur-3xl" />
      <div className="pointer-events-none absolute right-0 top-10 h-72 w-72 rounded-full bg-[#edfbff] blur-3xl" />
      <div className="relative mx-auto max-w-230 text-center">
        <p className="text-[12px] font-extrabold uppercase tracking-[0.2em] text-[#626bef]">{eyebrow}</p>
        <h1 className="mx-auto mt-4 max-w-205 text-4xl font-extrabold tracking-[-0.055em] text-[#111a42] sm:text-5xl">
          {title}
        </h1>
        <p className="mx-auto mt-5 max-w-180 text-[15px] leading-7 text-[#6f7b94] sm:text-[17px]">
          {description}
        </p>
        <DemoButton
          locale={locale}
          label={bookDemo}
          className="mt-7 inline-flex items-center gap-2 rounded-lg bg-linear-to-r from-[#5264ee] to-[#6555e9] px-6 py-3.5 text-[13px] font-bold text-white shadow-[0_10px_22px_rgba(94,85,235,0.22)]"
        />
      </div>
    </section>
  );
}