import type { ReactNode } from "react";

import { Badge } from "@/components/badge";
import { Button } from "@/components/button";
import { Container } from "@/components/container";

type PageHeroProps = {
  eyebrow?: string;
  title: string;
  description: string;
  primaryAction?: { label: string; href: string; leadType?: string; subject?: string; sourceSection?: string };
  secondaryAction?: { label: string; href: string; leadType?: string; subject?: string; sourceSection?: string };
  children?: ReactNode;
  tone?: "dark" | "light";
};

export function PageHero({
  eyebrow,
  title,
  description,
  primaryAction,
  secondaryAction,
  children,
  tone = "dark",
}: PageHeroProps) {
  const isDark = tone === "dark";

  return (
    <section
      className={
        isDark
          ? "relative overflow-hidden border-b border-white/10 bg-ink py-16 text-white sm:py-20"
          : "relative overflow-hidden border-b border-slate-200 bg-white py-16 sm:py-20"
      }
    >
      {isDark ? (
        <>
          <div className="absolute inset-0 blueprint-grid opacity-[0.85]" />
          <div className="absolute left-1/2 top-10 h-72 w-[40rem] -translate-x-1/2 rounded-full bg-accent-sky/[0.08] blur-3xl" />
          <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-accent-sky/60 to-transparent" />
        </>
      ) : null}
        <Container className="grid items-center gap-12 lg:grid-cols-[1fr_0.85fr]">
        <div className="relative">
          {eyebrow ? (
            <Badge className={isDark ? "border-white/10 bg-white/5 text-accent-ice" : undefined}>{eyebrow}</Badge>
          ) : null}
          <h1
            className={
              isDark
                ? "mt-5 max-w-4xl text-4xl font-semibold leading-tight text-white sm:text-5xl lg:text-6xl"
                : "mt-5 max-w-4xl text-4xl font-semibold leading-tight text-slate-950 sm:text-5xl lg:text-6xl"
            }
          >
            {title}
          </h1>
          <p className={isDark ? "mt-6 max-w-2xl text-lg leading-8 text-slate-300" : "mt-6 max-w-2xl text-lg leading-8 text-slate-600"}>
            {description}
          </p>
          {primaryAction || secondaryAction ? (
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              {primaryAction ? (
                <Button
                  href={primaryAction.href}
                  size="lg"
                  data-lead-type={primaryAction.leadType}
                  data-lead-subject={primaryAction.subject ?? `Upit: ${title}`}
                  data-source-section={primaryAction.sourceSection ?? `${eyebrow ?? "Hero"} sekcija`}
                >
                  {primaryAction.label}
                </Button>
              ) : null}
              {secondaryAction ? (
                <Button
                  href={secondaryAction.href}
                  size="lg"
                  variant={isDark ? "darkOutline" : "outline"}
                  data-lead-type={secondaryAction.leadType}
                  data-lead-subject={secondaryAction.subject ?? `Upit: ${title}`}
                  data-source-section={secondaryAction.sourceSection ?? `${eyebrow ?? "Hero"} sekcija`}
                >
                  {secondaryAction.label}
                </Button>
              ) : null}
            </div>
          ) : null}
        </div>
        {children ? (
          <div className="relative">{children}</div>
        ) : isDark ? (
          <div className="dark-enterprise-panel relative rounded-xl p-3">
            <div className="rounded-lg border border-white/10 bg-panel-dark p-5">
              <p className="text-sm font-semibold text-white">Operativni sistem</p>
              <p className="mt-1 text-xs text-slate-400">prodaja, ERP, zalihe, logistika</p>
              <div className="mt-5 grid gap-3">
                {["Proces", "Integracija", "Admin", "Izveštaji"].map((item) => (
                  <div key={item} className="flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
                    <span className="text-sm font-medium text-slate-200">{item}</span>
                    <span className="h-2 w-14 rounded-full bg-accent-sky" />
                  </div>
                ))}
              </div>
            </div>
          </div>
        ) : null}
      </Container>
    </section>
  );
}