@extends('layouts.app')

@section('title', 'Recetas')

@section('content')

<style>
    .recipe-cat-heading { font-weight: 700; color: #5A3E22; margin: 1.4rem 0 0.6rem; font-size: 1.05rem; }
    .recipe-cat-heading:first-of-type { margin-top: 0.5rem; }
    .recipe-cat-card {
        display: block; background: #fff; border: 1px solid #ece2d4; border-radius: 16px;
        overflow: hidden; height: 100%; text-decoration: none; color: inherit;
        transition: transform .12s, box-shadow .12s, border-color .12s;
    }
    .recipe-cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(90,62,34,.12); border-color: #d8c4a8; }
    .recipe-cat-media { height: 140px; background-size: cover; background-position: center; position: relative; }
    .recipe-cat-lock {
        position: absolute; inset: 0; background: rgba(40,28,16,.45); color: #fff;
        display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem;
    }
    .recipe-cat-body { padding: 12px 14px; }
    .recipe-cat-name { font-weight: 600; font-size: 1rem; }
    .recipe-cat-meta { color: #8a7a66; font-size: 0.8rem; margin-top: 3px; }
</style>

<div class="page-title">Recetas</div>
<p class="page-subtitle">Elige una receta y empieza tu fermento. Agrupadas por clasificación.</p>

@php $user = auth()->user(); @endphp
@forelse($groups as $group)
    <div class="recipe-cat-heading">{{ $group['name'] }}</div>
    <div class="row g-3">
        @foreach($group['recipes'] as $row)
            @php
                $recipe  = $row['recipe'];
                $ferment = $row['ferment'];
                $canAccess = $user && $user->canAccess($ferment);
                $yieldValue = $recipe->base_yield_value !== null
                    ? rtrim(rtrim(number_format((float) $recipe->base_yield_value, 3, ',', '.'), '0'), ',')
                    : null;
                $cover = $recipe->image_url ?: $ferment->cover_image_url;
            @endphp
            <div class="col-6 col-md-4 col-lg-3">
                <a href="{{ $canAccess ? route('panel.receta', $recipe->slug) : route('suscripcion.show') }}" class="recipe-cat-card">
                    <div class="recipe-cat-media" style="background-image:url('{{ $cover }}');">
                        @unless($canAccess)<div class="recipe-cat-lock">🔒 Premium</div>@endunless
                    </div>
                    <div class="recipe-cat-body">
                        <div class="recipe-cat-name">{{ $recipe->name }}</div>
                        <div class="recipe-cat-meta">
                            {{ $ferment->name }} · {{ $ferment->default_duration_days }} días
                            @if($yieldValue) · {{ $yieldValue }} {{ $recipe->base_yield_unit }} @endif
                        </div>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
@empty
    <div class="fermenty-empty py-5">
        <div class="empty-icon">🧪</div>
        <div class="empty-title">Aún no hay recetas</div>
        <div class="empty-text">Pronto añadiremos recetas para empezar a fermentar.</div>
    </div>
@endforelse

@endsection