<script lang="ts">
	import '../app.css';
  import logo from '$lib/assets/logo2.png'
	let { children } = $props();
	
	let isMenuOpen = $state(false);

	function toggleMenu() {
		isMenuOpen = !isMenuOpen;
	}

	function closeMenu() {
		isMenuOpen = false;
	}
</script>

<svelte:head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700&display=swap" rel="stylesheet">
	<title>EITS - Engineering Integral Tech Solutions</title>
</svelte:head>

<div class="app">
	<header class="header">
		<div class="container header-content">
			<a href="/"  onclick={closeMenu}>
        <img src={logo} style="width:  80px;" alt="logo.png" />
      </a>
			
			<button class="menu-toggle" onclick={toggleMenu} aria-label="Toggle menu">
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
			</button>

			<nav class="nav {isMenuOpen ? 'active' : ''}">
				<a href="/" onclick={closeMenu}>Inicio</a>
				<a href="/acerca" onclick={closeMenu}>Nosotros</a>
				<a href="/servicios" onclick={closeMenu}>Servicios</a>
				<a href="/portafolio" onclick={closeMenu}>Portafolio</a>
				<a href="/blog" onclick={closeMenu}>Blog</a>
				<a href="/contacto" onclick={closeMenu}>Contacto</a>
			</nav>
		</div>
	</header>

	<main>
		{@render children()}
	</main>

	<footer class="footer">
		<div class="container">
			<div class="footer-grid">
				<div class="footer-col">
					<h3>EITS</h3>
					<p>Engineering Integral Tech Solutions S.A.C.</p>
					<p>Soluciones tecnológicas integrales para la industria.</p>
				</div>
				<div class="footer-col">
					<h4>Enlaces</h4>
					<ul>
						<li><a href="/about">Nosotros</a></li>
						<li><a href="/services">Servicios</a></li>
						<li><a href="/portfolio">Portafolio</a></li>
						<li><a href="/contact">Contacto</a></li>
					</ul>
				</div>
				<div class="footer-col">
					<h4>Contacto</h4>
					<p>📞 923 522 345</p>
					<p>📞 943 129 307</p>
					<p>📧 contacto@eits.com.pe</p>
				</div>
			</div>
			<div class="footer-bottom">
				<p>&copy; {new Date().getFullYear()} EITS. Todos los derechos reservados.</p>
			</div>
		</div>
	</footer>
</div>

<style>
	.header {
		background: var(--color-white);
		box-shadow: var(--shadow-sm);
		position: sticky;
		top: 0;
		z-index: 100;
		padding: 1rem 0;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		font-family: var(--font-heading);
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--color-primary);
		z-index: 101;
	}

	.nav {
		display: flex;
		gap: 2rem;
		align-items: center;
	}

	.nav a:not(.btn) {
		font-weight: 500;
		color: var(--color-text);
	}

	.nav a:not(.btn):hover {
		color: var(--color-primary);
	}

	.btn-sm {
		padding: 0.5rem 1rem;
		font-size: 0.9rem;
	}

	.menu-toggle {
		display: none;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
		cursor: pointer;
		z-index: 101;
	}

	.bar {
		width: 25px;
		height: 3px;
		background-color: var(--color-dark);
		transition: all 0.3s ease;
	}

	@media (max-width: 768px) {
		.menu-toggle {
			display: flex;
		}

		.nav {
			position: fixed;
			top: 0;
			right: -100%;
			width: 100%;
			height: 100vh;
			background: var(--color-white);
			flex-direction: column;
			justify-content: center;
			transition: right 0.3s ease;
			box-shadow: -5px 0 15px rgba(0,0,0,0.1);
		}

		.nav.active {
			right: 0;
		}

		.nav a {
			font-size: 1.25rem;
		}
	}

	.footer {
		background: var(--color-dark);
		color: var(--color-white);
		padding: 4rem 0 2rem;
		margin-top: auto;
	}

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

	.footer h3 {
		color: var(--color-white);
		margin-bottom: 1rem;
	}

	.footer h4 {
		color: var(--color-secondary);
		margin-bottom: 1rem;
		font-size: 1.1rem;
	}

	.footer ul li {
		margin-bottom: 0.5rem;
	}

	.footer a:hover {
		color: var(--color-secondary);
	}

	.footer-bottom {
		border-top: 1px solid rgba(255,255,255,0.1);
		padding-top: 2rem;
		text-align: center;
		color: var(--color-text-light);
		font-size: 0.9rem;
	}
</style>
