import Image from "next/image";
import { Camera, CircleUserRound, Link, Music2, Tv } from "lucide-react";
import { partnerLogos, paymentLogos, securityItems } from "@/data/yapaylisans";

const footerGroups = [
  { title: "Bilgiler", links: ["Hakkımızda", "Teslimat Bilgisi", "Üyelik Sözleşmesi", "Kullanım Şartları", "Gizlilik Sözleşmesi"] },
  { title: "Müşteri Servisi", links: ["İletişim", "Banka Hesapları", "Yayıncı Başvuru Formu", "Yayıncılar", "Bayi Başvuru Formu"] },
  { title: "Ekstralar", links: ["Satış Kanallarımız", "Videolar", "İş Başvurusu", "Duyurular"] },
];

const footerHrefs: Record<string, string> = {
  Hakkımızda: "/hakkimizda",
  "Teslimat Bilgisi": "/teslimat-bilgisi",
  "Üyelik Sözleşmesi": "/uyelik-sozlesmesi",
  "Kullanım Şartları": "/gizlilik-ve-cerez-politikasi",
  "Gizlilik Sözleşmesi": "/gizlilik-sozlesmesi",
  İletişim: "/iletisim",
  "Banka Hesapları": "/banka-hesaplarimiz",
  "Yayıncı Başvuru Formu": "/streamers/new_streamer",
  Yayıncılar: "/yayincilar",
  "Bayi Başvuru Formu": "https://forms.gle/MDgpsVXL4SygReDMA",
  "Satış Kanallarımız": "/satis-kanallarimiz",
  Videolar: "https://www.youtube.com/channel/UC6o_DaB-Ddh0xMoqlu2O2tA",
  "İş Başvurusu": "/kariyer",
  Duyurular: "/duyurular",
};

export function SecurityFooter() {
  return (
    <>
      <div className="yapaylisans-container partner-strip" aria-label="İş ortakları">
        {partnerLogos.map((logo, index) => <span key={`${logo}-${index}`}><Image src={logo} alt="" width={95} height={60} loading="eager" /></span>)}
      </div>
      <section className="security-strip">
        <div className="yapaylisans-container security-inner">
          {securityItems.map((item) => (
            <div className="security-item" key={item.title}>
              <Image src={item.image} alt="" width={67} height={67} loading="eager" />
              <span>{item.title}</span>
            </div>
          ))}
        </div>
      </section>
      <footer className="page-footer">
        <div className="yapaylisans-container footer-main">
          <div className="footer-brand">
            <div className="footer-logo"><Image src="/assets/yapaylisans/logo.svg" alt="Yapaylisans.com" width={180} height={68} /></div>
            <p>Türkiye ve MENA bölgesinin lider Yapaylisans.com ticaret platformu yapaylisans.com olarak, tüm müşterilerimize güvenli alışveriş, anında teslimat ve 7/24 canlı destek hizmetiyle 20 yıldır sizinleyiz!</p>
            <div className="social-links">
              <a href="https://www.facebook.com/YAPAYLISANS" aria-label="Facebook"><CircleUserRound /></a><a href="https://twitter.com/yapaylisanscom" aria-label="X"><Music2 /></a><a href="https://www.youtube.com/channel/UC6o_DaB-Ddh0xMoqlu2O2tA" aria-label="YouTube"><Tv /></a><a href="https://tr.linkedin.com/company/yapaylisans" aria-label="LinkedIn"><Link /></a><a href="https://www.instagram.com/yapaylisans.comtr/" aria-label="Instagram"><Camera /></a>
            </div>
          </div>
          <div className="footer-links">
            {footerGroups.map((group) => (
              <div key={group.title}><h3>{group.title}</h3>{group.links.map((link) => <a href={footerHrefs[link] ?? "#"} key={link}>{link}</a>)}</div>
            ))}
          </div>
          <a className="etbis" href="https://etbis.eticaret.gov.tr/sitedogrulama/53d54a9dac524dfeac5d02db8b0c97e9"><Image src="/images/etbis-qr.png" alt="ETBİS'e kayıtlıdır" width={130} height={150} loading="eager" /></a>
        </div>
        <div className="footer-bottom">
          <div className="yapaylisans-container bottom-inner">
            <p>Copyright © 2021 Yapaylisans.com Ödeme ve İletişim Teknolojileri A.Ş. Tüm hakları saklıdır.</p>
            <div className="payment-logos">{paymentLogos.map((logo) => <span key={logo}><Image src={logo} alt="" width={42} height={28} loading="eager" /></span>)}</div>
          </div>
        </div>
      </footer>
    </>
  );
}