<section class="contact-hero">
    <div class="contact-hero-content">
        <h1>Connect with Bridgeman Accessible</h1>
        <p>We're here to help you build a more inclusive digital world. Reach out with any questions, feedback, or to discuss your accessibility needs.</p>
    </div>
</section>

<section class="contact-details-section">
    <div class="contact-details-container">
        <div class="contact-info-block">
            <h2>Get In Touch</h2>
            <p class="contact-item">
                <a href="mailto:info@bridgemanaccessible.com" class="icon-link">
                    <span class="icon" aria-hidden="true">&#9993;</span> info@bridgemanaccessible.com
                </a>
            </p>
            <p class="contact-item">
                <a href="tel:+14314781655" class="icon-link">
                    <span class="icon" aria-hidden="true">&#9742;</span> 431-478-1655
                </a>
            </p>
        </div>

        <div class="newsletter-block">
            <h2>Stay Updated</h2>
            <p>Subscribe to our newsletter for the latest insights, tips, and news on digital accessibility.</p>
            <form action="/subscribe" method="POST" class="newsletter-form">
                <div class="form-group">
                    <label for="newsletter-email">Email Address <span class="required">(required)</span></label>
                    <input type="email" id="newsletter-email" name="email" required autocomplete="email" aria-required="true">
                </div>
                <div class="form-group">
                    <label for="newsletter-fname">First Name (optional)</label>
                    <input type="text" id="newsletter-fname" name="firstName" autocomplete="given-name">
                </div>
                <div class="form-group">
                    <label for="newsletter-lname">Last Name (optional)</label>
                    <input type="text" id="newsletter-lname" name="lastName" autocomplete="family-name">
                </div>
                <button type="submit" class="button primary-button">Subscribe</button>
            </form>
        </div>
    </div>
</section>

<section class="feedback-section">
    <div class="feedback-container">
        <h2>Send Us Your Feedback</h2>
        <p>Your thoughts help us improve. Please share any suggestions, report an issue, or just tell us what you think.</p>
        <form action="/submit-feedback" method="POST" class="feedback-form">
            <div class="form-group">
                <label for="feedback-name">Your Name (optional)</label>
                <input type="text" id="feedback-name" name="name" autocomplete="name">
            </div>
            <div class="form-group">
                <label for="feedback-email">Your Email (optional)</label>
                <input type="email" id="feedback-email" name="email" autocomplete="email">
            </div>
            <div class="form-group">
                <label for="feedback-subject">Subject</label>
                <input type="text" id="feedback-subject" name="subject" required aria-required="true">
            </div>
            <div class="form-group">
                <label for="feedback-message">Your Message <span class="required">(required)</span></label>
                <textarea id="feedback-message" name="message" rows="7" required aria-required="true"></textarea>
            </div>
            <button type="submit" class="button secondary-button">Submit Feedback</button>
        </form>
    </div>
</section>