<script lang="ts">
	// Landing Page
</script>

<svelte:head>
	<title>Inicio | EITS</title>
</svelte:head>
<!-- font-family: var(--font-heading); -->
<!--     color: var(--color-dark); -->
<!--     line-height: 1.2; -->
<!--     margin-bottom: 1rem; -->

<section class="hero">
	<video autoplay loop muted playsinline class="hero-video">
		<source src="/videos/factory.mp4" type="video/mp4">
		Your browser does not support the video tag.
	</video>
	<div class="container hero-content">
		<h1>Soluciones Integrales de Ingeniería y Tecnología</h1>
    <span class="eits">
        <span class="first-letter">E</span>ngineering 
        <span class="first-letter">I</span>ntegral 
        <span class="first-letter">T</span>ech
        <span class="first-letter">S</span>olutions</span>
		<p style="margin-top: 15px">Impulsamos el crecimiento sostenible de la industria con automatización y tecnología avanzada</p>
		<div class="hero-btns">
			<a href="/contacto" class="btn btn-primary">Contáctanos</a>
			<a href="/servicios" class="btn btn-outline">Nuestros Servicios</a>
		</div>
	</div>
</section>

<section class="section">
	<div class="container">
		<h2 class="section-title">Nuestros Servicios</h2>
		<div class="services-grid">
			<div class="service-card">
				<h3>Automatización Industrial</h3>
				<p>Control y monitoreo de equipos mediante PLC y HMI para optimizar procesos.</p>
			</div>
			<div class="service-card">
				<h3>Industria 4.0</h3>
				<p>Integración de IoT, análisis de datos e IA para digitalizar procesos industriales.</p>
			</div>
			<div class="service-card">
				<h3>Instalaciones Eléctricas</h3>
				<p>Diseño, montaje y puesta en servicio de sistemas eléctricos industriales.</p>
			</div>
			<div class="service-card">
				<h3>Desarrollo de Software</h3>
				<p>Soluciones digitales personalizadas, apps móviles y sistemas backend.</p>
			</div>
		</div>
		<div class="center-btn">
			<a href="/servicios" class="btn btn-outline">Ver todos los servicios</a>
		</div>
	</div>
</section>

<section class="section bg-light">
	<div class="container">
		<h2 class="section-title">¿Por qué elegirnos?</h2>
		<div class="features-grid">
			<div class="feature">
				<h3>Innovación</h3>
				<p>Buscamos constantemente nuevas soluciones tecnológicas.</p>
			</div>
			<div class="feature">
				<h3>Calidad</h3>
				<p>Garantizamos la excelencia en cada proyecto.</p>
			</div>
			<div class="feature">
				<h3>Sostenibilidad</h3>
				<p>Promovemos el uso responsable de recursos energéticos.</p>
			</div>
		</div>
	</div>
</section>

<style>
	.hero {
		position: relative;
		padding: 8rem 0;
		text-align: center;
		overflow: hidden;
		color: var(--color-white);
	}

	.hero::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

	.hero-video {
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 100%;
		transform: translate(-50%, -50%);
		z-index: 0;
	}

	.hero-content {
		position: relative;
		z-index: 2;
	}

	.hero h1 {
		font-size: 3.5rem;
		margin-bottom: 1.5rem;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
		color: var(--color-white);
	}

	.hero p {
		font-size: 1.25rem;
		margin-bottom: 2.5rem;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		color: #e0e0e0;
	}

	.hero-btns {
		display: flex;
		gap: 1rem;
		justify-content: center;
	}

	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 2rem;
		margin-bottom: 3rem;
	}

	.service-card {
		background: var(--color-white);
		padding: 2rem;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
		transition: transform 0.3s ease;
	}

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

	.service-card h3 {
		color: var(--color-primary);
		margin-bottom: 1rem;
	}

	.center-btn {
		text-align: center;
	}

	.bg-light {
		background-color: var(--color-light);
	}

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

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

	.feature h3 {
		color: var(--color-secondary);
	}

  .eits {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 100px;
    color: var(--color-white);
  }

  .first-letter {
      font-weight: bold;
      font-size: 1.4rem;
      color: var(--color-white);
  }
</style>
