{{--
    Wiederverwendbarer SEO-Content-Block für Standalone-Tool-Seiten.
    Erwartet:  $toolSlug (Pflicht), $toolName (für Überschriften).
    Liest config('tool_seo_content')[$toolSlug] (about / examples / faq) und rendert
    Wozu/Beispiele/FAQ + FAQPage-Schema. Selbst-enthalten (eigenes Styling), damit es
    in jeder Standalone-View funktioniert. Rendert nichts, wenn kein Content existiert.
--}}
@php
    $twSlug = $toolSlug ?? null;
    $twName = $toolName ?? '';
    $twSeo  = $twSlug ? (config('tool_seo_content', [])[$twSlug] ?? []) : [];
    $twFaq  = $twSeo['faq'] ?? [];
@endphp

@if(!empty($twSeo['about']) || !empty($twSeo['examples']) || !empty($twFaq))
<style>
    .twseo { max-width: 820px; margin: 8px auto 0; padding: 0 20px 8px; }
    .twseo section { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e5e7eb; }
    .twseo h2 { font-size: 1.35rem; font-weight: 800; color: #0f172a; letter-spacing: -.02em; margin: 0 0 16px; }
    .twseo-body { font-size: 1rem; color: #334155; line-height: 1.75; }
    .twseo-body p { margin: 0 0 14px; }
    .twseo-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .twseo-ex li { position: relative; padding: 14px 16px 14px 46px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 14px; font-size: .97rem; color: #334155; line-height: 1.6; }
    .twseo-ex li::before { content: '\f0eb'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 17px; top: 14px; color: var(--primary, #2563eb); }
    .twseo-ex li strong { color: #0f172a; }
    .twseo-ex li code { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1px 6px; font-size: .88em; }
    .twseo-faq { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; margin-bottom: 10px; background: #fff; }
    .twseo-faq summary { padding: 15px 18px; font-weight: 700; color: #0f172a; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .twseo-faq summary::-webkit-details-marker { display: none; }
    .twseo-faq summary::after { content: '+'; font-size: 1.3rem; color: var(--primary, #2563eb); flex: 0 0 auto; }
    .twseo-faq[open] summary::after { content: '\2212'; }
    .twseo-faq p { padding: 0 18px 16px; color: #475569; font-size: .95rem; line-height: 1.65; margin: 0; }
</style>

<div class="twseo">
    @if(!empty($twSeo['about']))
    <section>
        <h2>Wozu dient {{ $twName ? 'der '.$twName : 'dieses Tool' }}?</h2>
        <div class="twseo-body">{!! $twSeo['about'] !!}</div>
    </section>
    @endif

    @if(!empty($twSeo['examples']))
    <section>
        <h2>Beispiele</h2>
        <ul class="twseo-ex">
            @foreach($twSeo['examples'] as $ex)
            <li>{!! $ex !!}</li>
            @endforeach
        </ul>
    </section>
    @endif

    @if(!empty($twFaq))
    <section>
        <h2>Häufige Fragen{{ $twName ? ' zum '.$twName : '' }}</h2>
        @foreach($twFaq as $fq)
        <details class="twseo-faq">
            <summary>{{ $fq['q'] }}</summary>
            <p>{{ $fq['a'] }}</p>
        </details>
        @endforeach
    </section>
    @endif
</div>

@if(!empty($twFaq))
<script type="application/ld+json">
{!! json_encode([
    '@' . 'context' => 'https://schema.org',
    '@type' => 'FAQPage',
    'mainEntity' => array_map(fn($fq) => [
        '@type' => 'Question',
        'name' => $fq['q'],
        'acceptedAnswer' => ['@type' => 'Answer', 'text' => $fq['a']],
    ], $twFaq),
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
</script>
@endif
@endif