export function WordmarkFooter() {
  return (
    <footer className="bg-[#FAFAF8] text-[#111111] pt-20 pb-10 px-8 border-t border-[#1111111A]">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pb-16 border-b border-[#1111111A]">
          <div>
            <h4 className="font-mono text-[11px] uppercase tracking-[0.14em] text-[#6B6B66] mb-4">
              Product
            </h4>
            <ul className="space-y-2 text-[14px]">
              <li><a href="#" className="hover:text-[#2A3D2F]">Components</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">Templates</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">Pricing</a></li>
            </ul>
          </div>
          <div>
            <h4 className="font-mono text-[11px] uppercase tracking-[0.14em] text-[#6B6B66] mb-4">
              Resources
            </h4>
            <ul className="space-y-2 text-[14px]">
              <li><a href="#" className="hover:text-[#2A3D2F]">Docs</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">CLI</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">Figma</a></li>
            </ul>
          </div>
          <div>
            <h4 className="font-mono text-[11px] uppercase tracking-[0.14em] text-[#6B6B66] mb-4">
              Company
            </h4>
            <ul className="space-y-2 text-[14px]">
              <li><a href="#" className="hover:text-[#2A3D2F]">About</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">License</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">Privacy</a></li>
            </ul>
          </div>
          <div>
            <h4 className="font-mono text-[11px] uppercase tracking-[0.14em] text-[#6B6B66] mb-4">
              Connect
            </h4>
            <ul className="space-y-2 text-[14px]">
              <li><a href="#" className="hover:text-[#2A3D2F]">Twitter</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">GitHub</a></li>
              <li><a href="#" className="hover:text-[#2A3D2F]">RSS</a></li>
            </ul>
          </div>
        </div>

        <div
          className="relative leading-none tracking-[-0.04em] mt-10 select-none"
          style={{
            fontFamily: "'Instrument Serif', Georgia, serif",
            fontSize: "clamp(64px, 18vw, 220px)",
          }}
        >
          <span>Velyn</span>
          <span className="italic text-[#2A3D2F]">kit.</span>
        </div>

        <div className="flex flex-wrap items-center justify-between gap-3 pt-8 font-mono text-[11px] text-[#6B6B66]">
          <span>© 2026 Velynkit Studios. All wrongs reversed.</span>
          <span>Made in Berlin & Lisbon</span>
        </div>
      </div>
    </footer>
  );
}
Wordmark Footer
