{{-- resources/views/gratis/hub.blade.php --}}
@extends('layouts.app')

@php
$hubMeta = [
    'ki'       => [
        'label' => 'KI & ChatGPT',
        'title' => 'Kostenlose KI & ChatGPT Ressourcen — kotsch.tech',
        'desc'  => 'Prompts, Anleitungen und Checklisten für ChatGPT, Gemini und andere KI-Tools — alles kostenlos als E-Mail-Download.',
        'intro' => 'Ob du ChatGPT noch nie benutzt hast oder schon täglich einsetzt — hier findest du die besten Prompts, Anleitungen und Tool-Tipps, um mehr aus KI herauszuholen.',
    ],
    'business' => [
        'label' => 'Business & Marketing',
        'title' => 'Kostenlose Business & Marketing Ressourcen — kotsch.tech',
        'desc'  => 'Vorlagen, Checklisten und Guides für Marketing, SEO und Kundenkommunikation — kostenlos als E-Mail-Download.',
        'intro' => 'Von der professionellen Rechnung über SEO-Texte bis zum Content-Kalender — hier findest du fertige Vorlagen und Anleitungen für deinen Business-Alltag.',
    ],
    'it'       => [
        'label' => 'IT & How-to',
        'title' => 'Kostenlose IT-Anleitungen & How-to Guides — kotsch.tech',
        'desc'  => 'Schritt-für-Schritt-Anleitungen für IT-Sicherheit, Windows, DSGVO und digitale Tools — kostenlos als E-Mail-Download.',
        'intro' => 'Ob DSGVO-Compliance, IT-Sicherheit oder praktische Tool-Anleitungen — hier bekommst du konkrete Schritt-für-Schritt-Guides ohne Fachwissen-Voraussetzung.',
    ],
    'finanzen' => [
        'label' => 'Selbstständigkeit & Finanzen',
        'title' => 'Kostenlose Ressourcen für Selbstständige & Finanzen — kotsch.tech',
        'desc'  => 'Checklisten, Vorlagen und Guides für Steuern, Gründung und Freelancer-Alltag — kostenlos als E-Mail-Download.',
        'intro' => 'Steuern, Gründung, Liquiditätsplanung — der Selbstständigen-Alltag steckt voller Formalitäten. Hier findest du fertige Checklisten und Vorlagen, die dir Stunden ersparen.',
    ],
];
$meta = $hubMeta[$slug] ?? ['label' => ucfirst($slug), 'title' => ucfirst($slug), 'desc' => '', 'intro' => ''];
@endphp

@section('title', $meta['title'])
@section('meta_description', $meta['desc'])

@push('head')
<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($meta['label']) }},"item": {{ Js::from(url('/gratis/' . $slug)) }}}
  ]
}
</script>
@endpush

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

  <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>
    <span style="color:#1e293b;">{{ $meta['label'] }}</span>
  </nav>

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

  <p style="font-size:1.15rem;color:#475569;margin-bottom:52px;line-height:1.7;max-width:680px;">
    {{ $meta['intro'] }}
  </p>

  @if(count($pages) === 0)
  <p style="color:#64748b;">Bald verfügbar — schau bald wieder vorbei!</p>
  @else
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;">
    @foreach($pages as $pageSlug => $page)
    <a href="/gratis/{{ $pageSlug }}"
       style="display:flex;flex-direction:column;padding:24px;background:#f8fafc;border-radius:16px;text-decoration:none;border:1px solid #e2e8f0;min-height:160px;"
       onmouseover="this.style.borderColor='#3b82f6';this.style.boxShadow='0 4px 16px rgba(59,130,246,.12)'"
       onmouseout="this.style.borderColor='#e2e8f0';this.style.boxShadow='none'">
      <p style="font-weight:700;color:#1e293b;margin:0 0 10px;font-size:1rem;line-height:1.4;">
        {{ $page['h1'] ?? $page['title'] }}
      </p>
      @if(!empty($page['teaser_points'][0]))
      <p style="color:#64748b;font-size:.875rem;margin:0 0 auto;line-height:1.5;">
        {{ $page['teaser_points'][0] }}
      </p>
      @endif
      <p style="color:#3b82f6;font-size:.875rem;font-weight:600;margin:16px 0 0;">
        Kostenlos freischalten →
      </p>
    </a>
    @endforeach
  </div>
  @endif

</div>
@endsection