---
import Layout from "../components/Layout.astro";
import "../styles/components/ContactForm.css";
---

<Layout>
	<div class="contact-container">
		<h1 class="contact-title">Kontakt</h1>
		
		<form class="contact-form">
			<div class="form-group">
				<label for="name">Name</label>
				<input type="text" id="name" name="name" required>
			</div>
			
			<div class="form-group">
				<label for="email">E-Mail</label>
				<input type="email" id="email" name="email" required>
			</div>
			
			<div class="form-group">
				<label for="subject">Betreff</label>
				<input type="text" id="subject" name="subject" required>
			</div>
			
			<div class="form-group">
				<label for="message">Nachricht</label>
				<textarea id="message" name="message" rows="5" required></textarea>
			</div>
			
			<button type="submit" class="submit-button">Senden</button>
		</form>
		
		<div class="whatsapp-container">
			<p>Oder kontaktiere uns direkt über WhatsApp:</p>
			<a href="https://wa.me/41772322770" class="whatsapp-link" target="_blank" rel="noopener noreferrer">
				<span class="whatsapp-icon">📱</span>
				<span>WhatsApp Chat starten</span>
			</a>
		</div>
	</div>
</Layout>
