1006 lines
55 KiB
TypeScript
1006 lines
55 KiB
TypeScript
import { useState, useEffect } from 'react';
|
||
import { useLocation } from 'react-router-dom';
|
||
import Layout from '@/components/Layout';
|
||
import TenReasons from '@/components/TenReasons';
|
||
import GeneralNotice from '@/components/GeneralNotice';
|
||
import Disclaimer from '@/components/Disclaimer';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
||
import { Mail, Phone, MapPin, Globe, TrendingUp, LineChart, CloudSun, Newspaper, ExternalLink, Star, FileText, Shield, Lock, HelpCircle, Send, User, MessageSquare, MessageCircle, Bot } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { sendEmail } from '@/services/emailService';
|
||
|
||
export default function ContactPage() {
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
const { t } = useTranslation('contact');
|
||
const location = useLocation();
|
||
const [yearsOfExperience, setYearsOfExperience] = useState(0);
|
||
const [activeTab, setActiveTab] = useState('contact');
|
||
const [formData, setFormData] = useState({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
subject: '',
|
||
message: ''
|
||
});
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsSubmitting(true);
|
||
setSubmitStatus('idle');
|
||
|
||
try {
|
||
// Sende E-Mail direkt über Resend API
|
||
const result = await sendEmail({
|
||
name: formData.name,
|
||
email: formData.email,
|
||
phone: formData.phone || 'Keine Angabe',
|
||
subject: formData.subject,
|
||
message: formData.message,
|
||
to: 'info@finanzen-mizera.de'
|
||
});
|
||
|
||
if (result.success) {
|
||
setSubmitStatus('success');
|
||
|
||
// Formular nach kurzer Zeit zurücksetzen
|
||
setTimeout(() => {
|
||
setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
|
||
setSubmitStatus('idle');
|
||
}, 2000);
|
||
} else {
|
||
setSubmitStatus('error');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Fehler beim Senden:', error);
|
||
setSubmitStatus('error');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
const [weather, setWeather] = useState<{ temp?: number; wind?: number; time?: string; isLoading: boolean }>({
|
||
isLoading: true,
|
||
});
|
||
|
||
type NewsItem = { key: string; title: string; content: string };
|
||
|
||
const fallbackNewsItems: NewsItem[] = [
|
||
{
|
||
key: 'news-1',
|
||
title: 'Hartz IV - Jak chronić swoje majątki!',
|
||
content:
|
||
'Krótki przegląd kwot wolnych, chronionego majątku i typowych pułapek. Indywidualną ocenę Twojej sytuacji chętnie zbadamy.',
|
||
},
|
||
{
|
||
key: 'news-2',
|
||
title: 'Zasiłek rodzicielski',
|
||
content:
|
||
'Ważne podstawy dotyczące uprawnień, wniosku i terminów. Pomagamy dostosować odpowiednią ochronę ubezpieczeniową i planowanie finansowe wokół rodziny i pracy.',
|
||
},
|
||
{
|
||
key: 'news-3',
|
||
title: 'Zasiłek rodzinny',
|
||
content:
|
||
'Przegląd uprawnień, dowodów i ważnych terminów. W raz pytań dotyczących zabezpieczenia i zabezpieczenia dzieci chętnie wspieramy.',
|
||
},
|
||
{
|
||
key: 'news-4',
|
||
title: 'Dodatek rodzinny',
|
||
content:
|
||
'Krótko wyjaśnione: warunki, droga wniosku i częste pytania. Dajemy orientację, jakie dokumenty są typowo potrzebne.',
|
||
},
|
||
{
|
||
key: 'news-5',
|
||
title: 'Reforma zdrowotna - Obowiązek ubezpieczenia od 16 czerwca 2008',
|
||
content:
|
||
'Co oznacza obowiązek ubezpieczenia i jakie opcje istnieją w GKV/PKV? Sprawdzamy z Tobą, które rozwiązanie pasuje do sytuacji życiowej.',
|
||
},
|
||
{
|
||
key: 'news-6',
|
||
title: 'Podatek od dochodów kapitałowych jest tu',
|
||
content:
|
||
'Zwięzły przegląd opodatkowania dochodów z kapitału i możliwych wpływu na strategie inwestycyjne i emerytalne. Szczegóły wymagają indywidualnej porady.',
|
||
},
|
||
];
|
||
|
||
const translatedNewsItems = t('news.items', { returnObjects: true }) as unknown;
|
||
const newsItems: NewsItem[] = Array.isArray(translatedNewsItems)
|
||
? (translatedNewsItems as NewsItem[])
|
||
: fallbackNewsItems;
|
||
|
||
// Berechne die Erfahrungsjahre seit 1994
|
||
useEffect(() => {
|
||
const startYear = 1994;
|
||
const currentYear = new Date().getFullYear();
|
||
setYearsOfExperience(currentYear - startYear);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const lat = 51.2446;
|
||
const lon = 6.8013;
|
||
|
||
const load = async () => {
|
||
try {
|
||
setWeather((prev) => ({ ...prev, isLoading: true }));
|
||
const res = await fetch(
|
||
`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,wind_speed_10m&timezone=Europe%2FBerlin`,
|
||
);
|
||
const data = (await res.json()) as {
|
||
current?: { time?: string; temperature_2m?: number; wind_speed_10m?: number };
|
||
};
|
||
|
||
setWeather({
|
||
isLoading: false,
|
||
time: data.current?.time,
|
||
temp: data.current?.temperature_2m,
|
||
wind: data.current?.wind_speed_10m,
|
||
});
|
||
} catch {
|
||
setWeather({ isLoading: false });
|
||
}
|
||
};
|
||
|
||
void load();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const scrollToTabsMenu = () => {
|
||
const tabsEl = document.getElementById('contact-tabs');
|
||
if (!tabsEl) return;
|
||
|
||
const headerEl = document.querySelector('header');
|
||
const headerHeight = headerEl?.getBoundingClientRect().height ?? 0;
|
||
|
||
const breadcrumbNav = document.querySelector('nav[aria-label="Breadcrumb"]');
|
||
const breadcrumbBar = (breadcrumbNav?.closest('div.border-b') as HTMLElement | null) ?? null;
|
||
const breadcrumbHeight = breadcrumbBar?.getBoundingClientRect().height ?? 0;
|
||
|
||
const extraGap = 8;
|
||
const offset = headerHeight + breadcrumbHeight + extraGap;
|
||
|
||
const desiredTop = tabsEl.getBoundingClientRect().top + window.scrollY - offset;
|
||
const top = Math.max(0, desiredTop);
|
||
|
||
window.scrollTo({ top, behavior: 'smooth' });
|
||
};
|
||
|
||
const handleHash = () => {
|
||
const raw = window.location.hash;
|
||
const hash = raw.startsWith('#') ? raw.slice(1) : raw;
|
||
|
||
if (hash === 'card') {
|
||
setActiveTab('card');
|
||
window.setTimeout(() => {
|
||
scrollToTabsMenu();
|
||
}, 0);
|
||
return;
|
||
}
|
||
|
||
if (hash === 'contact') {
|
||
setActiveTab('contact');
|
||
window.setTimeout(() => {
|
||
scrollToTabsMenu();
|
||
}, 0);
|
||
return;
|
||
}
|
||
|
||
if (hash === 'daily-info') {
|
||
setActiveTab('daily-info');
|
||
window.setTimeout(() => {
|
||
scrollToTabsMenu();
|
||
}, 0);
|
||
return;
|
||
}
|
||
|
||
setActiveTab('contact');
|
||
};
|
||
|
||
handleHash();
|
||
window.addEventListener('hashchange', handleHash);
|
||
|
||
return () => {
|
||
window.removeEventListener('hashchange', handleHash);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const params = new URLSearchParams(location.search);
|
||
const tab = params.get('tab');
|
||
if (
|
||
tab &&
|
||
[
|
||
'contact',
|
||
'card',
|
||
'reasons',
|
||
'service',
|
||
'impressum',
|
||
'leistungen',
|
||
'datenschutz',
|
||
'links',
|
||
'news',
|
||
'daily-info',
|
||
'faq',
|
||
].includes(tab)
|
||
) {
|
||
setActiveTab(tab);
|
||
window.setTimeout(() => {
|
||
const tabsEl = document.getElementById('contact-tabs');
|
||
if (!tabsEl) return;
|
||
|
||
const headerEl = document.querySelector('header');
|
||
const headerHeight = headerEl?.getBoundingClientRect().height ?? 0;
|
||
|
||
const breadcrumbNav = document.querySelector('nav[aria-label="Breadcrumb"]');
|
||
const breadcrumbBar = (breadcrumbNav?.closest('div.border-b') as HTMLElement | null) ?? null;
|
||
const breadcrumbHeight = breadcrumbBar?.getBoundingClientRect().height ?? 0;
|
||
|
||
const extraGap = 8;
|
||
const offset = headerHeight + breadcrumbHeight + extraGap;
|
||
|
||
const desiredTop = tabsEl.getBoundingClientRect().top + window.scrollY - offset;
|
||
const top = Math.max(0, desiredTop);
|
||
|
||
window.scrollTo({ top, behavior: 'smooth' });
|
||
}, 0);
|
||
}
|
||
}, [location.search]);
|
||
|
||
return (
|
||
<Layout>
|
||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||
<div className="max-w-screen-2xl mx-auto">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
|
||
{t('pageTitle', 'Kontakt')}
|
||
</h2>
|
||
|
||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||
<Tabs
|
||
value={activeTab}
|
||
onValueChange={(next) => {
|
||
setActiveTab(next);
|
||
}}
|
||
className="w-full"
|
||
id="contact-tabs"
|
||
>
|
||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||
<TabsList className="grid grid-cols-11 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||
<TabsTrigger
|
||
value="contact"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Phone className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.contact', 'Kontakt')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="card"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<MapPin className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.card', 'Karte')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="reasons"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Star className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.reasons', 'Gründe')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="service"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<TrendingUp className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.service', 'Service')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="impressum"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<FileText className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.impressum', 'Impressum')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="leistungen"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Shield className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.leistungen', 'Leistungen')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="datenschutz"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Lock className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.datenschutz', 'Datenschutz')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="links"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Globe className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.links', 'Links')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="news"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Newspaper className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.news', 'News')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="daily-info"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<CloudSun className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.dailyInfo', 'Info')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="faq"
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<HelpCircle className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.faq', 'FAQ')}
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
</div>
|
||
|
||
<TabsContent id="contact" value="contact" className="p-4 md:p-6">
|
||
<div className="grid lg:grid-cols-2 gap-8">
|
||
{/* Linke Seite - Kontaktinformationen */}
|
||
<div className="space-y-6">
|
||
<div className="flex flex-col sm:flex-row gap-4">
|
||
<div className="sm:w-48 md:w-56">
|
||
<div className="w-full aspect-[3/4] overflow-hidden rounded-xl shadow-lg border-2 border-blue-100 bg-gray-100">
|
||
<img
|
||
src={assetUrl('Fotolia_1171371_XS.jpg')}
|
||
alt={t('images.profileAlt', 'Marian-Adam Mizera')}
|
||
className="w-full h-full object-cover"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-2xl font-semibold text-gray-900">Marian - Adam Mizera</div>
|
||
|
||
<div className="mt-4 space-y-3 text-sm text-gray-800">
|
||
<div className="flex gap-2">
|
||
<span className="text-blue-700 font-semibold">//</span>
|
||
<span>{t('profile.role', 'Selbstständiger, unabhängiger Finanz- und Versicherungsmakler')}</span>
|
||
</div>
|
||
<div><span className="font-semibold">{t('profile.qual1', 'Geprüfter Versicherungsfachmann (BWV)')}</span></div>
|
||
<div><span className="font-semibold">{t('profile.qual2', 'Experte Betriebliche Altersversorgung (DVA)')}</span></div>
|
||
<div>{t('profile.qual2Note', '(*Deutsche Versicherungsakademie, München*)')}</div>
|
||
<div><span className="font-semibold">{t('licenseTitle', 'Versicherungsmakler')}</span> {t('licenseSuffix', 'mit Erlaubnis')}</div>
|
||
<div>{t('licenseLaw', 'nach § 34d Abs. 1 GewO')}</div>
|
||
<div>{t('since', 'Versicherungen seit 1994')}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2 text-sm text-gray-800">
|
||
<div className="flex gap-2 items-start">
|
||
<span className="text-blue-700 font-semibold">//</span>
|
||
<div>
|
||
<div className="font-semibold">{t('office.title', 'HomeOffice:')}</div>
|
||
<div>{t('office.note', '(Bürotermine - nach vorheriger telefonischer Vereinbarung)')}</div>
|
||
<div className="mt-3">Rosmarinstraße 30 d</div>
|
||
<div>40235 Düsseldorf</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-2 gap-3">
|
||
<a
|
||
href="tel:021197629355"
|
||
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
||
>
|
||
<Phone className="h-5 w-5 text-blue-600" />
|
||
<span className="text-sm font-medium text-gray-900">{t('labels.phone', 'Telefon')}: 0211 / 97629355</span>
|
||
</a>
|
||
<a
|
||
href="tel:01719864053"
|
||
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
||
>
|
||
<Phone className="h-5 w-5 text-blue-600" />
|
||
<span className="text-sm font-medium text-gray-900">{t('labels.mobile', 'Mobil')}: 0171 / 98 64 053</span>
|
||
</a>
|
||
<a
|
||
href="mailto:info@finanzen-mizera.de"
|
||
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
||
>
|
||
<Mail className="h-5 w-5 text-blue-600" />
|
||
<span className="text-sm font-medium text-gray-900">info@finanzen-mizera.de</span>
|
||
</a>
|
||
<a
|
||
href="https://www.finanzen-mizera.de"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
||
>
|
||
<Globe className="h-5 w-5 text-blue-600" />
|
||
<span className="text-sm font-medium text-gray-900">www.finanzen-mizera.de</span>
|
||
</a>
|
||
</div>
|
||
<div className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors">
|
||
<div className="w-5 h-5 flex items-center justify-center">
|
||
<Bot className="w-4 h-4 text-blue-600" />
|
||
</div>
|
||
<a
|
||
href="/chatbot"
|
||
className="text-xs text-blue-700 underline hover:text-blue-900 transition-colors"
|
||
>
|
||
Chatbot starten
|
||
</a>
|
||
</div>
|
||
|
||
<div className="text-sm text-gray-600 flex items-start gap-2">
|
||
<MapPin className="h-4 w-4 text-blue-600 mt-0.5" />
|
||
<span>{t('appointmentNote', 'Termine nach vorheriger telefonischer Vereinbarung.')}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Rechte Seite - Kontaktformular und QR-Code */}
|
||
<div className="space-y-6">
|
||
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
|
||
<div className="text-center mb-6">
|
||
<Send className="h-8 w-8 text-blue-600 mx-auto mb-3" />
|
||
<h3 className="text-xl font-bold text-gray-900 mb-2">{t('contact.formTitle', 'Kontaktformular')}</h3>
|
||
<p className="text-gray-600 text-sm">
|
||
{t('contact.formDescription', 'Senden Sie uns eine Nachricht und wir melden uns so schnell wie möglich bei Ihnen zurück.')}
|
||
</p>
|
||
</div>
|
||
|
||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
<User className="w-4 h-4 inline mr-1" />
|
||
{t('contact.name', 'Name')} {t('contact.required', '*')}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.name}
|
||
onChange={(e) => setFormData({...formData, name: e.target.value})}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||
placeholder={t('contact.namePlaceholder', 'Ihr Name')}
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
<Mail className="w-4 h-4 inline mr-1" />
|
||
{t('contact.email', 'E-Mail')} {t('contact.required', '*')}
|
||
</label>
|
||
<input
|
||
type="email"
|
||
value={formData.email}
|
||
onChange={(e) => setFormData({...formData, email: e.target.value})}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||
placeholder={t('contact.emailPlaceholder', 'ihre@email.de')}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
<Phone className="w-4 h-4 inline mr-1" />
|
||
{t('contact.phone', 'Telefon')}
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
value={formData.phone}
|
||
onChange={(e) => setFormData({...formData, phone: e.target.value})}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||
placeholder={t('contact.phonePlaceholder', '0123 456789')}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
<MessageSquare className="w-4 h-4 inline mr-1" />
|
||
{t('contact.subject', 'Betreff')} {t('contact.required', '*')}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.subject}
|
||
onChange={(e) => setFormData({...formData, subject: e.target.value})}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||
placeholder={t('contact.subjectPlaceholder', 'Ihr Anliegen')}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
<MessageSquare className="w-4 h-4 inline mr-1" />
|
||
{t('contact.message', 'Nachricht')} {t('contact.required', '*')}
|
||
</label>
|
||
<textarea
|
||
value={formData.message}
|
||
onChange={(e) => setFormData({...formData, message: e.target.value})}
|
||
rows={4}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||
placeholder={t('contact.messagePlaceholder', 'Ihre Nachricht an uns...')}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<Button
|
||
type="submit"
|
||
className="bg-blue-600 hover:bg-blue-700 text-white text-base h-14 px-2"
|
||
disabled={isSubmitting}
|
||
>
|
||
<Send className="w-5 h-5 mr-1" />
|
||
{isSubmitting ? t('contact.sending', 'Wird gesendet...') : t('contact.send', 'Nachricht senden')}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
className="border-gray-300 text-base h-14 px-2"
|
||
onClick={() => setFormData({ name: '', email: '', phone: '', subject: '', message: '' })}
|
||
disabled={isSubmitting}
|
||
>
|
||
{t('contact.clear', 'Leeren')}
|
||
</Button>
|
||
<a
|
||
href="/chatbot"
|
||
className="inline-flex items-center justify-center border border-blue-500 text-blue-600 hover:bg-blue-50 text-base h-14 px-2 rounded-md transition-colors"
|
||
>
|
||
<Bot className="w-5 h-5 mr-1" />
|
||
{t('contact.chatbot', 'Chatbot')}
|
||
</a>
|
||
</div>
|
||
|
||
{/* Status-Meldungen */}
|
||
{submitStatus === 'success' && (
|
||
<div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
|
||
<div className="flex items-center gap-2 text-green-800 text-sm">
|
||
<Mail className="w-4 h-4" />
|
||
<span>{t('contact.success', 'Ihre Nachricht wurde erfolgreich gesendet! Wir melden uns bald bei Ihnen.')}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{submitStatus === 'error' && (
|
||
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
|
||
<div className="flex items-center gap-2 text-red-800 text-sm">
|
||
<Mail className="w-4 h-4" />
|
||
<span>{t('contact.error', 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut oder rufen Sie uns direkt an.')}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</form>
|
||
</div>
|
||
|
||
{/* QR-Code - kleiner und platziert wie Musterbild */}
|
||
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
|
||
<div className="text-sm font-semibold text-gray-900 mb-3 text-center">{t('qr.title', 'QR-Code')}</div>
|
||
<a
|
||
href={assetUrl('head_kontakt_agentur_mizera.jpg')}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="block mx-auto"
|
||
style={{maxWidth: '40%'}}
|
||
>
|
||
<div className="w-full aspect-[3/4] overflow-hidden rounded-lg bg-white border border-gray-200">
|
||
<img
|
||
src={assetUrl('head_kontakt_agentur_mizera.jpg')}
|
||
alt={t('images.qrAlt', 'Agentur Mizera QR-Code')}
|
||
className="w-full h-full object-contain"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
</a>
|
||
<p className="text-xs text-gray-600 text-center mt-2">
|
||
{t('contact.qrClickHint', 'Klicken Sie zum Vergrößern')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent id="card" value="card" className="p-4 md:p-6 h-[75vh] overflow-y-auto">
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
<div className="text-center">
|
||
<div className="text-base font-medium text-gray-900 mb-4">{t('businessCard.front', 'Vorderseite')}</div>
|
||
<a
|
||
href={assetUrl('Visitenkarte Agentur Mizera _v.jpg')}
|
||
download="Visitenkarte_Agentur_Mizera_Vorderseite.jpg"
|
||
className="block"
|
||
>
|
||
<div className="w-full aspect-[16/10] rounded-lg shadow-lg border border-gray-200 bg-white overflow-hidden">
|
||
<img
|
||
src={assetUrl('Visitenkarte Agentur Mizera _v.jpg')}
|
||
alt={t('images.businessCardFrontAlt', 'Visitenkarte Vorderseite')}
|
||
className="w-full h-full object-contain"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<div className="text-base font-medium text-gray-900 mb-4">{t('businessCard.back', 'Rückseite')}</div>
|
||
<a
|
||
href={assetUrl('Visitenkarte Agentur Mizera _h.jpg')}
|
||
download="Visitenkarte_Agentur_Mizera_Rueckseite.jpg"
|
||
className="block"
|
||
>
|
||
<div className="w-full aspect-[16/10] rounded-lg shadow-lg border border-gray-200 bg-white overflow-hidden">
|
||
<img
|
||
src={assetUrl('Visitenkarte Agentur Mizera _h.jpg')}
|
||
alt={t('images.businessCard.back', 'Visitenkarte Rückseite')}
|
||
className="w-full h-full object-contain"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="reasons" className="p-4 md:p-6 h-[75vh] overflow-y-auto">
|
||
<TenReasons
|
||
title={t('reasons.title', '10 gute Gründe')}
|
||
items={t('reasons.items', {
|
||
returnObjects: true,
|
||
defaultValue: [
|
||
{ title: 'Erfahrung', description: `Mehr als ${yearsOfExperience} Jahre am Markt` },
|
||
{ title: 'Unabhängigkeit', description: 'Unabhängig von Versicherern' },
|
||
{ title: 'Transparenz', description: 'Verständliche, klare Empfehlungen' },
|
||
{ title: 'Qualität', description: 'Hohe Standards in Beratung und Service' },
|
||
{ title: 'Vertrauen', description: 'Langfristige Betreuung' },
|
||
{ title: 'Individualität', description: 'Lösungen nach Bedarf' },
|
||
{ title: 'Diskretion', description: 'Sorgfältiger Umgang mit Daten' },
|
||
{ title: 'Alles aus einer Hand', description: 'Beratung, Vergleich, Abschluss, Service' },
|
||
],
|
||
}) as Array<{ title: string; description: string }>}
|
||
years={yearsOfExperience}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="service" className="p-4 md:p-6 h-[75vh] overflow-hidden">
|
||
<iframe
|
||
title={t('iframes.service', 'Service')}
|
||
src="/service?embed=1"
|
||
className="w-full h-full rounded-lg border border-gray-200 bg-white"
|
||
loading="lazy"
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="impressum" className="p-4 md:p-6 h-[75vh] overflow-hidden">
|
||
<iframe
|
||
title={t('iframes.impressum', 'Impressum')}
|
||
src="/impressum?embed=1"
|
||
className="w-full h-full rounded-lg border border-gray-200 bg-white"
|
||
loading="lazy"
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="datenschutz" className="p-4 md:p-6 h-[75vh] overflow-hidden">
|
||
<iframe
|
||
title={t('iframes.datenschutz', 'Datenschutz')}
|
||
src="/datenschutz?embed=1"
|
||
className="w-full h-full rounded-lg border border-gray-200 bg-white"
|
||
loading="lazy"
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="leistungen" className="p-4 md:p-6 h-[75vh] overflow-hidden">
|
||
<iframe
|
||
title={t('iframes.leistungen', 'Leistungen')}
|
||
src="/leistungen?embed=1"
|
||
className="w-full h-full rounded-lg border border-gray-200 bg-white"
|
||
loading="lazy"
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="links" className="p-4 md:p-6 h-[75vh] overflow-hidden">
|
||
<iframe
|
||
title={t('iframes.links', 'Links')}
|
||
src="/links?embed=1"
|
||
className="w-full h-full rounded-lg border border-gray-200 bg-white"
|
||
loading="lazy"
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="news" className="p-4 md:p-6 h-[75vh] overflow-y-auto">
|
||
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
|
||
<div className="px-4 md:px-6 py-4 border-b border-gray-200 bg-gray-50">
|
||
<h3 className="text-xl font-bold text-gray-900">{t('tabs.news', 'Aktuelles/News')}</h3>
|
||
<div className="text-sm text-gray-600 mt-1">
|
||
{t('news.subtitle', 'Klicken Sie auf ein Thema, um Details einzublenden.')}
|
||
</div>
|
||
</div>
|
||
|
||
<Accordion type="single" collapsible className="w-full">
|
||
{newsItems.map((item) => (
|
||
<AccordionItem
|
||
key={item.key}
|
||
value={item.key}
|
||
className="border-b border-gray-200 data-[state=open]:bg-blue-50"
|
||
>
|
||
<AccordionTrigger className="px-4 md:px-6 py-3 hover:no-underline text-left">
|
||
<span className="text-sm md:text-base text-gray-900">
|
||
<span className="text-blue-700 font-semibold mr-2">»</span>
|
||
{item.title}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="px-4 md:px-6">
|
||
<div className="text-sm text-gray-700 pb-4">{item.content}</div>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="daily-info" className="p-4 md:p-6 h-[75vh] overflow-y-auto">
|
||
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
|
||
<div className="px-4 md:px-6 py-4 border-b border-gray-200 bg-gray-50">
|
||
<h3 className="text-xl font-bold text-gray-900">Tägliche Info</h3>
|
||
<div className="text-sm text-gray-600 mt-1">
|
||
Kurze Hinweise & Orientierung – täglich aktualisiert.
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 md:p-6">
|
||
<Accordion type="multiple" className="w-full space-y-6">
|
||
<AccordionItem value="daily-economy" className="rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<AccordionTrigger className="p-0 hover:no-underline">
|
||
<div className="w-full">
|
||
<div className="p-6 md:p-8 grid grid-cols-1 md:grid-cols-[80px_1fr_auto] gap-6 items-center text-left">
|
||
<div className="flex justify-center md:justify-start">
|
||
<div className="w-12 h-12 rounded-full bg-blue-700 text-white flex items-center justify-center text-2xl font-bold">1</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-xl md:text-2xl font-bold text-gray-900">Wirtschaft</div>
|
||
<div className="mt-2 text-sm md:text-base text-gray-700">Tägliche Schlagzeilen & Einordnung (externe Quellen).</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-end">
|
||
<Newspaper className="w-10 h-10 text-blue-700" strokeWidth={1.25} />
|
||
</div>
|
||
</div>
|
||
<div className="h-1.5 bg-blue-700" />
|
||
</div>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="px-6 md:px-8">
|
||
<div className="pb-6">
|
||
<div className="mt-4">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-2">Quellen</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
{[
|
||
{ title: 'Tagesschau Wirtschaft', href: 'https://www.tagesschau.de/wirtschaft/' },
|
||
{ title: 'Wirtschaftswoche', href: 'https://www.wiwo.de/' },
|
||
].map((link) => (
|
||
<a
|
||
key={link.href}
|
||
href={link.href}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-blue-700 hover:text-blue-900 hover:underline text-sm font-medium transition-colors duration-200 flex items-center gap-1"
|
||
>
|
||
<ExternalLink className="w-3 h-3" />
|
||
<span>{link.title}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
|
||
<AccordionItem value="daily-stocks" className="rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<AccordionTrigger className="p-0 hover:no-underline">
|
||
<div className="w-full">
|
||
<div className="p-6 md:p-8 grid grid-cols-1 md:grid-cols-[80px_1fr_auto] gap-6 items-center text-left">
|
||
<div className="flex justify-center md:justify-start">
|
||
<div className="w-12 h-12 rounded-full bg-blue-700 text-white flex items-center justify-center text-2xl font-bold">2</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-xl md:text-2xl font-bold text-gray-900">Aktienmarkt</div>
|
||
<div className="mt-2 text-sm md:text-base text-gray-700">DAX/EuroStoxx/US-Märkte – News & Einordnung (externe Quellen).</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-end">
|
||
<LineChart className="w-10 h-10 text-blue-700" strokeWidth={1.25} />
|
||
</div>
|
||
</div>
|
||
<div className="h-1.5 bg-blue-700" />
|
||
</div>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="px-6 md:px-8">
|
||
<div className="pb-6">
|
||
<div className="mt-4">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-2">Quellen</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
{[
|
||
{ title: 'Tagesschau Börse', href: 'https://www.tagesschau.de/wirtschaft/boerse/' },
|
||
{ title: 'Börse Frankfurt', href: 'https://www.boerse-frankfurt.de/' },
|
||
].map((link) => (
|
||
<a
|
||
key={link.href}
|
||
href={link.href}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-blue-700 hover:text-blue-900 hover:underline text-sm font-medium transition-colors duration-200 flex items-center gap-1"
|
||
>
|
||
<ExternalLink className="w-3 h-3" />
|
||
<span>{link.title}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
|
||
<AccordionItem value="daily-weather" className="rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<AccordionTrigger className="p-0 hover:no-underline">
|
||
<div className="w-full">
|
||
<div className="p-6 md:p-8 grid grid-cols-1 md:grid-cols-[80px_1fr_auto] gap-6 items-center text-left">
|
||
<div className="flex justify-center md:justify-start">
|
||
<div className="w-12 h-12 rounded-full bg-blue-700 text-white flex items-center justify-center text-2xl font-bold">3</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-xl md:text-2xl font-bold text-gray-900">Wetter (Region)</div>
|
||
<div className="mt-2 text-sm md:text-base text-gray-700">Düsseldorf (40235) & Umgebung – Live-Stand + Quellen.</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-end">
|
||
<CloudSun className="w-10 h-10 text-blue-700" strokeWidth={1.25} />
|
||
</div>
|
||
</div>
|
||
<div className="h-1.5 bg-blue-700" />
|
||
</div>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="px-6 md:px-8">
|
||
<div className="pb-6">
|
||
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||
<div className="text-xs text-gray-500">Temperatur</div>
|
||
<div className="mt-1 text-lg font-bold text-gray-900">
|
||
{weather.isLoading ? '…' : weather.temp != null ? `${Math.round(weather.temp)}°C` : '—'}
|
||
</div>
|
||
</div>
|
||
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||
<div className="text-xs text-gray-500">Wind</div>
|
||
<div className="mt-1 text-lg font-bold text-gray-900">
|
||
{weather.isLoading ? '…' : weather.wind != null ? `${Math.round(weather.wind)} km/h` : '—'}
|
||
</div>
|
||
</div>
|
||
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||
<div className="text-xs text-gray-500">Zeit</div>
|
||
<div className="mt-1 text-sm font-semibold text-gray-900">
|
||
{weather.isLoading ? '…' : weather.time != null ? weather.time.replace('T', ' ') : '—'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-2">Quellen</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
{[
|
||
{
|
||
title: 'DWD Warnungen (Düsseldorf)',
|
||
href: 'https://www.dwd.de/DE/wetter/warnungen_gemeinden/warnWetter_node.html?ort=D%C3%BCsseldorf',
|
||
},
|
||
{ title: 'wetter.com Düsseldorf', href: 'https://www.wetter.com/deutschland/duesseldorf/DE0000001.html' },
|
||
].map((link) => (
|
||
<a
|
||
key={link.href}
|
||
href={link.href}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-blue-700 hover:text-blue-900 hover:underline text-sm font-medium transition-colors duration-200 flex items-center gap-1"
|
||
>
|
||
<ExternalLink className="w-3 h-3" />
|
||
<span>{link.title}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
|
||
<div className="mt-4 rounded-lg border border-gray-200 p-4 bg-white">
|
||
<div className="flex items-start gap-3">
|
||
<TrendingUp className="w-5 h-5 text-blue-700 mt-0.5" strokeWidth={1.25} />
|
||
<div>
|
||
<div className="text-sm font-semibold text-gray-900">Hinweis</div>
|
||
<div className="mt-1 text-sm text-gray-700">
|
||
Wenn du möchtest, kann ich die Region für Wetter anpassen (z.B. Stadt/PLZ) und/oder statt Links ein Widget/Feed einbauen.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="faq" className="p-4 md:p-6">
|
||
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
|
||
<div className="px-4 md:px-6 py-4 border-b border-gray-200 bg-gray-50">
|
||
<h3 className="text-xl font-bold text-gray-900">{t('faq.title', 'FAQ')}</h3>
|
||
<div className="text-sm text-gray-600 mt-1">
|
||
{t('faq.subtitle', 'Klicken Sie auf ein Thema, um Details einzublenden.')}
|
||
</div>
|
||
</div>
|
||
|
||
<Accordion type="single" collapsible className="w-full">
|
||
{[
|
||
{
|
||
key: 'private-haftpflicht',
|
||
title: 'Private Haftpflichtversicherung',
|
||
content:
|
||
'Schützt Sie vor finanziellen Folgen, wenn Sie anderen unbeabsichtigt einen Personen-, Sach- oder Vermögensschaden zufügen. Sie prüft außerdem Ansprüche (passiver Rechtsschutz): berechtigte Ansprüche werden bezahlt, unberechtigte abgewehrt.',
|
||
},
|
||
{
|
||
key: 'kfz',
|
||
title: 'KFZ-Versicherung',
|
||
content:
|
||
'Kfz-Haftpflicht ist in Deutschland Pflicht und deckt Schäden ab, die Sie mit dem Fahrzeug bei anderen verursachen. Teilkasko schützt u.a. vor Diebstahl, Glasbruch, Brand, Sturm/Hagel. Vollkasko umfasst zusätzlich selbstverschuldete Unfallschäden am eigenen Fahrzeug sowie Vandalismus (je nach Tarif).',
|
||
},
|
||
{
|
||
key: 'hausrat',
|
||
title: 'Hausratversicherung',
|
||
content:
|
||
'Versichert bewegliche Gegenstände in Ihrer Wohnung/Ihrem Haus (z.B. Möbel, Kleidung, Elektrogeräte) gegen typische Gefahren wie Feuer, Leitungswasser, Sturm/Hagel und Einbruchdiebstahl. Wichtig sind passende Versicherungssumme und richtige Wohnfläche, damit kein Unterversicherung entsteht.',
|
||
},
|
||
{
|
||
key: 'rechtsschutz',
|
||
title: 'Rechtsschutzversicherung',
|
||
content:
|
||
'Übernimmt – je nach Baustein – Kosten für Anwälte, Gerichte, Gutachter und ggf. Mediation, wenn Sie Ihre rechtlichen Interessen durchsetzen oder abwehren müssen. Häufige Bereiche sind Privat-, Berufs-, Verkehrs- und Wohnrechtsschutz. Oft gibt es Wartezeiten und Ausschlüsse (z.B. bereits laufende Konflikte).',
|
||
},
|
||
{
|
||
key: 'bu',
|
||
title: 'Berufsunfähigkeitsversicherung',
|
||
content:
|
||
'Zahlt eine monatliche Rente, wenn Sie Ihren Beruf aus gesundheitlichen Gründen dauerhaft (meist ab 50% Berufsunfähigkeit) nicht mehr ausüben können. Entscheidend sind passende Rentenhöhe, Laufzeit (oft bis Rentenbeginn) sowie die Gesundheitsprüfung und die konkrete Ausgestaltung der Bedingungen.',
|
||
},
|
||
{
|
||
key: 'lebensversicherung',
|
||
title: 'Lebensversicherung / Risikoleben',
|
||
content:
|
||
'Risikolebensversicherung zahlt eine vereinbarte Summe, wenn die versicherte Person während der Laufzeit verstirbt – typischer Schutz für Familie oder Kredit (z.B. Immobilienfinanzierung). Eine (kapitalbildende) Lebensversicherung kombiniert Todesfallschutz mit Spar-/Kapitalaufbau, ist aber je nach Produktform und Kostenstruktur sehr unterschiedlich.',
|
||
},
|
||
].map((item) => (
|
||
<AccordionItem
|
||
key={item.key}
|
||
value={item.key}
|
||
className="border-b border-gray-200 data-[state=open]:bg-blue-50"
|
||
>
|
||
<AccordionTrigger className="px-4 md:px-6 py-3 hover:no-underline text-left">
|
||
<span className="text-sm md:text-base text-gray-900">
|
||
<span className="text-blue-700 font-semibold mr-2">»</span>
|
||
{item.title}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="px-4 md:px-6">
|
||
<div className="text-sm text-gray-700 pb-4">{item.content}</div>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<div className="p-4 md:p-6">
|
||
<GeneralNotice className="rounded-md border border-gray-200 bg-white p-4" />
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|