ukaiautomation/includes/components/location-cta.php

<?php
/**
 * Location CTA Component
 * Displays location links at the bottom of service pages
 *
 * Usage:
 * include($_SERVER['DOCUMENT_ROOT'] . '/includes/components/location-cta.php');
 * Or: displayLocationCTA();
 */

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

/**
 * Display location CTA section
 *
 * @param string|null $serviceName Optional service name to customize the message
 */
function displayLocationCTA($serviceName = null) {
    global $locationData;

    $serviceText = $serviceName ? htmlspecialchars($serviceName) . ' services' : 'data services';
    ?>
    <section class="location-cta">
        <div class="container">
            <div class="location-cta-content">
                <h2>Serving Businesses Across the UK</h2>
                <p>We provide professional <?php echo $serviceText; ?> to businesses throughout the United Kingdom, with dedicated support for major business centres.</p>

                <div class="location-links">
                    <?php foreach ($locationData as $key => $location): ?>
                        <a href="<?php echo htmlspecialchars($location['url']); ?>" class="location-link">
                            <span class="location-icon">
                                <?php echo getLocationIcon($key); ?>
                            </span>
                            <span class="location-name"><?php echo htmlspecialchars($location['title']); ?></span>
                            <span class="location-region"><?php echo htmlspecialchars($location['region']); ?></span>
                        </a>
                    <?php endforeach; ?>
                </div>

                <div class="location-cta-footer">
                    <p>Not in one of these locations? We serve businesses throughout the UK with remote data services.</p>
                    <a href="/quote" class="btn btn-primary">Request a Consultation</a>
                </div>
            </div>
        </div>
    </section>

    <style>
        .location-cta {
            padding: 80px 0;
            background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
            color: white;
        }

        .location-cta-content {
            text-align: center;
            max-width: 1000px;
            margin: 0 auto;
        }

        .location-cta h2 {
            font-size: 2rem;
            margin-bottom: 15px;
        }

        .location-cta > .container > .location-cta-content > p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .location-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
        }

        .location-link {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 12px;
            padding: 20px 30px;
            text-decoration: none;
            color: white;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 150px;
        }

        .location-link:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-3px);
        }

        .location-icon {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .location-name {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .location-region {
            font-size: 0.85rem;
            opacity: 0.8;
        }

        .location-cta-footer {
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }

        .location-cta-footer p {
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .location-cta .btn-primary {
            background: #6d28d9;
            color: white;
            padding: 14px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .location-cta .btn-primary:hover {
            background: #14876f;
            transform: translateY(-2px);
        }

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

            .location-links {
                flex-direction: column;
                align-items: center;
            }

            .location-link {
                width: 100%;
                max-width: 250px;
            }
        }
    </style>
    <?php
}

/**
 * Get location icon based on city
 */
function getLocationIcon($locationKey) {
    $icons = [
        'london' => '🏙️',
        'manchester' => '🏭',
        'birmingham' => '🏛️',
        'edinburgh' => '🏴󠁧󠁢󠁳󠁣󠁴󠁿',
        'cardiff' => '🏴󠁧󠁢󠁷󠁬󠁳󠁿'
    ];
    return $icons[$locationKey] ?? '📍';
}

/**
 * Display compact location links (for footers or sidebars)
 */
function displayCompactLocationLinks() {
    global $locationData;
    ?>
    <div class="compact-locations">
        <span class="compact-locations-label">Serving:</span>
        <?php
        $locations = array_keys($locationData);
        foreach ($locations as $index => $key):
            $location = $locationData[$key];
        ?>
            <a href="<?php echo htmlspecialchars($location['url']); ?>"><?php echo htmlspecialchars($location['title']); ?></a><?php echo $index < count($locations) - 1 ? ', ' : ''; ?>
        <?php endforeach; ?>
        <span class="compact-locations-suffix">and the UK</span>
    </div>

    <style>
        .compact-locations {
            font-size: 0.9rem;
            color: #666;
        }

        .compact-locations a {
            color: #6d28d9;
            text-decoration: none;
        }

        .compact-locations a:hover {
            text-decoration: underline;
        }

        .compact-locations-label,
        .compact-locations-suffix {
            color: #888;
        }
    </style>
    <?php
}

// Auto-display if this file is included directly without function call
if (basename($_SERVER['SCRIPT_FILENAME']) === 'location-cta.php') {
    displayLocationCTA();
}