@extends('taxes_subdomain.layouts.subdomain.houseoeste.layout.app')

@section('content')

    <div class="ho-detalle">
        <a href="/" class="ho-detalle__volver">&lsaquo; Volver a la carta</a>

        <div
            class="ho-detalle__foto"
            style="@if($producto->foto) background-image: url('{{ asset("storage/productos/$producto->foto") }}'); @endif"
        ></div>

        <h1 class="ho-detalle__nombre">{{ $producto->descripcion }}</h1>
        @if($producto->texto_largo)
            <p class="ho-detalle__texto">{{ $producto->texto_largo }}</p>
        @endif

        @if($taxes_subdomain->data->landing->show_precio ?? true)
            <div class="ho-detalle__precio">${{ number_format($producto->precio_final, 2, ',', '.') }}</div>
        @endif
    </div>

@endsection

@section('scripts')
    <style>
        .ho-detalle {
            min-height: 100vh;
            background: #1B1613;
            color: #F5EDE1;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 20px;
            max-width: 720px;
            margin: 0 auto;
        }
        .ho-detalle__volver {
            display: inline-block;
            color: #F2A65A;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            margin-bottom: 16px;
        }
        .ho-detalle__foto {
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 14px;
            background-color: #2E2521;
            background-size: cover;
            background-position: center;
            margin-bottom: 18px;
        }
        .ho-detalle__nombre {
            font-family: 'Fraunces', Georgia, serif;
            font-weight: 700;
            font-size: 1.4rem;
            margin: 0 0 8px;
        }
        .ho-detalle__texto {
            color: #A0907F;
            font-size: 0.9rem;
            margin: 0 0 16px;
        }
        .ho-detalle__precio {
            font-family: 'Space Mono', monospace;
            font-weight: 700;
            font-size: 1.3rem;
            color: #F2A65A;
        }
    </style>
@endsection