"use client"

import * as React from "react"

import { CtaLink } from "./components/cta-link"
import { Headline } from "./components/headline"
import { LegalColumn } from "./components/legal-column"
import { LinkColumn } from "./components/link-column"
import { PromptColumn } from "./components/prompt-column"
import { DEFAULT_COLUMNS, DEFAULT_HEADLINE } from "./data/defaults"
import { useCanObserve } from "./hooks/use-can-observe"
import { useIntro } from "./hooks/use-intro"
import { useMediaQuery } from "./hooks/use-media-query"
import { classNames } from "./lib/class-names"
import { REDUCED_MOTION_QUERY } from "./lib/constants"
import { fadeDelay, type DelayStyle } from "./lib/delays"
import { getFadeIndexes } from "./lib/fade-indexes"
import { footerStyles } from "./styles"
import type { SageHeadlineFooterProps } from "./types"

export function SageHeadlineFooter({
  className,
  headline = DEFAULT_HEADLINE,
  ctaLabel = "Request a demo",
  ctaHref = "#",
  promptLabel = "Ready to spend less time booking?",
  columns = DEFAULT_COLUMNS,
  termsLabel = "Terms of service",
  termsShortLabel = "Terms",
  termsHref = "#",
  privacyLabel = "Privacy",
  privacyHref = "#",
  copyright = "© 2026 Jolocky",
  copyrightSuffix = " Inc.",
}: SageHeadlineFooterProps) {
  const rootRef = React.useRef<HTMLElement>(null)

  // Server render assumes motion is allowed, like a first paint before the script runs.
  const reduceMotion = useMediaQuery(REDUCED_MOTION_QUERY)
  const canObserve = useCanObserve()
  const { pending, entering } = useIntro(rootRef, !reduceMotion && canObserve)

  // Delays are set whenever motion is allowed, even without an observer.
  const motion = !reduceMotion
  const fadeStyle: DelayStyle = (index) =>
    motion ? fadeDelay(index) : undefined
  const indexes = getFadeIndexes(columns)

  return (
    <footer
      ref={rootRef}
      className={classNames(
        "sg-footer",
        pending && "sg-is-pending",
        entering && "sg-is-in",
        className
      )}
    >
      <style>{footerStyles}</style>
      <Headline lines={headline} motion={motion} />

      <div className="sg-bottom">
        <div className="sg-rule"></div>

        <div className="sg-grid">
          <CtaLink
            label={ctaLabel}
            href={ctaHref}
            mobile
            style={fadeStyle(indexes.mobileCta)}
          />
          {columns.map((column, index) => (
            <LinkColumn
              key={column.title}
              column={column}
              indexes={indexes.columns[index]}
              fadeStyle={fadeStyle}
            />
          ))}
          <PromptColumn
            promptLabel={promptLabel}
            ctaLabel={ctaLabel}
            ctaHref={ctaHref}
            indexes={indexes}
            fadeStyle={fadeStyle}
          />
          <LegalColumn
            termsLabel={termsLabel}
            termsShortLabel={termsShortLabel}
            termsHref={termsHref}
            privacyLabel={privacyLabel}
            privacyHref={privacyHref}
            copyright={copyright}
            copyrightSuffix={copyrightSuffix}
            indexes={indexes}
            fadeStyle={fadeStyle}
          />
        </div>
      </div>
    </footer>
  )
}