<?php include 'includes/header.php'; ?>

<!-- ====== PAGE HERO ====== -->
<section class="page-hero">
    <div class="overlay"></div>
    <div class="hero-grid-lines"><?php for ($i = 0; $i < 8; $i++): ?><div class="grid-line"></div><?php endfor; ?></div>
    <div class="container text-center" style="position:relative;z-index:2">
        <div class="hero-eyebrow"><span class="badge-dot"></span><span>GET IN TOUCH</span></div>
        <h1>Contact <span>Us</span></h1>
        <p>We'd love to hear from you. Let's discuss your project or answer your questions.</p>
        <div class="hero-breadcrumb">
            <a href="index.php">Home</a><i class="bi bi-chevron-right"></i><span>Contact</span>
        </div>
    </div>
</section>

<style>
    /* ====== PAGE HERO ====== */
    .page-hero {
        position: relative;
        padding: 130px 0 100px;
        background: linear-gradient(135deg, #020509 0%, #041020 60%, #060d14 100%);
        overflow: hidden
    }

    .page-hero .overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 60% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 70%)
    }

    .hero-grid-lines {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: space-around;
        pointer-events: none
    }

    .grid-line {
        width: 1px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.08), transparent);
        animation: grid-pulse 4s ease-in-out infinite
    }

    .grid-line:nth-child(odd) {
        animation-delay: -2s
    }

    @keyframes grid-pulse {

        0%,
        100% {
            opacity: .3
        }

        50% {
            opacity: 1
        }
    }

    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 212, 255, 0.06);
        border: 1px solid rgba(0, 212, 255, 0.25);
        border-radius: 30px;
        padding: 6px 18px;
        margin-bottom: 20px;
        font-family: 'Orbitron', monospace;
        font-size: 10px;
        letter-spacing: 3px;
        color: #00d4ff
    }

    .badge-dot {
        width: 6px;
        height: 6px;
        background: #00d4ff;
        border-radius: 50%;
        box-shadow: 0 0 8px #00d4ff;
        animation: pulse-dot 2s infinite
    }

    @keyframes pulse-dot {

        0%,
        100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .5;
            transform: scale(.8)
        }
    }

    .page-hero h1 {
        font-family: 'Orbitron', monospace;
        font-size: clamp(28px, 5vw, 50px);
        font-weight: 800;
        color: #e8f4ff;
        margin-bottom: 14px;
        letter-spacing: 1px
    }

    .page-hero h1 span {
        color: #00d4ff
    }

    .page-hero p {
        color: #5a8a9f;
        font-size: 16px;
        max-width: 550px;
        margin: 0 auto 24px;
        line-height: 1.7
    }

    .hero-breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #4a7a9b;
        font-family: 'Orbitron', monospace;
        letter-spacing: 1px
    }

    .hero-breadcrumb a {
        color: #00d4ff;
        text-decoration: none
    }

    .hero-breadcrumb i {
        font-size: 10px
    }

    /* ====== SHARED ====== */
    .btn-primary-tech {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #00d4ff, #0099cc);
        color: #020509;
        padding: 14px 30px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 13px;
        font-family: 'Orbitron', monospace;
        letter-spacing: 1px;
        text-decoration: none;
        transition: all 0.3s;
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.35)
    }

    .btn-primary-tech:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
        color: #020509
    }

    .btn-ghost-tech {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        color: #e8f4ff;
        padding: 13px 28px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        border: 1px solid rgba(0, 212, 255, 0.3);
        transition: all 0.3s;
        font-family: 'Orbitron', monospace
    }

    .btn-ghost-tech:hover {
        background: rgba(0, 212, 255, 0.08);
        border-color: #00d4ff;
        color: #00d4ff;
        transform: translateY(-2px)
    }

    .cta-section-dark {
        position: relative
    }

    .cta-box-dark {
        background: rgba(6, 18, 32, 0.8);
        border: 1px solid rgba(0, 212, 255, 0.2);
        border-radius: 16px;
        padding: 70px 40px;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(12px)
    }

    .cta-box-dark::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.04), transparent 70%);
        pointer-events: none
    }

    .cta-corner {
        position: absolute;
        width: 20px;
        height: 20px;
        border-color: rgba(0, 212, 255, 0.5);
        border-style: solid
    }

    .cta-tl {
        top: 12px;
        left: 12px;
        border-width: 2px 0 0 2px
    }

    .cta-tr {
        top: 12px;
        right: 12px;
        border-width: 2px 2px 0 0
    }

    .cta-bl {
        bottom: 12px;
        left: 12px;
        border-width: 0 0 2px 2px
    }

    .cta-br {
        bottom: 12px;
        right: 12px;
        border-width: 0 2px 2px 0
    }

    .cta-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 212, 255, 0.06);
        border: 1px solid rgba(0, 212, 255, 0.25);
        border-radius: 30px;
        padding: 6px 16px;
        font-size: 10px;
        letter-spacing: 3px;
        color: #00d4ff;
        font-family: 'Orbitron', monospace
    }

    .cta-box-dark h2 {
        font-family: 'Orbitron', monospace;
        font-size: clamp(22px, 4vw, 40px);
        font-weight: 700;
        color: #e8f4ff;
        margin-bottom: 16px;
        position: relative
    }

    .cta-box-dark p {
        font-size: 15px;
        color: #5a8a9f;
        max-width: 550px;
        margin: 0 auto 36px;
        line-height: 1.7;
        position: relative
    }

    .cta-buttons-dark {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative
    }

    @media(max-width:768px) {
        .cta-box-dark {
            padding: 50px 24px
        }
    }
