"use client";

import { useState } from "react";
import { ArrowRight } from "lucide-react";
import type { Locale } from "@/types/content";

const copy = {
  en: {
    label: "Sign up to receive Akarya updates on solutions, products, and success stories. You can unsubscribe at any time.",
    placeholder: "Your email address",
    submit: "Subscribe",
    done: "Thanks — your email client will open with a subscription request."
  },
  id: {
    label: "Daftar untuk menerima update Akarya seputar solusi, produk, dan success story. Anda bisa berhenti berlangganan kapan saja.",
    placeholder: "Alamat email Anda",
    submit: "Berlangganan",
    done: "Terima kasih — aplikasi email Anda akan terbuka dengan permintaan berlangganan."
  }
} as const;

export function FooterSubscribe({ locale, contactEmail }: { locale: Locale; contactEmail: string }) {
  const t = copy[locale];
  const [sent, setSent] = useState(false);

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    const email = String(new FormData(form).get("email") ?? "").trim();
    if (!email) return;

    const subject = locale === "id" ? "Berlangganan update Akarya" : "Subscribe to Akarya updates";
    const body =
      locale === "id"
        ? `Halo Akarya, tolong daftarkan email ini untuk menerima update: ${email}`
        : `Hello Akarya, please subscribe this email to your updates: ${email}`;

    window.location.href = `mailto:${contactEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
    form.reset();
  }

  return (
    <form className="footer-subscribe" onSubmit={handleSubmit}>
      <div className="footer-subscribe-field">
        <input
          type="email"
          name="email"
          required
          autoComplete="email"
          placeholder={t.placeholder}
          aria-label={t.placeholder}
        />
        <button type="submit" aria-label={t.submit}>
          <ArrowRight size={18} strokeWidth={2} aria-hidden="true" />
        </button>
      </div>
      <p className="footer-subscribe-note">{sent ? t.done : t.label}</p>
    </form>
  );
}
