// Footer — Bilgim Grup link, brand catalog, contact info, copyright.

const FOOTER_COPY = {
  tr: {
    blurb:     'Sakarya merkezli kurumsal siber güvenlik, sunucu kurulumu ve yönetilen IT hizmetleri. Bilgim Grup markasıdır.',
    brands:    'Yetkili Markalar',
    solutions: 'Çözüm Alanları',
    contact:   'İletişim',
    legal:     'Politikalar',
    legalLinks: [
      { l: 'Gizlilik Politikası', h: '#' },
      { l: 'KVKK Aydınlatma Metni', h: '#' },
      { l: 'Çerez Politikası', h: '#' },
    ],
    parent:    'Bilgim Grup\'a git',
    rights:    'Tüm hakları saklıdır.',
  },
  en: {
    blurb:     'Sakarya-based corporate cybersecurity, server installation and managed IT. A Bilgim Group brand.',
    brands:    'Authorized Brands',
    solutions: 'Solution Areas',
    contact:   'Contact',
    legal:     'Policies',
    legalLinks: [
      { l: 'Privacy Policy', h: '#' },
      { l: 'KVKK Notice', h: '#' },
      { l: 'Cookie Policy', h: '#' },
    ],
    parent:    'Visit Bilgim Group',
    rights:    'All rights reserved.',
  },
};

const SOLUTIONS_LINKS = [
  'Uç Nokta & Ağ Güvenliği',
  'Veri Koruma & Yedekleme',
  'Kimlik & Erişim Yönetimi',
  'Şifre Güvenliği',
  'SIEM & Log Yönetimi',
];

const BRAND_LINKS = [
  'Bitdefender', 'WatchGuard', 'Narbulut', 'Netwrix',
  'LogAlarm SIEM+', 'Gaterzone', 'Logtin', 'TransferChain Pass',
];

const Footer = () => {
  const { lang } = useLang();
  const t = pick(FOOTER_COPY, lang);
  return (
    <footer style={{
      background: 'var(--navy)', color: 'rgba(255,255,255,0.78)',
      padding: '64px 0 28px',
    }}>
      <div className="wrap">
        <div className="grid-4 footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40,
          marginBottom: 48,
        }}>
          {/* Brand column */}
          <div>
            <DatakorWordmark size="md" inverse />
            <p style={{
              fontFamily: 'var(--sans)', fontSize: 14,
              color: 'rgba(255,255,255,0.7)', lineHeight: 1.6,
              marginTop: 18, maxWidth: 320,
            }}>{t.blurb}</p>
            <a href={DK_CONTACT.parent.url} target="_blank" rel="noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 14px', borderRadius: 999,
              background: 'rgba(255,255,255,0.08)',
              border: '1px solid rgba(255,255,255,0.18)',
              color: '#fff', textDecoration: 'none',
              fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13,
              marginTop: 16,
            }}>
              <span aria-hidden>↗</span> {t.parent}
            </a>
          </div>

          <div>
            <div style={footerH}>{t.solutions}</div>
            <ul style={footerUl}>
              {SOLUTIONS_LINKS.map(l => <li key={l}><a href="#cozumler" style={footerA}>{l}</a></li>)}
            </ul>
          </div>

          <div>
            <div style={footerH}>{t.brands}</div>
            <ul style={footerUl}>
              {BRAND_LINKS.map(l => <li key={l}><a href="#markalar" style={footerA}>{l}</a></li>)}
            </ul>
          </div>

          <div>
            <div style={footerH}>{t.contact}</div>
            <ul style={footerUl}>
              <li><a href={`tel:${DK_CONTACT.phoneIntl}`} style={{...footerA, fontWeight: 700, color: '#fff' }}>{DK_CONTACT.phone}</a></li>
              <li><a href={DK_CONTACT.whatsapp} style={footerA}>WA · {DK_CONTACT.whatsappPhone}</a></li>
              <li><a href={`mailto:${DK_CONTACT.email}`} style={footerA}>{DK_CONTACT.email}</a></li>
              <li style={{
                fontFamily: 'var(--sans)', fontSize: 13,
                color: 'rgba(255,255,255,0.6)', marginTop: 8, lineHeight: 1.5,
              }}>
                {DK_CONTACT.address.line}<br />{DK_CONTACT.address.city}
              </li>
            </ul>
          </div>
        </div>

        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.12)',
          paddingTop: 24, display: 'flex',
          alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>
            © {new Date().getFullYear()} Datakor — {DK_CONTACT.parent.name}. {t.rights}
          </div>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            {t.legalLinks.map(x => (
              <a key={x.l} href={x.h} style={{
                fontFamily: 'var(--sans)', fontSize: 12.5,
                color: 'rgba(255,255,255,0.6)', textDecoration: 'none',
              }}>{x.l}</a>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
};

const footerH = {
  fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 800,
  letterSpacing: '0.14em', textTransform: 'uppercase',
  color: '#6FA8FF', marginBottom: 14,
};
const footerUl = { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 };
const footerA = {
  fontFamily: 'var(--sans)', fontSize: 14, color: 'rgba(255,255,255,0.7)',
  textDecoration: 'none', lineHeight: 1.5, transition: 'color 160ms var(--ease)',
};

Object.assign(window, { Footer });