Untitled

function Footer() {
  return (
    <footer className="bg-gradient-to-br from-zinc-900 via-zinc-800 to-black py-16 relative overflow-hidden">
      {/* Decorative elements */}
      <div className="absolute inset-0 opacity-5">
        <div className="absolute top-0 left-0 w-64 h-64 bg-legal-gold rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
        <div className="absolute bottom-0 right-0 w-64 h-64 bg-legal-gold rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>
      </div>

      <div className="container-m mx-auto px-4 relative">
        {/* Header */}
        <a href="/" className='flex justify-center'>
              <img
                src="../../src/assets/logo.svg"
                alt="logo studio legale basta"
                width="50"
                height="50"
              />
            </a>
        <div className="text-center mb-16 text-white">
          <ul className="text-2xl">
            <li className="italic">
              <h5 className='text-lg md:text-2xl'>Studio Legale</h5>
              <h2 className='text-2xl md:text-4xl'><span className="font-sans text-legal-gold">Avv.</span> Rocco Basta</h2>
            </li>
          </ul>
        </div>
        <div className='w-3/4 h-px mx-auto mt-10 mb-10 md:w-full bg-legal-gold'></div>
        {/* Contact Grid */}
        <div className="grid md:grid-cols-3 gap-7 max-w-5xl mx-auto">
          {/* Email */}
          <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6 group hover:bg-white/10 transition-all">
            <div className="text-center">
              <div className="w-12 h-12 bg-legal-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-legal-gold/20 transition-all">
                <FontAwesomeIcon icon={faEnvelope} className="text-legal-gold text-xl" />
              </div>
              <h3 className="text-white text-lg mb-4">Email</h3>
              <a href="mailto:studiolegalebasta@gmail.com" className="text-gray-300 text-sm hover:text-legal-gold transition-colors">
                studiolegalebasta@gmail.com
              </a>
            </div>
          </div>

          {/* Locations */}
          <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6 group hover:bg-white/10 transition-all">
            <div className="text-center">
              <div className="w-12 h-12 bg-legal-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-legal-gold/20 transition-all">
                <FontAwesomeIcon icon={faLocationDot} className="text-legal-gold text-xl" />
              </div>
              <h3 className="text-white text-lg mb-4">Sedi</h3>
              <div className="space-y-2">
                <Link to="/contatti#info-sedi" className="block text-gray-300 text-sm hover:text-legal-gold transition-colors">
                  Via Pitagora 14, 87062 - Cariati (CS)
                </Link>
                <Link to="/contatti#info-sedi?teggiano" className="block text-gray-300 text-sm hover:text-legal-gold transition-colors">
                  Via Prato IV, SNC 84039 - Teggiano (SA)
                </Link>
              </div>
            </div>
          </div>

          {/* Phone */}
          <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6 group hover:bg-white/10 transition-all">
            <div className="text-center">
              <div className="w-12 h-12 bg-legal-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-legal-gold/20 transition-all">
                <FontAwesomeIcon icon={faPhone} className="text-legal-gold text-xl" />
              </div>
              <h3 className="text-white text-lg mb-4">Telefono</h3>
              <div className="space-y-1 text-gray-300 text-sm">
                <p>333/3308933 cell</p>
                <p>0983/544049 - Cariati</p>
                <p>0975/207205 - Teggiano</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Export both designs
export default Footer;