import { clsx } from "clsx";
import type { ReactNode } from "react";
import Link from "next/link";
import { Reveal } from "./reveal";
import { Button } from "./ui/button";
import type { Dictionary } from "@/i18n";

export function Container({
  children,
  className,
  narrow = false,
}: {
  children: ReactNode;
  className?: string;
  narrow?: boolean;
}) {
  return (
    <div
      className={clsx(
        "mx-auto w-full px-5 sm:px-8",
        narrow ? "max-w-3xl" : "max-w-6xl",
        className,
      )}
    >
      {children}
    </div>
  );
}

export function Eyebrow({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <span
      className={clsx(
        "inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em]",
        className || "text-brand-bright",
      )}
    >
      <span className="h-px w-6 bg-current opacity-60" />
      {children}
    </span>
  );
}

/* Reusable section heading: eyebrow + title + lead, with an optional action
   link pinned to the right on wider screens. Used across home + listing pages. */
export function SectionHeading({
  eyebrow,
  title,
  lead,
  action,
  align = "left",
  className,
  tone = "ink",
}: {
  eyebrow?: string;
  title: ReactNode;
  lead?: string;
  action?: { href: string; label: string };
  align?: "left" | "center";
  className?: string;
  tone?: "ink" | "light";
}) {
  const centered = align === "center";
  const light = tone === "light";
  return (
    <Reveal
      className={clsx(
        "flex gap-6",
        centered
          ? "flex-col items-center text-center"
          : "flex-col items-start sm:flex-row sm:items-end sm:justify-between",
        className,
      )}
    >
      <div className={clsx(centered && "mx-auto max-w-2xl")}>
        {eyebrow && (
          <Eyebrow className={light ? "text-white/70" : undefined}>
            {eyebrow}
          </Eyebrow>
        )}
        <h2
          className={clsx(
            "mt-3 text-balance text-3xl tracking-tight sm:text-4xl",
            light && "text-bg",
          )}
        >
          {title}
        </h2>
        {lead && (
          <p
            className={clsx(
              "mt-3 max-w-xl text-lg",
              light ? "text-bg/70" : "text-ink-soft",
              centered && "mx-auto",
            )}
          >
            {lead}
          </p>
        )}
      </div>
      {action && (
        <Link
          href={action.href}
          className={clsx(
            "group inline-flex shrink-0 items-center gap-1.5 text-sm font-semibold transition",
            centered && "mx-auto",
            light
              ? "text-bg hover:text-bg"
              : "text-brand-bright hover:text-brand",
          )}
        >
          {action.label}
          <span className="transition group-hover:translate-x-1">→</span>
        </Link>
      )}
    </Reveal>
  );
}

/* Inner-page header: a compact maroon hero with the animated radiance wash. */
export function PageHeader({
  eyebrow,
  title,
  lead,
}: {
  eyebrow: string;
  title: string;
  lead?: string;
}) {
  return (
    <header className="relative overflow-hidden bg-brand-deep text-bg">
      <div
        aria-hidden
        className="radiance animate-gradient absolute inset-0 opacity-70"
      />
      <div
        aria-hidden
        className="absolute inset-0 bg-grid opacity-[0.4] mix-blend-overlay"
      />
      <div className="relative mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28">
        <Reveal>
          <Eyebrow className="text-white/70">{eyebrow}</Eyebrow>
          <h1 className="mt-4 max-w-3xl text-balance text-4xl tracking-tight sm:text-6xl">
            {title}
          </h1>
          {lead && (
            <p className="mt-5 max-w-xl text-lg text-bg/75">{lead}</p>
          )}
        </Reveal>
      </div>
    </header>
  );
}

/* Recurring "plan your visit" call-to-action band (the template's "Join our
   team" block), reused at the foot of inner pages. */
export function JoinCta({
  locale,
  dict,
}: {
  locale: string;
  dict: Dictionary;
}) {
  const base = `/${locale}`;
  return (
    <section className="py-20 sm:py-24">
      <Container>
        <Reveal>
          <div className="relative overflow-hidden rounded-[2.5rem] bg-brand-deep px-8 py-16 text-center text-bg shadow-xl sm:px-14">
            <div aria-hidden className="radiance animate-gradient absolute inset-0 opacity-35" />
            <div className="relative mx-auto max-w-2xl">
              <Eyebrow className="justify-center text-white/70">
                {dict.home.joinEyebrow}
              </Eyebrow>
              <h2 className="mt-4 text-balance text-3xl tracking-tight sm:text-5xl">
                {dict.home.joinTitle}
              </h2>
              <p className="mt-4 text-lg text-bg/75">{dict.home.joinLead}</p>
              <div className="mt-9 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
                <Button asChild variant="light" size="lg">
                  <Link href={`${base}/contact/`}>{dict.cta.planVisit}</Link>
                </Button>
                <Button asChild variant="outlineLight" size="lg">
                  <Link href={`${base}/about/`}>{dict.cta.learnMore}</Link>
                </Button>
              </div>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}