import { Link } from "react-router-dom";

export const Logo = () => (
  <Link to="/" className="flex items-center space-x-3 group rounded-lg focus:outline-none focus:ring-2 focus:ring-[#8EADD4]" aria-label="Go to homepage">
    <div className="relative h-12 w-12 transform transition-transform group-hover:scale-105">
      <svg
        viewBox="0 0 100 100"
        className="h-full w-full transition-transform duration-300"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* Mail envelope base */}
        <rect
          x="10"
          y="25"
          width="80"
          height="50"
          rx="4"
          className="fill-[#8EADD4] transition-colors duration-300 group-hover:fill-[#6B8CB3] rounded-lg"
        />

        {/* Envelope flap */}
        <path
          d="M10 29L50 55L90 29"
          strokeWidth="3"
          strokeLinecap="round"
          className="stroke-white"
        />

        {/* People silhouette */}
        <path
          d="M40 45C40 45 35 50 30 50C25 50 20 45 20 45C20 45 25 55 30 55C35 55 40 45 40 45Z"
          className="fill-white"
        />
        <circle cx="30" cy="42" r="5" className="fill-white" />

        {/* Leadership star */}
        <path
          d="M70 42L72.5 47L78 48L74 52L75 57L70 54.5L65 57L66 52L62 48L67.5 47L70 42Z"
          className="fill-white transition-transform origin-center group-hover:rotate-45 duration-500"
        />
      </svg>
    </div>

  </Link>
);