'use client'

import { Cookie } from 'lucide-react'
import { t } from '@/lib/content'
import { useApp } from '@/lib/context'

async function reopenConsentBanner() {
  const consentId = localStorage.getItem('bp_consent_id')
  if (consentId) {
    fetch(`/api/consent/${consentId}`, { method: 'DELETE' }).catch(() => {})
    localStorage.removeItem('bp_consent_id')
  }
  localStorage.removeItem('bp_consent')
  window.location.reload()
}

export default function Footer() {
  const { lang } = useApp()
  const i = t(lang)
  const year = new Date().getFullYear()

  return (
    <footer className="border-t border-white/[0.06] bg-enterprise-darker">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
          <div className="md:col-span-2">
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent-electric to-accent-indigo flex items-center justify-center">
                <span className="text-white font-bold text-sm">B</span>
              </div>
              <span className="font-bold text-white text-lg">BreakPilot</span>
            </div>
            <p className="mono-label mb-2">{i.footer.tagline}</p>
            <p className="text-white/30 text-sm max-w-sm">
              {i.footer.description}
            </p>
          </div>

          <div>
            <h4 className="font-semibold text-white/80 text-sm mb-4">Produkt</h4>
            <ul className="space-y-2">
              {i.footer.links.product.map(link => (
                <li key={link}>
                  <a href={`#${link.toLowerCase()}`} className="text-sm text-white/40 hover:text-white/70 transition-colors">
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="font-semibold text-white/80 text-sm mb-4">Rechtliches</h4>
            <ul className="space-y-2">
              {i.footer.links.legal.map(link => (
                <li key={link}>
                  <a
                    href={link === 'Impressum' ? '/impressum' : link === 'Datenschutz' ? '/datenschutz' : '#'}
                    className="text-sm text-white/40 hover:text-white/70 transition-colors"
                  >
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-12 pt-8 border-t border-white/[0.04] flex flex-col sm:flex-row justify-between items-center gap-4">
          <p className="text-xs text-white/20">
            &copy; {year} {i.footer.copyright}. Alle Rechte vorbehalten.
          </p>
          <div className="flex items-center gap-4">
            <button
              onClick={reopenConsentBanner}
              className="text-xs text-white/20 hover:text-white/50 transition-colors flex items-center gap-1.5"
            >
              <Cookie className="w-3 h-3" />
              Cookie-Einstellungen
            </button>
            <p className="text-xs text-white/20 font-mono">
              {i.footer.madeIn}
            </p>
          </div>
        </div>
      </div>
    </footer>
  )
}
