---
export const prerender = false;
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
---
<Layout title="Contact Us">
    <NavBar slot="navbar">
        <NavItems slot="navItems" />
    </NavBar>
    <div class="row mb-4" slot="page">
        <div class="col-12">
            <h1>Contact Us</h1>
        </div>
        <div class="col-12 col-md-8 col-lg-6">
            <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc4F7VZjZ6ImWnNRqzMLyAWnyGQdEC3Nr2xtbzugewky239kg/formResponse" method="POST" id="contactForm" target="hidden-iframe">

                <!-- Honeypot field to deter spam -->
                <div style="display:none" aria-hidden="true">
                    <label for="honeypot">Leave this field blank</label>
                    <input type="text" id="honeypot" name="honeypot" tabindex="-1" autocomplete="off" />
                </div>

                <!-- Name input -->
                <div class="mb-3">
                    <label for="name" class="form-label">Full Name</label>
                    <input type="text" class="form-control" id="name" name="entry.563494744" required />
                </div>

                <!-- Email address input -->
                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="email" name="entry.577942868" aria-describedby="emailHelp" required />
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>

                <!-- Message textarea -->
                <div class="mb-3">
                    <label for="message" class="form-label">Message</label>
                    <textarea class="form-control" id="message" name="entry.1640055664" rows="4" required></textarea>
                </div>

                <!-- Submit button -->
                <button type="submit" class="btn btn-light" id="submitBtn">Submit</button>
            </form>

            <!-- Hidden iframe absorbs the Google Forms redirect -->
            <iframe name="hidden-iframe" style="display:none" aria-hidden="true"></iframe>

            <!-- Success message (hidden until submission) -->
            <div id="successMsg" class="alert alert-success mt-3 d-none" role="alert">
                Thanks for reaching out! We'll get back to you soon.
            </div>
        </div>
    </div>
    <Footer slot="footer" />
</Layout>

<script>
    const form = document.getElementById('contactForm') as HTMLFormElement | null;
    const submitBtn = document.getElementById('submitBtn') as HTMLButtonElement | null;
    const successMsg = document.getElementById('successMsg');
    const honeypot = document.getElementById('honeypot') as HTMLInputElement | null;
    const iframe = document.querySelector('iframe[name="hidden-iframe"]') as HTMLIFrameElement | null;

    form?.addEventListener('submit', (e) => {
        // Honeypot check — bail silently if filled in by a bot
        if (honeypot?.value) {
            e.preventDefault();
            return;
        }

        if (!submitBtn || !successMsg) return;

        submitBtn.disabled = true;
        submitBtn.textContent = 'Sending...';
    });

    // iframe load fires after Google Forms redirects into it — treat as success
    iframe?.addEventListener('load', () => {
        if (!form || !submitBtn || !successMsg) return;

        // Ignore the initial empty load before any submission
        if (!submitBtn.disabled) return;

        form.reset();
        form.classList.add('d-none');
        successMsg.classList.remove('d-none');
        dataLayer.push({ event: 'contact_form_submit' });
    });
</script>