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

const SPONSORS = [
  {
    name: 'Finques Prats',
    role: 'Patrocinador principal',
    instagram: 'https://www.instagram.com/finquesprats/',
    web: null,
    highlight: true,
  },
  {
    name: 'Runners Corbins',
    role: 'Partner',
    instagram: 'https://www.instagram.com/runnerscorbins/',
    web: null,
    highlight: false,
  },
  {
    name: 'Ajuntament de Corbins',
    role: 'Partner',
    instagram: 'https://www.instagram.com/viu_corbins/',
    web: 'https://www.corbins.cat',
    highlight: false,
  },
]

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">
        <div className="text-center mb-8">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-600">
            Amb el suport de
          </p>
        </div>
        <div className="flex flex-wrap items-center justify-center gap-6 sm:gap-10">
          {SPONSORS.map((s) => (
            <div key={s.name} className="flex flex-col items-center gap-2">
              <div
                className={`flex items-center gap-3 px-5 py-3 rounded-xl border transition-colors
                  ${s.highlight
                    ? 'border-teal/30 bg-teal/5 hover:bg-teal/10'
                    : 'border-dark-border bg-dark-card hover:border-dark-muted'
                  }`}
              >
                <span className={`font-bold text-sm ${s.highlight ? 'text-white' : 'text-slate-400'}`}>
                  {s.name}
                </span>
                {s.highlight && (
                  <span className="badge badge-teal text-[10px]">Patrocinador</span>
                )}
              </div>
              <div className="flex items-center gap-3">
                {s.instagram && (
                  <a
                    href={s.instagram}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-slate-600 hover:text-teal transition-colors"
                    aria-label={`Instagram de ${s.name}`}
                  >
                    <Instagram size={16} />
                  </a>
                )}
                {s.web && (
                  <a
                    href={s.web}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-slate-600 hover:text-teal transition-colors"
                    aria-label={`Web de ${s.name}`}
                  >
                    <Globe size={16} />
                  </a>
                )}
              </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>
  )
}
