import React, { useEffect, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice';
import HeroSlider from '@/components/HeroSlider';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
import RightImageCard from '@/components/tab-pages/RightImageCard';
import { CheckCircle, Download, Mail, Phone, Shield, Home, FileText, Calculator, Star, Search } from 'lucide-react';

const TAB_OVERVIEW = 'overview';
const TAB_DETAILS = 'details';
const TAB_CALCULATOR = 'calculator';
const TAB_FORM = 'form';
const TAB_CATALOG = 'catalog';
const TAB_BROCHURE = 'brochure';

const BOLD_BULLET = 'Kieferorthopädie für Kinder und Jugendliche (bis zu 5.000 Euro)';

const WHATSAPP_URL = 'https://wa.me/491719864053';
const EMAIL = 'info@finanzen-mizera.de';

const HERO_SLOGAN =
  'Wir sagen: beides. Dank ZahnPRIVAT müssen Sie sich nicht entscheiden. Kieferorthopädie inklusive.';

const BROCHURE_PDF = '/PDF/335961_DL_ZahnPRIVAT_VKB_05_2024.pdf';

const KinderGesundheitZahn = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation('kinder_zahn');
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;

  const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);

  useEffect(() => {
    const hash = (location.hash || '').replace('#', '').toLowerCase();
    if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
    else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
    else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
    else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
    else if (hash === TAB_BROCHURE) setActiveTab(TAB_BROCHURE);
    else setActiveTab(TAB_OVERVIEW);

    if (!hash) return;

    window.setTimeout(() => {
      const tabSection = document.getElementById('tab-section');
      if (tabSection) {
        tabSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }, 100);
  }, [location.hash]);

  const onTabChange = (tab: string) => {
    setActiveTab(tab);
    if (tab === TAB_OVERVIEW) {
      navigate(location.pathname, { replace: true });
      return;
    }
    navigate(`${location.pathname}#${tab}`, { replace: true });
  };

  return (
    <Layout>
      <div className="min-h-screen bg-gray-50">
        <HeroSlider
          slides={[
            {
              id: 'familien-kinder-gesundheit-zahn-1',
              kicker: t('hero.kicker', 'ZahnPRIVAT 100'),
              title: t('hero.title', 'Erste Zahnspange oder neues Smartphone?'),
              subtitle: t('hero.subtitle', HERO_SLOGAN),
              imageUrl: assetUrl('iStock-1094816100.jpg'),
              imagePosition: 'center',
              ctas: [
                { label: t('hero.cta1', 'Beratung'), href: '/contact#contact' },
                { label: t('hero.cta2', 'Zur Übersicht'), href: '/familien-kinder' },
              ],
            },
          ]}
        />

        <div className="container mx-auto px-4 md:px-6 py-8">
          <div className="max-w-screen-2xl mx-auto">
            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
              <Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
                <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-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
                    <TabsTrigger 
                      value={TAB_OVERVIEW} 
                      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"
                    >
                      <Home className="w-4 h-4 mr-1.5" />
                      {t('tabs.overview', 'Übersicht')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value={TAB_DETAILS} 
                      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.details', 'Details')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value={TAB_CALCULATOR} 
                      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"
                    >
                      <Calculator className="w-4 h-4 mr-1.5" />
                      {t('tabs.calculator', 'Rechner')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value={TAB_FORM} 
                      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.form', 'Anfrage')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value={TAB_CATALOG} 
                      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"
                    >
                      <Search className="w-4 h-4 mr-1.5" />
                      {t('tabs.catalog', 'Ratgeber')}
                    </TabsTrigger>
                    <TabsTrigger 
                      value={TAB_BROCHURE} 
                      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"
                    >
                      <Download className="w-4 h-4 mr-1.5" />
                      {t('tabs.brochure', 'PDF')}
                    </TabsTrigger>
                  </TabsList>
                </div>

                <div className="p-4 md:p-6">
                  <TabsContent value={TAB_OVERVIEW} className="mt-0">
                    <TwoColumnTab
                      className="gap-8 items-start"
                      left={
                        <>
                          <div className="inline-flex items-center gap-2 rounded-full bg-green-50 border border-green-200 px-3 py-1 text-sm text-green-800 mb-4">
                            <Shield className="w-4 h-4" />
                            <span>{t('overview.badge', 'Tarif')}</span>
                          </div>

                          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                            {t('overview.product', 'ZahnPRIVAT 100')}
                            <span className="block text-green-700">{t('overview.productSub', 'erstattet 100 % für')}</span>
                          </h1>

                          <p className="mt-4 text-gray-600 text-lg">
                            {t('overview.sloganLine1', 'Erste Zahnspange oder neues Smartphone?')}{' '}
                            <span className="font-semibold text-gray-900">{t('overview.sloganLine2', 'Wir sagen: beides.')}</span>
                            <br />
                            {t('overview.sloganLine3', 'Dank ZahnPRIVAT müssen Sie sich nicht entscheiden. Kieferorthopädie inklusive.')}
                          </p>

                          <div className="mt-6 flex flex-col sm:flex-row gap-3">
                            <Button onClick={() => onTabChange(TAB_FORM)} className="bg-green-700 hover:bg-green-800">
                              {t('overview.ctaOffer', 'Angebot anfordern')}
                            </Button>
                            <Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
                              {t('overview.ctaConsulting', 'Beratung')}
                            </Button>
                          </div>

                          <div className="mt-6 rounded-lg border border-gray-200 bg-white p-4">
                            <ul className="space-y-2 text-gray-700">
                              {[
                                t('overview.bullets.prophylaxe', 'Zahnprophylaxe (inkl. professioneller Zahnreinigung – ohne Begrenzung)'),
                                t('overview.bullets.bleaching', 'Zahnaufhellung (bis zu 200 Euro in 2 Jahren)'),
                                BOLD_BULLET,
                                t(
                                  'overview.bullets.kfoAdults',
                                  'Kieferorthopädie für Erwachsene aufgrund eines Unfalls oder wenn die GKV leistet (bis zu 5.000 Euro)',
                                ),
                                t(
                                  'overview.bullets.treatment',
                                  'Zahnbehandlung (z.B. hochwertige Füllungen, Parodontose- und Wurzelbehandlungen)',
                                ),
                                t('overview.bullets.prosthetics', 'Zahnersatz (z.B. Implantate, Kronen und Brücken)'),
                                t(
                                  'overview.bullets.anxiety',
                                  'Angst- und Schmerzausschaltung (z. B. Akupunktur, Lachgas und Hypnose)',
                                ),
                              ].map((row) => (
                                <div key={row} className="flex items-start gap-2">
                                  <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                                  <span className={row === BOLD_BULLET ? 'font-semibold text-gray-900' : undefined}>{row}</span>
                                </div>
                              ))}
                            </ul>
                            <div className="mt-4 text-sm text-gray-600">
                              {t(
                                'overview.disclaimer',
                                'Die jeweiligen Prozentsätze beziehen sich auf den erstattungsfähigen Rechnungsbetrag und enthalten die Vorleistungen der gesetzlichen Krankenkasse.',
                              )}
                            </div>
                          </div>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('iStock-1094816100.jpg')} alt="Zahn">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Direktkontakt</CardTitle>
                              <CardDescription>Wenn es schnell gehen soll.</CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-3 text-sm text-gray-700">
                              <div className="flex items-center gap-2">
                                <Phone className="w-4 h-4 text-green-700" />
                                <span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a></span>
                              </div>
                              <div className="flex items-center gap-2">
                                <Mail className="w-4 h-4 text-green-700" />
                                <span>
                                  E-Mail:{' '}
                                  <a href={`mailto:${EMAIL}`} className="underline text-green-700 hover:text-green-800">
                                    {EMAIL}
                                  </a>
                                </span>
                              </div>
                            </CardContent>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_BROCHURE} className="mt-0">
                    <div id={TAB_BROCHURE} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Kundenbroschüre (PDF)')}</h3>
                          <p className="mt-2 text-gray-600">{t('brochure.subtitle', 'Broschüre als PDF zum Download.')}</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">{t('brochure.cardTitle', 'ZahnPRIVAT 100 (PDF)')}</CardTitle>
                              <CardDescription>{t('brochure.cardDescription', '335961_DL_ZahnPRIVAT_VKB_05_2024.pdf')}</CardDescription>
                            </CardHeader>
                            <CardContent>
                              <a href={BROCHURE_PDF} download>
                                <Button className="bg-green-700 hover:bg-green-800 w-full">{t('brochure.download', 'PDF herunterladen')}</Button>
                              </a>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('iStock-1094816100.jpg')} alt="Kundenbroschüre">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Hinweis</CardTitle>
                              <CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_DETAILS} className="mt-0">
                    <div id={TAB_DETAILS} />
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">{t('details.leistungen.title', 'ZahnPRIVAT 100 – Leistungen')}</CardTitle>
                          <CardDescription>{t('details.leistungen.subtitle', '100 % Erstattung (Auszug)')}</CardDescription>
                        </CardHeader>
                        <CardContent className="text-sm">
                          <div className="space-y-2 text-gray-700">
                            {[
                              t('details.bullets.prophylaxe', 'Zahnprophylaxe (inkl. professioneller Zahnreinigung – ohne Begrenzung)'),
                              t('details.bullets.bleaching', 'Zahnaufhellung (bis zu 200 Euro in 2 Jahren)'),
                              BOLD_BULLET,
                              t(
                                'details.bullets.kfoAdults',
                                'Kieferorthopädie für Erwachsene aufgrund eines Unfalls oder wenn die GKV leistet (bis zu 5.000 Euro)',
                              ),
                              t(
                                'details.bullets.treatment',
                                'Zahnbehandlung (z.B. hochwertige Füllungen, Parodontose- und Wurzelbehandlungen)',
                              ),
                              t('details.bullets.prosthetics', 'Zahnersatz (z.B. Implantate, Kronen und Brücken)'),
                              t(
                                'details.bullets.anxiety',
                                'Angst- und Schmerzausschaltung (z. B. Akupunktur, Lachgas und Hypnose)',
                              ),
                            ].map((row) => (
                              <div key={row} className="flex items-start gap-2">
                                <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                                <span className={row === BOLD_BULLET ? 'font-semibold text-gray-900' : undefined}>{row}</span>
                              </div>
                            ))}
                          </div>
                          <div className="mt-4 text-sm text-gray-600">
                            {t(
                              'details.disclaimer',
                              'Die jeweiligen Prozentsätze beziehen sich auf den erstattungsfähigen Rechnungsbetrag und enthalten die Vorleistungen der gesetzlichen Krankenkasse.',
                            )}
                          </div>
                        </CardContent>
                      </Card>

                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">{t('details.examples.title', 'Beispiele')}</CardTitle>
                          <CardDescription>{t('details.examples.subtitle', 'So wirkt sich ZahnPRIVAT 100 in der Praxis aus')}</CardDescription>
                        </CardHeader>
                        <CardContent className="text-sm text-gray-700">
                          <div className="space-y-4">
                            <div>
                              <div className="font-semibold text-gray-900">{t('details.examples.kfo.title', 'Kieferorthopädie (Beispiel)')}</div>
                              <div className="mt-1 text-gray-700">
                                {t('details.examples.kfo.invoice', 'Rechnungsbetrag: 8.000 Euro')}
                                <br />
                                {t('details.examples.kfo.gkv', 'Leistung GKV: 3.500 Euro')}
                                <br />
                                {t('details.examples.kfo.refund', 'Erstattung ZahnPRIVAT 100: 4.500 Euro')}
                                <br />
                                {t('details.examples.kfo.own', 'Eigenanteil: 0 Euro')}
                              </div>
                            </div>

                            <div>
                              <div className="font-semibold text-gray-900">{t('details.examples.implant.title', 'Zahnimplantat (Beispiel)')}</div>
                              <div className="mt-1 text-gray-700">
                                {t('details.examples.implant.invoice', 'Rechnungsbetrag: 3.700 Euro')}
                                <br />
                                {t('details.examples.implant.gkv', 'Leistung GKV: 500 Euro')}
                                <br />
                                {t('details.examples.implant.ownNo', 'Eigenanteil ohne Zusatz: 3.200 Euro')}
                                <br />
                                {t('details.examples.implant.ownWith', 'Eigenanteil mit ZahnPRIVAT 100: 0 Euro')}
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>

                      <Card className="border-gray-200 overflow-hidden">
                        <img
                          src={assetUrl('iStock-1094816100.jpg')}
                          alt="Zahn"
                          className="w-full h-44 object-cover"
                          loading="lazy"
                        />
                        <CardHeader>
                          <CardTitle className="text-lg">{t('details.contact.title', 'Kontakt & Hinweis')}</CardTitle>
                          <CardDescription>{t('details.contact.subtitle', 'Wir beraten schnell und unkompliziert.')}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4 text-sm">
                          <div className="space-y-2 text-gray-700">
                            <div className="flex items-center gap-2">
                              <Phone className="w-4 h-4 text-green-700" />
                              <span>
                                Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a>{' '}
                                <a
                                  href={WHATSAPP_URL}
                                  target="_blank"
                                  rel="noreferrer"
                                  className="text-green-600 hover:text-green-800 underline"
                                >
                                  (WhatsApp)
                                </a>
                              </span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Mail className="w-4 h-4 text-green-700" />
                              <span>
                                E-Mail:{' '}
                                <a href={`mailto:${EMAIL}`} className="underline text-green-700 hover:text-green-800">
                                  {EMAIL}
                                </a>
                              </span>
                            </div>
                          </div>

                          <div className="text-gray-700">
                            {t('details.contact.text', 'Tarife unterscheiden sich. Wir prüfen Bedingungen, Summenbegrenzungen und Erstattungssätze.')}
                          </div>

                          <div className="flex flex-col gap-2">
                            <Button onClick={() => onTabChange(TAB_FORM)} className="bg-green-700 hover:bg-green-800">
                              {t('details.contact.ctaOffer', 'Angebot anfordern')}
                            </Button>
                            <Link to="/contact" className="inline-flex">
                              <Button variant="outline" className="w-full">{t('details.contact.ctaContact', 'Kontakt')}</Button>
                            </Link>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </TabsContent>

                  <TabsContent value={TAB_CALCULATOR} className="mt-0">
                    <div id={TAB_CALCULATOR} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Vergleichsrechner</h3>
                          <p className="mt-2 text-gray-600">Für ZahnPRIVAT 100 erstellen wir dir gerne ein konkretes Angebot.</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Angebot statt Schätzung</CardTitle>
                              <CardDescription>Wir rechnen mit den passenden Parametern.</CardDescription>
                            </CardHeader>
                            <CardContent>
                              <Button onClick={() => onTabChange(TAB_FORM)} className="w-full bg-green-700 hover:bg-green-800">
                                Angebot anfordern
                              </Button>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Was wir brauchen</CardTitle>
                            <CardDescription>Für ein passgenaues Angebot</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3 text-sm text-gray-700">
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                              <span>Alter / Geburtsdatum</span>
                            </div>
                            <div className="flex items-start gap-2">
                              <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                              <span>Gewünschter Leistungsumfang</span>
                            </div>
                          </CardContent>
                        </Card>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_FORM} className="mt-0">
                    <div id={TAB_FORM} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
                          <p className="mt-2 text-gray-600">Kurze Infos – wir melden uns schnell zurück.</p>

                          <div className="mt-4 flex flex-col sm:flex-row gap-3">
                            <Link to="/contact" className="inline-flex">
                              <Button className="bg-green-700 hover:bg-green-800">Kontaktformular öffnen</Button>
                            </Link>
                            <Button variant="outline" className="gap-2" onClick={() => window.print()}>
                              <Download className="w-4 h-4" />
                              Als PDF speichern
                            </Button>
                          </div>
                        </>
                      }
                      right={
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Direktkontakt</CardTitle>
                            <CardDescription>Wenn es schnell gehen soll.</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3 text-sm text-gray-700">
                            <div className="flex items-center gap-2">
                              <Phone className="w-4 h-4 text-green-700" />
                              <span>
                                Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a>{' '}
                                <a
                                  href={WHATSAPP_URL}
                                  target="_blank"
                                  rel="noreferrer"
                                  className="text-green-600 hover:text-green-800 underline"
                                >
                                  (WhatsApp)
                                </a>
                              </span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Mail className="w-4 h-4 text-green-700" />
                              <span>
                                E-Mail:{' '}
                                <a href={`mailto:${EMAIL}`} className="underline text-green-700 hover:text-green-800">
                                  {EMAIL}
                                </a>
                              </span>
                            </div>
                          </CardContent>
                        </Card>
                      }
                    />
                  </TabsContent>

                  <TabsContent value={TAB_CATALOG} className="mt-0">
                    <div id={TAB_CATALOG} />
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Ratgeber</h3>
                          <p className="mt-2 text-gray-600">Checkliste für Zahnzusatz – worauf achten?</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Checkliste</CardTitle>
                              <CardDescription>Kurzüberblick</CardDescription>
                            </CardHeader>
                            <CardContent className="text-sm">
                              <div className="space-y-2">
                                {[
                                  'Wartezeiten & Summenbegrenzungen',
                                  'Kieferorthopädie-Leistungen (Kinder/Erwachsene)',
                                  'Prophylaxe & Bleaching',
                                  'Erstattungssätze & Bedingungen',
                                ].map((row) => (
                                  <div key={row} className="flex items-start gap-2">
                                    <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                                    <span className="text-gray-900">{row}</span>
                                  </div>
                                ))}
                              </div>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('iStock-1094816100.jpg')} alt="Ratgeber">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Tipp</CardTitle>
                              <CardDescription>Frühzeitig prüfen</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <GeneralNotice />
                </div>
              </Tabs>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default KinderGesundheitZahn;