{% extends 'base.html.twig' %}

{% block title %}Home - College Directory{% endblock %}

{% block body %}
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

        h1, h2, h3, h4, h5, h6, p, a, button, span, li, ul, div, body {
            font-family: "Roboto", sans-serif;
        }

        .btn {
            padding: 5px 20px;
        }

        .text-secondary {
            color: #6f42c1 !important;
        }

        .btn-secondary {
            background: #6f42c1 !important;
        }

        .bg-secondary {
            background: #6f42c1 !important;
            color: #fff;
        }

        .header {
            -webkit-clip-path: polygon(0 0, 100% 0%, 100% 88%, 0% 100%);
            clip-path: polygon(0 0, 100% 0%, 100% 88%, 0% 100%);
            width: 100%;
            height: 100%;
            padding-bottom: 100px;
        }

        .slider-img {
            border-radius: 50%;
            width: 220px;
            height: 220px;
            border: 10px solid #fff;
            box-shadow: 10px 20px #cccccc3b;

        }

        .card-hover,
        .explorebox {
            border-radius: 20px;
            box-shadow: 10px 5px 02px #cccc
        }

    </style>

    <div class="">
        <!-- Centered Logo -->
        <div class="text-center">

        </div>

        <!-- Header / Tagline -->
        <div class="header bg-primary pt-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <h1 class="display-4 fw-bold text-light mb-3">Find the right path<br/>for your future</h1>
                        <p class="lead text-light">Discover colleges and classes that match your interests and goal </p>
                    </div>
                    <div class="col-md-4">
                        <img src="{{ asset('assets/images/logo/logo.jpeg') }}"
                             alt="College Directory Logo"
                             class="img-fluid slider-img" width="200px">
                    </div>
                </div>
            </div>
        </div>


        <!-- Main Options -->
        <div class="container">
            <div class="row g-4 my-5">

                <div class="col-md-4 col-sm">
                    <a href="{{ path('location',{type:'college'}) }}" class="text-decoration-none">
                        <div class="card card-hover bg-purple-light border-purple">
                            <div class="card-body text-center">
                                <div class="mb-4 text-purple" style="color:#6f42c1;">
                                    <!-- College Icon SVG -->
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103.08 122.88" width="40"
                                         height="40">
                                        <path fill="#6f42c1" fill-rule="evenodd"
                                              d="M49.35,35.5a1.67,1.67,0,1,1,3.34,0V42h4.79a1.68,1.68,0,0,1,0,3.35H51a1.67,1.67,0,0,1-1.67-1.67V35.5ZM53.43,3V19.74l26.12,15c2.44,1.58,2.14.89,2.14,3.76V52.65h15A6.41,6.41,0,0,1,103.08,59v63.85H67.69V80.37c0-8.34-4.19-13.72-9.56-16.1a16.3,16.3,0,0,0-13.18,0c-5.37,2.38-9.56,7.75-9.56,16.1v42.51H0V59a6.4,6.4,0,0,1,6.39-6.38h15V38.37c0-2.82-.18-2.12,2.28-3.66l26.88-15V3a2,2,0,0,1-.41-1.14A1.84,1.84,0,1,1,53.43,3Zm1.39.71C64.47-3,65.19,10.2,74.66,2V15.4c-9,8.12-11-5-19.84,1.67V3.67Zm.92,48.65a11.38,11.38,0,1,0-9-.25,11.39,11.39,0,0,0,9,.25Zm7.67,70.56H39.67V80.37c0-6.4,3.07-10.46,7-12.21a12.22,12.22,0,0,1,9.74,0c3.93,1.75,7,5.81,7,12.21v42.51Zm12-15.11h7.08V114H75.4v-6.24ZM86.88,88.19H94V82H86.88v6.24Zm0-12.91H94V69H86.88v6.24ZM75.4,88.19h7.08V82H75.4v6.24Zm0-12.91h7.08V69H75.4v6.24ZM86.88,94.86H94v6.24H86.88V94.86Zm0,12.91H94V114H86.88v-6.24ZM75.4,94.86h7.08v6.24H75.4V94.86ZM86.88,105.82h7.08v6.24H86.88v-6.24ZM9.13,107.77H16.2V114H9.13v-6.24ZM20.6,88.19h7.08V82H20.6v6.24Zm0-12.91h7.08V69H20.6v6.24ZM9.13,88.19H16.2V82H9.13v6.24Zm0-12.91H16.2V69H9.13v6.24ZM20.6,94.86h7.08v6.24H20.6V94.86Zm0,12.91h7.08V114H20.6v-6.24ZM9.13,94.86H16.2v6.24H9.13V94.86Z"/>
                                    </svg>
                                </div>
                                <h5 class="card-title text-secondary">Find Junior Colleges</h5>
                                <p class="card-text text-muted">Browse colleges and universities that match your
                                    criteria</p>
                                <a href="{{ path('location',{type:'college'}) }}"
                                   class="btn btn-secondary mt-3">Explore</a>
                            </div>
                        </div>
                    </a>
                </div>


                <div class="col-md-4 col-sm">
                    <a href="{{ path('location',{type:'classes'}) }}" class="text-decoration-none">
                        <div class="card card-hover  border-primary" style="background:#e6f0ff">
                            <div class="card-body text-center">
                                <div class="mb-4" style="color:rgb(77, 80, 247);">
                                    <!-- Classes Icon SVG -->
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 118.27" width="40"
                                         height="40">
                                        <g fill="currentColor">
                                            <path d="M9.77,9.18c-1.08,0-1.95-0.87-1.95-1.95c0-1.08,0.87-1.95,1.95-1.95h51.91V1.95c0-1.08,0.87-1.95,1.95-1.95 c1.08,0,1.95,0.87,1.95,1.95v3.33h48.32c1.08,0,1.95,0.87,1.95,1.95c0,1.08-0.87,1.95-1.95,1.95h-4.49v49.8h4.7 c1.08,0,1.95,0.87,1.95,1.95c0,1.08-0.87,1.95-1.95,1.95H65.85v5.53c0.1,0.07,0.17,0.14,0.24,0.21l11.95,11.36 c0.77,0.73,0.8,1.99,0.07,2.75c-0.73,0.77-1.99,0.8-2.75,0.07l-9.48-9.02v9.89c0,1.08-0.87,1.95-1.95,1.95 c-1.08,0-1.95-0.87-1.95-1.95V73.39l-9.89,9.41c-0.77,0.73-2.02,0.73-2.75-0.07c-0.73-0.77-0.73-2.02,0.07-2.75l11.95-11.36 c0.17-0.17,0.42-0.31,0.63-0.42v-5.32H35.51c-1.08,0-1.95-0.87-1.95-1.95c0-1.08,0.87-1.95,1.95-1.95h69.99V9.18H9.77L9.77,9.18z M77.17,105.82c-8.69,0-2.97,0.68-1.78-8.76c1.77-14.12,15.19-14.12,17.17,0c1.27,9.08,6.72,8.76-1.78,8.76h-3.39 c-0.01,2.31-0.37,3.49,2.03,4.79c1.22,0.66,3.5,1.16,5.45,1.92c2.97-2.54,8.24-0.87,8.79-5.52c0.08-0.71-1.59-3.41-1.97-4.71 c-0.82-1.31-1.11-3.38-0.22-4.77c0.36-0.55,0.2-2.55,0.2-3.31c0-7.52,13.18-7.52,13.18,0c0,0.95-0.22,2.7,0.3,3.45 c0.86,1.25,0.42,3.47-0.31,4.63c-0.47,1.36-2.24,3.94-2.09,4.71c1.28,6.51,10.15-0.46,10.15,11.25l-24.91,0l-0.01,0h-4.03h-1.08 l-22.94,0l-0.01,0l-22.03,0v0l-27.8,0c0-11.91,11.24-5.31,12.1-12.61c0.09-0.8-1.78-3.82-2.21-5.28c-0.92-1.47-1.25-3.79-0.24-5.34 c0.4-0.62,0.23-2.86,0.23-3.71c0-8.43,14.77-8.43,14.77,0c0,1.07-0.25,3.03,0.33,3.86c0.97,1.4,0.47,3.89-0.35,5.19 c-0.52,1.53-2.51,4.41-2.34,5.28c0.62,3.15,8.47,5.29,11.21,6.45c1.54-0.79,2.79-1.73,2.92-2.82c0.07-0.57-1.27-2.72-1.57-3.76 c-0.65-1.04-0.89-2.7-0.17-3.81c0.28-0.44,0.16-2.04,0.16-2.64c0-6,10.52-6.01,10.52,0c0,0.76-0.17,2.15,0.24,2.75 c0.69,1,0.33,2.77-0.25,3.69c-0.37,1.09-1.79,3.14-1.67,3.76c0.77,3.94,5.03,1.7,7.04,4.45c1.9-1.5,5.68-1.91,7.99-3.29 c2.11-1.26,1.75-2.53,1.74-4.63L77.17,105.82L77.17,105.82L77.17,105.82z M0.01,46.73c-0.28-5.43,4.18-6.86,10.24-6.48l7.66,8.53 l7.49-8.43l18.57-0.1c7,0.8,5.54,8.15,0,8.43H31.82l-2.86,17.17L26.8,77.02c-0.56,1.85-1.67,3.03-3.31,3.66l-10.56,0.07 c-2.13-0.31-3.38-1.57-3.76-3.76l-1.64-9.25c-4.32,0.42-5.78-2.65-6.24-7.07L0.05,46.7L0.01,46.73L0.01,46.73z M17.47,17.02 c5.19,0,9.41,4.22,9.41,9.41s-4.22,9.41-9.41,9.41c-5.19,0-9.41-4.22-9.41-9.41S12.27,17.02,17.47,17.02L17.47,17.02z M17.81,44.78 l-5.96-6.55l1.74-1.39c2.58,1.08,5.16,1.08,7.7,0l2.4,1.43L17.81,44.78L17.81,44.78z"/>
                                        </g>
                                    </svg>
                                </div>
                                <h5 class="card-title text-primary">Find Classes</h5>
                                <p class="card-text text-muted">Discover classes and courses available near you</p>
                                <a href="{{ path('location',{type:'classes'}) }}"
                                   class="btn btn-primary mt-3">Explore</a>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- Secondary Options -->
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <h2 class="h4 fw-semibold text-dark mb-4">Explore by Education Level</h2>
                </div>
            </div>
        </div>
        <div class="container mb-5">
            <div class="row g-3">

                <div class="col-sm-4">
                    <a href="{{ path('school') }}" class="text-decoration-none">
                        <div class="card card-secondary explorebox">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <img src="{{ asset('assets/images/icon/school.webp') }}" alt="School icon"
                                         width="40" height="40">
                                </div>
                                <h6 class="card-title text-dark">School</h6>
                                <h4 class="text-primary text-center">Coming Soon </h4>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="{{ path('undergraduates') }}" class="text-decoration-none">
                        <div class="card card-secondary explorebox">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"
                                         alt="Undergraduates icon" width="40" height="40">
                                </div>
                                <h6 class="card-title text-dark">Undergraduates</h6>
                                <h4 class="text-primary text-center">Coming Soon </h4>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="{{ path('postgraduates') }}" class="text-decoration-none">
                        <div class="card card-secondary explorebox">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <img src="https://cdn-icons-png.flaticon.com/512/3135/3135768.png"
                                         alt="Postgraduates icon" width="40" height="40">
                                </div>
                                <h6 class="card-title text-dark">Postgraduates</h6>
                                <h4 class="text-primary text-center">Coming Soon </h4>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}