// LandingHero — cinematic above-the-fold for dev-tooling landings.
//
// Layout (desktop):
//   ┌───────────────────────────────────────────────────────────────┐
//   │  • eyebrow                                                    │
//   │  ▌                                                            │
//   │  Big gradient heading (2 lines)        ┌────────────────────┐│
//   │                                        │ CodeWindow (right) ││
//   │  subtitle, body-size                   │   filename.tsx     ││
//   │                                        │   …syntax…         ││
//   │  [Primary CTA]  [Secondary CTA]        └────────────────────┘│
//   │                                                               │
//   │  footnote                                                     │
//   └───────────────────────────────────────────────────────────────┘
//
// On mobile the code window moves below the text. The component
// itself does not render the background — wrap it with MeshBackdrop +
// GridOverlay in the parent so multiple sections can share the same
// ambient layers.

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

interface CtaSpec {
  readonly label: string
  readonly href: string
}

interface LandingHeroProps {
  readonly eyebrow?: ReactNode
  /** Two-line heading: the second line gets the gradient + animation. */
  readonly title: ReactNode
  /** Optional second line — when set, the layout renders title on
   *  line 1 and this on line 2 with the gradient/animation. */
  readonly titleAccent?: ReactNode
  readonly subtitle?: ReactNode
  readonly primaryCta?: CtaSpec
  readonly secondaryCta?: CtaSpec
  readonly footnote?: ReactNode
  /** Code window / illustration slot — sits on the right at md+, below
   *  the CTAs on mobile. */
  readonly aside?: ReactNode
  /** Anchor link for "scroll down" hint. */
  readonly scrollAnchor?: string
  /** Visible caption on the scroll-down hint. Default `'Scroll'`. */
  readonly scrollLabel?: ReactNode
  /** `aria-label` for the scroll-down hint. Default `'Scroll down'`. */
  readonly scrollAriaLabel?: string
  readonly className?: string
  readonly LinkComponent?: ComponentType<ShellLinkProps>
}

// A schemed href (`https://…`, `mailto:` …) points off-origin, so open it 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 LandingHero = ({
  eyebrow, title, titleAccent, subtitle, primaryCta, secondaryCta,
  footnote, aside, scrollAnchor, scrollLabel = 'Scroll',
  scrollAriaLabel = 'Scroll down', className,
  LinkComponent = PlainLink,
}: LandingHeroProps): ReactNode => {
  const Link = LinkComponent
  return (
    <section
      className={cn(
        'relative isolate overflow-hidden',
        // Extra bottom padding leaves room for the scroll hint to sit BELOW the
        // content (it's anchored to the section, not the content column).
        'pt-24 md:pt-32 pb-24 md:pb-32',
        className,
      )}
    >
      <div className="relative mx-auto max-w-7xl px-6">
        <div className="grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 lg:gap-16 items-center">
          {/* ---- Left column: copy + CTAs ---- */}
          <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 motion-safe:duration-700">
            {eyebrow ? (
              <div className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.12em] text-primary font-semibold mb-5">
                <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary motion-safe:animate-pulse" />
                {eyebrow}
              </div>
            ) : null}

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-[-0.02em] leading-[1.05] text-foreground">
              {title}
              {titleAccent ? (
                <>
                  <br />
                  <span className="text-gradient motion-safe:animate-gradient-pan">
                    {titleAccent}
                  </span>
                </>
              ) : null}
            </h1>

            {subtitle ? (
              <p className="mt-6 text-base sm:text-lg text-muted-foreground leading-relaxed max-w-xl">
                {subtitle}
              </p>
            ) : null}

            {(primaryCta || secondaryCta) ? (
              <div className="mt-8 flex flex-wrap items-center gap-3">
                {primaryCta ? (
                  <Link
                    to={primaryCta.href}
                    prefetch
                    className={cn(
                      'group relative inline-flex items-center gap-2 px-5 py-2.5 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_24px_-8px_oklch(0_0_0_/_0.5)]',
                    )}
                  >
                    {primaryCta.label}
                    <span aria-hidden="true" className="transition-transform group-hover:translate-x-0.5">→</span>
                  </Link>
                ) : null}
                {secondaryCta ? (
                  <Link
                    to={secondaryCta.href}
                    prefetch
                    className={cn(
                      'inline-flex items-center gap-2 px-5 py-2.5 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>
            ) : null}

            {footnote ? (
              <div className="mt-8 text-sm text-muted-foreground">{footnote}</div>
            ) : null}
          </div>

          {/* ---- Right column: code/illustration ---- */}
          {aside ? (
            <div className="lg:pl-4 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-6 motion-safe:duration-700 motion-safe:delay-150">
              {aside}
            </div>
          ) : null}
        </div>
      </div>

      {/* Scroll hint — anchored to the SECTION (not the content column), so it
          sits at the bottom of the full-height hero, at the fold. */}
      {scrollAnchor ? (
        <a
          href={scrollAnchor}
          className="hidden md:flex absolute left-1/2 -translate-x-1/2 bottom-8 text-xs text-muted-foreground items-center gap-1.5 hover:text-foreground transition-colors"
          aria-label={scrollAriaLabel}
        >
          <span>{scrollLabel}</span>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" className="motion-safe:animate-bounce">
            <path d="M7 2 V12 M3 8 L7 12 L11 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      ) : null}
    </section>
  )
}