import { useEffect, useState } from "react";
import { motion } from "framer-motion";

const hexagons = [
  "Qui som",
  "Serveis",
  "Projectes",
  "Clients",
  "Blog",
  "Contacte",
  "Carreres",
  "Idioma",
];

export default function SysbalearLanding() {
  const [windowWidth, setWindowWidth] = useState(0);

  useEffect(() => {
    setWindowWidth(window.innerWidth);
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const isMobile = windowWidth < 768;

  return (
    <div className="min-h-screen bg-[#0b0c10] text-white relative overflow-hidden flex flex-col items-center justify-center px-4">
      <div className="absolute inset-0 z-0">
        {/* Background effects here - optional: particles or circuit lines */}
      </div>

      {/* Central hexagon with logo */}
      <div className="relative z-10 mb-8">
        <div className="w-40 h-40 bg-[#0b0c10] border border-cyan-400 rounded-[20%] shadow-[0_0_20px_#1ef0f9] flex items-center justify-center">
          <img src="/images/logo-sysbalear.png" alt="Sysbalear Logo" className="w-32 h-auto" />
        </div>
      </div>

      {/* Hexagons around */}
      <div
        className={`z-10 grid ${
          isMobile ? "grid-cols-2 gap-4" : "grid-cols-4 gap-8"
        }`}
      >
        {hexagons.map((label, i) => (
          <motion.div
            key={i}
            whileHover={{ scale: 1.1, boxShadow: "0 0 15px #1ef0f9" }}
            animate={{ y: [0, -5, 0], transition: { duration: 3, repeat: Infinity } }}
            className="w-28 h-28 border border-cyan-400 rounded-[20%] text-center text-sm flex items-center justify-center hover:bg-[#1ef0f91a] cursor-pointer"
          >
            {label}
          </motion.div>
        ))}
      </div>
    </div>
  );
}