@extends('front.layouts.app')

@section('title', $page->meta_title ?: $page->title . ' - Astrotalk')

@push('styles')
    @if($page->meta_description)
        <meta name="description" content="{{ $page->meta_description }}">
    @endif
    @if($page->meta_keywords)
        <meta name="keywords" content="{{ $page->meta_keywords }}">
    @endif
    @if($page->is_no_follow)
        <meta name="robots" content="noindex, nofollow">
    @endif
    @if($page->schema_markup)
        {!! $page->schema_markup !!}
    @endif
    <style>
        .cms-content {
            line-height: 1.8;
            color: #94a3b8;
        }

        .cms-content h1,
        .cms-content h2,
        .cms-content h3,
        .cms-content h4 {
            color: #ffffff;
            margin-top: 2rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }

        .cms-content h1 {
            font-size: 2.5rem;
        }

        .cms-content h2 {
            font-size: 2rem;
        }

        .cms-content p {
            margin-bottom: 1.5rem;
        }

        .cms-content ul,
        .cms-content ol {
            margin-bottom: 1.5rem;
            padding-left: 1.5rem;
        }

        .cms-content li {
            margin-bottom: 0.5rem;
        }

        .cms-content a {
            color: #eab308;
            text-decoration: underline;
        }

        .cms-content img {
            border-radius: 1rem;
            max-width: 100%;
            height: auto;
            margin: 2rem 0;
        }

        .cms-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 2rem 0;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 1rem;
            overflow: hidden;
        }

        .cms-content th,
        .cms-content td {
            padding: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            text-align: left;
        }

        .cms-content th {
            background: rgba(255, 255, 255, 0.03);
            color: white;
        }
    </style>
@endpush

@section('content')
    <div class="py-20 px-6">
        <div class="max-w-4xl mx-auto">
            <nav class="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500 mb-8">
                <a href="{{ route('home') }}" class="hover:text-yellow-500 transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3 h-3"></i>
                <span class="text-slate-300">{{ $page->title }}</span>
            </nav>

            <h1 class="text-4xl md:text-5xl font-black text-white mb-12 tracking-tight">{{ $page->title }}</h1>

            <div class="cms-content">
                {!! $page->content !!}
            </div>
        </div>
    </div>
@endsection