@extends('layouts.app')

@section('title', 'Help - Shopline App')

@section('content')
<div class="container-fluid">
    <!-- Sharp Header -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="p-4 border-start border-4" style="border-color: var(--accent-purple); background: var(--secondary-dark);">
                <h2 class="mb-2 fw-bold text-uppercase" style="color: var(--accent-purple); letter-spacing: 2px;">
                    <i class="bi bi-question-circle-fill"></i> HELP & DOCUMENTATION
                </h2>
                <p class="mb-0" style="color: var(--text-secondary);">
                    Learn how to use this Shopline embedded app
                </p>
            </div>
        </div>
    </div>

    <!-- Getting Started Guide -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-rocket-takeoff-fill"></i> GETTING STARTED
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <div class="p-4 h-100 border-start border-4" style="border-color: var(--accent-purple) !important; background: var(--secondary-dark);">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="p-2 border me-3" style="border-color: var(--accent-purple) !important; background: transparent;">
                                        <i class="bi bi-check-circle-fill" style="font-size: 1.5rem; color: var(--accent-purple);"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-0 fw-bold text-uppercase" style="color: var(--accent-purple); letter-spacing: 1px;">App Successfully Installed</h5>
                                        <p class="mb-0 small" style="color: var(--text-secondary);">Your app is ready to use</p>
                                    </div>
                                </div>
                                <p style="color: var(--text-primary);">
                                    This is a clean Shopline app template with authentication and webhook infrastructure already set up.
                                    You can now build your custom features on top of this foundation.
                                </p>
                                <div class="p-3 mt-3 border-start border-2" style="border-color: var(--accent-neon) !important; background: rgba(0, 245, 255, 0.05);">
                                    <p class="mb-0 small" style="color: var(--text-primary);">
                                        <i class="bi bi-info-circle-fill me-1" style="color: var(--accent-neon);"></i>
                                        <strong>Ready to build:</strong> This template includes OAuth, webhooks, token refresh, and multi-tenant support.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-gear-fill"></i> AVAILABLE FEATURES
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="p-3 border-start border-3" style="border-color: var(--success-neon) !important;">
                                <h6 class="fw-bold" style="color: var(--success-neon);">
                                    <i class="bi bi-shield-check"></i> OAuth Authentication
                                </h6>
                                <p class="mb-0 small" style="color: var(--text-primary);">
                                    Secure shop authentication with automatic token refresh
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="p-3 border-start border-3" style="border-color: var(--accent-neon) !important;">
                                <h6 class="fw-bold" style="color: var(--accent-neon);">
                                    <i class="bi bi-webhook"></i> Webhook Management
                                </h6>
                                <p class="mb-0 small" style="color: var(--text-primary);">
                                    Install/uninstall lifecycle webhooks with automatic cleanup
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="p-3 border-start border-3" style="border-color: var(--accent-purple) !important;">
                                <h6 class="fw-bold" style="color: var(--accent-purple);">
                                    <i class="bi bi-building"></i> Multi-Tenant Support
                                </h6>
                                <p class="mb-0 small" style="color: var(--text-primary);">
                                    Handle multiple shops with isolated data and sessions
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="p-3 border-start border-3" style="border-color: var(--warning-neon) !important;">
                                <h6 class="fw-bold" style="color: var(--warning-neon);">
                                    <i class="bi bi-arrow-repeat"></i> API Client
                                </h6>
                                <p class="mb-0 small" style="color: var(--text-primary);">
                                    Ready-to-use Shopline API service with rate limiting and retry logic
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Need Help -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-chat-dots-fill"></i> NEED HELP?
                </div>
                <div class="card-body">
                    <p style="color: var(--text-primary);">
                        For questions or support, please contact your development team or refer to the Shopline API documentation.
                    </p>
                    <a href="https://developers.shopline.com" target="_blank" class="btn btn-sm" style="background: var(--accent-neon); color: var(--primary-dark); border: none;">
                        <i class="bi bi-box-arrow-up-right"></i> View Shopline API Docs
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .card {
        border: 1px solid var(--border-color) !important;
        border-radius: 0 !important;
    }

    .card-header {
        background: var(--secondary-dark) !important;
        color: var(--accent-neon) !important;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
    }

    .card-body {
        background: var(--primary-dark) !important;
        color: var(--text-primary) !important;
    }
</style>
@endpush