import React from 'react';

const socialItems = [
  {
    id: 'whatsapp',
    label: 'WhatsApp',
    image: '/images/soc/w.png',
    href: '#',
  },
  {
    id: 'facebook',
    label: 'Facebook',
    image: '/images/soc/f.png',
    href: '#',
  },
  {
    id: 'telegram',
    label: 'Telegram',
    image: '/images/soc/t.png',
    href: '#',
  },
  {
    id: 'menu',
    label: 'Menu',
    image: '/images/soc/m.png',
    href: '#',
  },
];

export default function FloatingSocialStack() {
  return (
    <>
      <style>{`
        .floatStack {
          position: fixed;
          right: 12px;
          bottom: 102px;
          z-index: 60;
          display: flex;
          flex-direction: column;
          gap: 10px;
          animation: floatIn 0.5s ease both;
          animation-delay: 0.22s;
        }

        @keyframes floatIn {
          from {
            opacity: 0;
            transform: translateX(12px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        .floatBtn {
          width: 48px;
          height: 48px;
          border-radius: 999px;
          border: 1px solid rgba(255, 255, 255, 0.14);
          background: rgba(0, 0, 0, 0.25);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          display: grid;
          place-items: center;
          cursor: pointer;
          box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
          transition: transform 0.15s ease, box-shadow 0.2s ease;
          overflow: hidden;
        }

        .floatBtn:hover {
          box-shadow: 0 18px 30px rgba(0, 0, 0, 0.38);
        }

        .floatBtn:active {
          transform: scale(0.96);
        }

        .floatBtn img {
          width: 130%;
          height: auto;
          display: block;
          object-fit: contain;
        }

        @media (min-width: 640px) {
          .floatStack {
            right: 16px;
            bottom: 116px;
          }

          .floatBtn {
            width: 52px;
            height: 52px;
          }
        }
      `}</style>

      <div className="floatStack">
        {socialItems.map((item) => (
          <a
            key={item.id}
            href={item.href}
            className="floatBtn"
            aria-label={item.label}
          >
            <img src={item.image} alt={item.label} />
          </a>
        ))}
      </div>
    </>
  );
}