import type { ReactNode } from "react";
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/cn";

export function Eyebrow({ children, dark = false }: { children: ReactNode; dark?: boolean }) {
  return (
    <span className={cn("mx-eyebrow", dark && "text-accent")}>{children}</span>
  );
}

export function SectionTitle({ children }: { children: ReactNode }) {
  return (
    <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold">
      {children}
    </h2>
  );
}

export function SectionHeader({
  eyebrow,
  title,
  intro,
  align = "center",
  noMargin = false,
  tone = "blue",
  wide = false,
}: {
  eyebrow?: string;
  title: ReactNode;
  intro?: string;
  align?: "center" | "left";
  noMargin?: boolean;
  tone?: "blue" | "amber";
  wide?: boolean;
}) {
  return (
    <div
      className={cn(
        !noMargin && "mb-12",
        align === "center"
          ? wide
            ? "mx-auto max-w-4xl text-center"
            : "mx-auto max-w-2xl text-center"
          : "max-w-2xl"
      )}
    >
      {eyebrow && (
        <span
          className={
            tone === "amber"
              ? "inline-flex items-center rounded-full border border-[#fde68a] bg-[#fffbeb] px-4 py-2 font-mono text-[11px] font-semibold tracking-[0.14em] text-accent-dark"
              : "inline-flex items-center rounded-full border border-brand/25 bg-brand-tint px-4 py-2 font-mono text-[11px] font-semibold tracking-[0.14em] text-brand"
          }
        >
          {eyebrow}
        </span>
      )}
      <SectionTitle>{title}</SectionTitle>
      {intro && (
        <p className={cn("mt-4 text-muted", align === "center" && "mx-auto max-w-xl text-[15px] leading-relaxed")}>
          {intro}
        </p>
      )}
    </div>
  );
}

export function PrimaryCta({ href, children }: { href: string; children: ReactNode }) {
  return (
    <a
      href={href}
      className="inline-flex min-h-[48px] items-center justify-center gap-2 rounded-lg bg-brand px-6 text-[15px] font-semibold text-white hover:bg-brand-dark"
    >
      {children}
      <ArrowRight size={18} />
    </a>
  );
}

export function GhostCta({ href, children, dark = false }: { href: string; children: ReactNode; dark?: boolean }) {
  return (
    <a
      href={href}
      className={cn(
        "inline-flex min-h-[48px] items-center justify-center gap-2 rounded-lg border px-6 text-[15px] font-semibold",
        dark
          ? "border-white/35 bg-white/[0.06] text-white hover:bg-white/[0.12]"
          : "border-line bg-white text-ink hover:border-brand hover:text-brand"
      )}
    >
      {children}
    </a>
  );
}

export function CheckList({ items, dark = false }: { items: string[]; dark?: boolean }) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {items.map((t) => (
        <span
          key={t}
          className={cn(
            "inline-flex items-center gap-2 text-[13px] font-medium",
            dark ? "text-herosub" : "text-body"
          )}
        >
          <Check size={15} className={dark ? "text-accent" : "text-brand"} /> {t}
        </span>
      ))}
    </div>
  );
}