<script>
	// Contact Page
</script>

<svelte:head>
	<title>Contacto | EITS</title>
</svelte:head>

<section class="page-header">
	<div class="container">
		<h1>Contáctanos</h1>
		<p>Estamos listos para ayudarte con tu próximo proyecto.</p>
	</div>
</section>

<section class="section">
	<div class="container">
		<div class="contact-grid">
			<div class="contact-info">
				<h2>Información de Contacto</h2>
				<p>Ponte en contacto con nosotros para cualquier consulta o cotización.</p>
				
				<div class="info-item">
					<h3>Teléfonos</h3>
					<p>📞 923 522 345</p>
					<p>📞 943 129 307</p>
				</div>

				<div class="info-item">
					<h3>Email</h3>
					<p>📧 contacto@eits.com.pe</p>
				</div>

				<div class="info-item">
					<h3>Redes Sociales</h3>
					<p>@SOLINTEC-l9f</p>
					<p>crsolintec</p>
				</div>
			</div>

			<div class="contact-form-wrapper">
				<h2>Envíanos un mensaje</h2>
				<form class="contact-form">
					<div class="form-group">
						<label for="name">Nombre</label>
						<input type="text" id="name" name="name" required placeholder="Tu nombre">
					</div>
					<div class="form-group">
						<label for="email">Email</label>
						<input type="email" id="email" name="email" required placeholder="tu@email.com">
					</div>
					<div class="form-group">
						<label for="phone">Teléfono</label>
						<input type="tel" id="phone" name="phone" placeholder="Tu número">
					</div>
					<div class="form-group">
						<label for="message">Mensaje</label>
						<textarea id="message" name="message" rows="5" required placeholder="¿En qué podemos ayudarte?"></textarea>
					</div>
					<button type="submit" class="btn btn-primary">Enviar Mensaje</button>
				</form>
			</div>
		</div>
	</div>
</section>

<style>
	.page-header {
		background: var(--color-primary);
		color: var(--color-white);
		padding: 4rem 0;
		text-align: center;
	}

	.page-header h1 {
		color: var(--color-white);
		margin-bottom: 1rem;
	}

	.contact-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 4rem;
	}

	.contact-info h2 {
		color: var(--color-primary);
		margin-bottom: 1.5rem;
	}

	.info-item {
		margin-bottom: 2rem;
	}

	.info-item h3 {
		font-size: 1.1rem;
		color: var(--color-secondary);
		margin-bottom: 0.5rem;
	}

	.contact-form-wrapper {
		background: var(--color-white);
		padding: 2.5rem;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-md);
	}

	.contact-form-wrapper h2 {
		margin-bottom: 1.5rem;
	}

	.form-group {
		margin-bottom: 1.5rem;
	}

	.form-group label {
		display: block;
		margin-bottom: 0.5rem;
		font-weight: 500;
	}

	.form-group input,
	.form-group textarea {
		width: 100%;
		padding: 0.75rem;
		border: 1px solid #ddd;
		border-radius: var(--radius-md);
		font-family: inherit;
		transition: border-color 0.3s ease;
	}

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

	button[type="submit"] {
		width: 100%;
	}
</style>
