import Image from 'next/image'

export default function Footer() {
  return (
    <footer className="border-t border-dark-border bg-dark">

      {/* ── Patrocinadors ───────────────────────────────────── */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-14">

        {/* Principal */}
        <p className="text-[10px] uppercase tracking-[0.25em] text-slate-600 text-center mb-5">
          Patrocinador principal
        </p>
        <div className="flex justify-center mb-12">
          <a
            href="https://www.instagram.com/finquesprats/"
            target="_blank"
            rel="noopener noreferrer"
            style={{ background: '#ffffff', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 32px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}
          >
            <Image
              src="/assets/finques-prats.png"
              alt="Finques Prats"
              width={180}
              height={65}
              style={{ objectFit: 'contain' }}
            />
          </a>
        </div>

        {/* Organitzadors */}
        <p className="text-[10px] uppercase tracking-[0.25em] text-slate-600 text-center mb-5">
          Organitzadors
        </p>
        <div className="flex flex-wrap justify-center items-center gap-6">
          <a
            href="https://cursacorbins.cat/"
            target="_blank"
            rel="noopener noreferrer"
            style={{ background: '#ffffff', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '14px 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', width: '170px', height: '80px' }}
          >
            <Image
              src="/assets/runners-corbins.png"
              alt="Corbins Runners"
              width={130}
              height={60}
              style={{ objectFit: 'contain' }}
            />
          </a>
          <a
            href="https://www.instagram.com/viu_corbins/"
            target="_blank"
            rel="noopener noreferrer"
            style={{ background: '#ffffff', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '14px 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', width: '170px', height: '80px' }}
          >
            <Image
              src="/assets/ajuntament-de-corbins.png"
              alt="Ajuntament de Corbins"
              width={110}
              height={60}
              style={{ objectFit: 'contain' }}
            />
          </a>
        </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>
  )
}
