---
const props = Astro.props
import Carousel from './Carousel.astro'
// import 'bootstrap/dist/css/bootstrap.css'
// import faqJson from '../../public/jsonData/faq.json'
// import homeJson from '../../public/jsonData/home.json'

// interface Coreteam{
//     name : string;
//     position : string[];
//     institute : string;
// }

// interface Significance{
//     intro : string;
//     point: string[];
//     end: string;
// }

// interface PartnerAndOrganisations{
//     name: string;
//     description: string;
// }

// interface Faq{
//     question: string;
//     answer: string;
// }

// interface Home{
//     significance: Significance[];
//     purpose: string[];
//     partners: PartnerAndOrganisations[];
//     coreteam: Coreteam[];
// }

// const homeData : Home = homeJson;
// const faqData : Faq[] = faqJson;

//importing content from markdown files

const coreTeamContent = await Astro.glob("../content/homePage/coreTeam/*.md");
const partnerContent = await Astro.glob("../content/homePage/partner/*.md");
const purposeContent = await Astro.glob("../content/homePage/purpose/*.md");
const significanceContent = await Astro.glob("../content/homePage/significance/*.md");
const faqContent = await Astro.glob("../content/faq/*.md");
---

<!-- Introduction -->

<div class="main-container">
    <h1 class="intro">Introducing the Hackathon: Unlocking Innovation for a Better World</h1>
    <h2 class="welcome-heading"> Welcome to the Open Source Hardware IoT GIS Hackathon!</h2>
    <p class="welcome-text"> Welcome to the National Level Open Hardware-IoT Geospatial Hackathon, a stage where innovation knows no boundaries. This premier event brings together visionaries, tech enthusiasts, and problem solvers from across the nation to harness the power of open hardware, the Internet of Things (IoT), and geospatial technology. Get ready to explore uncharted possibilities, collaborate on real-world challenges, and make a significant impact on our world.</p>
    <h1 class="body-heading">Significance:</h1>{
    significanceContent.map((point) => {
        return (
                <ul class="significance-points" style="list-style-type: square;">
                    <p>{point.frontmatter.intro}</p>
                    {
                        point.frontmatter.point.map((p:string) => {
                            return (
                                <li>{p}</li>
                            )
                        })
                    }
                </ul>
                <p class="significance-end">{point.frontmatter.end}</p>
            )
        })
        }
</div>


<!-- Significance -->

<div class="body-container">
    <h1 class="intro" id = "purpose">Purpose</h1>{
        purposeContent.map((point) => {
            return (
                <p class="significance-end">{point.frontmatter.desc}</p>
            )
        })
    }
</div>


<!-- Registration -->

<div class="registration-container" id ="register">
    <h1 class="intro">Registration</h1>
    <p>Please click on the following button to register yourself for the Hackathon</p>
    <div class="regBtnContainer">
        <div class="hack-button">
            <div id="slide"></div>
            <a href="https://forms dile/aVopwiwmRM35FXQT8" target="_blank">Register</a>
        </div>
    </div>
</div>


<!-- Partners and Organisers -->

<div class="pno-container" id = "partners">
    <h1 class="intro">Partner and Organisers</h1>
    <div class="tech-imgs">
        <Carousel/>
    </div>{
        partnerContent.map((partner) => {
            return (
                <p>
                    <span class="subheading">{partner.frontmatter.name}</span>
                    {partner.frontmatter.description}
                </p>
            )
        })
    }
</div>



<!-- FAQ -->

<div class="faq-container" id = "faq">
    <h1 class="intro">Frequently Asked Questions (FAQ)</h1>{
        faqContent.map((faq,index) => {
            return (
                <h4 class="faq-heading">{index + 1}. {faq.frontmatter.question}</h4>
                <p> <span>Answer: </span>{faq.frontmatter.answer}</p>
            )
        })
    }
</div>




<!-- Core Team and Contact Us -->

<div class="coreteam-container" id ="contact-us">
    <h1>Core Team and Contact Us <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
        <path fill="currentColor" d="M4.05 21q-.45 0-.75-.3t-.3-.75V15.9q0-.325.225-.587t.575-.363l3.45-.7q.35-.05.713.063t.587.337L10.9 17q.95-.55 1.8-1.213t1.625-1.437q.825-.8 1.513-1.662t1.187-1.788L14.6 8.45q-.2-.2-.275-.475T14.3 7.3l.65-3.5q.05-.325.325-.562T15.9 3h4.05q.45 0 .75.3t.3.75q0 3.125-1.362 6.175t-3.863 5.55t-5.55 3.863T4.05 21" />
    </svg></h1>
    <div class="contact-us">{
        coreTeamContent.map((member) => {
            return (
                <div class="teach">
                    <h4>{member.frontmatter.name}</h4>
                    {member.frontmatter.position.map((pos:string) => {
                        return (
                            <p>{pos}</p>
                        )
                    })}
                    <p>{member.frontmatter.institute}</p>
                </div>
            )
        })
        }
    </div>
    <p>
        Please write to us in case of any queries regarding the Hackathon at:
    </p>
    <p class="email">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" {...props}>
            <path fill="black" d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-2.2 2L16 14.78L6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z" />
        </svg>
        Email : 
        <a href="mailto:rajesh@cse.iitb.ac.in" target="_blank">rajesh@cse.iitb.ac.in</a>
        /
        <a href="mailto:mohamedkasim@iitb.ac.in" target="_blank">mohamedkasim@iitb.ac.in</a>
    </p>
