export function Tagline() {
  const textClass =
    "font-light text-black uppercase leading-[0.84] tracking-[-0.08em] " +
    "text-[clamp(40px,6.67vw,96px)]";

  return (
    <section className="bg-white px-4 md:px-8 py-[120px]">
      {/* Top: label + divider */}
      <div className="flex flex-col gap-3 items-end mb-6">
        <span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1]">
          [ 8+ years in industry ]
        </span>
        <hr className="w-full border-t border-[#1f1f1f]" />
      </div>

      {/* Staggered text block */}
      <div className="flex flex-col gap-2">
        {/* Line 1: "A CREATIVE DIRECTOR   /" + "001" */}
        <div className="flex items-start gap-3">
          <span className={textClass}>A creative director&nbsp;&nbsp;&nbsp;/</span>
          <span className="font-mono text-sm text-[#1f1f1f] mt-1 shrink-0">001</span>
        </div>

        {/* Line 2: "PHOTOGRAPHER" — indented */}
        <div className="md:pl-[214px]">
          <span className={textClass}>Photographer</span>
        </div>

        {/* Line 3: "BORN & RAISED" — indented further */}
        <div className="md:pl-[610px]">
          <span className={textClass}>
            Born{" "}
            <em style={{ fontFamily: "var(--font-playfair)" }}>&amp;</em>{" "}
            raised
          </span>
        </div>

        {/* Line 4: "ON THE SOUTH SIDE" — no indent */}
        <div>
          <span className={textClass}>on the south side</span>
        </div>

        {/* Line 5: "OF CHICAGO." + "[ creative freelancer ]" label */}
        <div className="flex items-start gap-4 md:pl-[606px]">
          <span className={textClass}>of chicago.</span>
          <span className="hidden md:block font-mono text-sm text-[#1f1f1f] shrink-0 translate-y-[26px]">
            [ creative freelancer ]
          </span>
        </div>
      </div>
    </section>
  );
}