import siteConfig from '@/lib/site-config'

export function Footer() {
  const socialLinks = siteConfig.socialLinks ?? []
  const year = new Date().getFullYear()
  // Post count will be wired in Phase 8 when data helpers are available
  const paddedCount = '000'

  return (
    <footer className="border-ink-4 bg-paper-2 mt-[120px] border-t">
      <div className="max-w-shell mx-auto grid grid-cols-1 gap-8 px-5 pt-10 pb-8 sm:grid-cols-2 md:grid-cols-[1.4fr_1fr_1fr_1fr] md:gap-12 md:px-10 md:pt-14">
        <div>
          <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase">
            Colophon
          </p>
          <p className="text-ink m-0 mb-3.5 font-serif text-[34px] leading-tight tracking-[-0.02em]">
            Written &amp; wrenched<br />from Raleigh, NC.
          </p>
          <p className="text-ink-2 m-0 mb-5 max-w-[36ch] text-[13.5px] leading-normal">
            This site is my field notebook. Occasional essays on software, the long game of
            learning, and (sometimes) a Miata that refuses to die.
          </p>
          <div className="text-ink-3 font-mono text-[11px] leading-[1.9] tracking-[0.02em]">
            <div>
              <b className="text-ink font-medium">Since</b> &nbsp; 2014
            </div>
            <div>
              <b className="text-ink font-medium">Posts</b> &nbsp; {paddedCount}
            </div>
            <div>
              <b className="text-ink font-medium">Built with</b> &nbsp; Payload
            </div>
          </div>
        </div>

        <div>
          <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase">
            Navigate
          </p>
          <ul className="m-0 list-none p-0">
            <li className="py-1">
              <a
                className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors"
                href="/blog"
              >
                <span className="text-ink-4" aria-hidden="true">
                  ·
                </span>{' '}
                Writing
              </a>
            </li>
            <li className="py-1">
              <a
                className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors"
                href="/projects"
              >
                <span className="text-ink-4" aria-hidden="true">
                  ·
                </span>{' '}
                Projects
              </a>
            </li>
            <li className="py-1">
              <a
                className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors"
                href="/about"
              >
                <span className="text-ink-4" aria-hidden="true">
                  ·
                </span>{' '}
                About
              </a>
            </li>
            <li className="py-1">
              <a
                className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors"
                href="/hire-me"
              >
                <span className="text-ink-4" aria-hidden="true">
                  ·
                </span>{' '}
                Hire Me
              </a>
            </li>
            <li className="py-1">
              <a
                className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors"
                href="/tags"
              >
                <span className="text-ink-4" aria-hidden="true">
                  ·
                </span>{' '}
                Tags
              </a>
            </li>
            <li className="py-1">
              <a
                className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors"
                href="/rss.xml"
              >
                <span className="text-ink-4" aria-hidden="true">
                  ·
                </span>{' '}
                RSS
              </a>
            </li>
          </ul>
        </div>

        <div>
          <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase">
            Elsewhere
          </p>
          <ul className="m-0 list-none p-0">
            {socialLinks.map((link) => (
              <li key={link.href} className="py-1">
                <a
                  href={link.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors"
                >
                  <span className="text-ink-4" aria-hidden="true">
                    ↗
                  </span>{' '}
                  {link.text}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase">
            Contact
          </p>
          <p className="text-ink-2 m-0 mb-2.5 max-w-[36ch] text-[13.5px] leading-normal">
            Questions, collaborations, or a shared appreciation of well-composed code.
          </p>
          <div className="text-ink-3 font-mono text-[11px] leading-[1.9] tracking-[0.02em]">
            <div>
              <a
                className="text-ink-3 hover:text-ink no-underline transition-colors"
                href="mailto:chris@arter.dev"
              >
                <b className="text-ink font-medium">chris@</b>arter.dev
              </a>
            </div>
            <div>
              <b className="text-ink font-medium">tz</b> &nbsp; America/New_York
            </div>
          </div>
        </div>
      </div>

      <div className="border-hair max-w-shell text-ink-3 mx-auto flex flex-col gap-1.5 border-t px-5 py-5 font-mono text-[10.5px] tracking-wider uppercase sm:flex-row sm:justify-between md:px-10">
        <span>
          © {year} <b className="text-ink-3 font-medium">Chris Arter</b>
        </span>
        <span>All rights reserved</span>
      </div>
    </footer>
  )
}