---
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
import Dates from "./Dates.astro";

import Resources from "./Resources.astro";
import Hero from "./Hero.astro";
const paraContent = await Astro.glob("../content/aboutpara/*.md");
// const dateContent = await Astro.glob("../content/dates/*.md");
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/aboutpara/significance/*.md");
const faqContent = await Astro.glob("../content/faq/*.md");
import iitb from "../assets/img/IITB.png";
import fossee from "../assets/img/FOSSEE.png";
import st from "../assets/img/spoken.png";
import process from "../assets/img/process.png";
import Nmeict from "../assets/img/NMEICT -logo.png";
import Moe from "../assets/img/MOE-logo.png";
---

<!-- Introduction -->
<div id="home">
    <Hero />
<div class="bg-gray-50 ">
    <div class="md:px-20 px-3">
    <h1 class=" item-center text-center section-title mx-4 px-4" id="about">About</h1>
    <!-- <h2 class="welcome-heading"> Welcome to the Open Source Hardware IoT GIS Hackathon!</h2> -->
    {paraContent.map((point) => {
        return ( <p class="text-justify"> {point.frontmatter.para}</p>)})}


    <!-- <h1 class="mt-3 font-bold text-2xl">Benefits:</h1>{
    significanceContent.map((point) => {
        return (
                <ul class="md:pl-6 pl-3 list-disc" >
                    {/* <p>{point.frontmatter.intro}</p> */}
                    {
                        point.frontmatter.point.map((p:string) => {
                            return (
                                <li  class="md:text-lg text-sm ">{p}</li>
                            )
                        })
                    }
                </ul>
                // <p class="significance-end">{point.frontmatter.end}</p>
            )
        })
        } -->
        </div>
</div>

<!-- Important Dates -->
<div class="bg-white md:px-4 pb-5">
    <div class="md:px-20 px-3">
      <h1 class="text-center section-title mx-4" id="date">
        Important Dates
      </h1>
      <div class="overflow-x-auto text-left">
        <table class="table-auto w-full border-collapse border border-gray-300 text-left">
          <thead>
            <tr class="bg-gray-200">
              <th class="w-1/2 border border-gray-300 px-4 py-2">Event</th>
              <th class="w-1/2 border border-gray-300 px-4 py-2">Date</th>
            </tr>
          </thead>
          <tbody class="">
            <tr>
              <td class="border border-gray-300 px-4 py-2">Registration Opens</td>
              <td class="border border-gray-300 px-4 py-2">24 December 2024</td>
            </tr>
            <!-- <tr class="bg-gray-50">
              <td class="border border-gray-300 px-4 py-2">Pre-Hackathon/Inaugural Event</td>
              <td class="border border-gray-300 px-4 py-2">TBD</td>
            </tr> -->
            <tr>
              <td class="border border-gray-300 px-4 py-2">Hackathon Start Date</td>
              <td class="border border-gray-300 px-4 py-2">24 December 2024</td>
            </tr>
            <tr class="bg-gray-50">
              <td class="border border-gray-300 px-4 py-2">Submission Deadline</td>
              <td class="border border-gray-300 px-4 py-2">20 February 2025</td>
            </tr>
            <tr>
              <td class="border border-gray-300 px-4 py-2">Results Announcement</td>
              <td class="border border-gray-300 px-4 py-2">11 April 2025</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  
  
  <div class="grid grid-cols-1 md:grid-cols-1 gap-0 ">
  <div class=" md:px-4 border-b-2 border-white border-">
    <div class="md:px-20 px-3">
      <h1 class="text-center section-title mx-4" id="who-can-participate">
        Who Can Participate?
      </h1>
      <ul class="list-disc list-outside space-y-1">
        <li>Open ONLY to individuals (no team participation).</li>
        <li>Students, researchers, and professionals passionate about numerical computation.</li>
        <li>Participants must have a basic understanding of programming and using computational tools.</li>
      </ul>
    </div>
  </div>
  


  
  




  </div>
