import Link from "next/link";
import { ArrowRight, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { publicTexts } from "@/lib/i18n/public";

/** Navy gradient hero with a single staggered fade-up entrance (see LandingStyles). */
export function LandingHero({
  servicesCount = 0,
  platformsCount = 0,
}: {
  servicesCount?: number;
  platformsCount?: number;
}) {
  const eyebrow =
    servicesCount > 0 && platformsCount > 0
      ? publicTexts.heroEyebrow(servicesCount, platformsCount)
      : publicTexts.heroEyebrowFallback;

  return (
    <section className="relative isolate overflow-hidden bg-[#0b1533] text-white">
      {/* layered background: gradient → glows → grid → noise → fade into the page */}
      <div
        aria-hidden
        className="absolute inset-0 bg-gradient-to-b from-[#0e1a3a] via-[#101f4d] to-[#0a1230]"
      />
      <div aria-hidden className="lp-glow-a absolute inset-0" />
      <div aria-hidden className="lp-glow-b absolute inset-0" />
      <div aria-hidden className="lp-grid absolute inset-0" />
      <div aria-hidden className="lp-noise pointer-events-none absolute inset-0" />
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-background"
      />

      <div className="relative mx-auto w-full max-w-6xl px-5 pt-32 pb-36 text-center sm:px-8 lg:pt-40 lg:pb-44">
        <div className="lp-rise mx-auto inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3.5 py-1.5 text-xs font-medium text-white/70 backdrop-blur-sm">
          <span className="relative flex size-1.5">
            <span className="absolute inline-flex size-full animate-ping rounded-full bg-cyan-400 opacity-60" />
            <span className="relative inline-flex size-1.5 rounded-full bg-cyan-400" />
          </span>
          <span className="font-mono tabular tracking-tight">{eyebrow}</span>
        </div>

        <h1
          className="lp-rise mx-auto mt-7 max-w-4xl font-display text-4xl leading-[1.06] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl"
          style={{ animationDelay: "90ms" }}
        >
          {publicTexts.heroTitleLead}{" "}
          <span className="bg-gradient-to-r from-blue-400 via-cyan-300 to-sky-300 bg-clip-text text-transparent">
            {publicTexts.heroTitleAccent}
          </span>
          .
        </h1>

        <p
          className="lp-rise mx-auto mt-6 max-w-2xl text-base leading-relaxed text-pretty text-white/65 sm:text-lg"
          style={{ animationDelay: "180ms" }}
        >
          {publicTexts.heroSubtitle}
        </p>

        <div
          className="lp-rise mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row"
          style={{ animationDelay: "270ms" }}
        >
          <Button
            asChild
            size="lg"
            className="h-12 w-full rounded-xl px-6 text-[15px] font-semibold bg-white text-slate-900 shadow-xl shadow-blue-950/30 hover:bg-white/90 sm:w-auto dark:bg-white dark:text-slate-900"
          >
            <Link href="/signup">
              {publicTexts.heroCtaPrimary}
              <ArrowRight className="size-4" />
            </Link>
          </Button>
          <Button
            asChild
            variant="outline"
            size="lg"
            className="h-12 w-full rounded-xl border-white/20 bg-white/5 px-6 text-[15px] font-medium text-white backdrop-blur-sm hover:bg-white/10 hover:text-white sm:w-auto dark:border-white/20 dark:bg-white/5 dark:hover:bg-white/10"
          >
            <Link href="/services">{publicTexts.heroCtaSecondary}</Link>
          </Button>
        </div>

        <ul
          className="lp-rise mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-2.5"
          style={{ animationDelay: "360ms" }}
        >
          {publicTexts.heroChips.map((chip) => (
            <li
              key={chip}
              className="flex items-center gap-1.5 text-sm text-white/55"
            >
              <Check className="size-3.5 text-cyan-400" strokeWidth={3} />
              {chip}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default LandingHero;