customer-frontend/landing-react/src/components/Footer.tsx

import { Heart, Linkedin, Twitter, Github } from 'lucide-react'

export default function Footer() {
  return (
    <footer className="pt-[80px] pb-[40px] bg-gray-900 text-gray-400">
      <div className="max-w-container mx-auto px-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[2fr_1fr_1fr_1fr] gap-12 mb-12">
          {/* Brand */}
          <div>
            <a
              href="#"
              className="flex items-center gap-3 text-2xl font-bold text-white mb-4 no-underline"
              onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }) }}
            >
              <img
                src="/logo.svg"
                alt="BotKonzept Logo"
                className="h-10 w-auto"
                style={{ filter: 'brightness(0) invert(1)' }}
              />
              <span>BotKonzept</span>
            </a>
            <p className="mb-6 leading-relaxed">
              Ihr intelligenter KI-Chatbot für besseren Kundenservice.
            </p>
            <div className="flex gap-4">
              {[
                { icon: <Linkedin size={18} />, label: 'LinkedIn' },
                { icon: <Twitter size={18} />, label: 'Twitter' },
                { icon: <Github size={18} />, label: 'GitHub' },
              ].map((s) => (
                <a
                  key={s.label}
                  href="#"
                  aria-label={s.label}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-all duration-300"
                >
                  {s.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Produkt */}
          <FooterLinks
            title="Produkt"
            links={[
              { label: 'Features', href: '#features' },
              { label: 'Preise', href: '#pricing' },
              { label: 'FAQ', href: '#faq' },
              { label: 'Dokumentation', href: '#' },
            ]}
          />

          {/* Unternehmen */}
          <FooterLinks
            title="Unternehmen"
            links={[
              { label: 'Über uns', href: '#' },
              { label: 'Blog', href: '#' },
              { label: 'Karriere', href: '#' },
              { label: 'Kontakt', href: '#' },
            ]}
          />

          {/* Rechtliches */}
          <FooterLinks
            title="Rechtliches"
            links={[
              { label: 'Impressum', href: '#' },
              { label: 'Datenschutz', href: '#' },
              { label: 'AGB', href: '#' },
              { label: 'Cookie-Einstellungen', href: '#' },
            ]}
          />
        </div>

        {/* Bottom Bar */}
        <div className="flex flex-col sm:flex-row justify-between items-center gap-3 pt-8 border-t border-gray-800 text-sm">
          <p>© 2025 BotKonzept. Alle Rechte vorbehalten.</p>
          <p className="flex items-center gap-1">
            Made with <Heart size={14} className="text-red-500" /> in Germany
          </p>
        </div>
      </div>
    </footer>
  )
}

function FooterLinks({
  title,
  links,
}: {
  title: string
  links: { label: string; href: string }[]
}) {
  return (
    <div>
      <h4 className="text-white font-semibold text-base mb-5">{title}</h4>
      <ul className="space-y-3">
        {links.map((l) => (
          <li key={l.label}>
            <a
              href={l.href}
              className="text-gray-400 hover:text-white transition-colors duration-150"
            >
              {l.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}