import Image from "next/image";
import { Navbar } from "./Navbar";

export function Hero() {
  return (
    <section className="relative h-screen overflow-hidden bg-[#c5c8c9]">
      {/* Background photo */}
      <Image
        src="/hero-bg.jpg"
        alt="Harvey Specter"
        fill
        priority
        className="object-cover object-[center_15%]"
      />

      {/* Backdrop blur band — desktop only */}
      <div className="absolute hidden md:block backdrop-blur-[10px] bg-[rgba(217,217,217,0.01)] inset-x-0 h-[349px] top-[498px]" />

      {/* Content */}
      <div className="relative z-10 h-full flex flex-col px-4 md:px-8">
        <Navbar />

        {/* Desktop: spacer pushes hero text down */}
        <div className="hidden md:block md:h-[240px] shrink-0" />

        {/* Hero content — fills remaining space on mobile, fixed layout on desktop */}
        <div className="flex-1 md:flex-none flex flex-col justify-between md:justify-start md:gap-0 pb-6 md:pb-0">

          {/* Name block */}
          <div className="flex flex-col items-center md:items-start w-full">
            <div className="px-[18px] mb-[-15px]">
              <span className="font-mono font-normal text-sm text-white mix-blend-overlay uppercase leading-[1.1]">
                [ Hello I&apos;m ]
              </span>
            </div>
            <h1
              className="
                text-white font-medium mix-blend-overlay capitalize text-center w-full
                text-[96px] leading-[0.8] tracking-[-6.72px]
                md:text-[198px] md:leading-[1.1] md:tracking-[-13.86px]
              "
            >
              Harvey&nbsp;&nbsp;&nbsp;Specter
            </h1>
          </div>

          {/* Description + CTA */}
          <div className="flex md:justify-end w-full md:mt-4">
            <div className="flex flex-col gap-[17px] items-start w-[294px]">
              <p className="font-bold italic text-[#1f1f1f] text-sm tracking-[-0.035em] uppercase leading-[1.1]">
                H.Studio is a{" "}
                <span className="font-normal">full-service</span>
                {" "}creative studio creating beautiful digital experiences and
                products. We are an{" "}
                <span className="font-normal">award winning</span>
                {" "}desing and art group specializing in branding, web design
                and engineering.
              </p>
              <button className="bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl hover:bg-neutral-800 transition-colors">
                Let&apos;s talk
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}