import Link from "next/link";
import { CheckCircle2, Rocket } from "lucide-react";

import DemoButton from "@/components/demo/DemoButton";
import DashboardUnlockOverlay from "@/components/products/DashboardUnlockOverlay";
import ProductDashboardVisual from "@/components/products/ProductDashboardVisual";
import { productThemes } from "@/components/products/product-theme";
import type { Product, ProductPageCopy } from "@/data/products.data";
import { getProductLinks } from "@/data/products.data";
import type { Locale } from "@/lib/locales";

export default function ProductHero({
  bookDemoLabel,
  copy,
  locale,
  product,
}: {
  bookDemoLabel: string;
  copy: ProductPageCopy;
  locale: Locale;
  product: Product;
}) {
  const theme = productThemes[product.tone];
  const links = getProductLinks(locale, product);
  const isSociety = product.slug === "societypro";

  return (
    <section
      id="overview"
      className="relative scroll-mt-24 overflow-hidden border-b border-[#eef1f7] bg-[#fbfdff]"
    >
      <div
        className={`pointer-events-none absolute -left-36 top-0 h-80 w-80 rounded-full opacity-50 blur-3xl ${theme.glow}`}
      />
      <div
        className={`pointer-events-none absolute -right-28 bottom-0 h-96 w-96 rounded-full opacity-40 blur-3xl ${theme.glow}`}
      />
      <div
        className={`relative mx-auto grid min-h-155 max-w-360 items-center gap-10 px-6 py-14 xl:px-8 ${isSociety ? "lg:grid-cols-[0.92fr_1.08fr]" : "lg:grid-cols-[0.92fr_1.08fr]"}`}
      >
        <div className={isSociety ? "lg:order-1" : undefined}>
          <span
            className={`inline-flex items-center gap-2 rounded-full border px-3 py-2 text-[11px] font-extrabold uppercase tracking-[0.14em] ${theme.badge}`}
          >
            <CheckCircle2 size={14} />
            {copy.heroBadge}
          </span>
          <h1 className="mt-6 text-5xl font-extrabold tracking-[-0.075em] text-[#0d1739] sm:text-6xl">
            {product.name}
          </h1>
          <p
            className={`mt-3 max-w-xl text-xl font-extrabold leading-8 tracking-[-0.035em] ${theme.accentText}`}
          >
            {product.short}
          </p>
          <p className="mt-5 max-w-xl text-[15px] leading-7 text-[#65718b]">
            {product.overview}
          </p>
          <div className="mt-7 flex flex-wrap gap-3">
            <DemoButton
              locale={locale}
              productSlug={product.slug}
              label={bookDemoLabel}
              className={`inline-flex items-center gap-2 rounded-xl px-5 py-3.5 text-[13px] font-extrabold text-white shadow-[0_12px_22px_rgba(60,72,153,0.2)] transition hover:-translate-y-0.5 ${theme.button}`}
            />
            <Link
              href={links.register}
              className="inline-flex items-center gap-2 rounded-xl border border-[#dfe4f0] bg-white px-5 py-3.5 text-[13px] font-extrabold text-[#4e5a73] transition hover:border-[#ccd3e5] hover:bg-[#f9faff]"
            >
              <Rocket size={15} />
              {copy.navbar.trial}
            </Link>
          </div>
          <div className="mt-7 flex flex-wrap gap-x-5 gap-y-2">
            {copy.trustPills.map((item) => (
              <span
                key={item}
                className="flex items-center gap-1.5 text-[12px] font-bold text-[#73809a]"
              >
                <CheckCircle2 size={14} className={theme.accentText} />
                {item}
              </span>
            ))}
          </div>
        </div>

        <div className={`relative ${isSociety ? "lg:order-1" : ""}`}>
          <div
            className={`absolute inset-7 rounded-[32px] bg-gradient-to-br opacity-80 blur-2xl ${theme.soft}`}
          />
          <DashboardUnlockOverlay
            className={`relative overflow-hidden rounded-[28px] border bg-white p-0 shadow-[0_26px_70px_rgba(37,50,100,0.16)] ${theme.border}`}
            locale={locale}
            productName={product.name}
            productSlug={product.slug}
          >
            <ProductDashboardVisual
              locale={locale}
              productName={product.name}
              productSlug={product.slug}
            />
          </DashboardUnlockOverlay>
        </div>
      </div>
    </section>
  );
}