import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Shield, Clock, Users, DollarSign, TrendingUp, MapPin, Phone } from 'lucide-react';
import { Button } from '@/components/ui/button';

type Props = {
  phoneHref?: string;
};

const BenefitsCtaSection = ({ phoneHref = 'tel:01719864053' }: Props) => {
  const { t } = useTranslation('common');

  return (
    <div className="mt-14">
      <div className="text-center">
        <div className="text-3xl md:text-4xl font-bold text-gray-900">
          {t('benefitsCta.benefits.title', 'Ihre Vorteile als Privatkunde')}
        </div>
        <div className="mt-3 text-gray-600">
          {t(
            'benefitsCta.benefits.subtitle',
            'Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre persönliche Absicherung'
          )}
        </div>
      </div>

      <div className="mt-8 rounded-2xl border bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm">
        <div className="grid gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
          <div className="flex gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
              <Shield className="h-6 w-6" />
            </div>
            <div>
              <div className="font-semibold text-gray-900">
                {t('benefitsCta.benefits.items.protection.title', 'Umfassender Schutz')}
              </div>
              <div className="text-sm text-gray-600">
                {t('benefitsCta.benefits.items.protection.text', 'Für alle Lebensbereiche')}
              </div>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
              <Users className="h-6 w-6" />
            </div>
            <div>
              <div className="font-semibold text-gray-900">
                {t('benefitsCta.benefits.items.family.title', 'Familienfreundlich')}
              </div>
              <div className="text-sm text-gray-600">
                {t('benefitsCta.benefits.items.family.text', 'Optimale Lösungen für Familien')}
              </div>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
              <TrendingUp className="h-6 w-6" />
            </div>
            <div>
              <div className="font-semibold text-gray-900">
                {t('benefitsCta.benefits.items.optimization.title', 'Vertragsoptimierung')}
              </div>
              <div className="text-sm text-gray-600">
                {t('benefitsCta.benefits.items.optimization.text', 'Bestehende Verträge verbessern')}
              </div>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
              <Clock className="h-6 w-6" />
            </div>
            <div>
              <div className="font-semibold text-gray-900">
                {t('benefitsCta.benefits.items.fasthelp.title', 'Schnelle Hilfe')}
              </div>
              <div className="text-sm text-gray-600">
                {t('benefitsCta.benefits.items.fasthelp.text', 'Rasche Schadenabwicklung')}
              </div>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
              <DollarSign className="h-6 w-6" />
            </div>
            <div>
              <div className="font-semibold text-gray-900">
                {t('benefitsCta.benefits.items.costs.title', 'Transparente Kosten')}
              </div>
              <div className="text-sm text-gray-600">
                {t('benefitsCta.benefits.items.costs.text', 'Keine versteckten Gebühren')}
              </div>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
              <MapPin className="h-6 w-6" />
            </div>
            <div>
              <div className="font-semibold text-gray-900">
                {t('benefitsCta.benefits.items.local.title', 'Persönliche Betreuung')}
              </div>
              <div className="text-sm text-gray-600">
                {t('benefitsCta.benefits.items.local.text', 'Vor Ort in Ihrer Nähe')}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="mt-10 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-10 text-white shadow-lg">
        <div className="mx-auto max-w-4xl text-center">
          <div className="text-3xl md:text-4xl font-bold">
            {t('benefitsCta.cta.title', 'Kontaktieren Sie uns')}
          </div>
          <div className="mt-3 text-white/90">
            {t(
              'benefitsCta.cta.subtitle',
              'Lassen Sie sich unverbindlich zu Ihren Privatkunden-Lösungen beraten.'
            )}
          </div>

          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <Button asChild variant="secondary" className="w-full sm:w-auto">
              <a href={phoneHref}>
                <span className="inline-flex items-center gap-2">
                  <Phone className="h-4 w-4" />
                  {t('benefitsCta.cta.call', 'Jetzt anrufen')}
                </span>
              </a>
            </Button>

            <Button asChild className="w-full sm:w-auto bg-white text-blue-700 hover:bg-white/90">
              <Link to="/contact">{t('benefitsCta.cta.contact', 'Kontaktformular')}</Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BenefitsCtaSection;