import { Link } from "@tanstack/react-router";
import { ShoppingBag, Menu, X } from "lucide-react";
import { useState } from "react";
import { useCart } from "@/lib/cart";
import logo from "@/assets/logo-full.png";
import wordmark from "@/assets/logo-wordmark.png";

const LINKS = [
  { to: "/shop", label: "Shop" },
  { to: "/pricing", label: "Pricing" },
  { to: "/shade-finder", label: "Shade Finder" },
  { to: "/blog", label: "Blog" },
  { to: "/wholesale", label: "Wholesale" },
  { to: "/investors", label: "Investors" },
  { to: "/faq", label: "FAQ" },
  { to: "/contact", label: "Contact" },
] as const;

const POLICY_LINKS = [
  { to: "/privacy-policy", label: "Privacy Policy" },
  { to: "/returns-policy", label: "Returns & Refunds" },
  { to: "/shipping-policy", label: "Shipping Policy" },
  { to: "/terms", label: "Terms of Service" },
] as const;

export function SiteHeader() {
  const { count } = useCart();
  const [open, setOpen] = useState(false);
  const nav = "text-sm font-medium text-foreground/80 hover:text-primary";
  return (
    <header className="sticky top-0 z-30 border-b bg-background/90 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-1.5">
        <Link to="/" className="flex shrink-0 items-center" aria-label="Right On Gloss home">
          <img
            src={wordmark}
            alt="Right On Gloss — Get Glossy, Stay Classy"
            width={568}
            height={240}
            className="h-16 w-auto object-contain md:h-20"
          />
        </Link>
        <nav className="hidden items-center gap-5 lg:flex">
          {LINKS.map((l) => <Link key={l.to} to={l.to} className={nav} activeProps={{ className: "text-primary" }}>{l.label}</Link>)}
        </nav>
        <div className="flex items-center gap-4">
          <Link to="/cart" className="relative text-foreground hover:text-primary" aria-label="Shopping bag">
            <ShoppingBag className="h-5 w-5" />
            {count > 0 && <span className="absolute -right-2 -top-2 grid h-5 w-5 place-items-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">{count}</span>}
          </Link>
          <button className="lg:hidden" onClick={() => setOpen(!open)} aria-label="Menu">{open ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}</button>
        </div>
      </div>
      {open && (
        <nav className="flex flex-col gap-3 border-t px-5 py-4 lg:hidden">
          {LINKS.map((l) => <Link key={l.to} to={l.to} onClick={() => setOpen(false)} className={nav}>{l.label}</Link>)}
        </nav>
      )}
    </header>
  );
}

export function SiteFooter() {
  return (
    <footer className="mt-24 bg-accent py-12 text-sm text-accent-foreground">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-8 px-5 text-center lg:flex-row lg:items-start lg:justify-between lg:text-left">
        <div className="max-w-xs">
          <img src={logo} alt="Right On Gloss" width={578} height={512} loading="lazy" className="mx-auto h-28 w-auto object-contain lg:mx-0" />
          <p className="mt-3 font-display text-lg italic">Get Glossy, Stay Classy…</p>
        </div>

        <div className="grid grid-cols-2 gap-x-12 gap-y-8 sm:grid-cols-3">
          <div>
            <h3 className="font-display text-sm font-semibold uppercase tracking-wide">Shop</h3>
            <ul className="mt-3 space-y-2 opacity-90">
              {LINKS.slice(0, 3).map((l) => <li key={l.to}><Link key={l.to} to={l.to} className="hover:underline">{l.label}</Link></li>)}
            </ul>
          </div>
          <div>
            <h3 className="font-display text-sm font-semibold uppercase tracking-wide">Company</h3>
            <ul className="mt-3 space-y-2 opacity-90">
              {LINKS.slice(3).map((l) => <li key={l.to}><Link key={l.to} to={l.to} className="hover:underline">{l.label}</Link></li>)}
            </ul>
          </div>
          <div>
            <h3 className="font-display text-sm font-semibold uppercase tracking-wide">Policies</h3>
            <ul className="mt-3 space-y-2 opacity-90">
              {POLICY_LINKS.map((l) => <li key={l.to}><Link key={l.to} to={l.to} className="hover:underline">{l.label}</Link></li>)}
            </ul>
          </div>
        </div>
      </div>

      <p className="mt-10 text-center opacity-75">© {new Date().getFullYear()} Right On Gloss™</p>
      <p className="mt-1 text-center text-xs opacity-75">Website designed by: <a href="https://www.digitalwebd.com" className="underline underline-offset-2 hover:opacity-100">Digital Web Design</a></p>
    </footer>
  );
}