package landingpage

import "github.com/emarifer/go-templ-project-structure/services"

templ FooterContact() {
    <div class="text-white d-flex flex-row mb-3">
        <!-- style="display: flex; flex-direction: row; color: white;align-items: start; margin-bottom: 24px;" -->
        <div class="mr-3 mt-1">
            <i
                class="fas fa-map-marker-alt marker footer-icon text-warning"
            ></i>
        </div>
        <div class="flex-grow-1">
            // <p class="footer-sub-title text-grey">
            //     { alamat }
            // </p>
            <p class="footer-sub-title text-grey">
                Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota
                Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170
            </p>            
        </div>
    </div>
    <div class="d-flex flex-row">
        <div class="mr-3 mt-1">
            <i class="fas fa-phone footer-icon text-warning"></i>
        </div>
        <div class="flex-grow-1">
            // for _, d := range phone {
            //     <p class="footer-sub-title text-grey">{ d }</p>
            // }
            <p class="footer-sub-title text-grey">021-7392345</p>
            <p class="footer-sub-title text-grey">021-2702525</p>
            <p class="footer-sub-title text-grey">021-7255080</p>
        </div>
    </div> 
}

templ FooterNav(title string, data []services.FooterSubNav) {
    <div class="col-md col-lg mb-5">
        <h4 class="footer-title text-white mb-6">{ title }</h4>
        for _, d := range data {
            <div>
                <a class="footer-sub-title text-grey" href={ templ.SafeURL(d.FootSubNavLink) }>{ d.FootSubNavTitle }</a>
            </div>
        }
    </div>    
}

templ FooterSection(navlist []services.FooterNav) {
	<footer class="wrapper-custom bg-black pb-25 pt-25 mt-25">
        // HP
        <div class="d-xs-block d-sm-block d-md-none">
            <div class="row mb-5">
                <div class="col-md col-lg">
                    <img
                        src="asset-corporate-portal/media/landingpage/logo.png"
                        class="logo-footer"
                        width="126"
                        height="40"
                        alt="Your Brand"
                    />
                    @FooterContact()
                </div>
                <div class="mt-5">
                    for _, d := range navlist {
                        @FooterNav(d.FooterNavTitle, d.FooteSubNav)
                    }                   
                </div> 
            </div>            
        </div>
        // End HP

        // Tablet
        <div class="d-none d-md-block d-lg-none">
            <div class="row mb-5">
                <div class="col-md col-lg">
                    <img
                        src="asset-corporate-portal/media/landingpage/logo.png"
                        class="logo-footer"
                        width="126"
                        height="40"
                        alt="Your Brand"
                    />
                    @FooterContact()
                </div>
                <div class="col-md col-lg">
                    for _, d := range navlist {
                        @FooterNav(d.FooterNavTitle, d.FooteSubNav)
                    }                                                       
                </div>
            </div>            
        </div>
        // End Tablet

		// Dekstop
        <div class="d-none d-lg-block">
            <div class="row mb-5">
                <div class="col-md-12 col-lg">
                    <img
                        src="asset-corporate-portal/media/landingpage/logo.png"
                        class="logo-footer"
                        width="126"
                        height="40"
                        alt="Your Brand"
                    />
                    @FooterContact()
                </div>
                for _, d := range navlist {
                    @FooterNav(d.FooterNavTitle, d.FooteSubNav)
                }
            </div>            
        </div>
        // End Dekstop
        
        <div class="garis bg-grey"></div>
		<div class="row mt-4">
			<div class="col-md-6">
				<p class="footer-sub-title text-grey">
					© Copyright 2024. Organized PT SADHANA ABIYASA SAMPOERNA (Privacy
					Policy)
				</p>
			</div>
			<div class="col-md-6 text-right">
				<p class="footer-icons">
					<a href="#" class="mr-3"><i class="fab fa-whatsapp"></i></a>
					<a href="#" class="mr-3"><i class="fab fa-facebook"></i></a>
					<a href="#"><i class="fab fa-instagram"></i></a>
				</p>
			</div>
		</div>
	</footer>    
}