@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/policy-pages.css') }}">
@endpush

@section('content')
<div class="policy-page" data-theme="light">
    <section class="policy-hero" style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); min-height: 320px;">
        <div class="container policy-hero-content">
            <h1>Legal & Policy Center</h1>
            <p class="lead text-white-50 mb-0" style="max-width: 600px;">
                Transparent policies governing Gletra marketplace, home services, chat, calls, wallet, and seller operations.
            </p>
        </div>
    </section>

    <nav class="policy-breadcrumb">
        <div class="container">
            <a href="{{ route('home') }}">Home</a>
            <span class="mx-2 text-muted">/</span>
            <span aria-current="page">Legal Center</span>
        </div>
    </nav>

    <div class="container">
        <div class="policy-index-grid">
            @foreach($policies as $p)
                <a href="{{ route('policies.show', $p->slug) }}" class="policy-index-card">
                    <h3>{{ $p->title }}</h3>
                    <p>{{ $p->short_description }}</p>
                    <div class="meta">
                        <span><i class="bi bi-clock me-1"></i>{{ $p->reading_time }} min</span>
                        <span><i class="bi bi-calendar3 me-1"></i>{{ $p->updated_at->format('M Y') }}</span>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</div>
@endsection