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

@section('content')

    <div class="arp-detalle">
        <a href="/" class="arp-detalle__volver">&lsaquo; Volver al catálogo</a>

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

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

        <div class="arp-detalle__precio">${{ number_format($producto->precio_final, 2, ',', '.') }}</div>

        <a href="/" class="arp-detalle__cta">Ver en el catálogo para agregar al carrito</a>
    </div>

@endsection

@section('scripts')
    <style>
        .arp-detalle {
            min-height: 100vh;
            background: #F7F5F2;
            color: #1A1A1A;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 20px;
            max-width: 720px;
            margin: 0 auto;
        }
        .arp-detalle__volver {
            display: inline-block;
            color: #8A6D3B;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            margin-bottom: 16px;
        }
        .arp-detalle__foto {
            width: 100%;
            aspect-ratio: 4 / 3;
            border-radius: 10px;
            background-color: #E9E5DE;
            background-size: cover;
            background-position: center;
            margin-bottom: 18px;
        }
        .arp-detalle__nombre {
            font-weight: 700;
            font-size: 1.4rem;
            margin: 0 0 8px;
        }
        .arp-detalle__texto {
            color: #5A5650;
            font-size: 0.95rem;
            margin: 0 0 16px;
            white-space: pre-line;
        }
        .arp-detalle__precio {
            font-weight: 800;
            font-size: 1.5rem;
            color: #1A1A1A;
            margin-bottom: 20px;
        }
        .arp-detalle__cta {
            display: inline-block;
            background: #1A1A1A;
            color: #fff;
            padding: 12px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
        }
    </style>
@endsection