@extends('layouts.app')

@section('content')
    <div class="hero-section position-relative overflow-hidden text-center bg-light" style="min-height: 450px;">
        @if ($hero)
            <img src="{{ asset('storage/' . $hero->path) }}" class="position-absolute top-0 start-0 w-100 h-100"
                style="object-fit: cover; z-index: 0;" alt="{{ $hero->alt_text }}">
            <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark" style="opacity: 0.3; z-index: 1;"></div>
        @endif
        <div class="container position-relative py-5" style="z-index: 2;">
            <div class="row py-lg-5">
                <div class="col-lg-6 col-md-8 mx-auto text-white">
                    <h1 class="display-3 fw-bold mb-4">オープン・ドア・チャペル</h1>
                    <p class="lead mb-4">札幌にある国際的な視野を持つ家族が集まる教会</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5">
        @if ($page)
            <x-content-blocks :blocks="$page->content" />
        @else
            {{-- Fallback content if page 'home' doesn't exist yet --}}
            <div class="text-center py-5">
                <p class="text-muted">管理画面の「ページ」から Slug: home のページを作成し、コンテンツを追加してください。</p>
            </div>
        @endif
    </div>

    <style>
        .transition-hover {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .transition-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
        }
    </style>
@endsection