"use client";

import { Button } from "@/components/ui/button";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

import { Eyebrow } from "./SectionHeading";
import { HeroArt } from "./illustrations";
import { SECTION_IDS } from "./lib/content";

/** Hero: headline + customer CTAs, with a provider glass-card and illustration. */
export function HeroSection() {
  const { t } = useTranslation();

  return (
    <section
      id={SECTION_IDS.home}
      className="relative scroll-mt-20 overflow-hidden"
    >
      {/* decorative gradient blobs */}
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute -top-24 -end-24 size-96 rounded-full bg-primary-sky-blue/20 blur-3xl" />
        <div className="absolute -bottom-32 -start-24 size-[28rem] rounded-full bg-primary-blue/10 blur-3xl" />
      </div>

      <div className="mx-auto grid w-full max-w-7xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-2 lg:items-center lg:gap-12 lg:px-8 lg:py-24">
        <div className="flex flex-col items-start gap-6">
          <Eyebrow>{t("home.hero.eyebrow")}</Eyebrow>

          <Typography
            as="h1"
            variant="h1"
            className="text-[32px] leading-tight font-bold sm:text-[42px] lg:text-[52px]"
          >
            {t("home.hero.title")}
          </Typography>

          <Typography
            variant="body"
            color="secondary"
            className="max-w-xl text-[15px] sm:text-base"
          >
            {t("home.hero.description")}
          </Typography>

          <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
            <a href={`#${SECTION_IDS.app}`}>
              <Button variant="secondary" className="w-full sm:w-auto">
                {t("home.hero.downloadCta")}
              </Button>
            </a>
          </div>
        </div>

        <div className="relative order-first lg:order-last">
          <HeroArt />
        </div>
      </div>
    </section>
  );
}