@extends('layouts.app')

@section('page_title', 'Kaffeeliste SaaS - Content')

@section('content')
    <section class="hero">
        <div>
            <p class="hero__kicker">Content</p>
            <h2 class="hero__title">Hinweise, Banner und FAQ werden tenantbezogene Inhalte.</h2>
            <p class="hero__lead">
                Die globale Hinweislogik aus der alten Oberflaeche wird zu einem
                eigenstaendigen Redaktionsbereich. Banner, FAQ und Hilfetexte sind nicht
                mehr im Root versteckt, sondern pro Mandant pflegbar.
            </p>
        </div>
        <div class="toolbar">
            <span class="badge">Announcements</span>
            <span class="badge">FAQ</span>
            <span class="badge badge--solid">Tenant scoped</span>
        </div>
    </section>

    <section class="split">
        <article class="table-card">
            <div class="table-card__header">
                <div>
                    <p class="card__eyebrow">Aktiv</p>
                    <h3>Hinweise im Umlauf</h3>
                </div>
                <span class="pill">Header + Dashboard</span>
            </div>
            <div class="table-card__body">
                <table>
                    <thead>
                        <tr>
                            <th>Titel</th>
                            <th>Sichtbar bis</th>
                            <th>Kanal</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Monatsabschluss am Freitag</td>
                            <td>31.03.2026</td>
                            <td>Dashboard</td>
                            <td><span class="status">Aktiv</span></td>
                        </tr>
                        <tr>
                            <td>Neuer Preis pro Strich</td>
                            <td>15.04.2026</td>
                            <td>Header</td>
                            <td><span class="status status--warning">Geplant</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>

        <article class="panel">
            <h3>Redaktioneller Nutzen</h3>
            <div class="timeline">
                <div class="timeline__item">
                    <p class="timeline__title">Hinweise ohne Code-Aenderung</p>
                    <p class="timeline__meta">Tenant-Admins koennen sichtbare Meldungen direkt verwalten.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">FAQ je Organisation</p>
                    <p class="timeline__meta">Hilfeinhalte koennen pro Mandant und Prozess gepflegt werden.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Saubere Sichtbarkeit</p>
                    <p class="timeline__meta">Dashboard, Header und spaetere Mailtexte greifen auf denselben Content-Pool zu.</p>
                </div>
            </div>
        </article>
    </section>
@endsection
