export function Footer() {
  return (
    <footer className="bg-black px-4 md:px-8 pt-12 flex flex-col gap-[120px]">
      {/* Top bar: CTA | social (center) | social (right) */}
      <div className="flex flex-col md:flex-row items-start md:items-start justify-between gap-8">
        {/* CTA */}
        <div className="flex flex-col gap-3">
          <p className="font-light italic text-white text-2xl tracking-[-0.04em] uppercase leading-[1.1]">
            Have a{" "}
            <strong className="font-black not-italic">project</strong>{" "}
            in mind?
          </p>
          <button className="self-start border border-white text-white text-sm font-medium tracking-[-0.04em] px-4 py-3 rounded-3xl">
            Let&apos;s talk
          </button>
        </div>

        {/* Center social */}
        <div className="text-white text-[18px] tracking-[-0.04em] uppercase leading-[1.1] text-center">
          <p>Facebook</p>
          <p>Instagram</p>
        </div>

        {/* Right social */}
        <div className="text-white text-[18px] tracking-[-0.04em] uppercase leading-[1.1] text-right">
          <p>x.com</p>
          <p>Linkedin</p>
        </div>
      </div>

      {/* Divider */}
      <hr className="border-t border-white/30 -mt-[96px]" />

      {/* Bottom: big H.Studio + legal links */}
      <div className="flex items-end justify-between pb-8">
        {/* H.Studio overflowing text + "[ Coded By Claude ]" */}
        <div className="relative overflow-hidden h-[219px] flex-1 max-w-[1093px]">
          {/* "[ Coded By Claude ]" rotated vertical */}
          <div className="absolute left-0 top-1/2 -translate-y-1/2 flex items-center justify-center w-4 h-[160px]">
            <div className="-rotate-90 flex-none">
              <span className="font-mono text-white text-sm uppercase whitespace-nowrap">
                [ Coded By Claude ]
              </span>
            </div>
          </div>

          {/* Giant H.Studio — clipped by overflow-hidden */}
          <div className="absolute inset-0 flex items-center justify-center">
            <p className="font-semibold text-white capitalize whitespace-nowrap leading-[0.8] tracking-[-0.06em] text-[clamp(120px,20vw,290px)]">
              H.Studio
            </p>
          </div>
        </div>

        {/* Legal links */}
        <div className="flex gap-8 pb-8 shrink-0">
          <a href="#" className="text-white text-xs tracking-[-0.04em] uppercase underline">
            licences
          </a>
          <a href="#" className="text-white text-xs tracking-[-0.04em] uppercase underline">
            Privacy policy
          </a>
        </div>
      </div>
    </footer>
  );
}
