import Image from 'next/image'
import { Instagram, Globe } from 'lucide-react'

export default function Footer() {
  return (
    <footer className="border-t border-dark-border bg-dark">
      {/* Sponsors */}
      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12">
        <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-600 text-center mb-10">
          Amb el suport de
        </p>

        {/* Patrocinador principal */}
        <div className="flex flex-col items-center mb-8">
          <span className="text-[10px] text-slate-600 uppercase tracking-widest mb-4">Patrocinador principal</span>
          <a
            href="https://www.finquesprats.com"
            target="_blank"
            rel="noopener noreferrer"
            className="group flex flex-col items-center gap-3"
          >
            <div className="bg-white rounded-2xl px-8 py-5 shadow-sm group-hover:shadow-md transition-shadow flex items-center justify-center" style={{minWidth: '200px', minHeight: '90px'}}>
              <Image
                src="/assets/Finques Prats Logo.png"
                alt="Finques Prats"
                width={180}
                height={70}
                className="object-contain"
              />
            </div>
            <div className="flex items-center gap-2">
              <a href="https://www.instagram.com/finquesprats/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Instagram Finques Prats">
                <Instagram size={15} />
              </a>
            </div>
          </a>
        </div>

        {/* Col·laboradors */}
        <div className="flex flex-col items-center">
          <span className="text-[10px] text-slate-600 uppercase tracking-widest mb-4">Col·laboradors</span>
          <div className="flex flex-wrap justify-center items-start gap-8">

            {/* Corbins Runners */}
            <div className="flex flex-col items-center gap-3">
              <a
                href="https://cursacorbins.cat/"
                target="_blank"
                rel="noopener noreferrer"
                className="group"
              >
                <div className="bg-white rounded-2xl px-6 py-4 shadow-sm group-hover:shadow-md transition-shadow flex items-center justify-center" style={{width: '160px', height: '80px'}}>
                  <Image
                    src="/assets/runners-corbins.webp"
                    alt="Corbins Runners"
                    width={130}
                    height={65}
                    className="object-contain"
                  />
                </div>
              </a>
              <a href="https://cursacorbins.cat/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Web Corbins Runners">
                <Globe size={15} />
              </a>
            </div>

            {/* Ajuntament de Corbins */}
            <div className="flex flex-col items-center gap-3">
              <a
                href="https://www.corbins.cat"
                target="_blank"
                rel="noopener noreferrer"
                className="group"
              >
                <div className="bg-white rounded-2xl px-5 py-4 shadow-sm group-hover:shadow-md transition-shadow flex items-center justify-center" style={{width: '160px', height: '80px'}}>
                  <Image
                    src="/assets/ajuntament-de-corbins.webp"
                    alt="Ajuntament de Corbins"
                    width={110}
                    height={60}
                    className="object-contain"
                  />
                </div>
              </a>
              <div className="flex items-center gap-3">
                <a href="https://www.instagram.com/viu_corbins/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Instagram Ajuntament">
                  <Instagram size={15} />
                </a>
                <a href="https://www.corbins.cat" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Web Ajuntament de Corbins">
                  <Globe size={15} />
                </a>
              </div>
            </div>

          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="border-t border-dark-border/50 py-6">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-center sm:text-left">
          <div className="flex items-center gap-2">
            <Image
              src="/assets/LOGO BLOD BROS SPORT GOTA  RODONA ALTA RES.jpg"
              alt="Blood Bros Sport"
              width={28}
              height={28}
              className="rounded-full"
            />
            <span className="text-slate-600 text-xs">
              © 2026 Blood Bros Sport · Tots els drets reservats
            </span>
          </div>
          <div className="flex items-center gap-4 text-xs text-slate-700">
            <span>Pagament segur via Stripe</span>
            <span>·</span>
            <span>Cursa de la Cirera · Corbins, Lleida</span>
          </div>
        </div>
      </div>
    </footer>
  )
}
