<?php

if (!defined('ABSPATH')) {
    exit;
}

function wnc_render_help_page() {
    if (!current_user_can('manage_options')) {
        return;
    }
    ?>
    <div class="wrap">
        <h1>Where Next Help</h1>

        <div class="postbox" style="padding:20px;margin-bottom:20px;">
            <h2>Shortcode</h2>
            <p>Use this shortcode inside posts, pages, or templates:</p>
            <code>[where_next_button]</code>
        </div>

        <div class="postbox" style="padding:20px;margin-bottom:20px;">
            <h2>Required App Link</h2>
            <p>The connector creates links like:</p>
            <code>Where Next compatible import link</code>
        </div>

        <div class="postbox" style="padding:20px;margin-bottom:20px;">
            <h2>Icon Files</h2>
            <p>Upload your PNG icons to:</p>
            <code>wp-content/plugins/where-next-connector/assets/journey-pin.png</code><br>
            <code>wp-content/plugins/where-next-connector/assets/family-pin.png</code>
        </div>

        <div class="postbox" style="padding:20px;margin-bottom:20px;">
            <h2>Recommended Field Mapping</h2>
            <ul style="list-style:disc;margin-left:22px;">
                <li><strong>Address:</strong> of5_address</li>
                <li><strong>Postcode:</strong> of5_postcode</li>
                <li><strong>Website:</strong> of5_website</li>
                <li><strong>Booking URL:</strong> of5_booking_url</li>
                <li><strong>Pricing:</strong> of5_pricing_table</li>
                <li><strong>Latitude:</strong> of5_latitude</li>
                <li><strong>Longitude:</strong> of5_longitude</li>
                <li><strong>Opening Times:</strong> of5_opening_times</li>
                <li><strong>Parking:</strong> of5_parking</li>
                <li><strong>Phone:</strong> of5_phone</li>
            </ul>
        </div>

        <div class="postbox" style="padding:20px;margin-bottom:20px;">
            <h2>Pro Features</h2>
            <ul style="list-style:disc;margin-left:22px;">
                <li>Automatic placement</li>
                <li>Sticky and floating buttons</li>
                <li>Desktop QR code</li>
                <li>Button templates</li>
                <li>Device targeting</li>
                <li>Click analytics</li>
            </ul>
        </div>
    </div>
    <?php
}