</style>


<!-- ====== CONTACT SECTION ====== -->
<section class="contact-section-dark py-5">
    <div class="container">
        <div class="row g-5 align-items-start">

            <!-- LEFT: INFO -->
            <div class="col-lg-5">

                <h2 class="section-title left">Get In <span>Touch</span></h2>
                <p class="ct-intro">We're here to help and answer any question you might have. We look forward to hearing from you.</p>

                <!-- Info cards -->
                <div class="ct-info-list">

                    <div class="ct-info-card">
                        <div class="ct-info-icon"><i class="bi bi-geo-alt-fill"></i></div>
                        <div class="ct-info-text">
                            <span class="ct-info-label">LOCATION</span>
                            <p>Maharana Pratap Nagar, Kotra, Ajmer, Rajasthan (305001)</p>
                        </div>
                        <div class="ct-info-arrow"><i class="bi bi-arrow-right"></i></div>
                    </div>

                    <div class="ct-info-card">
                        <div class="ct-info-icon"><i class="bi bi-telephone-fill"></i></div>
                        <div class="ct-info-text">
                            <span class="ct-info-label">PHONE</span>
                            <p><a href="tel:9999999999">+91 9999999999</a></p>
                        </div>
                        <div class="ct-info-arrow"><i class="bi bi-arrow-right"></i></div>
                    </div>

                    <div class="ct-info-card">
                        <div class="ct-info-icon"><i class="bi bi-envelope-fill"></i></div>
                        <div class="ct-info-text">
                            <span class="ct-info-label">EMAIL</span>
                            <p><a href="mailto:info@windinsolutions.com">info@windinsolutions.com</a></p>
                        </div>
                        <div class="ct-info-arrow"><i class="bi bi-arrow-right"></i></div>
                    </div>

                    <div class="ct-info-card">
                        <div class="ct-info-icon"><i class="bi bi-clock-fill"></i></div>
                        <div class="ct-info-text">
                            <span class="ct-info-label">WORKING HOURS</span>
                            <p>Mon – Sat: 9:00 AM – 7:00 PM</p>
                        </div>
                        <div class="ct-info-arrow"><i class="bi bi-arrow-right"></i></div>
                    </div>

                </div>

                <!-- Social -->
                <div class="ct-social-row mt-4">
                    <span class="ct-social-label">FOLLOW US</span>
                    <div class="ct-socials">
                        <a href="#" class="ct-social-btn"><i class="bi bi-facebook"></i></a>
                        <a href="#" class="ct-social-btn"><i class="bi bi-instagram"></i></a>
                    </div>
                </div>

            </div>

            <!-- RIGHT: FORM -->
            <div class="col-lg-7">

                <div class="ct-form-box">

                    <!-- Corner brackets -->
                    <div class="cf-corner cf-tl"></div>
                    <div class="cf-corner cf-tr"></div>
                    <div class="cf-corner cf-bl"></div>
                    <div class="cf-corner cf-br"></div>

                    <!-- Label -->
                    <div class="cf-label">SEND A MESSAGE</div>

                    <form action="" method="POST" id="contactForm">

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <div class="cf-field">
                                    <label>Your Name</label>
                                    <input type="text" name="name" placeholder="John Doe" required>
                                    <div class="cf-field-line"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="cf-field">
                                    <label>Your Email</label>
                                    <input type="email" name="email" placeholder="john@email.com" required>
                                    <div class="cf-field-line"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <div class="cf-field">
                                    <label>Phone Number</label>
                                    <input type="tel" name="phone" placeholder="+91 XXXXXXXXXX">
                                    <div class="cf-field-line"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="cf-field">
                                    <label>Service Needed</label>
                                    <select name="service">
                                        <option value="">Select Service</option>
                                        <option>Website Development</option>
                                        <option>Salesforce Solutions</option>
                                        <option>App Development</option>
                                        <option>Software Development</option>
                                        <option>Digital Marketing</option>
                                        <option>Graphic Designing</option>
                                        <option>Other</option>
                                    </select>
                                    <div class="cf-field-line"></div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="cf-field">
                                <label>Subject</label>
                                <input type="text" name="subject" placeholder="How can we help you?">
                                <div class="cf-field-line"></div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="cf-field">
                                <label>Your Message</label>
                                <textarea name="message" rows="5" placeholder="Tell us about your project..."></textarea>
                                <div class="cf-field-line"></div>
                            </div>
                        </div>

                        <button type="submit" class="cf-submit-btn">
                            <span>Send Message</span>
                            <i class="bi bi-send"></i>
                            <div class="cf-btn-glow"></div>
                        </button>

                    </form>

                </div>

            </div>

        </div>
    </div>
