Newsletter Banner

"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Send, Check } from "lucide-react";

interface NewsletterBannerProps {
  title?: string;
  placeholder?: string;
  submitLabel?: string;
}

export default function NewsletterBanner({
  title = "Abonnez-vous a notre newsletter",
  placeholder = "Votre email",
  submitLabel = "S'inscrire",
}: NewsletterBannerProps) {
  const [submitted, setSubmitted] = useState(false);

  return (
    <section
      style={{
        backgroundColor: "var(--color-background-dark)",
        paddingTop: "2rem",
        paddingBottom: "2rem",
      }}
    >
      <div
        className="mx-auto"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.4 }}
          className="flex flex-col md:flex-row items-center justify-between gap-4"
        >
          <p
            className="text-sm font-semibold"
            style={{ color: "var(--color-foreground-on-dark)" }}
          >
            {title}
          </p>

          {!submitted ? (
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setSubmitted(true);
              }}
              className="flex gap-2 w-full md:w-auto"
            >
              <input
                type="email"
                placeholder={placeholder}
                required
                className="flex-1 md:w-64 px-4 py-2.5 rounded-full text-sm outline-none"
                style={{
                  backgroundColor: "rgba(255,255,255,0.1)",
                  border: "1px solid var(--color-border-dark)",
                  color: "var(--color-foreground-on-dark)",
                }}
              />
              <button
                type="submit"
                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-xs font-semibold cursor-pointer transition-transform hover:scale-105 shrink-0"
                style={{
                  backgroundColor: "var(--color-accent)",
                  color: "var(--color-foreground)",
                }}
              >
                {submitLabel}
                <Send className="h-3 w-3" />
              </button>
            </form>
          ) : (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="flex items-center gap-2"
            >
              <Check
                className="h-4 w-4"
                style={{ color: "var(--color-accent)" }}
              />
              <span
                className="text-sm"
                style={{ color: "var(--color-accent)" }}
              >
                Inscrit !
              </span>
            </motion.div>
          )}
        </motion.div>
      </div>
    </section>
  );
}