@extends('layouts.public')

@section('title', ($site['packages_title'] ?? 'Paket').' — '.($site['site_brand'] ?? 'Undangan Digital'))

@push('styles')
<style>
    .package-grid {
        display: grid;
        gap: 1rem;
    }

    @media (min-width: 800px) {
        .package-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    }

    .package-card {
        position: relative;
        overflow: hidden;
        animation: rise .7s ease both;
    }

    .package-card:nth-child(2) { animation-delay: .12s; }

    .package-card::before {
        content: "";
        position: absolute;
        inset: auto -2rem -3rem auto;
        width: 9rem;
        height: 9rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(47,107,85,.16), transparent 70%);
    }

    .package-card h2 {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 560;
        margin: 0 0 .4rem;
        letter-spacing: -0.03em;
    }

    .package-card .price {
        font-family: var(--font-display);
        font-size: 2.1rem;
        color: var(--leaf-deep);
        margin: 1rem 0;
    }

    .package-card ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: .55rem;
        color: var(--ink-soft);
    }

    .package-card li {
        padding-left: 1.2rem;
        position: relative;
    }

    .package-card li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .55rem;
        width: .45rem;
        height: .45rem;
        border-radius: 50%;
        background: var(--leaf);
    }

    .package-card .btn {
        margin-top: 1.4rem;
    }
</style>
@endpush

@section('content')
    <main class="page-shell">
        <header class="page-header">
            <span class="eyebrow">{{ $site['packages_eyebrow'] }}</span>
            <h1>{{ $site['packages_title'] }}</h1>
            <p>{{ $site['packages_subtitle'] }}</p>
        </header>

        <div class="package-grid">
            @forelse ($packages as $package)
                <article class="panel package-card">
                    <h2>{{ $package->name }}</h2>
                    <p class="muted" style="margin:0">{{ $package->description }}</p>
                    <div class="price">{{ $package->formattedPrice() }}</div>
                    <ul>
                        @foreach ($package->features ?? [] as $feature)
                            <li>{{ $feature }}</li>
                        @endforeach
                    </ul>
                    <a class="btn btn-primary" href="{{ route('orders.create', $package) }}">Order {{ $package->name }}</a>
                </article>
            @empty
                <p class="muted">Paket belum tersedia.</p>
            @endforelse
        </div>
    </main>
@endsection