import Link from "next/link";
import { contact, site } from "@/lib/contact";

export function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="border-t-2 border-neutral-900 bg-white">
      <div className="mx-auto max-w-[1400px] px-6 py-16 md:px-10">
        <div className="grid gap-10 md:grid-cols-12">
          <div className="md:col-span-5">
            <div className="inline-flex items-center gap-2">
              <span className="inline-flex size-10 items-center justify-center rounded-sm bg-violet-700 text-sm font-black text-white">
                i
              </span>
              <span className="text-2xl font-black lowercase tracking-tight">impact</span>
            </div>
            <p className="mt-5 max-w-sm text-sm text-neutral-600">{site.description}</p>
          </div>

          <div className="md:col-span-3">
            <h4 className="text-xs font-black uppercase tracking-[0.2em] text-violet-700">
              Yarışmalar
            </h4>
            <ul className="mt-4 space-y-2 text-sm font-semibold">
              <FooterLink href="/yarismalar/hands-on-challenge">Hands-On Challenge</FooterLink>
              <FooterLink href="/yarismalar/ideathon">Ideathon</FooterLink>
              <FooterLink href="/yarismalar/robo-soccer">Robo Soccer</FooterLink>
            </ul>
          </div>

          <div className="md:col-span-2">
            <h4 className="text-xs font-black uppercase tracking-[0.2em] text-violet-700">
              Kurum
            </h4>
            <ul className="mt-4 space-y-2 text-sm font-semibold">
              <FooterLink href="/hakkimizda">Hakkımızda</FooterLink>
              <FooterLink href="/sponsor">Sponsor Ol</FooterLink>
              <FooterLink href="/iletisim">İletişim</FooterLink>
            </ul>
          </div>

          <div className="md:col-span-2">
            <h4 className="text-xs font-black uppercase tracking-[0.2em] text-violet-700">
              Takip
            </h4>
            <ul className="mt-4 space-y-2 text-sm font-semibold">
              <li>
                <a
                  href={contact.instagram.url}
                  target="_blank"
                  rel="noreferrer noopener"
                  className="text-neutral-800 hover:text-violet-700"
                >
                  Instagram ↗
                </a>
              </li>
              <li>
                <a
                  href={contact.linkedin.url}
                  target="_blank"
                  rel="noreferrer noopener"
                  className="text-neutral-800 hover:text-violet-700"
                >
                  LinkedIn ↗
                </a>
              </li>
              <li>
                <a
                  href={contact.whatsapp.url}
                  target="_blank"
                  rel="noreferrer noopener"
                  className="text-neutral-800 hover:text-violet-700"
                >
                  WhatsApp ↗
                </a>
              </li>
              <li>
                <a
                  href={`mailto:${contact.email}`}
                  className="text-neutral-800 hover:text-violet-700"
                >
                  {contact.email}
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-14 flex flex-col items-start justify-between gap-3 border-t-2 border-neutral-900 pt-6 text-xs font-black uppercase tracking-[0.15em] md:flex-row md:items-center">
          <span>© {year} impact · {site.domain}</span>
          <span className="text-neutral-500">STEM için, gençler tarafından.</span>
        </div>
      </div>
    </footer>
  );
}

function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <li>
      <Link href={href} className="text-neutral-800 hover:text-violet-700">
        {children}
      </Link>
    </li>
  );
}
