import React, { useState } from "react";

export default function AppAdBanner() {
  const [show, setShow] = useState(true);

  if (!show) return null;

  return (
    <>
      {/* Animation CSS */}
      <style>{`
        @keyframes topbarPulsePause {
          0% { transform: scale(1); }
          10% { transform: scale(1.25); }
          20% { transform: scale(1); }
          100% { transform: scale(1); }
        }

        .top_bar_gif {
          position: absolute;
          right: 2px;
          bottom: 4px;
          width: 44px;
          animation: topbarPulsePause 3s ease-in-out infinite;
          transform-origin: center;
        }

        @media (max-width: 640px) {
          .top_bar_gif {
            width: 34px;
            right: 1px;
            bottom: 2px;
          }
        }
      `}</style>

      <div className="relative overflow-hidden bg-[#004748] px-3 py-3 sm:px-6 sm:py-4">
        <div className="flex items-center gap-3 sm:gap-5">

          {/* Logo */}
          <div className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-[12px] border-[3px] border-[#ffe800] bg-[#045133] shadow-[0_0_0_2px_rgba(106,67,0,0.4)_inset] sm:h-[92px] sm:w-[92px] sm:rounded-[20px]">
            <div className="flex h-[38px] w-[38px] items-center justify-center rounded-[10px] border border-[#f2d944] bg-[#0c5d40] text-[13px] font-black text-[#ffd500] sm:h-[68px] sm:w-[68px] sm:text-[24px]">
              CK44
            </div>
          </div>

          {/* Text */}
          <div className="min-w-0 flex-1">
            <div className="text-[16px] font-extrabold leading-none tracking-tight text-[#f5b236] sm:text-[30px]">
              APP UP TO ৳18 &gt;&gt;&gt;
            </div>

            <div className="mt-1 flex gap-1 sm:mt-2 sm:gap-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <span
                  key={i}
                  className="text-[20px] leading-none text-[#ffe10f] sm:text-[34px]"
                >
                  ★
                </span>
              ))}
            </div>
          </div>

          {/* Right Side */}
          <div className="flex items-center gap-3 sm:gap-5">

            {/* Download Button */}
            <button className="rounded-[10px] border-[3px] border-[#fff274] bg-[#ffde00] px-4 py-2 text-[14px] font-bold text-[#b75700] shadow-[0_3px_0_#a85c00] transition active:translate-y-[2px] active:shadow-none sm:rounded-[18px] sm:px-10 sm:py-5 sm:text-[28px]">
              Download
            </button>

            {/* Close Button */}
            <button
              onClick={() => setShow(false)}
              className="flex h-6 w-6 items-center justify-center rounded-full text-white hover:bg-red-500 transition"
            >
              ✕
            </button>
          </div>
        </div>

        {/* Animated top icon (ALL DEVICE SHOW) */}
        <img
          src="/images/top_x.png"
          alt="animated icon"
          className="top_bar_gif"
        />
      </div>
    </>
  );
}