"use client";

import React from "react";
import {
  Bell,
  Send,
  MessageCircle,
  ShieldCheck,
  Zap,
  BookmarkCheck,
} from "lucide-react";
import {
  getNoticeHtml,
  getTelegramUrl,
  getWhatsappChannelUrl,
} from "../config/site";

export function NoticeBanner() {
  const noticeHtml = getNoticeHtml();
  const tgUrl = getTelegramUrl();
  const waUrl = getWhatsappChannelUrl();

  if (noticeHtml) {
    return (
      <div
        id="notice-banner-custom"
        className="w-full mb-6 p-4 rounded-2xl bg-red-950/30 border border-red-500/30 text-white text-sm"
        dangerouslySetInnerHTML={{ __html: noticeHtml }}
      />
    );
  }

  return (
    <div
      id="notice-banner-default"
      className="relative w-full rounded-2xl overflow-hidden bg-gradient-to-r from-neutral-950 via-red-950/20 to-neutral-950 border border-white/10 p-4 sm:p-5 mb-8 shadow-xl"
    >
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        {/* Left side notice text */}
        <div className="flex items-start gap-3.5 max-w-2xl">
          <div className="w-10 h-10 rounded-xl bg-red-600/20 text-red-400 border border-red-500/30 flex items-center justify-center shrink-0 mt-0.5">
            <Bell className="w-5 h-5 animate-bounce" />
          </div>
          <div className="space-y-1">
            <div className="flex items-center gap-2">
              <span className="text-xs font-bold uppercase tracking-wider text-red-400">
                Official Updates & Alerts
              </span>
              <span className="px-2 py-0.2 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
                Live
              </span>
            </div>
            <p className="text-xs sm:text-sm text-white/80 leading-relaxed">
              Bookmark <strong className="text-white font-bold">PKmovies.online</strong> for latest 480p, 720p, 1080p & 4K releases. Join our Telegram & WhatsApp channels for instant direct download links.
            </p>
          </div>
        </div>

        {/* Right side quick action buttons */}
        <div className="flex items-center gap-2.5 w-full md:w-auto shrink-0">
          <a
            id="notice-telegram-btn"
            href={tgUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white text-xs font-bold shadow-md shadow-sky-600/30 border border-sky-400/40 transition-all hover:scale-105"
          >
            <Send className="w-4 h-4" />
            <span>Join Telegram</span>
          </a>

          <a
            id="notice-whatsapp-btn"
            href={waUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold shadow-md shadow-emerald-600/30 border border-emerald-400/40 transition-all hover:scale-105"
          >
            <MessageCircle className="w-4 h-4" />
            <span>WhatsApp</span>
          </a>
        </div>
      </div>
    </div>
  );
}