---
import Layout from '../layouts/Layout.astro';
import HomePortfolio from '../components/HomePortfolio.astro';
const whyus_data = [
    {"title": "Rapid Delivery: Designs in 24 Hours or Less"},
    {"title": "Flexible Iterations for Optimal Results"},
    {"title": "Cost-Effective 3D Design Solutions"},
    {"title": "Crafted by Seasoned Architects and Engineers with 15+ Years of Expertise"},
    {"title": "Over 3000 Projects Successfully Completed Across India"},
    {"title": "Exceptional Design Quality at Competitive Rates"},
    {"title": "Guaranteed Confidentiality for Your Designs"},
    {"title": "Efficient Project Monitoring and Transparency"},
    {"title": "Extensive Network: 100+ Collaborators in Architecture and Engineering"}
];
const cat_data = [{"cat" : "Architecture","img" : "/assets/art1.jpg","slug" : "/services"},{"cat" : "Interior Design","img" : "/assets/3d_res_inter/3drid_7.jpeg","slug" : "/services"},{"cat" : "Construction","img" : "/assets/con1.jpg","slug" : "/services"}];
const services_data = [
    {"name" : "Architectural Drawing", "img" : "/assets/art2.jpg", "slug" : "services"},
    {"name" : "Architectural Elevation", "img" : "/assets/elv3d.jpg", "slug" : "services"},
    {"name" : "2D Floor Plan", "img" : "/assets/floor2d.jpg", "slug" : "services"},
    {"name" : "3D Elevation", "img" : "/assets/elv3d2.jpg", "slug" : "services"},
    {"name" : "3D Representation", "img" : "/assets/rep3d.jpg", "slug" : "services"},
    {"name" : "Structural Analysis", "img" : "/assets/strana.jpg", "slug" : "services"},
    {"name" : "Structural Drawing", "img" : "/assets/3d_artitec/3dap_41.jpg", "slug" : "services"},
    {"name" : "Construction", "img" : "/assets/cons2.jpg", "slug" : "services"},
    {"name" : "Site Supervision", "img" : "/assets/sites.jpg", "slug" : "services"},
    {"name" : "Field Consultation", "img" : "/assets/fcon.jpg", "slug" : "services"},
    {"name" : "Interior Design", "img" : "/assets/3d_res_inter/3drid_5.jpeg", "slug" : "services"},
    {"name" : "Structure Design", "img" : "/assets/3d_house/3df_4.jpeg", "slug" : "services"}
];
---
<Layout title="3D House | Homepage">
	<main>
		<div>
			<section class="">
				<div class="flex flex-col justify-center place-items-center">
					<img class="w-screen h-[700px]" src="/assets/new_hero_image2.png" alt="" />
					<a href="/portfolio" class="bg-[#128c7e] bg-center box-shadow-2xl bg-cover font-bold py-4 px-8 rounded-md -mt-6 shadow-xl mb-4">View Portfolio</a>	
				</div>
			</section>
			<section class="container mx-auto px-4 max-w-3xl bg-[#000]/70 rounded-lg py-6">
				<div class="flex flex-col">
					<p class="text-center">About</p>
					<h1 class="text-center text-2xl font-bold my-3 bg-[#000]/70"> 3D House</h1>
					<p class="text-center mb-3 italic">Realistic your Dream</p>
					<p class="text-justify">Welcome to 3dhouse.com, your premier destination for top-tier architectural design and construction services. From conceptualization to realization, we bring your architectural dreams to life with precision and creativity. Explore our comprehensive range of services, including architectural drawing, 3D visualization, structural analysis, and interior design. Partner with us to elevate your space and embark on a journey of architectural excellence. Let's build your vision together. </p><br>
					<p class="text-justify">With over 10 years services, we've successfully delivered more than 3000 projects. Explore our portfolio to see our work and reach out to discuss your requirements.</p>
				</div>
				<div class="mt-4 space-y-4">
					<p class="font-bold">WHY US?</p>
					{whyus_data.map((data: {title : string | undefined}) =>
						<p>⭐ {data.title}</p>
					)}
				</div>
			</section>
			<section class="container mx-auto px-4">
				<p class="text-center text-[30px] font-bold my-6 bg-[#000]/70">Our Expertise</p>
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 space-x-4 ">
					{cat_data.map((data: {slug: string | undefined; cat: string | undefined; img: string | undefined;}) => (
					  <a href={data.slug} >
						<div class="flex justify-center place-items-center cat-card-background rounded-lg" style={{backgroundImage: `url(${data.img})`}}>
						  <p class="text-[25px] text-[#fff] font-bold bg-[#000]/60 py-3 px-6 rounded-md">{data.cat}</p>
						</div>
					  </a>
					))}
				</div>
			</section>
			<section class="container mx-auto px-4 ">
				<p class="text-center text-[30px] font-bold my-6 bg-[#000]/70">Services</p>
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
					{services_data.map((data: {slug: string | undefined; name: string | undefined; img: string | undefined;}) => (
						<a class=" shadow-xl rounded-md" href={data.slug}>
							<img class="rounded-t-lg h-[250px] w-full" src={data.img} alt="" />
							<h2 class="text-center py-6 bg-[#000]/80">{data.name}</h2>
						</a>
					))}
				</div>
				<div class="flex justify-center mt-4">
					<a href="/services" class="bg-[#128c7e] text-[#fff] px-6 py-4 rounded-md">View all Services</a>
				</div>
			</section>
			<section>
				<HomePortfolio />
			</section>
		</div>
	</main> 
	<!-- <Footer /> -->
