"use client";

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

import { PhoneMockup } from "./PhoneMockup";
import { Eyebrow } from "./SectionHeading";
import { Section } from "./Section";
import { QrCode, StoreBadge } from "./illustrations";
import { SECTION_IDS } from "./lib/content";

/** App download band with store badges, QR, and a device mockup. */
export function DownloadSection() {
  const { t } = useTranslation();

  return (
    <Section id={SECTION_IDS.app} className="bg-background">
      <div className="relative overflow-hidden rounded-[28px] bg-gradient-to-br from-primary-blue to-primary-sky-blue p-8 text-white lg:p-12">
        <div
          aria-hidden
          className="pointer-events-none absolute -bottom-20 -start-16 size-72 rounded-full bg-white/10 blur-2xl"
        />

        <div className="relative grid gap-10 lg:grid-cols-2 lg:items-center">
          <div className="flex flex-col items-start gap-6">
            <Eyebrow tone="onDark">{t("home.download.eyebrow")}</Eyebrow>
            <Typography
              as="h2"
              variant="h1"
              color="inherit"
              className="text-[28px] leading-tight font-bold sm:text-[34px]"
            >
              {t("home.download.title")}
            </Typography>
            <Typography
              variant="body"
              color="inherit"
              className="max-w-md text-white/90"
            >
              {t("home.download.description")}
            </Typography>

            <div className="flex flex-wrap gap-3">
              <StoreBadge
                store="apple"
                label={t("home.download.appStore")}
                href="https://apps.apple.com/"
              />
              <StoreBadge
                store="google"
                label={t("home.download.googlePlay")}
                href="https://play.google.com/store/apps/"
              />
            </div>

            <div className="flex items-center gap-4 rounded-2xl border border-white/20 bg-white/10 p-4 backdrop-blur">
              <QrCode className="size-24 shrink-0 rounded-xl" />
              <Typography
                variant="body"
                color="inherit"
                className="max-w-32 text-white/90"
              >
                {t("home.download.qrHint")}
              </Typography>
            </div>
          </div>

          <div className="flex justify-center lg:order-last">
            <PhoneMockup />
          </div>
        </div>
      </div>
    </Section>
  );
}