"use client";
import * as React from "react";
import { motion, useInView } from "motion/react";
import { LiveLogo } from "@/components/ui/brand";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

/*
 * Ported from the company profile footer (web/components/Footer.tsx):
 * a cloudy top edge, the P mascot hanging upside down and swinging, drifting cloud banks,
 * then columns of links. Colours come from tokens so it works in light and dark.
 */

const CLOUD_EDGE =
  "M0 160V96c60-30 120-44 190-28 50-58 150-70 210-20 40-50 130-62 190-8 70-62 190-64 250 6 50-40 140-46 200 4 60-56 170-54 220 12 70-30 130-20 180 20V160z";
const BANK_BACK =
  "M-40 400V250c40-60 140-80 200-40 30-70 150-90 210-30 50-60 170-60 220 10 60-50 170-40 210 20 50-60 160-70 220-10 40-50 150-60 210 0 50-40 140-30 170 30 40-30 120-20 160 20V400z";
const BANK_FRONT =
  "M-60 400V320c50-50 150-60 200-20 40-60 160-70 220-10 50-50 160-50 210 10 60-40 160-30 200 20 50-50 170-60 220 0 40-40 140-50 200 0 40-30 120-20 150 20 40-30 110-20 150 20 40-30 110-20 150 20V400z";

/** Mascot hanging from the cloud edge. Drops in on first view, swings, and wobbles when poked. */
function HangingMascot({ show }: { show: boolean }) {
  const [poke, setPoke] = React.useState(0);
  return (
    <motion.div
      className="relative left-6 origin-top sm:left-10 lg:left-24"
      initial={{ y: -160 }}
      animate={{ y: show ? 0 : -160 }}
      transition={{ type: "spring", stiffness: 140, damping: 9, mass: 1.1, delay: 0.15 }}
    >
      <motion.div
        className="origin-top cursor-grab"
        animate={{ rotate: [6, -6, 6] }}
        transition={{ duration: 3.6, repeat: Infinity, ease: "easeInOut" }}
        onClick={() => setPoke((p) => p + 1)}
      >
        <motion.div key={poke} animate={poke ? { rotate: [0, 28, -18, 10, 0] } : {}} transition={{ duration: 1 }} style={{ originY: 0 }}>
          {/* The mascot's own stem points up when flipped, so it reads as hanging. */}
          <LiveLogo upsideDown size={112} className="drop-shadow-[0_8px_0_rgb(0_0_0/0.25)] md:size-32" />
        </motion.div>
      </motion.div>
    </motion.div>
  );
}

export function Footer({ className, children, mascot = true, ...p }: React.HTMLAttributes<HTMLElement> & { mascot?: boolean }) {
  const ref = React.useRef<HTMLElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.3 });
  return (
    <footer ref={ref} className={cn("relative mt-24 text-on-surface-inverse", className)} {...p}>
      <div className="-mb-px overflow-hidden">
        <svg viewBox="0 -40 1440 200" preserveAspectRatio="none" className="relative left-1/2 block h-24 w-full min-w-[900px] -translate-x-1/2 md:h-36" aria-hidden>
          <path fill="var(--footer-from)" d={CLOUD_EDGE} />
        </svg>
      </div>
      {/* Own layer above both the cloud edge and the clipped body, so the swinging mascot is never cut off. */}
      {mascot && (
        <div className="pointer-events-none absolute inset-x-0 top-0 z-30 mx-auto h-0 max-w-[1400px]">
          <div className="pointer-events-auto absolute left-0 top-20 md:top-32">
            <HangingMascot show={inView} />
          </div>
        </div>
      )}
      <div className="relative overflow-hidden bg-gradient-to-b from-[var(--footer-from)] to-[var(--footer-to)]">
        {/* Drifting cloud banks along the bottom, same colours as the company footer. */}
        {/* Fixed height (not a % of a tall mobile footer) so the clouds keep their round shape at every width. */}
        <div aria-hidden className="pointer-events-none absolute inset-x-0 bottom-0 h-64 md:h-80">
          <svg viewBox="0 0 1440 400" preserveAspectRatio="none" className="absolute inset-y-0 -left-[5%] h-full w-[110%] min-w-[900px]">
            <motion.g animate={{ x: [0, -30, 0] }} transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}>
              <path fill="var(--footer-cloud-back)" opacity=".55" d={BANK_BACK} />
            </motion.g>
            <motion.g animate={{ x: [0, 40, 0] }} transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}>
              <path fill="var(--footer-cloud-front)" opacity=".7" d={BANK_FRONT} />
            </motion.g>
          </svg>
        </div>
        <div className="relative mx-auto grid max-w-[1400px] gap-12 px-5 pb-10 pt-28 sm:px-8 md:pt-36 lg:px-24">{children}</div>
      </div>
    </footer>
  );
}

/** Top row: brand + blurb + newsletter on the left, link columns on the right. Stacks on mobile. */
export function FooterMain({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("grid gap-12 md:grid-cols-[1.2fr_1fr]", className)} {...p} />;
}

export function FooterBrand({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex max-w-sm flex-col gap-3", className)} {...p} />;
}

export function FooterColumns({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("grid grid-cols-2 gap-8 text-sm sm:grid-cols-3 md:justify-items-end", className)} {...p} />;
}

export function FooterColumn({ title, className, children, ...p }: React.HTMLAttributes<HTMLDivElement> & { title: string }) {
  return (
    <div className={cn("min-w-0", className)} {...p}>
      <h4 className="mb-4 font-mono text-xs font-bold uppercase tracking-widest text-on-surface-inverse/60">{title}</h4>
      <ul className="space-y-3">{children}</ul>
    </div>
  );
}

/** Link that nudges right and turns accent on hover. Pass `as` for next/link. */
export function FooterLink({
  as: Comp = "a",
  className,
  children,
  ...p
}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { as?: React.ElementType }) {
  return (
    <li>
      <Comp
        className={cn(
          "inline-block font-semibold text-on-surface-inverse/85 transition-[color,translate] duration-200 hover:translate-x-0.5 hover:text-warning focus-visible:rounded-md focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40",
          className
        )}
        {...p}
      >
        {children}
      </Comp>
    </li>
  );
}

/** Row of round social buttons that hop and tilt on hover. */
export function FooterSocials({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex flex-wrap gap-3", className)} {...p} />;
}

export function FooterSocial({
  label,
  index = 0,
  className,
  children,
  ...p
}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { label: string; index?: number }) {
  return (
    <motion.a
      aria-label={label}
      title={label}
      whileHover={{ y: -6, rotate: index % 2 ? 8 : -8, scale: 1.12 }}
      whileTap={{ scale: 0.9 }}
      transition={springs.squish}
      className={cn(
        "grid size-11 place-items-center rounded-[1rem] bg-on-surface-inverse/8 text-on-surface-inverse/80 shadow-[inset_-2px_-3px_0_rgb(0_0_0/0.25),inset_2px_2px_0_rgb(255_255_255/0.06)] transition-colors hover:bg-warning hover:text-on-warning focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 [&_svg]:size-5",
        className
      )}
      {...(p as React.ComponentProps<typeof motion.a>)}
    >
      {children}
    </motion.a>
  );
}

/** Bottom bar: copyright and legal links, separated by a soft divider. */
export function FooterBottom({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "flex flex-col-reverse gap-4 border-t border-on-surface-inverse/10 pt-6 text-xs font-medium text-on-surface-inverse/60 sm:flex-row sm:items-center sm:justify-between",
        className
      )}
      {...p}
    />
  );
}
Installation
