export function Newsletter() {
  return (
    <section className="py-10 lg:py-16 w-full">
      <div className="px-4 md:px-8 lg:px-[5rem] w-full">

        {/* Card: stacked on mobile, side-by-side on lg+ */}
        <div className="bg-[#f8f3ec] flex flex-col lg:flex-row gap-8 lg:gap-[3.5rem] items-start lg:items-center px-6 lg:px-8 py-8 lg:py-0 rounded-xl w-full">

          {/* Left: copy — full width mobile, fixed 612px desktop */}
          <div className="flex gap-6 lg:gap-8 items-start w-full lg:w-[38.25rem] lg:shrink-0 lg:py-4">
            <div className="flex items-center justify-center shrink-0 w-[3.5rem] h-[3.5rem] lg:w-[4.23rem] lg:h-[3.71rem]">
              <div className="-rotate-4 -scale-y-100">
                <img alt="" src="/newsletter-icon.svg" className="w-12 lg:w-16 h-auto block" />
              </div>
            </div>
            <div className="flex flex-col gap-3 lg:gap-4 flex-1 min-w-0 text-[#222221]">
              <p
                className="font-semibold leading-normal"
                style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)" }}
              >
                Starte mit einer Woche voller Klarheit
              </p>
              <p className="font-normal text-[1rem] leading-6">
                Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge,
                mit der du durch mehr Struktur weniger Stress spürst.
              </p>
            </div>
          </div>

          {/* Right: form — full width on mobile */}
          <div className="flex flex-1 items-center lg:self-stretch w-full min-w-0">
            <div className="flex flex-1 flex-col gap-4 min-w-0 w-full">
              <div className="flex flex-col sm:flex-row gap-3 items-stretch w-full">
                <input
                  type="email"
                  placeholder="Deine E-Mail-Adresse"
                  className="flex-1 min-w-0 bg-white border border-[#d9d9d9] rounded-lg px-5 py-3 text-[1rem] text-[#868686] font-normal outline-none focus:border-[#f6a701] transition-colors"
                />
                <button
                  type="submit"
                  className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1.125rem] text-[#222221] tracking-[0.18px] whitespace-nowrap hover:brightness-95 transition-all"
                >
                  Jetzt anmelden
                </button>
              </div>
              <p className="text-[0.75rem] text-[#222221] font-normal leading-normal">
                Ich achte auf deine Daten. Kein Spam, jederzeit abbestellbar.
              </p>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}