<?php
/**
 * Template Name: Contact
 * data-page="contact"
 *
 * @package NeonKickLive
 */

get_header();
?>

	<div class="topbar-back">
		<a class="back" href="<?php echo esc_url( home_url('/') ); ?>" aria-label="Back">‹</a>
		<div class="title">CONTACT</div>
		<span></span>
	</div>

	<div class="doc-card">
		<h2>Contact Us</h2>
		<p>Got feedback, a bug to report, or just want to say hello? Fill in the form below.</p>
	</div>

	<div class="form-field">
		<label for="contact-name">YOUR NAME</label>
		<input type="text" id="contact-name" name="name" placeholder="John Smith" autocomplete="name" />
	</div>
	<div class="form-field">
		<label for="contact-email">EMAIL ADDRESS</label>
		<input type="email" id="contact-email" name="email" placeholder="you@example.com" autocomplete="email" />
	</div>
	<div class="form-field">
		<label for="contact-message">MESSAGE</label>
		<textarea id="contact-message" name="message" rows="5" placeholder="Your message…"></textarea>
	</div>
	<div class="auth-actions" style="padding-top:0;">
		<button class="btn btn-primary" id="contact-submit" type="button">SEND MESSAGE</button>
	</div>
	<p id="contact-msg" class="form-hint" style="text-align:center;min-height:20px;"></p>

	<script>
	document.getElementById('contact-submit')?.addEventListener('click', function() {
		const name    = document.getElementById('contact-name')?.value.trim();
		const email   = document.getElementById('contact-email')?.value.trim();
		const message = document.getElementById('contact-message')?.value.trim();
		const msg     = document.getElementById('contact-msg');
		if ( !name || !email || !message ) {
			if (msg) msg.textContent = 'Please fill in all fields.';
			return;
		}
		if (msg) msg.textContent = 'Message sent! We\'ll be in touch soon.';
		this.disabled = true;
	});
	</script>

<?php get_footer(); ?>