"use client"

import * as React from "react"

import { BottomBar } from "./components/bottom-bar"
import { ContactColumn } from "./components/contact-column"
import { CtaBlock } from "./components/cta-block"
import { Offices } from "./components/offices"
import { Wordmark } from "./components/wordmark"
import {
  DEFAULT_OFFICES,
  DEFAULT_SOCIAL_LINKS,
  DEFAULT_WORDMARK_MOBILE_LINES,
} from "./data/defaults"
import { useCanObserve } from "./hooks/use-can-observe"
import { useFooterMode } from "./hooks/use-footer-mode"
import { useMediaQuery } from "./hooks/use-media-query"
import { useOrbitMotion } from "./hooks/use-orbit-motion"
import { useWordmarkReveal } from "./hooks/use-wordmark-reveal"
import { classNames } from "./lib/class-names"
import { REDUCED_MOTION_QUERY } from "./lib/constants"
import { footerStyles } from "./styles"
import type { LimeOrbitFooterProps } from "./types"

export function LimeOrbitFooter({
  className,
  contactLabel = "Contact",
  email = "hello@jolocky.com",
  copyAriaLabel = "Copy email address",
  copyLabel = "Copy",
  copiedLabel = "Copied",
  phone = "+62 812-3456-7890",
  phoneHref = "tel:+6281234567890",
  callLabel = "Call",
  title = "Got a project? Want to collaborate?",
  buttonLabel = "Discuss your project",
  buttonHref = "/contact",
  offices = DEFAULT_OFFICES,
  copyright = "© Copyright 2026. Jolocky Studio. All rights reserved.",
  copyrightTablet = "© 2026 Jolocky Studio",
  copyrightMobile = "© 2026 Jolocky Studio. All rights reserved.",
  termsLabel = "Terms & Conditions",
  termsShortLabel = "Terms",
  termsHref = "/terms",
  socialLinks = DEFAULT_SOCIAL_LINKS,
  wordmark = "LET’S WORK TOGETHER",
  wordmarkMobileLines = DEFAULT_WORDMARK_MOBILE_LINES,
  wordmarkLabel = "Let’s work together",
}: LimeOrbitFooterProps) {
  const rootRef = React.useRef<HTMLElement>(null)
  const circleRef = React.useRef<HTMLDivElement>(null)
  const buttonRef = React.useRef<HTMLAnchorElement>(null)
  const wordRef = React.useRef<HTMLDivElement>(null)

  const reduceMotion = useMediaQuery(REDUCED_MOTION_QUERY)
  const canObserve = useCanObserve()
  const mode = useFooterMode(rootRef, wordRef)
  useOrbitMotion(rootRef, circleRef, buttonRef, mode, reduceMotion, canObserve)
  const { isIn, replay } = useWordmarkReveal(wordRef, reduceMotion, canObserve)

  return (
    <footer
      ref={rootRef}
      className={classNames("lo-footer", isIn && "lo-is-in", className)}
    >
      <style>{footerStyles}</style>
      <div ref={circleRef} className="lo-circle" aria-hidden="true"></div>
      <div className="lo-inner">
        <div className="lo-top">
          <ContactColumn
            label={contactLabel}
            email={email}
            copyAriaLabel={copyAriaLabel}
            copyLabel={copyLabel}
            copiedLabel={copiedLabel}
            phone={phone}
            phoneHref={phoneHref}
            callLabel={callLabel}
          />
          <CtaBlock
            title={title}
            buttonLabel={buttonLabel}
            buttonHref={buttonHref}
            buttonRef={buttonRef}
          />
          <Offices offices={offices} />
        </div>

        <BottomBar
          copyright={copyright}
          copyrightTablet={copyrightTablet}
          copyrightMobile={copyrightMobile}
          termsLabel={termsLabel}
          termsShortLabel={termsShortLabel}
          termsHref={termsHref}
          socialLinks={socialLinks}
        />

        <Wordmark
          wordRef={wordRef}
          label={wordmarkLabel}
          text={wordmark}
          mobileLines={wordmarkMobileLines}
          mode={mode}
          onReplay={replay}
        />
      </div>
    </footer>
  )
}