ukaiautomation/includes/components/related-services.php

<?php
/**
 * Related Services Component
 * Displays related services at the bottom of service pages
 *
 * Usage:
 * $currentService = 'web-scraping';
 * include($_SERVER['DOCUMENT_ROOT'] . '/includes/components/related-services.php');
 */

// Include URL config if not already loaded
if (!isset($serviceData)) {
    include($_SERVER['DOCUMENT_ROOT'] . '/includes/url-config.php');
}

/**
 * Display related services section
 *
 * @param string $currentService Current service key
 * @param int $maxServices Maximum number of related services to show
 */
function displayRelatedServices($currentService, $maxServices = 3) {
    global $serviceData, $relatedServices;

    $related = $relatedServices[$currentService] ?? [];

    if (empty($related)) {
        return;
    }

    // Limit to max services
    $related = array_slice($related, 0, $maxServices);
    ?>
    <section class="related-services">
        <div class="container">
            <h2>Related Services</h2>
            <p class="section-intro">Explore our other data services that complement <?php echo htmlspecialchars($serviceData[$currentService]['shortTitle'] ?? 'this service'); ?>.</p>

            <div class="related-services-grid">
                <?php foreach ($related as $serviceKey): ?>
                    <?php if (isset($serviceData[$serviceKey])): ?>
                        <?php $service = $serviceData[$serviceKey]; ?>
                        <a href="<?php echo htmlspecialchars($service['url']); ?>" class="related-service-card">
                            <div class="service-icon">
                                <?php if (isset($service['icon'])): ?>
                                    <img src="/assets/images/<?php echo htmlspecialchars($service['icon']); ?>"
                                         alt="<?php echo htmlspecialchars($service['title']); ?>"
                                         loading="lazy">
                                <?php endif; ?>
                            </div>
                            <h3><?php echo htmlspecialchars($service['title']); ?></h3>
                            <p><?php echo htmlspecialchars($service['description']); ?></p>
                            <span class="learn-more">Learn More &rarr;</span>
                        </a>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <style>
        .related-services {
            padding: 80px 0;
            background: #f8f9fa;
        }

        .related-services h2 {
            text-align: center;
            font-size: 2rem;
            color: #7c3aed;
            margin-bottom: 15px;
        }

        .related-services .section-intro {
            text-align: center;
            color: #666;
            max-width: 600px;
            margin: 0 auto 40px;
        }

        .related-services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .related-service-card {
            background: white;
            padding: 30px;
            border-radius: 12px;
            text-decoration: none;
            color: inherit;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            display: block;
        }

        .related-service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .related-service-card .service-icon {
            width: 60px;
            height: 60px;
            margin-bottom: 20px;
        }

        .related-service-card .service-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .related-service-card h3 {
            font-size: 1.25rem;
            color: #7c3aed;
            margin-bottom: 10px;
        }

        .related-service-card p {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .related-service-card .learn-more {
            color: #6d28d9;
            font-weight: 500;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .related-services {
                padding: 60px 20px;
            }

            .related-services-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
    <?php
}

// Auto-display if $currentService is set
if (isset($currentService)) {
    displayRelatedServices($currentService);
}