"use client";

import { useTranslations } from "next-intl";
import { motion } from "framer-motion";

export function Newsletter() {
  const t = useTranslations("newsletter");

  return (
    <section className="py-24 bg-[#002045] text-white overflow-hidden relative" aria-label={t("title")}>
      {/* Decorative Background Elements */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0" aria-hidden="true">
        <div className="absolute -top-[20%] -left-[10%] w-[50%] h-[150%] bg-white/5 blur-3xl transform rotate-12 rounded-full" />
        <div className="absolute -bottom-[20%] -right-[10%] w-[50%] h-[150%] bg-[#CA8A04]/10 blur-3xl transform -rotate-12 rounded-full" />
      </div>

      <motion.div 
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-50px" }}
        transition={{ duration: 0.6 }}
        className="max-w-7xl mx-auto px-4 md:px-12 relative z-10 text-center motion-reduce:!transform-none motion-reduce:!opacity-100"
      >
        <h2 className="font-heading text-4xl md:text-5xl text-white mb-6 font-bold tracking-tight">
          {t("title")}
        </h2>
        <p className="font-body-lg text-lg text-white/70 mb-10 max-w-xl mx-auto" style={{ maxWidth: "65ch" }}>
          {t("desc")}
        </p>
        
        <form className="max-w-md mx-auto flex flex-col md:flex-row gap-4" onSubmit={(e) => e.preventDefault()}>
          <label htmlFor="newsletter-email" className="sr-only">{t("label")}</label>
          <input 
            id="newsletter-email"
            className="flex-1 bg-white/10 border border-white/20 text-white placeholder-white/40 rounded-lg px-6 py-4 focus:ring-2 focus:ring-[#CA8A04]/50 focus:border-[#CA8A04] outline-none transition-colors duration-200 min-h-[48px]" 
            placeholder={t("placeholder")} 
            type="email" 
            required
            autoComplete="email"
          />
          <button 
            type="submit"
            className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm text-[12px] uppercase tracking-widest font-bold hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px]"
          >
            {t("subscribe")}
          </button>
        </form>
      </motion.div>
    </section>
  );
}