import { Link } from "@tanstack/react-router";

export function PageHero({ kicker, title, subtitle }: { kicker?: string; title: string; subtitle?: string }) {
  return (
    <section className="relative py-24 lg:py-32 bg-charcoal overflow-hidden border-b border-border">
      <div className="absolute inset-0 diag-stripes opacity-[0.04]" />
      <div className="absolute -top-20 -right-20 h-96 w-96 rounded-full bg-primary/10 blur-3xl" />
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {kicker && (
          <p className="font-display text-primary text-sm tracking-[0.4em] mb-4 flex items-center gap-3">
            <span className="h-px w-12 bg-primary" />
            {kicker.toUpperCase()}
          </p>
        )}
        <h1 className="font-display text-6xl sm:text-8xl lg:text-9xl leading-[0.85] tracking-tight">
          {title}
        </h1>
        {subtitle && <p className="mt-6 text-lg sm:text-xl text-muted-foreground max-w-2xl">{subtitle}</p>}
      </div>
      <div className="absolute bottom-0 inset-x-0 h-1 bg-primary" />
    </section>
  );
}

export function CTABand({ text, label, to }: { text: string; label: string; to: string }) {
  return (
    <section className="py-20 bg-grad-metal border-y-2 border-primary">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 grid md:grid-cols-[1fr_auto] gap-6 items-center">
        <h2 className="font-display text-4xl sm:text-5xl lg:text-6xl leading-tight">{text}</h2>
        <Link to={to} className="btn-hero shrink-0">{label}</Link>
      </div>
    </section>
  );
}