import { Mail } from "lucide-react";

export function NewsletterSection() {
  return (
    <section className="bg-merah-ranata py-16 relative overflow-hidden">
      {/* Decorative Background Elements */}
      <div className="absolute right-0 bottom-0 opacity-20 pointer-events-none">
        {/* Placeholder for a luggage/travel hat image if available, otherwise just use CSS shapes */}
        <div className="w-64 h-64 bg-white rounded-full mix-blend-overlay blur-3xl translate-x-1/3 translate-y-1/3" />
      </div>

      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="flex flex-col md:flex-row items-center justify-between gap-10">
          
          {/* Left Side */}
          <div className="flex items-start gap-6 text-white max-w-xl">
            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-white/10 backdrop-blur-sm flex-shrink-0">
              <Mail className="h-8 w-8" />
            </div>
            <div>
              <h2 className="text-2xl md:text-3xl font-bold mb-2">
                Dapatkan Info & Promo Terbaru
              </h2>
              <p className="text-white/80 text-sm leading-relaxed">
                Berlangganan newsletter kami dan dapatkan penawaran menarik setiap minggunya!
              </p>
            </div>
          </div>

          {/* Right Side - Form */}
          <div className="w-full md:w-auto flex-1 max-w-lg">
            <form className="flex w-full flex-col sm:flex-row gap-3">
              <input
                type="email"
                placeholder="Masukkan email Anda"
                required
                className="w-full flex-1 rounded-xl border-none px-5 py-4 text-sm text-heading placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-white/50"
              />
              <button
                type="submit"
                className="whitespace-nowrap rounded-xl bg-red-900 px-8 py-4 text-sm font-semibold text-white transition hover:bg-red-950 focus:outline-none focus:ring-2 focus:ring-white/50"
              >
                Berlangganan
              </button>
            </form>
          </div>

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