// Footer - TurkNet Original branding + nav + socials. Clean, readable, modern.

function Footer() {
  return (
    <footer className="relative border-t border-aubergine-700/60 bg-gradient-to-b from-aubergine-900 to-[#16091f] pt-20 pb-8 overflow-hidden">
      <div aria-hidden="true" className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-amber-400/60 to-transparent" />

      <div className="relative max-w-[1280px] mx-auto px-5 sm:px-8">
        <div className="grid grid-cols-2 lg:grid-cols-12 gap-x-6 gap-y-10">
          {/* brand col */}
          <div className="col-span-2 lg:col-span-4">
            <div className="flex items-center gap-3">
              <img src={(window.__resources && window.__resources.gigacraftLogo) || "assets/gigacraft.png"} alt="GigaCraft" className="h-12" />
              <div>
                <div className="font-pixel text-amber-300 text-[18px] tracking-[0.18em] leading-none">GIGACRAFT</div>
                <div className="font-mono text-[10px] text-bone/45 tracking-[0.22em] mt-1.5">TURKNET ORIGINAL · S01</div>
              </div>
            </div>
            <p className="mt-6 text-bone/55 leading-relaxed max-w-sm text-[14px]">
              TurkNet'in ürettiği bir Minecraft reality şovu. Her perşembe 21:00, sezon finali 16 Temmuz. İçlerinden biri imposter.
            </p>
            <div className="mt-7 inline-flex items-center gap-3 px-4 py-2.5 rounded-lg border border-aubergine-800/70 bg-ink-800/60">
              <img src={(window.__resources && window.__resources.turknetLogo) || "assets/turknet-white.png"} alt="TurkNet" className="h-5" />
              <span className="font-mono text-[10px] tracking-[0.2em] text-bone/55 border-l border-bone/15 pl-3">Türkiye'nin en hızlı interneti</span>
            </div>
          </div>

          {/* nav cols */}
          <div className="col-span-1 lg:col-span-2 lg:col-start-6">
            <FooterCol title="Şov" links={['Anasayfa','Köy Halkı','Bölümler','Lore','Karakterler']} />
          </div>
          <div className="col-span-1 lg:col-span-2">
            <FooterCol title="Server" links={['Klanlar','Harita','Sıralama','Katılım','Kurallar']} />
          </div>

          {/* social col */}
          <div className="col-span-2 lg:col-span-2">
            <div className="font-mono text-[11px] tracking-[0.2em] uppercase text-bone/40 mb-4">Topluluk</div>
            <div className="flex flex-col gap-1">
              {[
                ['Discord', 'discord.gg/giga'],
                ['YouTube', 'yt/@gigacraft'],
                ['Twitch',  'twitch/gigacraft'],
                ['X',       '@gigacrafttr'],
                ['TikTok',  '@gigacraft'],
                ['Spotify', 'GigaCraft OST'],
              ].map(([n,h]) => (
                <a key={n} href="#" className="group flex items-center justify-between py-1.5 transition-colors">
                  <span className="text-bone/65 group-hover:text-amber-300 text-[14px] transition-colors">{n}</span>
                  <IconArrowUR size={13} className="text-bone/25 group-hover:text-amber-300 transition-colors"/>
                </a>
              ))}
            </div>
          </div>
        </div>

        {/* bottom strip */}
        <div className="mt-16 pt-6 border-t border-aubergine-800/60 flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-3 text-[11px] font-mono tracking-[0.15em] text-bone/40">
            <span>© 2026 TURKNET A.Ş.</span>
            <span className="text-bone/20">·</span>
            <span>16+ İÇERİK</span>
          </div>
          <div className="flex items-center gap-6 text-[12px] text-bone/45">
            <a href="#" className="hover:text-bone transition-colors">Gizlilik</a>
            <a href="#" className="hover:text-bone transition-colors">Kullanım Koşulları</a>
            <a href="#" className="hover:text-bone transition-colors">Çerez Tercihleri</a>
            <a href="#" className="hover:text-bone transition-colors">İletişim</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="font-mono text-[11px] tracking-[0.2em] uppercase text-bone/40 mb-4">{title}</div>
      <ul className="flex flex-col gap-3 text-[14px]">
        {links.map(l => (
          <li key={l}>
            <a href="#" className="text-bone/65 hover:text-amber-300 transition-colors">{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;