"use client"

import { BrandBlock } from "./components/brand-block"
import { FooterColumns } from "./components/footer-columns"
import { WordmarkSpotlight } from "./components/wordmark-spotlight"
import { DEFAULT_COLUMNS } from "./data/defaults"
import { useSpotlight } from "./hooks/use-spotlight"
import { classNames } from "./lib/class-names"
import { footerStyles } from "./styles"
import type { SpotlightWordmarkFooterProps } from "./types"

export function SpotlightWordmarkFooter({
  className,
  brandName = "Jolocky",
  brandHref = "/",
  description = "Jolocky is a design studio crafting brands for ambitious startups.",
  columns = DEFAULT_COLUMNS,
  copyright = "©2026 Jolocky. All rights reserved.",
}: SpotlightWordmarkFooterProps) {
  const {
    svgRef,
    gradientRef,
    isLit,
    onMouseMove,
    onMouseLeave,
    onTouchMove,
    onTouchEnd,
  } = useSpotlight()

  return (
    <footer
      className={classNames("sw-footer", isLit && "sw-is-lit", className)}
      onMouseMove={onMouseMove}
      onMouseLeave={onMouseLeave}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      <style>{footerStyles}</style>
      <div className="sw-inner">
        <div className="sw-top">
          <BrandBlock
            name={brandName}
            href={brandHref}
            description={description}
          />
          <FooterColumns columns={columns} />
        </div>

        <p className="sw-copy">{copyright}</p>

        <WordmarkSpotlight
          name={brandName}
          svgRef={svgRef}
          gradientRef={gradientRef}
        />

        <p className="sw-copy sw-copy--mobile">{copyright}</p>
      </div>
    </footer>
  )
}