</section>

<style>
    .contact-section-dark {
        position: relative;
        overflow: hidden;
    }

    .contact-section-dark::before {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(0, 212, 255, 0.04), transparent 70%);
        top: -150px;
        left: -150px;
        pointer-events: none;
    }

    /* Intro */
    .ct-intro {
        font-size: 14px;
        color: #5a8a9f;
        line-height: 1.75;
        margin: 15px 0 28px;
    }

    /* Info cards */
    .ct-info-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ct-info-card {
        display: flex;
        align-items: center;
        gap: 14px;
        background: rgba(6, 18, 32, 0.6);
        border: 1px solid rgba(0, 212, 255, 0.1);
        border-radius: 12px;
        padding: 16px 18px;
        transition: all 0.3s;
        backdrop-filter: blur(8px);
        cursor: default;
    }

    .ct-info-card:hover {
        background: rgba(0, 212, 255, 0.06);
        border-color: rgba(0, 212, 255, 0.3);
        transform: translateX(6px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 212, 255, 0.06);
    }

    .ct-info-icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: rgba(0, 212, 255, 0.08);
        border: 1px solid rgba(0, 212, 255, 0.2);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .ct-info-icon i {
        font-size: 18px;
        color: #00d4ff;
    }

    .ct-info-card:hover .ct-info-icon {
        background: rgba(0, 212, 255, 0.15);
        border-color: #00d4ff;
        box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
    }

    .ct-info-text {
        flex: 1;
    }

    .ct-info-label {
        font-family: 'Orbitron', monospace;
        font-size: 8px;
        letter-spacing: 3px;
        color: rgba(0, 212, 255, 0.5);
        display: block;
        margin-bottom: 4px;
    }

    .ct-info-text p {
        margin: 0;
        font-size: 13px;
        color: #8ab4cc;
        line-height: 1.4;
    }

    .ct-info-text p a {
        color: #8ab4cc;
        text-decoration: none;
        transition: 0.3s;
    }

    .ct-info-text p a:hover {
        color: #00d4ff;
    }

    .ct-info-arrow {
        color: rgba(0, 212, 255, 0.2);
        transition: 0.3s;
    }

    .ct-info-card:hover .ct-info-arrow {
        color: #00d4ff;
        transform: translateX(4px);
    }

    /* Social */
    .ct-social-row {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .ct-social-label {
        font-family: 'Orbitron', monospace;
        font-size: 9px;
        letter-spacing: 3px;
        color: rgba(0, 212, 255, 0.4);
    }

    .ct-socials {
        display: flex;
        gap: 10px;
    }

    .ct-social-btn {
        width: 38px;
        height: 38px;
        background: rgba(0, 212, 255, 0.05);
        border: 1px solid rgba(0, 212, 255, 0.15);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5a8a9f;
        font-size: 15px;
        text-decoration: none;
        transition: 0.3s;
    }

    .ct-social-btn:hover {
        background: rgba(0, 212, 255, 0.14);
        border-color: #00d4ff;
        color: #00d4ff;
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0, 212, 255, 0.2);
    }

    /* ====== FORM BOX ====== */
    .ct-form-box {
        background: rgba(6, 18, 32, 0.7);
        border: 1px solid rgba(0, 212, 255, 0.15);
        border-radius: 16px;
        padding: 44px 40px;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(12px);
    }

    /* Corner brackets */
    .cf-corner {
        position: absolute;
        width: 18px;
        height: 18px;
        border-color: rgba(0, 212, 255, 0.4);
        border-style: solid;
    }

    .cf-tl {
        top: 12px;
        left: 12px;
        border-width: 2px 0 0 2px
    }

    .cf-tr {
        top: 12px;
        right: 12px;
        border-width: 2px 2px 0 0
    }

    .cf-bl {
        bottom: 12px;
        left: 12px;
        border-width: 0 0 2px 2px
    }

    .cf-br {
        bottom: 12px;
        right: 12px;
        border-width: 0 2px 2px 0
    }

    /* Label */
    .cf-label {
        font-family: 'Orbitron', monospace;
        font-size: 9px;
        letter-spacing: 4px;
        color: rgba(0, 212, 255, 0.4);
        margin-bottom: 26px;
    }

    /* Fields */
    .cf-field {
        position: relative;
    }

    .cf-field label {
        display: block;
        font-family: 'Orbitron', monospace;
        font-size: 9px;
        letter-spacing: 2px;
        color: rgba(0, 212, 255, 0.5);
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .cf-field input,
    .cf-field select,
    .cf-field textarea {
        width: 100%;
        background: rgba(0, 212, 255, 0.03);
        border: 1px solid rgba(0, 212, 255, 0.12);
        border-radius: 8px;
        padding: 13px 16px;
        color: #c8e8ff;
        font-family: 'Syne', sans-serif;
        font-size: 14px;
        outline: none;
        transition: all 0.3s;
        -webkit-appearance: none;
        appearance: none;
    }

    .cf-field select option {
        background: #060d14;
        color: #c8e8ff;
    }

    .cf-field input::placeholder,
    .cf-field textarea::placeholder {
        color: #3a6a7f;
    }

    .cf-field input:focus,
    .cf-field select:focus,
    .cf-field textarea:focus {
        border-color: #00d4ff;
        background: rgba(0, 212, 255, 0.06);
        box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
    }

    .cf-field textarea {
        resize: vertical;
        min-height: 130px;
    }

    /* Field bottom line */
    .cf-field-line {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 1px;
        background: linear-gradient(90deg, #00d4ff, rgba(0, 212, 255, 0.3));
        transition: width 0.4s;
        border-radius: 0 0 8px 8px;
        pointer-events: none;
    }

    .cf-field:focus-within .cf-field-line {
        width: 100%;
    }

    /* Submit */
    .cf-submit-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #00d4ff, #0099cc);
        color: #020509;
        padding: 15px 36px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 13px;
        font-family: 'Orbitron', monospace;
        letter-spacing: 1.5px;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
        width: 100%;
        justify-content: center;
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.35);
        position: relative;
        overflow: hidden;
    }

    .cf-btn-glow {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
        opacity: 0;
        transition: 0.3s;
    }

    .cf-submit-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
    }

    .cf-submit-btn:hover .cf-btn-glow {
        opacity: 1;
    }

    @media(max-width:768px) {
        .ct-form-box {
            padding: 28px 20px;
        }
    }
