{{-- resources/views/gratis/show.blade.php --}}
@extends('layouts.app')
@section('title', $page['title'])
@section('meta_description', $page['meta_description'])

@php
$hubLabels = ['ki' => 'KI & ChatGPT', 'business' => 'Business & Marketing', 'it' => 'IT & How-to', 'finanzen' => 'Selbstständigkeit & Finanzen'];
$hubLabel  = $hubLabels[$page['category'] ?? ''] ?? ucfirst($page['category'] ?? '');
$category  = $page['category'] ?? 'ki';
@endphp

@push('head')
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "WebPage",
  "name": {{ Js::from($page['h1']) }},
  "description": {{ Js::from($page['meta_description']) }},
  "isAccessibleForFree": false,
  "hasPart": [{"@@type": "WebPageElement","isAccessibleForFree": false,"cssSelector": ".gated-content"}]
}
</script>
@if(!empty($page['faq']))
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "FAQPage",
  "mainEntity": [
    @foreach($page['faq'] as $faqItem)
    {
      "@@type": "Question",
      "name": {{ Js::from($faqItem[0]) }},
      "acceptedAnswer": {"@@type": "Answer","text": {{ Js::from($faqItem[1]) }}}
    }{{ !$loop->last ? ',' : '' }}
    @endforeach
  ]
}
</script>
@endif
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "BreadcrumbList",
  "itemListElement": [
    {"@@type": "ListItem","position": 1,"name": "kotsch.tech","item": {{ Js::from(url('/')) }}},
    {"@@type": "ListItem","position": 2,"name": {{ Js::from($hubLabel) }},"item": {{ Js::from(url('/gratis/' . $category)) }}},
    {"@@type": "ListItem","position": 3,"name": {{ Js::from($page['h1']) }},"item": {{ Js::from(url('/gratis/' . $slug)) }}}
  ]
}
</script>
@endpush

@section('content')
<div style="max-width:760px;margin:0 auto;padding:60px 20px 80px;">

  {{-- Breadcrumb --}}
  <nav style="font-size:.875rem;color:#64748b;margin-bottom:28px;">
    <a href="/" style="color:#64748b;text-decoration:none;">kotsch.tech</a>
    <span style="margin:0 6px;">›</span>
    <a href="/gratis/{{ $category }}" style="color:#64748b;text-decoration:none;">{{ $hubLabel }}</a>
    <span style="margin:0 6px;">›</span>
    <span style="color:#1e293b;">{{ $page['h1'] }}</span>
  </nav>

  {{-- Headline --}}
  <h1 style="font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:16px;">
    {{ $page['h1'] }}
  </h1>

  {{-- Intro --}}
  <p style="font-size:1.15rem;color:#475569;margin-bottom:32px;line-height:1.7;">
    {{ $page['intro'] }}
  </p>

  {{-- Teaser-Punkte (immer sichtbar) --}}
  @if(!empty($page['teaser_points']))
  <div style="background:#f0fdf4;border-radius:14px;padding:24px 28px;margin-bottom:32px;">
    <h2 style="font-size:1.1rem;font-weight:700;margin:0 0 14px;color:#166534;">Was du bekommst:</h2>
    <ul style="list-style:none;padding:0;margin:0;">
      @foreach($page['teaser_points'] as $point)
      <li style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px;">
        <span style="color:#16a34a;font-weight:800;font-size:1rem;">✓</span>
        <span style="color:#1e293b;font-weight:400;">{{ $point }}</span>
      </li>
      @endforeach
    </ul>
  </div>
  @endif

  {{-- Content-Gate --}}
  <x-content-gate
      source="{{ $page['source'] }}"
      incentive="{{ $page['magnet'] }}"
      headline="Jetzt kostenlos freischalten"
      subline="E-Mail eingeben — sofort per Mail erhalten.">

    <x-slot name="teaser">
      @if(!empty($page['gated_content'][0]['items']))
      <div style="padding:20px;background:#f8fafc;border-radius:12px;margin-bottom:8px;opacity:.45;filter:blur(2px);pointer-events:none;user-select:none;overflow:hidden;">
        <p style="font-weight:700;margin:0 0 8px;font-size:.95rem;color:#1e293b;">{{ $page['gated_content'][0]['heading'] ?? '' }}</p>
        <ul style="margin:0;padding-left:20px;color:#475569;font-size:.9rem;">
          @foreach(array_slice($page['gated_content'][0]['items'], 0, 2) as $previewItem)
          <li style="margin-bottom:6px;">{{ $previewItem }}</li>
          @endforeach
          <li>…</li>
        </ul>
      </div>
      @endif
    </x-slot>

    <x-slot name="gated">
      <div class="gated-content">
        @foreach($page['gated_content'] as $section)
        <div style="background:#f0f9ff;border-radius:18px;padding:28px;margin-bottom:20px;">
          <h3 style="font-size:1.05rem;font-weight:700;margin:0 0 16px;color:#1e3a5f;">
            {{ $section['heading'] }}
          </h3>
          <ul style="line-height:1.9;color:#1e3a5f;padding-left:20px;margin:0;">
            @foreach($section['items'] as $item)
            <li style="margin-bottom:4px;">{{ $item }}</li>
            @endforeach
          </ul>
        </div>
        @endforeach
      </div>
    </x-slot>
  </x-content-gate>

  {{-- FAQ --}}
  @if(!empty($page['faq']))
  <div style="margin-top:56px;">
    <h2 style="font-size:1.4rem;font-weight:700;margin:0 0 24px;color:#1e293b;">Häufige Fragen</h2>
    @foreach($page['faq'] as $faqItem)
    <div style="border-top:1px solid #e2e8f0;padding:20px 0;">
      <p style="font-weight:700;color:#1e293b;margin:0 0 8px;font-size:1rem;">{{ $faqItem[0] }}</p>
      <p style="color:#475569;margin:0;line-height:1.6;">{{ $faqItem[1] }}</p>
    </div>
    @endforeach
  </div>
  @endif

  {{-- Verwandte Seiten --}}
  @if(!empty($page['related']))
  @php
    $allLeadPages    = config('lead_pages', []);
    $relatedPages    = collect($page['related'])
        ->map(fn($s) => ['slug' => $s, 'data' => $allLeadPages[$s] ?? null])
        ->filter(fn($r) => $r['data'] !== null)
        ->values();
  @endphp
  @if($relatedPages->count() > 0)
  <div style="margin-top:56px;">
    <h3 style="font-size:1.1rem;font-weight:700;margin:0 0 20px;color:#1e293b;">Das könnte dich auch interessieren</h3>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;">
      @foreach($relatedPages as $rel)
      <a href="/gratis/{{ $rel['slug'] }}" style="display:flex;flex-direction:column;padding:20px;background:#f8fafc;border-radius:14px;text-decoration:none;border:1px solid #e2e8f0;">
        <p style="font-weight:600;color:#1e293b;margin:0 0 8px;font-size:.9rem;line-height:1.4;">{{ $rel['data']['h1'] ?? $rel['data']['title'] }}</p>
        <p style="color:#3b82f6;font-size:.8rem;font-weight:600;margin:auto 0 0;">Kostenlos freischalten →</p>
      </a>
      @endforeach
    </div>
  </div>
  @endif
  @endif

</div>
@endsection