</div>

  <div class="bg-white md:px-4 pb-5">
    <div class="md:px-20 px-3 space-x-6">
      <h1 class=" text-center section-title mx-4 mb-5" id="register">
        How to participate?
      </h1>
      
        <!--<h1 class="font-bold text-base xl:text-xl text-gray-900 mb-4">To participate in the hackathon, please follow these mandatory steps: </h1>
<h1 class="font-bold text-base xl:text-xl text-gray-900 mb-4">To register for the hackathon, we have a two-step registration process: </h1>-->
        <ol class="text-justify list-decimal list-outside space-y-4">
            <!--<li class="leading-6">
              Before proceeding, it is mandatory to fill out this Google Form: 
                <a href="https://docs.google.com/forms/d/e/1FAIpQLSc7sSXer3wta4B9QuT_x7xa2tx53_2uJ6PJM7t0oCdww1rPgA/viewform?usp=sf_link" 
                   target="_blank" 
                   class="text-red-600 hover:text-red-400  hover:underline">Click here to open</a>.
                   Your participation will not be considered if this form is not filled out.

            </li>
            <li class="leading-6">
              After completing the form, visit this website to read all the instructions: 
                <a href="https://scilab.in/case-study-portal/case-study-project" 
                   target="_blank" 
                   class="text-red-600 hover:text-red-400   hover:underline">Click here to open</a>.
                   Please go through all the links provided under the Case Study Project tab.
            </li>-->
<li>To register for the hackathon, we have a two-step registration process:

<ul class="list-disc pl-5">
  <li>
    Step 1: Register through the Google form:
    <ul style="list-style-type: circle; padding-left: 20px;">
      <li>
        To register for the hackathon, it is mandatory to fill out this Google Form:
        <a href="https://docs.google.com/forms/d/e/1FAIpQLSc7sSXer3wta4B9QuT_x7xa2tx53_2uJ6PJM7t0oCdww1rPgA/viewform?usp=sf_link" target="_blank" class="text-blue-500 hover:text-blue-700">
          Click here to register
        </a>.
      </li>
    </ul>
  </li>
  <li>
    Step 2: Submit your Case study proposal:
    <ul style="list-style-type:  circle; padding-left: 20px;">
      <li>
        After filling out the Google form, visit the website:
        <a href="https://scilab.in/case-study-portal/case-study-project" target="_blank" class="text-blue-500 hover:text-blue-700">
          https://scilab.in/case-study-portal/case-study-project
        </a> to read all the instructions thoroughly and submit your proposal.
      </li>
      <li>
        You can find the proposal form on this link:
        <a href="https://scilab.in/case-study-portal/procedure" target="_blank" class="text-blue-500 hover:text-blue-700">
          https://scilab.in/case-study-portal/procedure
        </a>. (This step is mandatory. Your registration will not be considered unless you submit a proposal)
      </li>
    </ul>
  </li>
</ul>

