import Link from "next/link";
import Image from "next/image";

export function Hero() {
  return (
    <section className="bg-[#f5f0e8] flex items-center justify-between relative w-full overflow-hidden">

      {/* Left: text content */}
      <div className="flex flex-[1_0_0] flex-col gap-[1.75rem] items-start min-w-px overflow-clip pl-[5rem] pr-[2.5rem] relative">

        {/* Heading — w-[min-content] forces wrap at widest word ("Produktivität") */}
        <p
          className="font-semibold leading-[0] min-w-full shrink-0 text-[0px] text-black w-[min-content] [word-break:break-word]"
          style={{ fontFamily: "var(--font-playfair)" }}
        >
          <span className="leading-[4.5rem] text-[4rem]">Produktivität darf sich leicht anfühlen</span>
          <span className="leading-[4.5rem] text-[4rem] text-[#fdb705]">.</span>
        </p>

        {/* Subheading */}
        <p className="font-semibold leading-[2.375rem] min-w-full shrink-0 text-[#222221] text-[1.5rem] w-[min-content] [word-break:break-word] not-italic">
          Für Menschen mit Familie, Verantwortung und zu wenig Zeit
        </p>

        {/* CTA */}
        <Link
          href="/challenge"
          className="flex gap-[1rem] items-center justify-center overflow-clip px-[1.5rem] py-[0.75rem] rounded-[0.5rem] shrink-0 bg-[#f6a701] hover:brightness-95 transition-all"
        >
          <span className="font-semibold leading-[2.375rem] text-[#222221] text-[1.375rem] whitespace-nowrap not-italic">
            Starte mit der 7-Tage-Challenge
          </span>
          <div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
            <img
              alt=""
              src="/icon-check.svg"
              className="absolute inset-0 w-full h-full"
            />
          </div>
        </Link>

        {/* Social proof */}
        <div className="flex gap-[0.75rem] items-start overflow-clip shrink-0 w-full">
          {/* Avatars — gap 2px, not overlapping */}
          <div className="flex gap-[0.125rem] items-center shrink-0">
            {["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
              <div
                key={i}
                className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden shrink-0"
              >
                <Image src={src} alt="" fill className="object-cover" />
              </div>
            ))}
          </div>
          <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-[#222221] text-[1rem] [word-break:break-word]">
            10.000+ Menschen vertrauen einfach-produktiv
          </p>
        </div>
      </div>

      {/* Right: hero image as background-image so transparent PNG blends into cream section */}
      <div
        className="h-[36.4375rem] shrink-0 w-[55.4375rem]"
        style={{
          backgroundImage: "url('/hero.png')",
          backgroundSize: "contain",
          backgroundPosition: "right center",
          backgroundRepeat: "no-repeat",
        }}
        aria-hidden="true"
      />

    </section>
  );
}