@extends('layouts.marketing')

@section('title', __('app.homepage_hub_title'))

@section('content')
<div class="border-b border-border/90 bg-gradient-to-b from-amber-50/60 to-background">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wider text-primary/90 mb-1">{{ __('app.company_name') }}</p>
                <h1 class="text-2xl sm:text-3xl font-bold text-foreground">{{ __('app.homepage_hub_title') }}</h1>
                <p class="mt-2 text-sm text-foreground/70 max-w-xl">{{ __('app.homepage_hub_subtitle') }}</p>
            </div>
            <a href="{{ route('admin.dashboard') }}" class="inline-flex items-center gap-2 text-sm font-medium text-foreground/80 hover:text-primary shrink-0">
                <i class="fas fa-arrow-left text-xs"></i> {{ __('app.homepage_visual_back') }}
            </a>
        </div>
    </div>
</div>

<div class="max-w-5xl mx-auto px-4 sm:px-6 py-8 sm:py-10 space-y-4">
    <div class="grid gap-4 sm:grid-cols-2">
        <a href="{{ route('admin.homepage.pilates') }}"
           class="group rounded-2xl border border-border bg-card p-5 shadow-sm transition-shadow hover:shadow-md hover:border-primary/30">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <h2 class="text-lg font-semibold text-foreground group-hover:text-primary">{{ __('app.homepage_pilates_page_title') }}</h2>
                    <p class="mt-1 text-sm text-foreground/65">{{ __('app.homepage_hub_card_pilates_desc') }}</p>
                </div>
                <i class="fas fa-dumbbell text-amber-700/70 text-lg mt-0.5"></i>
            </div>
        </a>
        <a href="{{ route('admin.homepage.beauty') }}"
           class="group rounded-2xl border border-border bg-card p-5 shadow-sm transition-shadow hover:shadow-md hover:border-primary/30">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <h2 class="text-lg font-semibold text-foreground group-hover:text-primary">{{ __('app.homepage_beauty_page_title') }}</h2>
                    <p class="mt-1 text-sm text-foreground/65">{{ __('app.homepage_hub_card_beauty_desc') }}</p>
                </div>
                <i class="fas fa-spa text-amber-700/70 text-lg mt-0.5"></i>
            </div>
        </a>
    </div>

    <div class="rounded-2xl border border-dashed border-border/80 bg-muted/15 p-4 sm:p-5">
        <p class="text-sm font-medium text-foreground mb-2">{{ __('app.homepage_hub_more_heading') }}</p>
        <ul class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
            <li><a href="{{ route('admin.homepage.settings.edit') }}" class="text-primary hover:underline">{{ __('app.homepage_settings') }}</a></li>
            <li><a href="{{ route('admin.homepage.content.edit') }}" class="text-primary hover:underline">{{ __('app.homepage_content_editor') }}</a> · {{ __('app.homepage_hub_legacy_json_hint') }}</li>
            <li><a href="{{ route('admin.homepage.offerings.index') }}" class="text-primary hover:underline">{{ __('app.homepage_studio_nav_offerings') }}</a></li>
            <li><a href="{{ route('admin.homepage.testimonials.index') }}" class="text-primary hover:underline">{{ __('app.homepage_studio_nav_testimonials') }}</a></li>
            <li><a href="{{ route('home') }}" target="_blank" rel="noopener" class="text-primary hover:underline inline-flex items-center gap-1">{{ __('app.homepage_preview') }} <i class="fas fa-external-link-alt text-xs"></i></a></li>
        </ul>
    </div>
</div>
@endsection