</li>
            <li class="">
              <!--On the same website, you will find a Proposal Form. Fill it out for your chosen Case Study project as per the guidelines provided.<br />-->
                <span class="font-bold">Important: When mentioning the name of your chosen case study project in the proposal form, use this format: <span class="italic">"NameOfCaseStudyProject (SCSH25)"</span></span>
            </li>
            <li class="">
              Submit your proposal as per the instructions, and our team will review and approve it based on the abstract you provide. It is important that the abstract should provide a clear overview of the case study project and include a reference link to the selected case study.
            </li>
        </ol>
        <p class="mt-5">By completing these steps, you will be fully registered for the hackathon.</p>
        <div class="flex items-center content-center justify-center">
        <img src={process.src} alt="process flow of registratin" class="object-cover py-4" style="width: 634px;"  decoding="async">
      </div>
      <!-- <p class="leading-relaxed mb-4 md:text-xl text-sm text-center">
        Visit this webpage to have detailed information about the case study project and go through all the links given under the Case Study Project tab.
        <br />Submit the proposal for your chosen Case Study project as per the guidelines, and our team will review and approve it based on the abstract provided.
      </p>
      <p class=" md:text-xl text-sm text-center">
        Link: 
        <a 
          href="https://scilab.in/case-study-portal/case-study-project" 
          class="text-blue-600 hover:text-blue-800 underline"
          target="_blank"
          rel="noopener noreferrer">
          https://scilab.in/case-study-portal/case-study-project
        </a>
      </p> -->
    </div>
  </div>


  
  <div class="bg-gray-50 md:px-4 pb-5">
    <div class="md:px-20 px-3">
      <h1 class="text-center section-title mx-4 px-4" id="rules">Rules and Regulations</h1>
  
      <div class="flex flex-col justify-center text-justify space-y-3 mt-4">
        <ul class="list-disc">
        <li>The decision of the review committee and organizers in declaring the results will be final. No queries in this regard will be entertained.</li>
       <li>The same person cannot participate twice.</li>
        <!-- <li>If a person is found participating in more than one team, both the teams will be disqualified from the Hackathon.</li>
        <li>There will be only one point of contact (the team leader) with the organizers.</li> -->
        <li>All submitted case studies will be made publicly available as open-source projects.</li>
        <li>Any participant found to be indulging in any form of malpractice will be immediately disqualified.</li>
        
        </ul>
      </div>
    </div>
  </div>
  <div class=" md:px-4 border-l-2 border-b-2 border-white pb-5">
    <div class="md:px-20 px-3">
      <h1 class="text-center section-title mx-4" id="why-participate">
        Benefits
      </h1>
      <ul class="list-disc list-outside space-y-1">
        <li>Free registration and open to everyone.</li>
        <li>Gain hands-on experience with Scilab for solving real-world problems.</li>
        <li>Win cash prize for top-performing projects.</li>
        <li>eCertificates for good submissions.</li>
        <li>Exclusive recognition for outstanding projects on the FOSSEE,IIT Bombay - Scilab website.</li>
        <li>Top performers may be offered internships with FOSSEE, IIT Bombay.</li>
        </ul>
    </div>
  </div>
  <div class="max-w-lg mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border">
    <h1 class="text-center section-title mx-4 px-4" id="rules">Rewards</h1>
    <ul class="space-y-4">
        <li class="flex justify-between border-b pb-2">
            <span>First Prize:</span>
            <span class="">Rs. 10,000</span>
        </li>
        <li class="flex justify-between border-b pb-2">
            <span>Second Prize:</span>
            <span class="">Rs. 5,000</span>
        </li>
        <li class="flex justify-between border-b pb-2">
            <span>Third Prize:</span>
            <span class="">Rs. 3,500</span>
        </li>
        <li class="flex justify-between">
            <span>Consolation Prize:</span>
            <span class="">Rs. 2,500</span>
        </li>
    </ul>
    <p class="mt-6">All winners will be awarded with a Certificate of Achievement</p>
</div>




<h2 class="text-center mb-2 section-title  hr-lines">ORGANISERS</h2>
<footer class=" text-white mt-1 pb-4">
    <!-- Organizers Section -->
    
      
      <div class="max-w-6xl mx-auto px-4">
      <div class="flex d-flex justify-center items-center space-x-3 mb-6 bg-white text-green-300 ">
        <a class="hover:scale-105" href="https://www.iitb.ac.in/" target="_blank"><img  src={iitb.src} alt="IIT Bombay"  class="logos" decoding="async"></a>
        <a class="hover:scale-105" href="https://fossee.in/" target="_blank"> <img src={fossee.src} alt="FOSSEE" class="logos"  decoding="async"></a>
          <a class="hover:scale-105" href="https://spoken-tutorial.org/" target="_blank"> <img src={st.src} alt="Spoken Tutorial" class="logos" decoding="async"></a>
          <a class="hover:scale-105" href="https://spoken-tutorial.org/" target="_blank"> <img src={Moe.src} alt="MOE" class="img logos" decoding="async"></a>
          <a class="hover:scale-105" href="https://spoken-tutorial.org/" target="_blank"> <img src={Nmeict.src} alt="NMEICT" class="logos" decoding="async"></a>
          
      </div>

