---
import Layout from '../layouts/Layout.astro';
import FloorPlan3D from '../components/FloorPlan3D.astro';
import Artitect3D from '../components/Artitect3D.astro';
import Elevation3D from '../components/Elevation3D.astro';
import ResidentialInterior from '../components/ResidentialInterior.astro';
---
<Layout title='3D House | Portfolio'>
    <main>
        <div>
            <section class="pt-20">
                <div class="container mx-auto px-4">
                    <p class="text-[25px] font-bold text-center  "><span class="bg-[#000]/60 py-3 px-6 rounded-lg">Portfolio</span></p>
                    <div class="flex flex-row lg:justify-center overflow-x-auto whitespace-nowrap mt-4">
                        <button onclick="filterSections('all', this)" class="tablink bg-[#000]/60 inline-block py-2 px-4 text-blue-500 font-semibold">All</button>
                        <button onclick="filterSections('artiTect3D', this)" class="tablink bg-[#000]/60 inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">Architecture Planning</button>
                        <button onclick="filterSections('floorPlan3D', this)" class="tablink bg-[#000]/60 inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">3d Floor Plan</button>
                        <button onclick="filterSections('elevation3D', this)" class="tablink bg-[#000]/60 inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">3d elevation</button>
                        <button onclick="filterSections('resdenInter', this)" class="tablink bg-[#000]/60 inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">Residential Interior Design</button>
                    </div>
                </div>
                <div class="py-4" id="floorPlan3D">
                    <FloorPlan3D />
                </div> 
                <div class="py-4" id="artiTect3D">
                    <Artitect3D />
                </div>
                <div class="py-4" id="elevation3D">
                    <Elevation3D />
                </div>
                <div class="py-4" id="resdenInter">
                    <ResidentialInterior />
                </div>
            </section>
        </div>
    </main>
</Layout>
<script is:inline>
    let allIDs = ["floorPlan3D", "artiTect3D", "elevation3D", "resdenInter"];

    function filterSections(sectionType) {
        allIDs.forEach(id => {
            const section = document.getElementById(id);
            if (section) {
                if (sectionType === 'all') {
                    section.style.display = 'block';
                } else if (id.toLowerCase().includes(sectionType.toLowerCase())) {
                    section.style.display = 'block';
					
                } else {
                    section.style.display = 'none';
                }
            }
        });
    }
</script>