<?php include __DIR__ . '/../layout/header.php'; ?>

<div class="page-wrap">
    <div class="container page-layout">
        <aside class="page-sidebar">
            <div class="sidebar-header">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                <span>Sayfalar</span>
            </div>
            <nav class="sidebar-nav">
                <?php foreach ($allPages as $p): ?>
                <a href="<?php echo $baseUrl; ?>/<?php echo htmlspecialchars($p->slug); ?>"
                   class="sidebar-link<?php echo $currentSlug === $p->slug ? ' active' : ''; ?>">
                    <span class="link-dot"></span>
                    <?php echo htmlspecialchars($p->title); ?>
                </a>
                <?php endforeach; ?>
            </nav>
        </aside>

        <main class="page-content">
            <div class="page-breadcrumb">
                <a href="<?php echo $baseUrl; ?>/">Ana Sayfa</a>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
                <span><?php echo htmlspecialchars($pageTitle); ?></span>
            </div>
            <h2><?php echo htmlspecialchars($pageTitle); ?></h2>
            <div class="page-body"><?php echo $content; ?></div>
        </main>
    </div>
</div>

<style>
.page-wrap {
    background: var(--surface-0);
    min-height: 60vh;
    padding: 36px 0 60px;
}
.page-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* ─── Sidebar ─── */
.page-sidebar {
    width: 270px;
    flex-shrink: 0;
    background: var(--surface-card);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    overflow: hidden;
    position: sticky;
    top: 24px;
}
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-1);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.sidebar-header svg {
    color: var(--orange);
    flex-shrink: 0;
}
.sidebar-nav {
    padding: 6px 0;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: 14px;
    color: var(--text-2);
    text-decoration: none;
    transition: all .15s ease;
    border-left: 3px solid transparent;
    position: relative;
}
.sidebar-link:hover {
    background: var(--surface-2);
    color: var(--orange);
}
.sidebar-link.active {
    background: var(--orange-light);
    color: var(--orange);
    font-weight: 600;
    border-left-color: var(--orange);
}
.sidebar-link .link-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
    transition: background .15s;
}
.sidebar-link:hover .link-dot,
.sidebar-link.active .link-dot {
    background: var(--orange);
}

/* ─── Content ─── */
.page-content {
    flex: 1;
    min-width: 0;
    background: var(--surface-card);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    padding: 32px 40px 40px;
}
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 20px;
}
.page-breadcrumb a {
    color: var(--text-3);
    text-decoration: none;
    transition: color .15s;
}
.page-breadcrumb a:hover {
    color: var(--orange);
}
.page-breadcrumb svg {
    flex-shrink: 0;
    color: var(--text-3);
}
.page-breadcrumb span {
    color: var(--text-2);
}
.page-content > h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 8px;
    line-height: 1.3;
}
.page-content > h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--orange);
    border-radius: 2px;
    margin-top: 12px;
}

/* ─── Body ─── */
.page-body {
    color: var(--text-2);
    line-height: 1.85;
    font-size: 15px;
    margin-top: 24px;
}
.page-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    margin: 32px 0 12px;
}
.page-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    margin: 24px 0 8px;
}
.page-body p {
    margin: 0 0 14px;
}
.page-body ul, .page-body ol {
    margin: 0 0 16px;
    padding-left: 22px;
}
.page-body li {
    margin-bottom: 6px;
}
.page-body strong {
    color: var(--text-1);
}

@media (max-width: 768px) {
    .page-wrap {
        padding: 16px 0 40px;
    }
    .page-layout {
        flex-direction: column;
        gap: 16px;
    }
    .page-sidebar {
        width: 100%;
        position: static;
    }
    .sidebar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 12px 14px;
    }
    .sidebar-link {
        padding: 6px 12px;
        border-left: none;
        border-radius: var(--r-sm);
        font-size: 13px;
        background: var(--surface-2);
    }
    .sidebar-link .link-dot { display: none; }
    .sidebar-link.active {
        border-left: none;
        background: var(--orange);
        color: #fff;
    }
    .page-content {
        padding: 20px;
    }
    .page-content > h2 {
        font-size: 20px;
    }
}
</style>

<?php include __DIR__ . '/../layout/footer.php'; ?>
