<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collnetwork Technology LTD - Building Sustainable Networks</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
        }

        header {
            background: linear-gradient(135deg, #6a1b9a 0%, #00897b 100%);
            color: white;
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo-container img {
            height: 50px;
            width: auto;
        }

        .logo-text {
            font-size: 1.3rem;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #ffd700;
        }

        .hero {
            background: linear-gradient(135deg, #6a1b9a 0%, #00897b 100%);
            color: white;
            text-align: center;
            padding: 150px 2rem 100px;
            margin-top: 60px;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.3rem;
            font-style: italic;
            margin-bottom: 2rem;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            color: #6a1b9a;
            margin-bottom: 1rem;
        }

        .section-subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 3rem;
            font-size: 1.1rem;
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .value-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s;
            border-top: 4px solid #6a1b9a;
        }

        .value-card:hover {
            transform: translateY(-10px);
        }

        .value-card h3 {
            color: #6a1b9a;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .service-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            padding: 2rem;
            transition: transform 0.3s;
            border-left: 4px solid #00897b;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        .service-card h3 {
            color: #6a1b9a;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .service-card ul {
            list-style: none;
            padding-left: 0;
        }

        .service-card li {
            padding: 0.5rem 0;
            padding-left: 1.5rem;
            position: relative;
        }

        .service-card li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #00897b;
            font-weight: bold;
        }

        .about-section {
            background: #f8f9fa;
        }

        .contact-section {
            background: linear-gradient(135deg, #6a1b9a 0%, #00897b 100%);
            color: white;
        }

        .contact-section .section-title {
            color: white;
        }

        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #333;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .submit-btn {
            background: #6a1b9a;
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
        }

        .submit-btn:hover {
            background: #8e24aa;
        }

        .submit-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .contact-info {
            text-align: center;
            margin-top: 3rem;
        }

        .contact-info a {
            color: white;
            text-decoration: none;
            margin: 0 1rem;
            font-size: 1.1rem;
        }

        .contact-info a:hover {
            color: #ffd700;
        }

        footer {
            background: #1a1a1a;
            color: white;
            text-align: center;
            padding: 2rem;
        }

        /* Live Support Widget */
        .live-support-widget {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
        }

        .support-button {
            background: linear-gradient(135deg, #6a1b9a 0%, #00897b 100%);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 25px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .support-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        }

        .support-button::before {
            content: "💬";
            font-size: 1.5rem;
        }

        .support-frame-container {
            display: none;
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 400px;
            height: 600px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
            overflow: hidden;
            z-index: 9998;
        }

        .support-frame-container.active {
            display: block;
            animation: slideUp 0.3s ease-out;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .support-header {
            background: linear-gradient(135deg, #6a1b9a 0%, #00897b 100%);
            color: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .support-header h3 {
            margin: 0;
            font-size: 1.1rem;
        }

        .close-support {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-support:hover {
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
        }

        .support-frame {
            width: 100%;
            height: calc(100% - 50px);
            border: none;
        }

        .form-message {
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            text-align: center;
        }

        .form-message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .form-message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }

            .nav-links {
                gap: 1rem;
                font-size: 0.9rem;
            }

            .logo-text {
                font-size: 1rem;
            }

            .logo-container img {
                height: 40px;
            }

            .services-grid,
            .values-grid {
                grid-template-columns: 1fr;
            }

            .support-frame-container {
                width: 90%;
                right: 5%;
                height: 500px;
            }

            .live-support-widget {
                bottom: 20px;
                right: 20px;
            }

            .support-button {
                padding: 12px 20px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <div class="logo-container">
                <img src="https://collnetwork.net/logo/logo.png" alt="Collnetwork Technology Logo">
                <span class="logo-text">Collnetwork Technology</span>
            </div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="home" class="hero">
        <h1>Collnetwork Technology LTD</h1>
        <p>"...building a sustainable network"</p>
        <p>Empowering businesses through reliable, scalable, and sustainable ICT solutions</p>
    </section>

    <section id="about" class="about-section">
        <div class="container">
            <h2 class="section-title">About Us</h2>
            <p style="text-align: center; max-width: 800px; margin: 0 auto 2rem; font-size: 1.1rem;">
                Collnetwork Technology is a forward-thinking ICT solutions provider dedicated to empowering businesses through reliable, scalable, and sustainable technology infrastructure. Founded with a vision to bridge the digital gap across Africa, we specialize in wireless and wired networking, IP telephony, hardware repairs, surveillance systems and business technology solutions that drive performance, security, and innovation.
            </p>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem;">
                <div style="background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-top: 4px solid #6a1b9a;">
                    <h3 style="color: #6a1b9a; margin-bottom: 1rem;">Our Vision</h3>
                    <p>To become a leading ICT solutions provider in Africa, known for connecting people and systems through secure, cutting-edge, and sustainable technology.</p>
                </div>
                <div style="background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-top: 4px solid #00897b;">
                    <h3 style="color: #00897b; margin-bottom: 1rem;">Our Mission</h3>
                    <p>To provide reliable, cost-effective ICT Networking services and solutions that empower businesses, institutions, and communities to thrive in a digital world through innovative technology and exceptional service.</p>
                </div>
            </div>

            <h3 class="section-title" style="margin-top: 4rem; font-size: 2rem;">Our Core Values</h3>
            <p class="section-subtitle">The principles that guide our work and define our commitment to excellence</p>

            <div class="values-grid">
                <div class="value-card">
                    <h3>Innovation</h3>
                    <p>Embracing cutting-edge technologies to deliver forward-thinking solutions</p>
                </div>
                <div class="value-card">
                    <h3>Integrity</h3>
                    <p>Maintaining the highest standards of honesty and transparency in all our dealings</p>
                </div>
                <div class="value-card">
                    <h3>Customer-Centricity</h3>
                    <p>Putting our clients' needs at the heart of everything we do</p>
                </div>
                <div class="value-card">
                    <h3>Sustainability</h3>
                    <p>Building environmentally conscious and long-lasting technology solutions</p>
                </div>
            </div>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <h2 class="section-title">Our Services</h2>
            <p class="section-subtitle">Comprehensive ICT solutions designed to transform your business operations and drive growth</p>

            <div class="services-grid">
                <div class="service-card">
                    <h3>IP Telephony & Unified Communication</h3>
                    <p>Voice over IP (VoIP) services, telephone infrastructure, and unified communications systems for businesses.</p>
                    <ul>
                        <li>VoIP Services</li>
                        <li>IP Phone Installation</li>
                        <li>Conference Call Servers</li>
                        <li>Unified Communications</li>
                    </ul>
                </div>

                <div class="service-card">
                    <h3>Networking Services</h3>
                    <p>Comprehensive network solutions including LAN design, WiFi deployment, and fiber optic installations.</p>
                    <ul>
                        <li>LAN Design & Deployment</li>
                        <li>Campus WiFi Networks</li>
                        <li>VPN Deployment</li>
                        <li>Fiber Optic Networks</li>
                    </ul>
                </div>

                <div class="service-card">
                    <h3>CCTV & Surveillance</h3>
                    <p>Advanced surveillance systems with remote monitoring capabilities and mobile app integration.</p>
                    <ul>
                        <li>Digital Camera Installation</li>
                        <li>Smart Surveillance</li>
                        <li>Remote Monitoring</li>
                        <li>Mobile Integration</li>
                    </ul>
                </div>

                <div class="service-card">
                    <h3>Hardware & Repairs</h3>
                    <p>Complete hardware support including diagnostics, repairs, and maintenance contracts.</p>
                    <ul>
                        <li>Hardware Diagnostics</li>
                        <li>Repair Services</li>
                        <li>Maintenance Contracts</li>
                        <li>Server Installation</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="contact-section">
        <div class="container">
            <h2 class="section-title">Contact Us</h2>
            <p class="section-subtitle">Let's build a connected workforce — together</p>

            <div class="contact-form">
                <div id="formMessage"></div>
                <form id="contactForm">
                    <div class="form-group">
                        <label for="name">Full Name *</label>
                        <input type="text" id="name" name="name" required>
                    </div>

                    <div class="form-group">
                        <label for="email">Email Address *</label>
                        <input type="email" id="email" name="email" required>
                    </div>

                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" name="phone">
                    </div>

                    <div class="form-group">
                        <label for="service">Service Interested In</label>
                        <select id="service" name="service">
                            <option value="">Select a service</option>
                            <option value="ip-telephony">IP Telephony & Unified Communication</option>
                            <option value="networking">Networking Services</option>
                            <option value="cctv">CCTV & Surveillance</option>
                            <option value="hardware">Hardware & Repairs</option>
                            <option value="other">Other</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="message">Message *</label>
                        <textarea id="message" name="message" required></textarea>
                    </div>

                    <button type="submit" class="submit-btn" id="submitBtn">Send Message</button>
                </form>
            </div>

            <div class="contact-info">
                <p style="font-size: 1.2rem; margin-bottom: 1rem;">Get in touch with us today!</p>
                <div>
                    <a href="mailto:info@collnetwork.net">📧 info@collnetwork.net</a>
                    <a href="tel:+2349128172843">📞 +234 912 817 2843</a>
                    <a href="https://www.collnetwork.net" target="_blank">🌐 www.collnetwork.net</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Live Support Widget -->
    <div class="live-support-widget">
        <button class="support-button" id="supportButton">Live Support</button>
    </div>

    <div class="support-frame-container" id="supportFrame">
        <div class="support-header">
            <h3>Live Customer Support</h3>
            <button class="close-support" id="closeSupport">×</button>
        </div>
        <iframe class="support-frame" src="https://customersupport.collnetwork.net" title="Live Support"></iframe>
    </div>

    <footer>
        <p>&copy; 2025 Collnetwork Technology LTD. All rights reserved.</p>
        <p>"...building a sustainable network"</p>
    </footer>

    <script>
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Live Support Widget
        const supportButton = document.getElementById('supportButton');
        const supportFrame = document.getElementById('supportFrame');
        const closeSupport = document.getElementById('closeSupport');

        supportButton.addEventListener('click', function() {
            supportFrame.classList.add('active');
        });

        closeSupport.addEventListener('click', function() {
            supportFrame.classList.remove('active');
        });

        // Form submission handler
        document.getElementById('contactForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const submitBtn = document.getElementById('submitBtn');
            const formMessage = document.getElementById('formMessage');
            
            // Disable submit button
            submitBtn.disabled = true;
            submitBtn.textContent = 'Sending...';
            
            // Get form data
            const formData = new FormData(this);
            
            try {
                // Send form data to the server
                const response = await fetch('send_contact.php', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    formMessage.innerHTML = '<div class="form-message success">Thank you! Your message has been sent successfully. We will get back to you soon.</div>';
                    this.reset();
                } else {
                    formMessage.innerHTML = '<div class="form-message error">' + (result.message || 'There was an error sending your message. Please try again.') + '</div>';
                }
            } catch (error) {
                formMessage.innerHTML = '<div class="form-message error">There was an error sending your message. Please email us directly at info@collnetwork.net or try again later.</div>';
            } finally {
                // Re-enable submit button
                submitBtn.disabled = false;
                submitBtn.textContent = 'Send Message';
            }
        });
    </script>
</body>
</html>