<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}EnKart30 | Professional Home Decor & Painting Services - Kenya{% endblock %}</title>
    
    <!-- Meta tags for SEO -->
    <meta name="description" content="EnKart30 - Professional home decor, interior painting, and renovation services across Kenya. Based in Westlands, Nairobi. Transform your space with our expert team.">
    <meta name="keywords" content="home decor, interior painting, furniture, renovation, Kenya, Westlands, Nairobi">
    <meta name="author" content="EnKart30">
    
    <!-- External CSS Libraries -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
    {% block head %}{% endblock %}
        <meta name="google-site-verification" content="VHfWPOnHv-GU78W57MENThHVV-aO-yvwS710mtnGTdk" />
</head>
<body>
    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="flash-messages">
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <!-- Header -->
    <header id="header">
        <div class="container">
            <div class="header-container">
                <div class="header-main-line">
                    <div class="logo">
                        <h1>En<span>Kart30</span></h1>
                    </div>
                    <div class="header-actions">
                        <a href="https://wa.me/254721740913?text=Hello%20EnKart30!%20I'm%20interested%20in%20your%20services." target="_blank" class="whatsapp-icon">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        <button class="sidebar-toggle" id="sidebar-toggle">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>EnKart30</h3>
            <button class="sidebar-close" id="sidebar-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li><a href="#home"><i class="fas fa-home"></i> Home</a></li>
                <li><a href="#about"><i class="fas fa-info-circle"></i> About</a></li>
                <li><a href="#services"><i class="fas fa-palette"></i> Services</a></li>
                <li><a href="#murals"><i class="fas fa-paint-roller"></i> Murals</a></li>
                <li><a href="#videos"><i class="fas fa-video"></i> Videos</a></li>
                <li><a href="#branding"><i class="fas fa-sign"></i> Branding</a></li>
                <li><a href="#portfolio"><i class="fas fa-images"></i> Portfolio</a></li>
                <li><a href="#contact"><i class="fas fa-envelope"></i> Contact</a></li>
            </ul>
        </nav>
        <div class="sidebar-contact">
            <h4>Get in Touch</h4>
            <div class="contact-item">
                <i class="fas fa-map-marker-alt"></i>
                <span>Westlands, Nairobi, Kenya</span>
            </div>
            <div class="contact-item">
                <i class="fas fa-phone"></i>
                <a href="tel:+254721740913">+254 721 740 913</a>
            </div>
            <div class="contact-item">
                <i class="fab fa-whatsapp"></i>
                <a href="https://wa.me/254721740913" target="_blank">WhatsApp Chat</a>
            </div>
            <div class="contact-item">
                <i class="fas fa-envelope"></i>
                <a href="mailto:info@enkart30.com">info@enkart30.com</a>
            </div>
            <div class="contact-item">
                <i class="fas fa-clock"></i>
                <span>Monday - Saturday: 24 Hours<br>Sunday: Closed</span>
            </div>
            <div class="contact-item">
                <i class="fas fa-tools"></i>
                <span>Professional Services</span>
            </div>
            
            <!-- Social Links Below Contact Info -->
            <div class="sidebar-social">
                <h5>Follow Us</h5>
                <div class="social-links">
                    <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="#" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" title="YouTube"><i class="fab fa-youtube"></i></a>
                    <a href="#" title="TikTok"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar Overlay -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>

    <!-- Main Content -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-container">
                <!-- Brand Section -->
                <div class="footer-row">
                    <div class="footer-col footer-brand">
                        <h4>EnKart30</h4>
                        <p>Professional home decor and painting services based in Westlands, Nairobi. Transform your space with our expert team across Kenya.</p>
                        <div class="social-links">
                            <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
                            <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                            <a href="#" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
                
                <!-- Services and Contact Row -->
                <div class="footer-row footer-row-compact">
                    <div class="footer-col footer-services-compact">
                        <h4>Services</h4>
                        <ul class="footer-links-compact">
                            <li><a href="#services"><i class="fas fa-paint-brush"></i> House Painting</a></li>
                            <li><a href="#services"><i class="fas fa-couch"></i> Interior Decorating</a></li>
                            <li><a href="#services"><i class="fas fa-sign"></i> Signage</a></li>
                            <li><a href="#services"><i class="fas fa-portrait"></i> Portrait Drawing</a></li>
                            <li><a href="#services"><i class="fas fa-frame"></i> Picture Framing</a></li>
                        </ul>
                    </div>
                    
                    <div class="footer-col footer-contact-compact">
                        <h4>Contact</h4>
                        <div class="contact-info-compact">
                            <div class="contact-item-compact">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Westlands, Nairobi, Kenya</span>
                            </div>
                            <div class="contact-item-compact">
                                <i class="fas fa-phone"></i>
<a href="tel:+254721740913">+254 721 740 913</a><br>
<a href="tel:+254764540913">+254 764 540 913</a>
                            </div>
                            <div class="contact-item-compact">
                                <i class="fas fa-envelope"></i>
                                <a href="mailto:info@enkart30.com">info@enkart30.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <div class="footer-bottom-content">
                    <p>&copy; 2024 EnKart30. All rights reserved.</p>
                    <div class="footer-bottom-links">
                        <span>Westlands, Nairobi</span>
                        <span>•</span>
                        <a href="tel:+254721740913">+254 721 740 913</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>



    <!-- Image Lightbox Modal -->
    <div id="lightbox" class="lightbox">
        <div class="lightbox-content">
            <span class="lightbox-close">&times;</span>
            <img id="lightbox-image" src="" alt="">
            <div class="lightbox-caption">
                <h4 id="lightbox-title"></h4>
                <p id="lightbox-description"></p>
            </div>
            <div class="lightbox-nav">
                <button id="lightbox-prev" class="lightbox-btn">&#8249;</button>
                <button id="lightbox-next" class="lightbox-btn">&#8250;</button>
            </div>
        </div>
    </div>

    <!-- JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    
    {% block scripts %}{% endblock %}
</body>
</html>