</div></footer>


 <!-- <div class="grid md:grid-cols-2 background-url">
 <div>
<Dates />
</div>


<div class="flex items-center justify-center" id ="eligibility">
    <div class="">
    <h1 class="text-4xl font-bold item-center text-center section-title">Eligibility</h1>
   
    <div class="regBtnContainer">
        <p class="text-lg text-justify mx-3 px-3">Students pursuing any engineering/ non-engineering course or graduates/ freshers, who are enthusiastic about software development may apply.  While having a background in Computer Science and Engineering/Information Technology or related fields is preferable, we also consider students from other streams with strong programming skills.

        </p>
    </div>
</div>
</div>

</div> -->
<!-- Registration -->
<!-- <div class="registration-container   background-url" id ="register">
    <h1 class="text-4xl font-bold item-center text-center section-title">Registration</h1>
    <p class="text-center text-xl">Please click on the following button to register yourself for the competition</p>
    <div class="items-center text-center">
        <a href="https://docs.google.com/forms/d/e/1FAIpQLSeuAU18u2mXkVZLxPeOyxfylcEn3GXYGmVdSsg37bPsUlUahw/viewform?usp=pp_url" target="_blank"><button class="custom-btn btn-15">Register</button></a>
           
        
    </div>
</div> -->



<!-- <Faq /> -->
<!-- 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> -->




<!-- Partners and Organisers -->

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



<!-- FAQ -->




<!-- <Resources /> -->

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

<div class="bg-[#e7fcff] text-center pb-10" id ="contact">
    <h1 class="section-title text-center">Contact Us
     
</h1>

    <p class="text-xl">
        For more information, email us at
    <pspan class="email">
        <svg xmlns="http://www.w3.org/2000/svg" class="!inline-block text-xl" width="32" height="32" viewBox="0 0 32 32" {...props}>
            <path fill="black" class="!inline-block" 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>
        : 
        <a href="mailto:contact@scilab.in" class="text-xl text-blue-600 hover:underline" target="_blank">contact@scilab.in</a>
        
    </span></p>
  
</div>

</div>
<!-- CSS -->

  <style>
     .logos {
    width: 150px; /* Adjust to preferred size */
    height: 100px; /* Maintain aspect ratio */
    object-fit: contain; /* Ensures the image fits within the container */
    max-height: 130px; /* Optional for uniform height */
  }
    .background-url{
        background: url(../assets/img/bg-01.png);
        background-attachment: fixed;
        background-size: cover;
    }

 
    button {
  margin: 20px;
}
.custom-btn {
  color: #0a4850;
  width: 25rem;
  height: 50px;
  /* padding: 10px 25px; */
 
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  display: inline-block;
  font-size: larger;
}
@media screen and (max-width:498px) {
    .custom-btn {
        width: 20rem;
        height: 50px;
    }
}
    .btn-15 {
        font-size:larger;
        color: #0a4850;
        color: #ffcc00;
  border: 2px solid#00e1ff;
  border-radius: 18px;
  background: #fffdf3;
  box-shadow: 2px 2px 5px #007a8a, 2px 2px 5px #007a8a inset;
  z-index: 1;
  font-weight: 900;
  transition: 0.4s ease-in-out;
  
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
 z-index: -1;
 
  background: #ffcc00;
  border-radius: 18px;
  box-shadow:
   0 0 20px  #ffcc00;
  transition: all 0.4s ease-in-out;
  
}
.btn-15:hover {
  color: #0a4850;
  border: 2px solid#fff5cb;
  font-weight: 600;
  font-size:x-large;
  box-shadow: 2px 2px 5px #ffcc00, 2px 2px 5px #ffcc00 inset;
  
}
.btn-15:hover:after {
  left: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}
    
  
  </style>