"use client";

import * as React from "react";

import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

import { SECTION_IDS } from "./lib/content";

// Brand marks aren't in this lucide-react build — inline recognizable glyphs
// (currentColor so they inherit the footer text color).
type IconProps = { className?: string };

function FacebookIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden
      className={className}
    >
      <path d="M13.5 21v-8h2.6l.4-3h-3V8.1c0-.86.24-1.45 1.5-1.45h1.6V4.06C16.3 4.04 15.35 4 14.25 4 11.94 4 10.4 5.4 10.4 8v2H7.8v3h2.6v8z" />
    </svg>
  );
}

function InstagramIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      aria-hidden
      className={className}
    >
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17" cy="7" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

function LinkedinIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden
      className={className}
    >
      <path d="M6.94 5a1.94 1.94 0 1 1-3.88 0 1.94 1.94 0 0 1 3.88 0zM3.4 8.4h3.1V21H3.4zM9.1 8.4h3v1.72h.05c.42-.8 1.45-1.64 3-1.64 3.2 0 3.8 2.1 3.8 4.85V21h-3.1v-5.06c0-1.2-.02-2.76-1.68-2.76-1.68 0-1.94 1.32-1.94 2.68V21H9.1z" />
    </svg>
  );
}

function XIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden
      className={className}
    >
      <path d="M17.5 3h3l-6.55 7.48L21.7 21h-5.9l-4.18-5.47L6.83 21H3.8l7-8L2.5 3h6.05l3.78 5z" />
    </svg>
  );
}

function YoutubeIcon({ className }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden
      className={className}
    >
      <path d="M22 8.2a2.6 2.6 0 0 0-1.82-1.85C18.57 6 12 6 12 6s-6.57 0-8.18.35A2.6 2.6 0 0 0 2 8.2 27 27 0 0 0 1.7 12 27 27 0 0 0 2 15.8a2.6 2.6 0 0 0 1.82 1.85C5.43 18 12 18 12 18s6.57 0 8.18-.35A2.6 2.6 0 0 0 22 15.8 27 27 0 0 0 22.3 12 27 27 0 0 0 22 8.2zM10 15V9l5.2 3z" />
    </svg>
  );
}

const COLUMNS = [
  {
    titleKey: "home.footer.company.title",
    links: [
      { labelKey: "home.footer.company.about", href: "#" },
      {
        labelKey: "home.footer.company.services",
        href: `#${SECTION_IDS.services}`,
      },
      { labelKey: "home.footer.company.careers", href: "#" },
      {
        labelKey: "home.footer.company.contact",
        href: `#${SECTION_IDS.contact}`,
      },
    ],
  },
  {
    titleKey: "home.footer.providers.title",
    // Pre-launch: routes are stubbed to "#" until the auth flows go public.
    // Restore ROUTES.AUTH.LOGIN / ROUTES.AUTH.REGISTER_PROVIDER when re-enabling.
    links: [
      { labelKey: "home.footer.providers.login", href: "#" },
      { labelKey: "home.footer.providers.register", href: "#" },
      { labelKey: "home.footer.providers.dashboard", href: "#" },
    ],
  },
  {
    titleKey: "home.footer.support.title",
    links: [
      { labelKey: "home.footer.support.faqs", href: "#" },
      { labelKey: "home.footer.support.helpCenter", href: "#" },
      { labelKey: "home.footer.support.privacy", href: "#" },
      { labelKey: "home.footer.support.terms", href: "#" },
      { labelKey: "home.footer.support.refund", href: "#" },
    ],
  },
] as const;

const SOCIAL = [
  { Icon: FacebookIcon, label: "Facebook" },
  { Icon: InstagramIcon, label: "Instagram" },
  { Icon: LinkedinIcon, label: "LinkedIn" },
  { Icon: XIcon, label: "X" },
  { Icon: YoutubeIcon, label: "YouTube" },
];

/** Multi-column landing footer. */
export function Footer() {
  const { t } = useTranslation();

  return (
    <footer className="bg-main-text text-white">
      <div className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 py-14 sm:px-6 lg:px-8">
        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-5">
          <div className="flex flex-col gap-4 lg:col-span-2">
            <Typography
              as="span"
              variant="h1"
              color="inherit"
              className="font-bold tracking-wide"
            >
              WASHY
            </Typography>
            <Typography
              variant="body"
              color="inherit"
              className="max-w-xs text-white/70"
            >
              {t("home.footer.tagline")}
            </Typography>
            <div className="flex items-center gap-2">
              {SOCIAL.map(({ Icon, label }) => (
                <a
                  key={label}
                  href="#"
                  aria-label={label}
                  className="flex size-9 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
                >
                  <Icon className="size-4" />
                </a>
              ))}
            </div>
          </div>

          {COLUMNS.map((column) => (
            <div key={column.titleKey} className="flex flex-col gap-3">
              <Typography
                as="h3"
                variant="caption"
                color="inherit"
                className="font-semibold tracking-wide text-white/50 uppercase"
              >
                {t(column.titleKey)}
              </Typography>
              <ul className="flex flex-col gap-2">
                {column.links.map((link) => (
                  <li key={link.labelKey}>
                    <a
                      href={link.href}
                      className="text-white/80 transition-colors hover:text-white"
                    >
                      <Typography as="span" variant="body" color="inherit">
                        {t(link.labelKey)}
                      </Typography>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="border-t border-white/10 pt-6">
          <Typography
            variant="caption"
            color="inherit"
            className="text-white/60"
          >
            {t("home.footer.rights")}
          </Typography>
        </div>
      </div>
    </footer>
  );
}