@extends('layouts.app-public')

@section('title', 'Documentation • InsightsReady')

@push('styles')
    <style>
        .page-head {
            padding: 28px 0 4px;
            background: linear-gradient(#ffffff, #f5f7f9);
            border-bottom: 1px solid var(--border)
        }

        h1 {
            font-size: clamp(26px, 4.4vw, 42px);
            line-height: 1.1;
            margin: 0 0 14px
        }

        .search {
            position: relative;
            margin: 8px 0 18px
        }

        .search input {
            width: 100%;
            padding: 14px 44px 14px 16px;
            border: 1px solid var(--border);
            border-radius: 14px;
            font-size: 16px;
            background: #fff;
            box-shadow: 0 1px 0 rgba(0, 0, 0, .02)
        }

        .search input::placeholder {
            color: #aab0b6
        }

        .search input:focus {
            outline: none;
            border-color: var(--brand);
            box-shadow: var(--focus)
        }

        .search svg {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            fill: #9aa3b2
        }

        .cat-grid {
            display: grid;
            grid-template-columns:1fr;
            gap: 14px;
            padding: 10px 0 26px
        }

        .cat-card {
            display: block;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 18px 18px;
            text-decoration: none
        }

        .cat-card:hover {
            box-shadow: var(--shadow)
        }

        .cat-card .title {
            font-weight: 800;
            margin: 0 0 6px
        }

        .cat-card .sub {
            margin: 0;
            color: var(--ink-700)
        }

        @media (min-width: 860px) {
            .cat-grid {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .popular {
            padding: 8px 0 80px
        }

        .popular h3 {
            margin: 6px 0 12px
        }

        .guide-list {
            display: grid;
            grid-template-columns:1fr;
            gap: 10px
        }

        .guide {
            display: block;
            text-decoration: none;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px 14px;
            color: var(--ink-900)
        }

        .guide:hover {
            box-shadow: var(--shadow)
        }
    </style>
@endpush

@section('content')
    <section class="page-head">
        <div class="container">
            <h1>Documentation</h1>
            <div class="search" role="search">
                <input type="search" placeholder="Search docs…" aria-label="Search documentation">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M10 18a8 8 0 1 1 5.292-14.004A8 8 0 0 1 10 18zm11 3-6.1-6.1" stroke="#9aa3b2"
                          stroke-width="2" fill="none" stroke-linecap="round"/>
                </svg>
            </div>
            <div class="cat-grid" aria-label="Categories">
                <a href="#" class="cat-card">
                    <div class="title">Getting Started</div>
                    <p class="sub">Setup, onboarding, first dashboard</p>
                </a>
                <a href="#" class="cat-card">
                    <div class="title">Data Sources</div>
                    <p class="sub">Connectors & permissions</p>
                </a>
                <a href="#" class="cat-card">
                    <div class="title">Reports</div>
                    <p class="sub">Library & customization</p>
                </a>
                <a href="#" class="cat-card">
                    <div class="title">AI Concierge</div>
                    <p class="sub">Prompts & governance</p>
                </a>
                <a href="#" class="cat-card">
                    <div class="title">Marketplace</div>
                    <p class="sub">Apps & partners</p>
                </a>
                <a href="#" class="cat-card">
                    <div class="title">Security</div>
                    <p class="sub">SOC 2, GDPR, SSO</p>
                </a>
            </div>
        </div>
    </section>

    <div class="container popular">
        <h3>Popular guides</h3>
        <div class="guide-list" role="list">
            <a href="#" class="guide" role="listitem">Connect Shopify</a>
            <a href="#" class="guide" role="listitem">Embed Power BI</a>
            <a href="#" class="guide" role="listitem">Invite your team</a>
            <a href="#" class="guide" role="listitem">Install an app</a>
            <a href="#" class="guide" role="listitem">Create API token</a>
        </div>
    </div>
@endsection