<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Legal Pages | {{ $companyName }}</title>
    <meta name="description" content="Legal and compliance documents for {{ $companyName }}.">
    <meta name="robots" content="index,follow">
    <link rel="canonical" href="{{ url()->current() }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@600;700&display=swap" rel="stylesheet">
    <style>
        :root { --ink:#0f172a; --muted:#64748b; --line:#dbe4f0; --bg:#f8fafc; --panel:#ffffff; --primary:#0b1f3a; --accent:#d01c2e; }
        * { box-sizing:border-box; }
        body { margin:0; font-family:"Manrope",sans-serif; color:var(--ink); background:radial-gradient(1200px 500px at 18% -20%,#dbeafe,transparent 55%),var(--bg); }
        a { color:inherit; text-decoration:none; }
        .container { max-width:1120px; margin:0 auto; padding:0 16px; }
        .header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
        .nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
        .logo { font-family:"Sora",sans-serif; font-weight:700; }
        .nav-actions { display:flex; flex-wrap:wrap; gap:8px; }
        .btn { border:1px solid var(--line); border-radius:999px; padding:9px 14px; font-size:13px; font-weight:700; background:#fff; }
        .btn.primary { border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent)); }
        .hero { padding:44px 0 26px; }
        .eyebrow { display:inline-flex; border-radius:999px; padding:6px 12px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#334155; background:#e2e8f0; }
        h1 { margin:14px 0 8px; font-family:"Sora",sans-serif; font-size:clamp(1.8rem,3.4vw,2.8rem); }
        .hero p { margin:0; max-width:860px; color:var(--muted); }
        .grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; }
        .card { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:16px; box-shadow:0 10px 24px rgba(15,23,42,.06); transition:transform .2s ease, box-shadow .2s ease; }
        .card:hover { transform:translateY(-2px); box-shadow:0 14px 26px rgba(15,23,42,.12); }
        .card h2 { margin:0 0 8px; font-size:1rem; font-family:"Sora",sans-serif; }
        .card p { margin:0; font-size:13px; color:var(--muted); }
        .footer { margin:26px 0 20px; border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; }
        .meta { color:var(--muted); font-size:13px; line-height:1.7; }
        @media (max-width:1020px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
        @media (max-width:720px) { .grid { grid-template-columns:1fr; } .nav { align-items:flex-start; padding:12px 0; } }
    </style>
</head>
<body>
    <header class="header">
        <div class="container nav">
            <div class="logo">{{ $companyName }}</div>
            <div class="nav-actions">
                <a class="btn" href="{{ route('home') }}">Home</a>
                <a class="btn" href="{{ route('register.franchise') }}">Franchise</a>
                <a class="btn primary" href="{{ route('login.user') }}">Member Login</a>
            </div>
        </div>
    </header>

    <main class="container">
        <section class="hero">
            <span class="eyebrow">Legal & Compliance</span>
            <h1>All Legal Pages</h1>
            <p>
                These documents define the policies, rights, and obligations for members, franchise partners, and customers of {{ $companyName }}.
            </p>

            <div class="grid">
                @forelse($pages as $page)
                    <a href="{{ route('legal.show', $page->slug) }}" class="card">
                        <h2>{{ $page->title }}</h2>
                        <p>View legal details and latest policy text.</p>
                    </a>
                @empty
                    <div class="card">
                        <h2>No legal pages published</h2>
                        <p>Please add legal pages from Admin CMS.</p>
                    </div>
                @endforelse
            </div>
        </section>

        <section class="footer">
            <div class="meta">{{ $companyName }}</div>
            <div class="meta">{{ $companyAddress }}</div>
            <div class="meta">Phone: {{ $companyPhone }} | Email: {{ $companyEmail }}</div>
            <div class="meta">Made By: <a href="https://akrsworld.in" target="_blank" rel="noopener noreferrer">AKRS WORLD</a></div>
        </section>
    </main>
</body>
</html>
