---
// Component Imports
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
import Navbar from "../components/Navbar.astro";
import { Image } from "astro:assets";

const animateOnScroll = `
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate__animated', 'animate__fadeIn');
          entry.target.style.visibility = 'visible';
        }
      });
    });

    document.querySelectorAll('.animate-on-scroll').forEach(el => {
      observer.observe(el);
    });
  });
`;
---

<html lang="es">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="generator" content={Astro.generator} />
		<link rel="sitemap" href="/sitemap-index.xml" />
		<meta
			name="description"
			content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible. Proyectos y recursos para impulsar el cambio positivo en nuestro planeta"
		/>
		<link rel="icon" type="image/svg+xml" href="favicon.svg" />
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous"
		/>
		<link
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
			rel="stylesheet"
		/>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		/>
		<title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
	</head>
	<body>
		<Navbar />
		<header class="header-bg text-white">
			<div class="container text-center">
				<h1
					class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
				>
					Ecobjetivos: Sostenibilidad y Desarrollo
				</h1>
				<p
					class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
				>
					Construyendo juntos un futuro más verde y equitativo
				</p>
				<a
					href="#intro"
					class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
					>Descubre más</a
				>
			</div>
		</header>

		<main>
			<section id="intro" class="py-5 bg-light">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-md-6 animate-on-scroll">
							<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
							<p class="lead">
								Los Objetivos de Desarrollo Sostenible (ODS) son
								un llamado universal a la acción para erradicar
								la pobreza, proteger el planeta y garantizar que
								todas las personas gocen de paz y prosperidad
								para 2030.
							</p>
						</div>
						<div class="col-md-6 animate-on-scroll">
							<div class="text-white p-5 text-center">
								<Image
									src="/imgs/17Objetivos.png"
									alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
									class="img-thumbnail .img-fluid"
									width="730"
									height="450"
								/>
							</div>
						</div>
					</div>
				</div>
			</section>

			<section id="objetivos" class="py-5">
				<div class="container">
					<h2 class="text-center mb-5 animate-on-scroll">
						Nuestros Objetivos Principales
					</h2>
					<div class="row">
						{
							[
								"fa-seedling",
								"fa-hands-holding-circle",
								"fa-graduation-cap",
								"fa-industry",
							].map((icon, index) => (
								<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
									<div class="card h-100 text-center">
										<div class="card-body">
											<i
												class={`fa-solid ${icon} fa-3x mb-3 text-primary`}
											/>
											<h5 class="card-title">
												Objetivo {index + 1}
											</h5>
											<p class="card-text">
												Descripción del objetivo{" "}
												{index + 1}
											</p>
										</div>
									</div>
								</div>
							))
						}
					</div>
				</div>
			</section>

			<section id="impact" class="py-5 bg-success text-white">
				<div class="container">
					<h2 class="text-center mb-5 animate-on-scroll">
						Nuestro Impacto
					</h2>
					<div class="row text-center">
						{
							["1M+", "500K", "100+", "50+"].map(
								(number, index) => (
									<div class="col-md-3 mb-4 animate-on-scroll">
										<h3 class="display-4 fw-bold">
											{number}
										</h3>
										<p class="lead">
											Estadística {index + 1}
										</p>
									</div>
								),
							)
						}
					</div>
				</div>
			</section>

			<section id="gallery" class="py-5">
				<div class="container">
					<h2 class="text-center mb-5 animate-on-scroll">
						Galería de Impacto
					</h2>
					<div class="row g-4">
						{
							[1, 2, 3, 4, 5, 6].map((num) => (
								<div class="col-md-4 animate-on-scroll">
									<div class="bg-light p-4 text-center">
										<Image
											src={`/imgs/imgimp${num}.jpg`}
											alt={`Imagen de impacto ${num}`}
											class="img-fluid img-fit"
											width="10"
											height="10"
										/>
									</div>
								</div>
							))
						}
					</div>
				</div>
			</section>

			<section id="posts" class="py-5 bg-light">
				<div class="container">
					<h2 class="text-center mb-5 animate-on-scroll pt-1">
						Posts Recientes
					</h2>
					<ListadoPostsHorizontal />
				</div>
			</section>

			<section id="proyectos" class="py-5">
				<div class="container">
					<h2 class="text-center mb-5 animate-on-scroll pt-2">
						Nuestros Proyectos
					</h2>
					<div class="row">
						{
							[1, 2, 3, 4].map((num) => (
								<div class="col-md-6 mb-4 animate-on-scroll">
									<div class="card">
										<div class="card-body">
											<h5
												class="card-title"
												aria-label="Proyecto"
											>
												Proyecto {num}
											</h5>
											<p class="card-text">
												Descripción del proyecto {num} y
												su impacto en los ODS.
											</p>
											<a href="#" class="btn btn-success">
												Ver detalles
											</a>
										</div>
									</div>
								</div>
							))
						}
					</div>
				</div>
			</section>

			<section id="cta" class="py-5 bg-primary text-white text-center">
				<div class="container">
					<h2 class="display-4 mb-4 animate-on-scroll">
						¡Únete al Cambio!
					</h2>
					<p class="lead mb-5 animate-on-scroll">
						Juntos podemos crear un impacto duradero. Descubre cómo
						puedes contribuir a los ODS.
					</p>
					<a href="#" class="btn btn-lg btn-light animate-on-scroll"
						>¡Participa ahora!</a
					>
				</div>
			</section>
		</main>

		<footer class="bg-dark text-white py-4">
			<div class="container">
				<div class="row">
					<div class="col-md-6 text-center text-md-start">
						<p>
							&copy; 2024 Ecobjetivos. Todos los derechos
							reservados.
						</p>
					</div>
					<div class="col-md-6 text-center text-md-end">
						<a href="#" class="text-white me-2"
							><i class="fab fa-facebook-f"></i></a
						>
						<a href="#" class="text-white me-2"
							><i class="fab fa-twitter"></i></a
						>
						<a href="#" class="text-white me-2"
							><i class="fab fa-instagram"></i></a
						>
						<a href="#" class="text-white"
							><i class="fab fa-linkedin-in"></i></a
						>
					</div>
				</div>
			</div>
		</footer>

		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		></script>
		<script set:html={animateOnScroll} />
	</body>
</html>

<style is:global>
	@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
	@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	a {
		font-family: "Inter Tight", sans-serif !important;
		font-optical-sizing: auto;
		font-weight: 400 !important;
		font-style: normal;
	}
	.londrina-sketch-regular {
		font-family: "Londrina Sketch", sans-serif !important;
		font-weight: 400;
		font-style: normal;
	}
</style>
<style>
	.header-bg {
		background-color: #4caf50;
		min-height: 100vh;
		display: flex;
		align-items: center;
	}
	.animate-on-scroll {
		visibility: hidden;
	}
	.navbar-brand img {
		height: 40px;
		margin-right: 10px;
	}

	.img-fit {
		width: 100%;
		height: 200px;
		object-fit: cover;
		border-radius: 8px;
	}
</style>
