'use client';

interface QuickMenuCardsProps {
  onLiveStreamClick: () => void;
  onNewsClick: () => void;
  onDocumentsClick: () => void;
  onMediaClick: () => void;
  onComplaintClick: () => void;
  onContactClick: () => void;
}

export default function QuickMenuCards({
  onLiveStreamClick,
  onNewsClick,
  onDocumentsClick,
  onMediaClick,
  onComplaintClick,
  onContactClick
}: QuickMenuCardsProps) {
  return (
    <div className="relative md:absolute md:bottom-0 md:left-0 md:right-0 z-20 md:translate-y-3/4 bg-[#003366] md:bg-transparent py-6 md:py-0">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
          {/* Canlı Yayın */}
          <button 
            onClick={onLiveStreamClick}
            className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
          >
            <div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
              <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/>
              </svg>
            </div>
            <span className="text-[#004B87] font-semibold text-xs md:text-sm">Canlı Yayın</span>
          </button>

          {/* Haberler */}
          <button 
            onClick={onNewsClick}
            className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
          >
            <div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
              <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
              </svg>
            </div>
            <span className="text-[#004B87] font-semibold text-xs md:text-sm">Haberler</span>
          </button>

          {/* Belgeler */}
          <button
            onClick={onDocumentsClick}
            className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
          >
            <div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
              <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
              </svg>
            </div>
            <span className="text-[#004B87] font-semibold text-xs md:text-sm">Belgeler</span>
          </button>

          {/* Medya Galerisi */}
          <button
            onClick={onMediaClick}
            className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
          >
            <div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
              <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
              </svg>
            </div>
            <span className="text-[#004B87] font-semibold text-xs md:text-sm">Medya Galerisi</span>
          </button>

          {/* Dilek-Şikayet */}
          <button 
            onClick={onComplaintClick}
            className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
          >
            <div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
              <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/>
              </svg>
            </div>
            <span className="text-[#004B87] font-semibold text-xs md:text-sm">Dilek-Şikayet</span>
          </button>

          {/* E-İletişim */}
          <button
            onClick={onContactClick}
            className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
          >
            <div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
              <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
              </svg>
            </div>
            <span className="text-[#004B87] font-semibold text-xs md:text-sm">E-İletişim</span>
          </button>
        </div>
      </div>
    </div>
  );
}