<?php
require_once __DIR__ . '/config.php';
requireAdmin();
$pageTitle = 'Help & guide';
require_once __DIR__ . '/includes/header.php';
?>
<div class="admin-page admin-help-page">
    <h1>Admin panel – user guide</h1>
    <p class="admin-page-lead">Use this page as a reference for every option in the admin. Everything you change here updates the live website.</p>

    <section class="help-section">
        <h2>1. Dashboard</h2>
        <p>Shows counts and quick links. Use it to jump to Products, Gallery, Enquiries, Homepage sections, etc.</p>
    </section>

    <section class="help-section">
        <h2>2. Products</h2>
        <ul>
            <li><strong>Products</strong> – Add, edit, delete products. Each product has name, description, image, and category. Shown on the <em>Products</em> page on the site.</li>
            <li><strong>Categories</strong> – Create product categories (e.g. Corrugated Boxes, Custom Boxes). Products are grouped by category on the site.</li>
        </ul>
    </section>

    <section class="help-section">
        <h2>3. Pages &amp; media</h2>
        <ul>
            <li><strong>Pages (About, Tech)</strong> – Edit the content of <em>About us</em> and <em>Technology &amp; Quality</em> pages. You can also add multiple images per page; they appear as a scroll strip at the top.</li>
            <li><strong>Photo gallery</strong> – Upload images. They appear on the <em>Photo Gallery</em> page. No title or sorting; newest first.</li>
            <li><strong>Videos</strong> – Add videos in two ways: (1) <em>YouTube link</em> – paste the normal link (e.g. <code>https://www.youtube.com/watch?v=xxxxx</code>) or the full embed code; (2) <em>Upload file</em> – upload an MP4, WebM, or OGG file. Videos appear on the <em>Video gallery</em> page.</li>
        </ul>
    </section>

    <section class="help-section">
        <h2>4. Homepage</h2>
        <ul>
            <li><strong>Hero &amp; client section</strong> – (1) <em>Hero banner image</em> – the big image on the top of the home page; upload one image. (2) <em>Client section</em> – headline, subtext, and optional scroll images that appear above the stats row; you can upload multiple images for a scroll strip.</li>
            <li><strong>Features &amp; Why choose us</strong> – (1) <em>Why businesses choose us</em> – the three (or more) feature cards with icon and text; you can use emoji or upload an image as icon. (2) <em>Why choose us?</em> – the section with title, text, bullet list, button, and optional image on the right.</li>
            <li><strong>Stats (numbers)</strong> – The counters on the home page (e.g. “6+ Years of Excellence”, “50+ Employee”). Add, edit, or reorder them.</li>
            <li><strong>Our clients (logos)</strong> – Logos that appear in the “Our clients” strip on the home page. Add client name, logo image, and optional website link.</li>
            <li><strong>Footer</strong> – Footer columns (e.g. Quick links, Contact, Hours) and the bottom copyright line. You can use plain text or links (one per line; format: <code>Label|url</code>).</li>
        </ul>
    </section>

    <section class="help-section">
        <h2>5. Messages &amp; site</h2>
        <ul>
            <li><strong>Enquiries</strong> – List of enquiries sent from the <em>Enquiry</em> form on the site. Mark as read when done.</li>
            <li><strong>Settings &amp; logo</strong> – Site name, tagline, contact details (phone, email, address), social media links, and <em>site logo</em>. The logo appears in the header and footer. Upload an image to set the logo.</li>
            <li><strong>Email (SMTP)</strong> – Configure how the site sends email (e.g. when someone submits Enquiry or Contact form). Turn on SMTP and enter your mail server details so you receive those submissions by email.</li>
        </ul>
    </section>

    <section class="help-section">
        <h2>Quick reference – where things appear on the site</h2>
        <table class="admin-table help-table">
            <thead><tr><th>Admin option</th><th>Shows on website</th></tr></thead>
            <tbody>
                <tr><td>Products / Categories</td><td>Products page</td></tr>
                <tr><td>Pages (About, Tech)</td><td>About us, Technology &amp; Quality pages (+ image strips)</td></tr>
                <tr><td>Photo gallery</td><td>Photo Gallery page</td></tr>
                <tr><td>Videos</td><td>Video gallery page</td></tr>
                <tr><td>Hero &amp; client section (hero banner)</td><td>Top of Home page (big image)</td></tr>
                <tr><td>Hero &amp; client section (client block)</td><td>Home page – headline, subtext, scroll images above stats</td></tr>
                <tr><td>Features &amp; Why choose us</td><td>Home page – “Why businesses choose us” cards and “Why choose us?” block</td></tr>
                <tr><td>Stats</td><td>Home page – number counters (e.g. 6+ Years)</td></tr>
                <tr><td>Our clients</td><td>Home page – client logos strip</td></tr>
                <tr><td>Footer</td><td>Bottom of every page</td></tr>
                <tr><td>Settings &amp; logo</td><td>Site name, logo, contact info in header/footer and contact page</td></tr>
            </tbody>
        </table>
    </section>

    <section class="help-section">
        <h2>Login</h2>
        <p>Default login: <strong>admin</strong> / <strong>password</strong>. Change the password in the database for security.</p>
    </section>
</div>
<style>
.admin-help-page .help-section { margin-bottom: 2rem; }
.admin-help-page .help-section h2 { font-size: 1.25rem; margin: 0 0 0.5rem; color: var(--navy, #0f172a); border-bottom: 1px solid #e2e8f0; padding-bottom: 0.35rem; }
.admin-help-page .help-section ul { margin: 0.5rem 0 0 1.25rem; padding: 0; }
.admin-help-page .help-section li { margin-bottom: 0.5rem; line-height: 1.5; }
.admin-help-page .help-table { margin-top: 0.5rem; }
.admin-help-page code { background: #f1f5f9; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
</style>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
