"use client";

import Link from "next/link";

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

import { Eyebrow } from "./SectionHeading";
import { Section } from "./Section";
import { PARTNER_BENEFITS, SECTION_IDS } from "./lib/content";

/** Provider acquisition band — the one section that wires into the real panel. */
export function PartnerSection() {
  const { t } = useTranslation();

  return (
    <Section id={SECTION_IDS.partner} className="bg-white">
      <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 -top-16 -end-16 size-64 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.partner.eyebrow")}</Eyebrow>
            <Typography
              as="h2"
              variant="h1"
              color="inherit"
              className="text-[28px] leading-tight font-bold sm:text-[34px]"
            >
              {t("home.partner.title")}
            </Typography>
            <Typography
              variant="body"
              color="inherit"
              className="max-w-xl text-white/90"
            >
              {t("home.partner.description")}
            </Typography>
            <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
              <Link
                //  href={ROUTES.AUTH.REGISTER_PROVIDER}
                href={"#"}
              >
                <Button variant="callToAction" className="w-full sm:w-auto">
                  {t("home.partner.registerCta")}
                </Button>
              </Link>
              <Link
                //  href={ROUTES.AUTH.LOGIN}
                href={"#"}
              >
                <Button variant="secondary" className="w-full sm:w-auto">
                  {t("home.partner.loginCta")}
                </Button>
              </Link>
            </div>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            {PARTNER_BENEFITS.map(({ key, icon: Icon }) => (
              <div
                key={key}
                className="flex flex-col gap-2 rounded-[20px] border border-white/20 bg-white/10 p-4 backdrop-blur"
              >
                <span className="flex size-11 items-center justify-center rounded-2xl bg-white/15 text-white">
                  <Icon className="size-5" />
                </span>
                <Typography as="h3" variant="h3" color="inherit">
                  {t(`home.partner.benefits.${key}.title`)}
                </Typography>
                <Typography
                  variant="caption"
                  color="inherit"
                  className="text-white/80"
                >
                  {t(`home.partner.benefits.${key}.description`)}
                </Typography>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}