<script>
	// Portfolio Page
	const projects = [
		{
			title: "Tablero de control para máquina textiles",
			category: "Automatización",
			description: "Diseño e implementación de tablero de control para optimizar procesos textiles."
		},
		{
			title: "Sistema de presión constante",
			category: "Hidráulica",
			description: "Implementación de sistema para mantener presión constante en redes de distribución."
		},
		{
			title: "Implementación de interfase HMI",
			category: "Automatización",
			description: "Desarrollo de interfaz hombre-máquina para supervisión y control de procesos."
		},
		{
			title: "Sistema de control con variadores de frecuencia",
			category: "Control",
			description: "Optimización energética y control de velocidad en motores mediante variadores."
		},
		{
			title: "Planta de evaporación Ecua-fedd Ecuador",
			category: "Internacional",
			description: "Proyecto integral de automatización y control para planta de evaporación."
		},
		{
			title: "Automatización de sistema hidroneumático en Aris Industrial",
			category: "Automatización",
			description: "Modernización y automatización de sistema hidroneumático."
		},
		{
			title: "Automatización de procesos con PLC y HMI Siemens",
			category: "Automatización",
			description: "Integración de tecnología Siemens para control de procesos industriales."
		},
		{
			title: "Sistema de control de alarmas con señales análogas en Aris Industrial",
			category: "Seguridad",
			description: "Implementación de sistema de monitoreo y alarmas para variables críticas."
		}
	];
</script>

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

<section class="page-header">
	<div class="container">
		<h1>Nuestros Proyectos</h1>
		<p>Casos de éxito que demuestran nuestra experiencia y calidad.</p>
	</div>
</section>

<section class="section">
	<div class="container">
		<div class="portfolio-grid">
			{#each projects as project}
				<div class="project-card">
					<div class="project-content">
						<span class="category">{project.category}</span>
						<h3>{project.title}</h3>
						<p>{project.description}</p>
					</div>
				</div>
			{/each}
		</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;
	}

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

	.project-card {
		background: var(--color-white);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: transform 0.3s ease;
		border: 1px solid #eee;
	}

	.project-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-md);
	}

	.project-content {
		padding: 2rem;
	}

	.category {
		display: inline-block;
		background: var(--color-light);
		color: var(--color-primary);
		padding: 0.25rem 0.75rem;
		border-radius: var(--radius-full);
		font-size: 0.8rem;
		font-weight: 600;
		margin-bottom: 1rem;
	}

	.project-card h3 {
		margin-bottom: 0.5rem;
		font-size: 1.25rem;
	}
</style>