</style>

<script>
    // Simple form feedback
    document.getElementById('contactForm')?.addEventListener('submit', function(e) {
        const btn = this.querySelector('.cf-submit-btn span');
        btn.textContent = 'Sending...';
    });
</script>


<!-- ====== MAP ====== -->
<section class="map-section-dark">
    <div class="map-label-bar">
        <div class="container d-flex align-items-center gap-3">
            <div class="map-dot"></div>
            <span>WINDIN SOLUTIONS — AJMER, RAJASTHAN</span>
        </div>
    </div>
    <div class="map-frame-wrap">
        <iframe src="https://www.google.com/maps?q=Ajmer&output=embed" allowfullscreen loading="lazy"></iframe>
        <div class="map-overlay-border"></div>
    </div>
</section>

<style>
    .map-section-dark {
        position: relative;
        margin-top: 60px;
    }

    .map-label-bar {
        background: rgba(6, 18, 32, 0.9);
        border-top: 1px solid rgba(0, 212, 255, 0.12);
        border-bottom: 1px solid rgba(0, 212, 255, 0.12);
        padding: 12px 0;
        font-family: 'Orbitron', monospace;
        font-size: 9px;
        letter-spacing: 3px;
        color: rgba(0, 212, 255, 0.4);
    }

    .map-dot {
        width: 8px;
        height: 8px;
        background: #00d4ff;
        border-radius: 50%;
        box-shadow: 0 0 10px #00d4ff;
        animation: pulse-dot 2s infinite;
        flex-shrink: 0;
    }

    .map-frame-wrap {
        position: relative;
    }

    .map-frame-wrap iframe {
        width: 100%;
        height: 380px;
        border: 0;
        display: block;
        filter: invert(90%) hue-rotate(180deg) brightness(0.85) saturate(0.7);
    }

    .map-overlay-border {
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-top: 2px solid rgba(0, 212, 255, 0.2);
        border-bottom: 2px solid rgba(0, 212, 255, 0.2);
    }
</style>


<!-- ====== CTA ====== -->
<section class="cta-section-dark my-5 py-5">
    <div class="container">
        <div class="cta-box-dark text-center">
            <div class="cta-corner cta-tl"></div>
            <div class="cta-corner cta-tr"></div>
            <div class="cta-corner cta-bl"></div>
            <div class="cta-corner cta-br"></div>
            <div class="cta-badge mb-4"><span class="badge-dot"></span><span>WE'RE READY</span></div>
            <h2>Let's Start the Conversation</h2>
            <p>Have a question or project in mind? Reach out to us — we're here to help you every step of the way.</p>
            <div class="cta-buttons-dark">
                <a href="contact.php" class="btn-primary-tech"><span>Get Free Consultation</span><i class="bi bi-arrow-right"></i></a>
                <a href="tel:9999999999" class="btn-ghost-tech"><i class="bi bi-telephone me-2"></i><span>Call Now</span></a>
            </div>
        </div>
    </div>
</section>

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