emdash-marketing-template/src/pages/portfolio-contact.astro

---
import PortfolioBase from "../layouts/PortfolioBase.astro";

let formStatus: "idle" | "success" | "error" = "idle";
let formMessage = "";

if (Astro.request.method === "POST") {
	try {
		const formData = await Astro.request.formData();
		const name = formData.get("name")?.toString() || "";
		const email = formData.get("email")?.toString() || "";
		const message = formData.get("message")?.toString() || "";

		if (!name || !email || !message) {
			formStatus = "error";
			formMessage = "Please fill in all fields.";
		} else if (!email.includes("@")) {
			formStatus = "error";
			formMessage = "Please enter a valid email address.";
		} else {
			console.log("Contact form submission:", { name, email, message });
			formStatus = "success";
			formMessage = "Thanks for reaching out! We'll get back to you soon.";
		}
	} catch {
		formStatus = "error";
		formMessage = "Something went wrong. Please try again.";
	}
}
---

<PortfolioBase title="Contact">
	<main class="container">
		<h1>Get in Touch</h1>

		{formStatus === "success" ? (
			<div class="success-message">
				<h2>Message Sent</h2>
				<p>{formMessage}</p>
				<a href="/contact">Send another message</a>
			</div>
		) : (
			<form method="POST" class="contact-form">
				{formStatus === "error" && (
					<p class="error">{formMessage}</p>
				)}
				<div class="form-group">
					<label for="name">Name</label>
					<input type="text" id="name" name="name" placeholder="Your name" required />
				</div>
				<div class="form-group">
					<label for="email">Email</label>
					<input type="email" id="email" name="email" placeholder="your@email.com" required />
				</div>
				<div class="form-group">
					<label for="message">Message</label>
					<textarea id="message" name="message" placeholder="Tell us about your project" required></textarea>
				</div>
				<button type="submit">Send Message</button>
			</form>
		)}
	</main>
</PortfolioBase>

<style>
	main.container {
		padding: var(--spacing-5xl) var(--spacing-lg);
		max-width: 600px;
		margin: 0 auto;
	}

	h1 {
		font-size: var(--font-size-4xl);
		margin-bottom: var(--spacing-2xl);
		font-family: var(--font-serif);
		text-align: center;
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	label {
		font-weight: 600;
		font-size: var(--font-size-sm);
	}

	input,
	textarea {
		padding: var(--spacing-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		font-size: var(--font-size-base);
		background: var(--color-bg);
		color: var(--color-text);
	}

	input:focus,
	textarea:focus {
		outline: none;
		border-color: var(--color-primary);
	}

	textarea {
		min-height: 150px;
		resize: vertical;
	}

	button {
		padding: var(--spacing-md) var(--spacing-xl);
		background: var(--color-primary);
		color: white;
		border: none;
		border-radius: var(--radius);
		font-weight: 600;
		cursor: pointer;
		transition: background var(--transition-fast);
	}

	button:hover {
		background: var(--color-primary-dark);
	}

	.error {
		color: var(--color-error);
		padding: var(--spacing-md);
		background: rgba(239, 68, 68, 0.1);
		border-radius: var(--radius);
	}

	.success-message {
		text-align: center;
		padding: var(--spacing-4xl) 0;
	}

	.success-message h2 {
		font-size: var(--font-size-2xl);
		margin-bottom: var(--spacing-md);
		font-family: var(--font-serif);
	}

	.success-message a {
		display: inline-block;
		margin-top: var(--spacing-lg);
		padding: var(--spacing-md) var(--spacing-xl);
		background: var(--color-primary);
		color: white;
		text-decoration: none;
		border-radius: var(--radius);
		font-weight: 600;
	}
</style>