@extends('layouts.app')

@section('title', 'Galerie – ' . config('hof.name'))
@section('description', 'Bilder vom Regenbogenhof Rudelswalde: Hof, Zimmer, Festsaal, Buffet und Eiscafé. Entdecken Sie das Landleben in Bildern.')

@section('content')

<section class="page-hero">
    <div class="container">
        <p class="crumbs"><a href="{{ route('home') }}">Start</a> · Galerie</p>
        <span class="eyebrow">Galerie</span>
        <h1>Der Regenbogenhof in Bildern.</h1>
        <p>Vom Vierseitenhof über die Gästezimmer bis zur festlich gedeckten Tafel: Klicken Sie sich durch {{ count($gallery) }} Impressionen von unserem Hof.</p>
    </div>
</section>

<section class="section" style="padding-top:clamp(24px,3vw,40px)">
    <div class="container">
        <div class="masonry">
            @foreach($gallery as $img)
                <a class="lb-item" href="{{ asset($img) }}" data-alt="Impression vom Regenbogenhof">
                    <img src="{{ asset($img) }}" alt="Impression vom Regenbogenhof Rudelswalde" loading="lazy">
                </a>
            @endforeach
        </div>

        <div style="text-align:center;margin-top:clamp(44px,6vw,72px)">
            <h2 style="font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px">Lust bekommen, vorbeizukommen?</h2>
            <p class="lede" style="max-width:46ch;margin:0 auto 26px">Fragen Sie Ihr Zimmer an oder planen Sie Ihr Fest bei uns auf dem Hof.</p>
            <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap">
                <a href="{{ route('home') }}#kontakt" class="btn btn--primary">Zimmer anfragen</a>
                <a href="{{ route('home') }}#gastronomie" class="btn btn--terra">Fest feiern</a>
            </div>
        </div>
    </div>
</section>

@endsection