export function Newsletter() {
  return (
    <section className="py-16 w-full">

      {/* Outer section padding — same 80px horizontal as all other sections */}
      <div className="px-[5rem] w-full">

        {/* Rounded card: cream bg, 32px inner padding, 56px gap between copy and form */}
        <div className="bg-[#f8f3ec] flex gap-[3.5rem] items-center px-8 rounded-xl w-full">

          {/* Left: copy — fixed width 612px so form always gets the remaining flex-1 */}
          <div className="flex gap-8 items-start py-4 shrink-0 w-[38.25rem]">

            {/* Decorative envelope icon, tilted -4° as per design */}
            <div className="flex items-center justify-center shrink-0 w-[4.23rem] h-[3.71rem]">
              <div className="-rotate-4">
                <img
                  alt=""
                  src="/newsletter-icon.svg"
                  className="w-16 h-[3.438rem] block"
                />
              </div>
            </div>

            {/* Heading + body */}
            <div className="flex flex-col gap-4 flex-1 min-w-0 text-[#222221]">
              <p
                className="font-semibold text-[1.75rem] leading-normal"
                style={{ fontFamily: "var(--font-lora)" }}
              >
                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 — takes remaining space, centered vertically */}
          <div className="flex flex-1 items-center self-stretch min-w-0">
            <div className="flex flex-1 flex-col gap-4 min-w-0">

              {/* Input + submit button side by side */}
              <div className="flex gap-4 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-6 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>

              {/* Privacy note */}
              <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>
  );
}