// LandingCta — big final "start shipping" section with a deploy-style
// animated gradient backdrop. Use once near the footer.

import type { ComponentType, ReactNode } from 'react'
import { cn } from '../cn'
import type { ShellLinkProps } from './docShell'

interface LandingCtaProps {
  readonly title: ReactNode
  readonly subtitle?: ReactNode
  readonly primaryCta: { readonly label: string; readonly href: string }
  readonly secondaryCta?: { readonly label: string; readonly href: string }
  readonly footnote?: ReactNode
  readonly className?: string
  readonly LinkComponent?: ComponentType<ShellLinkProps>
}

// A schemed href (`https://…`) points off-origin → open in a new tab with a safe
// rel; relative/hash hrefs stay same-tab.
const isSchemed = (href: string): boolean => /^[a-z][a-z0-9+.-]*:\/\//i.test(href)

const PlainLink = ({ to, className, children }: ShellLinkProps): ReactNode =>
  isSchemed(to)
    ? <a href={to} className={className} target="_blank" rel="noopener noreferrer">{children}</a>
    : <a href={to} className={className}>{children}</a>


export const LandingCta = ({
  title, subtitle, primaryCta, secondaryCta, footnote,
  className, LinkComponent = PlainLink,
}: LandingCtaProps): ReactNode => {
  const Link = LinkComponent
  return (
    <section
      className={cn(
        'relative overflow-hidden rounded-2xl border border-border',
        'bg-gradient-to-br from-card/60 via-card/30 to-card/60 backdrop-blur-sm',
        // Slow-panning gradient layer behind the content
        'before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_20%_30%,oklch(0.55_0.25_290_/_0.25),transparent_60%),radial-gradient(circle_at_80%_70%,oklch(0.55_0.2_220_/_0.2),transparent_60%)]',
        // Hairline highlight along top
        'after:absolute after:inset-x-12 after:top-0 after:h-px after:bg-gradient-to-r after:from-transparent after:via-primary/60 after:to-transparent',
        'p-12 md:p-16 lg:p-20 text-center',
        className,
      )}
    >
      <div className="relative max-w-2xl mx-auto">
        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-[-0.02em] leading-[1.1] text-foreground">
          {title}
        </h2>
        {subtitle ? (
          <p className="mt-5 text-base md:text-lg text-muted-foreground leading-relaxed">
            {subtitle}
          </p>
        ) : null}
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <Link
            to={primaryCta.href}
            prefetch
            className={cn(
              'group inline-flex items-center gap-2 px-6 py-3 rounded-md',
              'bg-foreground text-background font-medium text-sm',
              'hover:opacity-90 active:scale-[0.98] transition-all',
              'shadow-[0_0_0_1px_oklch(1_0_0_/_0.08),0_8px_32px_-8px_oklch(0.55_0.25_290_/_0.45)]',
            )}
          >
            {primaryCta.label}
            <span aria-hidden="true" className="transition-transform group-hover:translate-x-0.5">→</span>
          </Link>
          {secondaryCta ? (
            <Link
              to={secondaryCta.href}
              prefetch
              className="inline-flex items-center gap-2 px-6 py-3 rounded-md border border-border bg-card/40 backdrop-blur-sm text-foreground font-medium text-sm hover:bg-card/70 hover:border-input transition-colors"
            >
              {secondaryCta.label}
            </Link>
          ) : null}
        </div>
        {footnote ? (
          <div className="mt-6 text-xs text-muted-foreground">{footnote}</div>
        ) : null}
      </div>
    </section>
  )
}