import Link from "next/link";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { signupUrl } from "@/lib/env";
import { Button } from "@/components/ui/button";
import { Container } from "@/components/ui/container";
import { Heading } from "@/components/ui/heading";
import { Subheading } from "@/components/ui/subheading";

import { GradientDivider } from "./gradient-divider";
import { LandingImages } from "./landing-images";

export const Hero = ({
  dict,
  lang,
}: {
  dict: Dictionary["hero"];
  lang: string;
}) => {
  return (
    <section className="relative overflow-hidden pt-10 md:pt-20 lg:pt-32">
      <Container>
        <Heading as="h1">
          {dict.title_line1} <br /> {dict.title_line2}
        </Heading>
        <Subheading className="py-8">{dict.subtitle}</Subheading>
        <div className="flex items-center gap-6">
          <Button asChild className="shadow-brand">
            <a href={signupUrl}>{dict.cta_primary}</a>
          </Button>
          <Button asChild variant="outline">
            <Link href={`/${lang}/pricing`}>{dict.cta_secondary}</Link>
          </Button>
        </div>
        <p className="text-ink-3 mt-4 text-sm">{dict.trial_note}</p>
        <LandingImages />
      </Container>
      <GradientDivider />
    </section>
  );
};