<script>
	// About Page
</script>

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

<section class="page-header">
	<div class="container">
		<h1>Sobre Nosotros</h1>
		<p>Conoce más sobre nuestra historia, misión y visión.</p>
	</div>
</section>

<section class="section">
	<div class="container">
		<div class="about-content">
			<div class="about-text">
				<h2>Quiénes Somos</h2>
				<p>Somos una empresa en constante crecimiento con personal capacitado dedicado a la automatización industrial, integración de tableros, instalaciones eléctricas, energías renovables y más. Contamos con equipos para abastecer la productividad y brindar un buen servicio.</p>
			</div>
		</div>
	</div>
</section>

<section class="section bg-light">
	<div class="container">
		<div class="mission-vision-grid">
			<div class="mv-card">
				<h2>Misión</h2>
				<p>Proporcionar soluciones innovadoras y eficientes en automatización e instalaciones eléctricas que impulsen el crecimiento sostenible de nuestros clientes. Nos comprometemos a ofrecer servicios de alta calidad, utilizando tecnología avanzada y un equipo de profesionales altamente capacitados.</p>
			</div>
			<div class="mv-card">
				<h2>Visión</h2>
				<p>Ser reconocidos como líderes en el mercado de automatización e instalaciones eléctricas, destacándonos por nuestra capacidad para ofrecer soluciones tecnológicas avanzadas, sostenibles y personalizadas. Aspiramos a transformar la industria con un enfoque en la innovación y la excelencia operativa.</p>
			</div>
		</div>
	</div>
</section>

<section class="section">
	<div class="container">
		<h2 class="section-title">Nuestros Valores</h2>
		<div class="values-grid">
			<div class="value-item">
				<h3>Innovación</h3>
				<p>Buscamos constantemente nuevas soluciones tecnológicas.</p>
			</div>
			<div class="value-item">
				<h3>Calidad</h3>
				<p>Garantizamos la excelencia en cada proyecto.</p>
			</div>
			<div class="value-item">
				<h3>Sostenibilidad</h3>
				<p>Promovemos el uso responsable y eficiente de los recursos energéticos.</p>
			</div>
			<div class="value-item">
				<h3>Compromiso</h3>
				<p>Nos dedicamos a cumplir con las expectativas de nuestros clientes.</p>
			</div>
			<div class="value-item">
				<h3>Seguridad</h3>
				<p>La seguridad es una prioridad en cada fase de nuestros proyectos.</p>
			</div>
			<div class="value-item">
				<h3>Trabajo en equipo</h3>
				<p>Fomentamos la colaboración y el respeto mutuo.</p>
			</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;
	}

	.page-header p {
		font-size: 1.2rem;
		opacity: 0.9;
	}

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

	.mv-card {
		background: var(--color-white);
		padding: 2.5rem;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
	}

	.mv-card h2 {
		color: var(--color-primary);
	}

	.values-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 2rem;
	}

	.value-item {
		text-align: center;
		padding: 1.5rem;
		border: 1px solid #eee;
		border-radius: var(--radius-md);
	}

	.value-item h3 {
		color: var(--color-secondary);
		font-size: 1.25rem;
	}

	.bg-light {
		background-color: var(--color-light);
	}
</style>
