<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Contact Nesvra | Get In Touch";
$subjectParam = isset($_GET['subject']) ? htmlspecialchars(trim($_GET['subject'])) : '';
include 'components/head.php';
?>

<body class="bg-white">
    <?php include 'components/navbar.php'; ?>

    <section class="min-h-screen w-full bg-white">
        <div class="max-w-[1200px] mx-auto px-4 md:px-[5%] py-16 md:py-24">
            <div class="grid lg:grid-cols-2 gap-16 items-start">

                <!-- LEFT: Info Panel -->
                <div class="lg:sticky lg:top-28" data-aos="fade-right">

                    <a href="index.php" class="inline-flex items-center gap-2 font-mono text-[10px] uppercase tracking-widest text-soft hover:text-royal transition-colors mb-10 group">
                        <i class="ri-arrow-left-line group-hover:-translate-x-1 transition-transform"></i> Back to Nesvra
                    </a>

                    <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange font-semibold block mb-4">{Contact}</span>
                    <h1 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-[1.1] mb-6">
                        Let's Start a <br>
                        <span class="italic font-serif text-soft">Conversation</span>
                    </h1>
                    <p class="text-soft text-base leading-relaxed mb-10 max-w-md">
                        Whether you are exploring a fintech launch, need a dedicated engineering squad, deploying enterprise systems, or have a partnership inquiry — our solutions team responds within 24 hours.
                    </p>

                    <!-- Contact channels -->
                    <div class="flex flex-col gap-4 mb-10">
                        <?php
                        $channels = [
                            [
                                "icon"  => "ri-mail-send-line",
                                "label" => "Sales & Solutions Desk",
                                "val"   => "sales@nesvra.com",
                                "href"  => "mailto:sales@nesvra.com"
                            ],
                            [
                                "icon"  => "ri-customer-service-2-line",
                                "label" => "Client Support Desk",
                                "val"   => "support@nesvra.com",
                                "href"  => "mailto:support@nesvra.com"
                            ],
                            [
                                "icon"  => "ri-phone-line",
                                "label" => "Direct Line",
                                "val"   => "+1 (507) 509-6007",
                                "href"  => "tel:+15075096007"
                            ],
                            [
                                "icon"  => "ri-map-pin-2-line",
                                "label" => "HQ Location",
                                "val"   => "Austin, TX · United States",
                                "href"  => "https://maps.google.com/?q=3801+N+Capital+of+Texas+Hwy,+Austin,+TX+78746"
                            ],
                            [
                                "icon"  => "ri-time-line",
                                "label" => "Operating Hours",
                                "val"   => "Mon–Fri 8am–6pm Central (24/7 Priority SLA)",
                                "href"  => "sla.php"
                            ],
                        ];
                        foreach ($channels as $c):
                        ?>
                            <a href="<?= $c['href'] ?>" class="flex items-center gap-4 p-4 bg-[#F8F9FA] border border-zinc-100 rounded-[20px] group hover:border-brandOrange/20 hover:bg-white transition-all duration-300">
                                <div class="w-10 h-10 rounded-[14px] bg-white border border-zinc-100 flex items-center justify-center flex-shrink-0 group-hover:bg-brandOrange group-hover:border-brandOrange transition-all duration-300">
                                    <i class="<?= $c['icon'] ?> text-soft group-hover:text-white transition-colors text-base"></i>
                                </div>
                                <div>
                                    <p class="font-mono text-[10px] uppercase tracking-widest text-soft"><?= $c['label'] ?></p>
                                    <p class="font-semibold text-dark text-sm"><?= $c['val'] ?></p>
                                </div>
                                <i class="ri-arrow-right-up-line ml-auto text-soft opacity-0 group-hover:opacity-100 transition-all group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-brandOrange"></i>
                            </a>
                        <?php endforeach; ?>
                    </div>

                    <!-- Social links -->
                    <div class="flex items-center gap-3">
                        <span class="font-mono text-[10px] uppercase tracking-widest text-soft">Follow us:</span>
                        <?php 
                        $socials = [
                            ["ri-linkedin-box-fill", "https://linkedin.com/company/nesvra", "LinkedIn"],
                            ["ri-twitter-x-fill", "https://x.com/nesvra", "X (Twitter)"],
                            ["ri-github-fill", "https://github.com/nesvra", "GitHub"],
                            ["ri-facebook-line", "https://facebook.com/nesvra", "Facebook"]
                        ];
                        foreach ($socials as [$icon, $url, $label]): 
                        ?>
                            <a href="<?= $url ?>" target="_blank" rel="noopener noreferrer" aria-label="<?= $label ?>" class="w-9 h-9 rounded-full bg-[#F8F9FA] border border-zinc-100 flex items-center justify-center text-soft hover:bg-royal hover:text-white hover:border-royal transition-all duration-300">
                                <i class="<?= $icon ?> text-sm"></i>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- RIGHT: Contact Form -->
                <div data-aos="fade-left">
                    <div class="bg-white border border-zinc-100 rounded-[32px] shadow-[0_20px_60px_-20px_rgba(8,31,92,0.1)] p-8 md:p-10">

                        <h2 class="text-2xl font-[400] text-royal tracking-tighter mb-2">Send Us a Message</h2>
                        <p class="text-soft text-sm leading-relaxed mb-7">Fill in your requirements and the right technical lead will reach out.</p>

                        <form id="contactForm" class="flex flex-col gap-5" novalidate>

                            <!-- Name + Email -->
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div class="form-group" data-field="fullname">
                                    <label class="block font-semibold text-dark text-sm mb-2">Full Name <span class="text-brandOrange">*</span></label>
                                    <input type="text" name="fullname" autocomplete="name" required
                                        class="w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none transition-all focus:border-electric focus:ring-2 focus:ring-electric/10 font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="Jane Smith" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                                <div class="form-group" data-field="email">
                                    <label class="block font-semibold text-dark text-sm mb-2">Work Email <span class="text-brandOrange">*</span></label>
                                    <input type="email" name="email" autocomplete="email" required
                                        class="w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none transition-all focus:border-electric focus:ring-2 focus:ring-electric/10 font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="jane@company.com" />
                                    <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                                </div>
                            </div>

                            <!-- Phone + Company -->
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div class="form-group" data-field="phone">
                                    <label class="block font-semibold text-dark text-sm mb-2">Phone / WhatsApp <span class="text-zinc-300 font-[400]">(optional)</span></label>
                                    <input type="tel" name="phone" autocomplete="tel"
                                        class="w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none transition-all focus:border-electric focus:ring-2 focus:ring-electric/10 font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="+1 (555) 019-2834" />
                                </div>
                                <div class="form-group" data-field="company">
                                    <label class="block font-semibold text-dark text-sm mb-2">Company / Project <span class="text-zinc-300 font-[400]">(optional)</span></label>
                                    <input type="text" name="company" autocomplete="organization"
                                        class="w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none transition-all focus:border-electric focus:ring-2 focus:ring-electric/10 font-[400] text-dark placeholder:text-zinc-300"
                                        placeholder="Acme Fintech or Stealth" />
                                </div>
                            </div>

                            <!-- Ecosystem-Aligned Subject Dropdown -->
                            <div>
                                <label class="block font-semibold text-dark text-sm mb-2">What can we help you with? <span class="text-brandOrange">*</span></label>
                                <select name="subject" id="contactSubject"
                                    class="w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none transition-all focus:border-electric focus:ring-2 focus:ring-electric/10 font-[400] text-dark appearance-none bg-white">
                                    <?php
                                    $subjects = [
                                        "Fintech Infrastructure (Wallet, Cards, Remittance, eSIM, Gift Cards)",
                                        "Dedicated Tech Team / Engineering Squad for Hire",
                                        "Enterprise Operating Systems (ERP, CRM, Ledger Accounting)",
                                        "Custom Platform & Software Architecture (100% IP Ownership)",
                                        "Infrastructure Access & Unified API Gateway",
                                        "Licensing, MSB / MTL & Compliance Advisory",
                                        "Enterprise Partnership & White-Label Reseller",
                                        "Technical Support & SLA Inquiry",
                                        "Billing & License Payments",
                                        "General Inquiry & Strategy"
                                    ];

                                    foreach ($subjects as $subj):
                                        $isSelected = (!empty($subjectParam) && stripos($subj, $subjectParam) !== false);
                                    ?>
                                        <option value="<?= htmlspecialchars($subj) ?>" <?= $isSelected ? 'selected' : '' ?>><?= htmlspecialchars($subj) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                            <!-- Message -->
                            <div class="form-group" data-field="message">
                                <label class="block font-semibold text-dark text-sm mb-2">Message / Project Scope <span class="text-brandOrange">*</span></label>
                                <textarea name="message" rows="5" required
                                    class="w-full px-4 py-3 text-sm border border-zinc-200 rounded-[16px] outline-none transition-all focus:border-electric focus:ring-2 focus:ring-electric/10 font-[400] text-dark placeholder:text-zinc-300 resize-none"
                                    placeholder="Tell us about your business goals, target timeline, technical requirements, or questions..."><?= $subjectParam ? "Inquiry regarding $subjectParam." : '' ?></textarea>
                                <p class="error-msg hidden text-xs text-red-500 mt-1"></p>
                            </div>

                            <!-- GDPR -->
                            <label class="flex items-start gap-3 cursor-pointer">
                                <input type="checkbox" id="gdprContact" checked required class="w-4 h-4 mt-0.5 rounded accent-royal flex-shrink-0" />
                                <span class="text-xs text-soft leading-relaxed">
                                    I agree to Nesvra's <a href="terms-of-service.php" class="text-royal font-semibold hover:underline">Terms of Service</a> & <a href="privacy-policy.php" class="text-royal font-semibold hover:underline">Privacy Policy</a>. Your details are strictly confidential.
                                </span>
                            </label>

                            <!-- Submit -->
                            <button type="submit" id="contactSubmitBtn"
                                class="w-full py-4 bg-royal text-white rounded-full font-semibold text-sm hover:bg-brandOrange transition-all duration-300 flex items-center justify-center gap-2 shadow-md">
                                <i class="ri-send-plane-line"></i>
                                Send Message
                            </button>

                            <div class="flex items-center justify-center gap-2 text-soft">
                                <i class="ri-lock-2-line text-xs text-emerald-600"></i>
                                <span class="font-mono text-[10px] uppercase tracking-widest">SSL Secured · 24h Response SLA</span>
                            </div>

                        </form>
                    </div>

                    <!-- Quick links below form -->
                    <div class="mt-6 p-5 bg-[#F8F9FA] border border-zinc-100 rounded-[24px] flex flex-col sm:flex-row items-center justify-between gap-4">
                        <p class="text-dark font-semibold text-sm">Need direct calendar booking?</p>
                        <div class="flex items-center gap-3">
                            <a href="book-strategy-call.php" class="inline-flex items-center gap-2 px-5 py-2.5 bg-royal text-white rounded-full text-xs font-semibold hover:bg-brandOrange transition-all">
                                <i class="ri-calendar-check-line"></i> Book Strategy Call
                            </a>
                            <a href="https://wa.me/15075096007?text=Hi%20Nesvra%20Team%2C%20I%20have%20an%20inquiry%20regarding%20your%20platforms." target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-zinc-200 text-dark rounded-full text-xs font-semibold hover:border-emerald-500 hover:text-emerald-700 transition-colors">
                                <i class="ri-whatsapp-line text-emerald-600"></i> WhatsApp
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ENHANCED CONTACT SUCCESS MODAL -->
    <div id="contactModal" class="hidden fixed inset-0 z-50 items-center justify-center bg-zinc-950/40 backdrop-blur-md px-4 py-6 transition-all duration-300">
        <div class="relative w-full max-w-lg rounded-[32px] bg-white p-8 md:p-10 shadow-[0_32px_64px_-16px_rgba(10,5,2,0.15)] border border-zinc-100 flex flex-col items-center text-center transform scale-95 transition-all duration-300">
            
            <!-- Absolute Corner Close Button -->
            <button id="contactModalClose" class="absolute top-6 right-6 w-8 h-8 rounded-full bg-zinc-50 border border-zinc-100 flex items-center justify-center text-xl text-zinc-500 hover:text-brandOrange hover:border-brandOrange/20 transition-all duration-200">&times;</button>
            
            <!-- Animated Success Checkmark Structure -->
            <div class="w-16 h-16 rounded-2xl bg-brandOrange/10 border border-brandOrange/20 flex items-center justify-center text-brandOrange text-3xl mb-6 relative group">
                <i class="ri-checkbox-circle-fill"></i>
                <span class="absolute inset-0 rounded-2xl bg-brandOrange/5 animate-ping opacity-75"></span>
            </div>

            <!-- Upper Status Header Component -->
            <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-3 font-bold">Message Sent Successfully</span>
            
            <!-- Personalized Heading Matrix -->
            <h3 class="text-2xl md:text-3xl font-medium text-dark tracking-tight mb-3">
                Thank you, <span class="modal-name text-brandOrange"></span>!
            </h3>
            
            <!-- Context Core Content Body -->
            <p class="text-sm md:text-base text-soft leading-relaxed mb-2">
                We've received your inquiry and an assigned solutions architect will reach out via <span class="modal-email font-mono font-bold text-dark bg-zinc-50 border border-zinc-200/60 px-2 py-0.5 rounded text-xs md:text-sm inline-block my-1"></span> within 24 hours.
            </p>

            <p class="text-xs font-semibold text-zinc-400 tracking-tight mb-8">
                Thanks for connecting with <span class="text-dark font-bold font-mono">Nesvra</span>.
            </p>
            
            <!-- Action Buttons Container -->
            <div class="w-full flex flex-col sm:flex-row gap-3">
                <a href="systems.php" class="flex-1 py-3.5 px-6 rounded-xl bg-[#F8F9FA] border border-zinc-200 text-royal text-xs font-bold uppercase tracking-wider hover:bg-white hover:border-royal/30 transition-all text-center">
                    Explore Systems
                </a>
                <button id="contactModalOk" class="flex-1 py-3.5 px-6 rounded-xl bg-royal text-white text-xs font-bold uppercase tracking-wider hover:bg-brandOrange transition-all text-center shadow-md">
                    Acknowledge & Close
                </button>
            </div>
            
        </div>
    </div>

    <?php include 'components/Scroll-to-top.php'; ?>
    <?php include 'components/footer.php'; ?>

    <style>
        .form-group.has-error input,
        .form-group.has-error textarea {
            border-color: #ef4444 !important;
            background-color: #fff5f5 !important;
        }

        .form-group.has-success input,
        .form-group.has-success textarea {
            border-color: #10b981 !important;
        }

        #contactModal {
            display: none;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {

            function validateField(input) {
                const group = input.closest('.form-group');
                if (!group) return true;
                const errEl = group.querySelector('.error-msg');
                let valid = true;
                let msg = '';

                if (input.required && !input.value.trim()) {
                    valid = false;
                    msg = 'This field is required.';
                } else if (input.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value.trim())) {
                    valid = false;
                    msg = 'Enter a valid email address.';
                }

                if (!valid) {
                    group.classList.add('has-error');
                    group.classList.remove('has-success');
                    if (errEl) {
                        errEl.textContent = msg;
                        errEl.classList.remove('hidden');
                    }
                } else {
                    group.classList.remove('has-error');
                    if (input.value.trim()) group.classList.add('has-success');
                    if (errEl) errEl.classList.add('hidden');
                }
                return valid;
            }

            document.querySelectorAll('#contactForm input[required], #contactForm textarea[required]').forEach(input => {
                input.addEventListener('blur', () => validateField(input));
                input.addEventListener('input', () => {
                    const g = input.closest('.form-group');
                    if (g?.classList.contains('has-error')) {
                        g.classList.remove('has-error');
                        g.querySelector('.error-msg')?.classList.add('hidden');
                    }
                });
            });

            const contactModal = document.getElementById('contactModal');
            const modalName = contactModal.querySelector('.modal-name');
            const modalEmail = contactModal.querySelector('.modal-email');
            const modalClose = document.getElementById('contactModalClose');
            const modalOk = document.getElementById('contactModalOk');
            let activeForm = null;

            function closeModal() {
                contactModal.style.display = 'none';
                contactModal.classList.remove('flex');
                if (activeForm) {
                    activeForm.reset();
                    activeForm = null;
                }
            }

            modalClose.addEventListener('click', closeModal);
            modalOk.addEventListener('click', closeModal);
            contactModal.addEventListener('click', (event) => {
                if (event.target === contactModal) {
                    closeModal();
                }
            });

            document.getElementById('contactForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                const form = e.target;
                const btn = document.getElementById('contactSubmitBtn');
                let allValid = true;

                form.querySelectorAll('input[required], textarea[required]').forEach(i => {
                    if (!validateField(i)) allValid = false;
                });

                const gdpr = document.getElementById('gdprContact');
                if (gdpr && !gdpr.checked) {
                    allValid = false;
                    gdpr.closest('label').classList.add('text-red-500');
                }

                if (!allValid) return;

                const nameValue = form.fullname.value.trim() || 'there';
                const emailValue = form.email.value.trim() || 'your email';
                const phoneValue = form.phone?.value.trim() || '';
                const companyValue = form.company?.value.trim() || '';
                const subjectValue = form.subject.value || 'General Inquiry';
                const messageValue = form.message.value.trim() || '';

                btn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></span> Sending message...';
                btn.disabled = true;

                // Send lead data to API
                try {
                    await fetch('api/submit-lead.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            form_type: 'contact_message',
                            name: nameValue,
                            email: emailValue,
                            phone: phoneValue,
                            company: companyValue,
                            platform: subjectValue,
                            notes: messageValue
                        })
                    });
                } catch (err) {
                    console.log('API fallback:', err);
                }

                btn.innerHTML = '<i class="ri-send-plane-line"></i> Send Message';
                btn.disabled = false;
                activeForm = form;
                modalName.textContent = nameValue;
                modalEmail.textContent = emailValue;
                contactModal.style.display = 'flex';
                contactModal.classList.add('flex');
            });
        });
    </script>

</body>
</html>