<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/config.php';
$map_settings = get_map_settings();
$map_q = !empty($map_settings['address_query']) ? $map_settings['address_query'] : $map_settings['latitude'] . ',' . $map_settings['longitude'];
include BASE_PATH . '/include/header.php';
?>

<main id="content">
    <!-- Hero Section -->
    <section class="subpage-hero">
        <div class="container">
            <h1>Our <span>Locations</span></h1>
            <p>We provide expert chimney and fireplace services across the entire region. Find our service area on the
                map below.</p>
        </div>
    </section>

    <!-- Breadcrumbs -->
    <div class="breadcrumb-container">
        <div class="container">
            <a href="/"><i class="fas fa-home"></i> Home</a> / <span>Our Locations</span>
        </div>
    </div>

    <!-- Map Section -->
    <section class="section-padding p-0">
        <div class="google-map-container" style="height: 600px; position: relative;">
            <iframe id="google-map-iframe" class="w-100 h-100 border-0"
                src="https://www.google.com/maps?q=<?php echo urlencode($map_q); ?>&hl=en&z=<?php echo $map_settings['zoom']; ?>&output=embed"
                allowfullscreen="" referrerpolicy="no-referrer-when-downgrade">
            </iframe>
            <button class="map-type-control" id="map-type-toggle"
                style="position: absolute; top: 20px; right: 20px; z-index: 10; background: #ffffff; color: #1a202c !important; border: 1px solid rgba(0,0,0,0.1); padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-weight: 700; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s ease; -webkit-font-smoothing: antialiased;">
                <i class="fas fa-globe" style="color: #F49321;"></i>
                <span id="map-type-text" style="color: #1a202c !important;">Satellite View</span>
            </button>
        </div>
    </section>

    <!-- Service Areas List -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="row g-4 text-center">
                <div class="col-lg-12 mb-4">
                    <h2 class="section-title">Areas We Serve</h2>
                    <p class="lead text-muted">Providing reliable chimney services to residential and commercial
                        properties.</p>
                </div>
                <div class="col-md-4">
                    <div class="pro-card">
                        <i class="fas fa-city fa-2x text-primary mb-3"></i>
                        <h4>Main City</h4>
                        <p class="text-muted mb-0">Full coverage within city limits and surrounding suburbs.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="pro-card">
                        <i class="fas fa-home fa-2x text-primary mb-3"></i>
                        <h4>Residential</h4>
                        <p class="text-muted mb-0">Specialized services for homes, apartments, and townhouses.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="pro-card">
                        <i class="fas fa-building fa-2x text-primary mb-3"></i>
                        <h4>Commercial</h4>
                        <p class="text-muted mb-0">Professional maintenance for restaurants, hotels, and offices.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toggleButton = document.getElementById('map-type-toggle');
        const mapIframe = document.getElementById('google-map-iframe');
        const mapTypeText = document.getElementById('map-type-text');
        const icon = toggleButton.querySelector('i');
        let isSatellite = false;

        const roadmapUrl = 'https://www.google.com/maps?q=<?php echo urlencode($map_q); ?>&hl=en&z=<?php echo $map_settings['zoom']; ?>&output=embed';
        const satelliteUrl = 'https://www.google.com/maps?q=<?php echo urlencode($map_q); ?>&hl=en&z=<?php echo $map_settings['zoom']; ?>&t=h&output=embed';

        toggleButton.addEventListener('click', function () {
            this.style.opacity = '0.7';
            if (isSatellite) {
                mapIframe.src = roadmapUrl;
                mapTypeText.textContent = 'Satellite View';
                icon.className = 'fas fa-globe';
                icon.style.color = '#F49321';
                isSatellite = false;
            } else {
                mapIframe.src = satelliteUrl;
                mapTypeText.textContent = 'Map View';
                icon.className = 'fas fa-map';
                icon.style.color = '#1C418C';
                isSatellite = true;
            }
            setTimeout(() => {
                this.style.opacity = '1';
            }, 300);
        });
    });
</script>

<?php include BASE_PATH . '/include/footer.php'; ?>