@extends('layouts.app')
@section('title', $page->meta_title ?: $page->title)
@section('meta_description', $page->meta_description)

@section('content')
<!-- Hero -->
<section style="background:var(--navy);padding:80px 24px;text-align:center;position:relative;overflow:hidden;">
    @if($page->banner_image)
    <div style="position:absolute;inset:0;background-image:url('{{ asset('uploads/pages/'.$page->banner_image) }}');background-size:cover;background-position:center;opacity:0.15;"></div>
    @endif
    <div style="position:relative;z-index:1;">
        <div style="font-size:11px;letter-spacing:3px;color:var(--red);font-weight:700;margin-bottom:12px;font-family:'Noto Sans JP',sans-serif;">ページ / PAGE</div>
        <h1 style="font-size:clamp(28px,5vw,52px);font-weight:900;color:white;margin-bottom:16px;">{{ $page->title }}</h1>
    </div>
</section>

<!-- Content -->
<section style="padding:80px 24px;max-width:900px;margin:0 auto;">
    <div class="prose-content" style="font-size:16px;line-height:1.8;color:#374151;">
        {!! $page->content !!}
    </div>
</section>

@push('styles')
<style>
.prose-content h1,.prose-content h2{font-weight:800;color:var(--navy);margin:1.5em 0 0.5em;}
.prose-content h2{font-size:1.5em;border-bottom:3px solid var(--red);padding-bottom:8px;}
.prose-content h3{font-size:1.2em;font-weight:700;color:#374151;margin:1.2em 0 0.4em;}
.prose-content p{margin-bottom:1em;}
.prose-content ul,.prose-content ol{padding-left:1.5em;margin-bottom:1em;}
.prose-content li{margin-bottom:0.4em;}
.prose-content a{color:var(--red);text-decoration:underline;}
.prose-content img{max-width:100%;border-radius:12px;margin:1em 0;}
.prose-content table{width:100%;border-collapse:collapse;margin:1em 0;}
.prose-content th,.prose-content td{padding:10px 14px;border:1px solid #e2e8f0;font-size:14px;}
.prose-content th{background:#f8fafc;font-weight:700;}
.prose-content blockquote{border-left:4px solid var(--red);padding:12px 20px;background:#fff5f5;border-radius:0 8px 8px 0;margin:1em 0;font-style:italic;}
</style>
@endpush
@endsection