</Layout>
<!-- <script is:inline>
	const images = [
		{ image_src: '/assets/3d_house/3df_1.webp' },
		{ image_src: '/assets/3d_house/3df_2.jpeg' },
		{ image_src: '/assets/3d_house/3df_3.jpeg' },
		{ image_src: '/assets/3d_house/3df_4.jpeg' },
		{ image_src: '/assets/3d_house/3df_5.jpeg' },
		{ image_src: '/assets/3d_house/3df_6.jpeg' },
		{ image_src: '/assets/3d_house/3df_7.jpeg' },
		{ image_src: '/assets/3d_house/3df_8.jpeg' },
		{ image_src: '/assets/3d_house/3df_9.jpeg' },
		{ image_src: '/assets/3d_house/3df_10.jpg' },
		{ image_src: '/assets/3d_house/3df_11.webp' },
		{ image_src: '/assets/3d_house/3df_12.jpeg' },
	];


	function createThumbnails() {
	const thumbnailsContainer = document.getElementById('thumbnails');
	images.forEach((image, index) => {
		const img = document.createElement('img');
		img.src = image.image_src;
		img.classList.add('w-full');
		img.classList.add('h-fit');
		img.classList.add('cursor-pointer');
		img.classList.add('border-2');
		img.alt = `Thumbnail ${index + 1}`;
		img.onclick = () => openModal(index);
		thumbnailsContainer.appendChild(img);
	});
	}

	createThumbnails();

	let currentImageIndex = 0;

	function openModal(index) {
		const modal = document.getElementById('myModal');
		const modalImg = document.querySelector('.modal-content');
		modal.style.display = 'block';
		modalImg.src = images[index].image_src;
		currentImageIndex = index;
		document.addEventListener('keydown', handleKeyDown);
	}

	function closeModal() {
		document.getElementById('myModal').style.display = 'none';
		document.removeEventListener('keydown', handleKeyDown);
	}

	function handleKeyDown(event) {
		if (document.getElementById('myModal').style.display === 'block') {
			if (event.key === 'ArrowLeft') {
			prevImage();
			} else if (event.key === 'ArrowRight') {
			nextImage();
			} else if (event.key === 'Escape') {
			closeModal();
			}
		}
	}

	function nextImage() {
		currentImageIndex = (currentImageIndex + 1) % images.length;
		openModal(currentImageIndex);
	}

	function prevImage() {
		currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
		openModal(currentImageIndex);
	}
</script> -->
<style>
	.cat-card-background {
		background-size: cover;
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		height: 200px;
		text-align: center;
		transition: all 0.3s ease-in-out;
	}

	.cat-card-background:hover {
		transform: scale(1.05);
	}

	.thumbnails img {
		cursor: pointer;
	}

	.modal {
		display: none;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
	}

	.modal-content {
		max-width: 80%;
		max-height: 80%;
		margin: auto;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.close {
		color: #fff;
		position: absolute;
		top: 10px;
		right: 25px;
		font-size: 35px;
		font-weight: bold;
		cursor: pointer;
	}

	.close:hover,
	.close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}

	button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		cursor: pointer;
		padding: 10px;
	}

	.prev {
		left: 10px;
	}

	.next {
		right: 10px;
	}


</style>