</div>


<!-- CSS -->

  <style>

    .main-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10vh;
        width: 100%;
    }
    .intro{
        color: rgb(2, 2, 110);
        font-size: 6vh;
        /* font-family: 'Roboto Slab', serif !important; */
        padding: 3vh 5vw;
        font-weight: 700;
    }
    .intro:hover{
        color: blue;
    }

    .welcome-heading{
        font-size: 4.7vh;
        text-align: center;
    }

    .welcome-text{
        font-size: 2.5vh;
        padding: 2vh 5vw;
        margin: 0;
    }
    .body-heading{
        font-size: 3.5vh;
        padding: 0 5vw;
        text-align: left;
        font-weight: 600;
    }

    .significance-points{
        padding: 0 8vw;
    }

    .significance-points p{
        font-size: 2.3vh;
    }
    .significance-points li{
        font-size: 2.3vh;
    }
    .significance-end{
        font-size: 2.3vh;
        padding: 0 5vw;
        text-align: left;
    }

    .body-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10vh;
    }

    .registration-container{
        padding: 0 10vh;
    }

    .registration-container p{
        text-align: center;
        font-size: 2.5vh;
        padding: 1vh 5vh;
    }
    
    .regBtnContainer{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hack-button {
        display: flex;
        flex-direction: column;
        padding: 1vh 2vw;
        z-index: 0;
        width: 20vw;
        max-width: 40vw;
        border: 2px solid blue;
        margin: 20px 20px 20px 20px;
        color: blue;
        background-color: white;
        text-decoration: none;
        font-size: 2vh;
        letter-spacing: 1.5px;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        overflow: hidden;
        box-shadow: 0 0 5px #000080, 0 0 5px #000080 inset;
    }

    .hack-button {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .hack-button a {
        position: relative;
        text-decoration: none;
        transition: all .35s ease-Out;
    }

    #slide {
        width: 100%;
        height: 100%;
        left: -400px ;
        background: #BFC0C0;
        position: absolute;
        bottom: 0;
        transition: all .35s ease-Out;
    }

    .hack-button:hover #slide {
        left: 0;
        background-color: rgb(6, 6, 77);
    }
    .hack-button:hover a{
        color: white;
    }
    
    .pno-container{
        padding: 0 10vh;
    }

    .pno-container p{
        text-align: left;
        padding: 0 4vw;
        font-size: 2.4vh;
    }
    .subheading{
        font-weight: 700;
    }

    .faq-container{
        padding: 0 10vh;
    }

    .faq-container h4{
        font-size: 2.5vh;
        padding: 1vh 9vh;
        font-weight: 700;
    }

    .faq-container p{
        font-size: 2.4vh;
        padding: 1vh 9vh;
        /* border-bottom: 1px solid rgb(116, 106, 106,0.4); */
    }

    .faq-container p span{
        font-weight: 700;
    }


    .coreteam-container{
        padding: 0 10vh;
    }

    .coreteam-container h1{
        color: rgb(2, 2, 110);
        font-size: 7.2vh;
        /* font-family: 'Roboto Slab', serif !important; */
        padding: 3vh 5vw;
        text-align: center;
        font-weight: 700;
    }
    
    .coreteam-container h1 svg{
        display: inline;
    }
    .coreteam-container h1:hover{
        color: blue;
    }
    .coreteam-container p{
        text-align: center;
        font-size: 2.5vh;
    }

    .email{
        text-align: center;
        font-size: 2.5vh;
        padding: 1vh 0;
        font-weight: 500;
    }
    .email a{
        text-decoration: none;
        color: rgb(31, 104, 128);
    }

    .email a:hover{
        color: blue;
        text-decoration: underline;
    }

    .email svg{
        display: inline;
        margin: 0 1vh
    }

    .contact-us{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 2vh 1vw;
        flex-wrap: wrap
    }
    
    .teach{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        border: 1px solid rgb(206, 201, 201);
        padding: 1vh 2vw;
        border-radius: 11px;
        margin: 1vh;
        width: 45%;
    }
    .teach h4{
        margin-bottom: 3vh;
        /* font-family: 'Roboto Slab', serif !important; */
        font-weight: bolder;
        font-size: 2.5vh;
        text-align: center;
    }
    .teach p{
        font-size: 2.4vh;
        font-weight: 600;
    }
    @media screen and (max-width: 800px) {
        .intro, .coreteam-container h1{
            font-size: 5vh;
            text-align: center;
        }
        .welcome-heading{
            font-size: 3.5vh;
        }
        .contact-us{
            flex-direction: column;
        }
        .teach{
            width: 100%;
        }
        .teach h4{
            text-align: center;
        }

        .faq-container h4{
            font-size: 2.2vh;
            padding: 1vh 5vw;
        }

        .faq-container p{
            font-size: 2.2vh;
            padding: 0 5vw;
        }

        .faq-container p span{
            font-weight: 700;
        }

        .faq-container, .pno-container, .body-container, .registration-container, .main-container{
            padding: 0 5vw;
        }
    }

  </style>