import Link from "next/link";
import { Logo } from "./Logo";
import { WeaveRule } from "@/components/ui/WeaveRule";
import { company, contact, offices } from "@/content/company";
import { divisions } from "@/content/divisions";

export function Footer() {
  const year = new Date().getFullYear();

  return (
    <footer className="grain relative border-t border-[var(--rule)] bg-[var(--ink)]">
      <WeaveRule />

      <div className="shell grid gap-12 py-16 md:grid-cols-12 md:py-24">
        <div className="md:col-span-4">
          <Logo className="h-7 w-auto text-[var(--thread)]" />
          <p className="mt-5 max-w-xs text-sm leading-relaxed text-[var(--melange)]">
            {company.positioning}. Spinning, knitting, dyeing and stitching under
            one roof in Multan and Lahore since {company.founded}.
          </p>
          <p className="mt-6 font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--melange)]">
            Est. {company.founded}
          </p>
        </div>

        <div className="md:col-span-3">
          <h2 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
            Divisions
          </h2>
          <ul className="mt-5 space-y-3">
            {divisions.map((division) => (
              <li key={division.id}>
                <Link
                  href={division.href}
                  className="group inline-flex items-center gap-2 text-sm text-[var(--cotton)]/80 transition-colors hover:text-[var(--cotton)]"
                >
                  <span className="h-px w-0 bg-[var(--thread)] transition-all duration-300 group-hover:w-4" />
                  {division.name}
                </Link>
              </li>
            ))}
            <li>
              <Link
                href="/about"
                className="group inline-flex items-center gap-2 text-sm text-[var(--cotton)]/80 transition-colors hover:text-[var(--cotton)]"
              >
                <span className="h-px w-0 bg-[var(--thread)] transition-all duration-300 group-hover:w-4" />
                About the group
              </Link>
            </li>
          </ul>
        </div>

        <div className="md:col-span-3">
          <h2 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
            Facilities
          </h2>
          <ul className="mt-5 space-y-5">
            {offices.map((office) => (
              <li key={office.id} className="text-sm">
                <p className="text-[var(--cotton)]">{office.label}</p>
                <p className="mt-1 leading-relaxed text-[var(--melange)]">
                  {office.address}
                </p>
              </li>
            ))}
          </ul>
        </div>

        <div className="md:col-span-2">
          <h2 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
            Contact
          </h2>
          <ul className="mt-5 space-y-3 text-sm">
            <li>
              <a
                href={`mailto:${contact.email}`}
                className="break-all text-[var(--cotton)]/80 transition-colors hover:text-[var(--thread)]"
              >
                {contact.email}
              </a>
            </li>
            <li>
              <a
                href={`tel:${contact.phonePk.replace(/\s/g, "")}`}
                className="data text-[var(--cotton)]/80 transition-colors hover:text-[var(--thread)]"
              >
                {contact.phonePk}
              </a>
            </li>
            <li>
              <a
                href={`tel:${contact.phoneUs.replace(/[\s()]/g, "")}`}
                className="data text-[var(--cotton)]/80 transition-colors hover:text-[var(--thread)]"
              >
                {contact.phoneUs}
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div className="shell flex flex-col gap-3 border-t border-[var(--rule)] py-6 font-mono text-[11px] text-[var(--melange)] sm:flex-row sm:items-center sm:justify-between">
        <p>
          {year} {company.legalName}. All rights reserved.
        </p>
        <p className="uppercase tracking-[0.2em]">
          Multan and Lahore, Pakistan
        </p>
      </div>
    </footer>
  );
}