"use client";
import { useState } from "react";
import { Send, MessageCircle } from "lucide-react";

function FacebookIcon({ size = 16 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M22 12c0-5.5-4.5-10-10-10S2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H8v-2.9h2.4V9.8c0-2.4 1.4-3.7 3.6-3.7 1 0 2.1.2 2.1.2v2.3h-1.2c-1.2 0-1.5.7-1.5 1.5V12H16l-.4 2.9h-2.2v7c4.7-.8 8.4-4.9 8.4-9.9z" />
    </svg>
  );
}

const TELEGRAM_URL = process.env.NEXT_PUBLIC_TELEGRAM_URL ?? "https://t.me/finzonenetwork";
const ZALO_URL = process.env.NEXT_PUBLIC_ZALO_URL ?? "https://zalo.me/g/lkjhonloinvrmnm9xdib";
const FACEBOOK_URL = process.env.NEXT_PUBLIC_FACEBOOK_URL ?? "https://www.facebook.com/finzonenetwork";

export function NewsletterSection() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "ok" | "err">("idle");

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");
    try {
      const res = await fetch("/api/newsletter", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      setStatus(res.ok ? "ok" : "err");
      if (res.ok) setEmail("");
    } catch {
      setStatus("err");
    }
  }

  return (
    <section
      className="border-t border-b hairline"
      style={{ background: "var(--ink)", color: "var(--paper)" }}
    >
      <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-14 text-center">
        <div
          className="text-[11px] font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase tracking-wider mb-3"
          style={{ color: "var(--gold)" }}
        >
          — Theo dõi Finzone —
        </div>
        <h2 className="font-[family-name:var(--font-newsreader)] text-3xl lg:text-5xl leading-tight max-w-3xl mx-auto mb-3 font-medium">
          Cập nhật thị trường tài chính liên tục, không gián đoạn với Finzone Network.
        </h2>
        <p className="text-[14px] opacity-70 mb-8 max-w-md mx-auto leading-relaxed">
          Crypto, chứng khoán, vàng, forex — đọc trong 3 phút trước khi vào ngày giao dịch. Chọn kênh
          phù hợp với bạn.
        </p>

        {/* Email form */}
        <form onSubmit={submit} className="flex gap-2 max-w-md mx-auto mb-8">
          <input
            type="email"
            required
            placeholder="email@cuaban.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={status === "loading"}
            aria-label="Email đăng ký newsletter"
            className="flex-1 bg-transparent border border-white/30 rounded-sm py-3 px-4 outline-none text-[14px] focus:border-[var(--gold)]"
          />
          <button
            type="submit"
            disabled={status === "loading"}
            className="px-6 py-3 text-[11px] font-bold tracking-wider uppercase rounded-sm transition-opacity disabled:opacity-50"
            style={{ background: "var(--gold)", color: "var(--ink)" }}
          >
            {status === "loading"
              ? "Đang gửi..."
              : status === "ok"
              ? "Đã đăng ký ✓"
              : "Email"}
          </button>
        </form>

        {/* Divider */}
        <div className="flex items-center gap-4 max-w-md mx-auto mb-7" aria-hidden>
          <span className="flex-1 h-px bg-white/20" />
          <span className="text-[10px] font-mono uppercase tracking-[0.2em] opacity-60">
            hoặc
          </span>
          <span className="flex-1 h-px bg-white/20" />
        </div>

        {/* 3 social channels */}
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 max-w-2xl mx-auto">
          <a
            href={TELEGRAM_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center gap-2.5 px-5 py-3 text-[12px] font-bold tracking-wider uppercase rounded-sm border border-white/30 hover:bg-white/10 hover:border-white/60 transition-colors"
            aria-label="Tham gia kênh Telegram Finzone Network"
          >
            <Send size={16} aria-hidden />
            Telegram
          </a>
          <a
            href={ZALO_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center gap-2.5 px-5 py-3 text-[12px] font-bold tracking-wider uppercase rounded-sm border border-white/30 hover:bg-white/10 hover:border-white/60 transition-colors"
            aria-label="Tham gia nhóm Zalo Finzone Network"
          >
            <MessageCircle size={16} aria-hidden />
            Zalo Group
          </a>
          <a
            href={FACEBOOK_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center gap-2.5 px-5 py-3 text-[12px] font-bold tracking-wider uppercase rounded-sm border border-white/30 hover:bg-white/10 hover:border-white/60 transition-colors"
            aria-label="Theo dõi fanpage Facebook Finzone Network"
          >
            <FacebookIcon size={16} />
            Fanpage
          </a>
        </div>
      </div>
    </section>
  );
}