@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>About Us | JRS</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="About Us | JRS" />
<meta property="og:description" content="Discover the power of smart investments with JRS Holdings Inc. We specialize in managing a diverse portfolio for long-term success." />
<meta property="og:site_name" content="About Us | JRS" />
<meta property="og:image" content="{{ asset('images/thumbnail.png') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.png') }}" />
<meta property="og:keywords" content="JRS Holdings Inc., Holding Company, Investment Portfolio, Diversified Holdings, Business Investments, Strategic Holdings, Corporate Investments, Investment Management, Asset Portfolio, Growth Investments, Financial Holdings, Holding Group, Investment Holdings, Investment Strategies, Portfolio Management, Capital Investments, Business Expansion, Equity Holdings, Investment Opportunities, Investment Diversification, Investment Company, Holding Group, Strategic Investments, Diverse Portfolio, Financial Holdings, Investment Management, Corporate Holdings, Investment Strategies, Asset Diversification, Growth Opportunities, Business Expansion, Investment Portfolio, Equity Holdings, Capital Management, Investment Diversity, Investment Growth, Portfolio Diversification, Profitable Investments, Investment Ventures">
@endsection

@section('content')
<link rel="stylesheet" href="{{asset('css/advocacy.css')}}">

@if(session('success'))
<div class="position-relative d-flex justify-content-end" data-aos="fade-left" data-aos-duration="500">
    <div class="alert alert-success alert-dismissible fade show position-absolute m-3" role="alert">
        <h4>{{ session('success') }}</h4>
        <button type="button" class="btn-close my-auto" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

@if(session('error'))
<div class="position-relative d-flex justify-content-end" data-aos="fade-left">
    <div class="alert alert-warning alert-dismissible fade show position-absolute" role="alert">
        <h5><i class="icon fas fa-times-circle"></i> An error has occured</h5>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

<div class="banner mb-5">
    <div class="container">

        <div class="col-3 text-end d-md-block d-none">
            <h1 class="banner-title fw-bold text-white fs-1">ADVOCACY</h1>
            <span class="text-white">JRS HOLDINGS INC</span>
        </div>

        <div class="text-center d-sm-block d-md-none">
            <h1 class="banner-title fw-bold text-white fs-1">ADVOCACY</h1>
            <span class="text-white">JRS HOLDINGS INC</span>
        </div>

        <!-- LARGE/MEDIUM NAV -->
        <div class="d-xl-block d-md-block d-none d-sm-none">
            <div class="w-100 about-tabs-overlay">
                <div class="container">
                    <ul class="nav justify-content-center nav-tabs border-0" id="myTab" role="tablist">
                        <div class="row w-100 justify-content-center gap-2" data-aos="fade-down" data-aos-duration="1000">
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <button class="about-link py-3 rounded shadow" id="advocacy-tab" data-bs-toggle="tab" data-bs-target="#advocacy" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                                        Advocacy
                                    </button>
                                </li>
                            </div>
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <button class="about-link py-3 rounded shadow" id="committees-tab" data-bs-toggle="tab" data-bs-target="#committees" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                                        Committees
                                    </button>
                                </li>
                            </div>
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <button class="about-link py-3 rounded shadow" id="papers-tab" data-bs-toggle="tab" data-bs-target="#papers" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                                        Advocacy Papers
                                    </button>
                                </li>
                            </div>
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <button class="about-link py-3 rounded shadow" id="becommittees-tab" data-bs-toggle="tab" data-bs-target="#becommittees" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">
                                        Be one of our committees
                                    </button>
                                </li>
                            </div>
                        </div>

                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- SMALL NAV -->
<div class="d-sm-block d-block d-xl-none d-md-none mt-3">
    <div class="container">
        <ul class="nav justify-content-center nav-tabs border-0" id="myTab" role="tablist">
            <div class="row w-100" data-aos="fade-up" data-aos-duration="1500">
                <div class="col-12 col-md-4 col-xl-2 px-1">
                    <li class="nav-item w-100" role="presentation">
                        <button class="about-link py-3 mb-1" id="advocacy-tab" data-bs-toggle="tab" data-bs-target="#advocacy" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                            Advocacy
                        </button>
                    </li>
                </div>
                <div class="col-12 col-md-4 col-xl-2 px-1">
                    <li class="nav-item w-100" role="presentation">
                        <button class="about-link py-3 mb-1" id="committees-tab" data-bs-toggle="tab" data-bs-target="#council" type="committees" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                            Committees
                        </button>
                    </li>
                </div>
                <div class="col-12 col-md-4 col-xl-2 px-1">
                    <li class="nav-item" role="presentation">
                        <button class="about-link py-3 mb-1" id="papers-tab" data-bs-toggle="tab" data-bs-target="#papers" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                            Advocacy Papers
                        </button>
                    </li>
                </div>
                <div class="col-12 col-md-4 col-xl-2 px-1">
                    <li class="nav-item" role="presentation">
                        <button class="about-link py-3 mb-1" id="becommittees-tab" data-bs-toggle="tab" data-bs-target="#becommittees" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">
                            Be one of our committees
                        </button>
                    </li>
                </div>
            </div>
        </ul>
    </div>
</div>

<div class="tab-content mt-5" id="myTabContent">
    <!-- ADVOCACY TAB -->
    <div class="tab-pane fade" id="advocacy" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
        <div class="container justify-content-center overflow-hidden">
            <div class="my-5 text-center">
                <h1 class="color-blue fw-bold">ADVOCACY</h1>
            </div>
            <div class="col-12 col-md-11 col-xl-11 d-flex align-items-center mx-auto">
                <div>
                    <p class="justify mb-3">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </p>

                    <p class="justify mb-3">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </p>
                </div>
            </div>
            <div class="my-5 text-center">
                <h1 class="color-blue fw-bold">GALLERY</h1>
            </div>

            <div class="row">

                @foreach ($galleries as $item)
                <div class="col-md-6">
                    <div class="card p-3 border-0 shadow">
                        @php
                        // Parse the URL to get query parameters
                        $urlParts = parse_url($item->link);
                        parse_str($urlParts['query'], $query);

                        // Extract the video ID
                        $videoId = isset($query['v']) ? $query['v'] : null;
                        @endphp

                        @if ($videoId)
                        <iframe width="auto" height="315" src="https://www.youtube.com/embed/{{ $videoId }}"></iframe>
                        @else
                        <!-- Handle the case where the video ID couldn't be extracted -->
                        <p>Invalid YouTube link</p>
                        @endif
                    </div>

                    <div class="text-center mt-3">
                        <p class="fs-5 fw-bold">{{ $item->title }}</p>
                        <p>{{ $item->description }}</p>
                    </div>
                </div>
                @endforeach

                <!-- <div class="col-md-6">
                    <div class="card p-3 border-0 shadow">
                        <iframe width="auto" height="315" src="https://www.youtube.com/embed/eI4an8aSsgw">
                        </iframe>
                    </div>
                    <div class="text-center mt-3">
                        <p class="fs-5 fw-bold">This is a title</p>
                        <p>Lorem Ipsum</p>
                    </div>
                </div> -->
            </div>

            <div class="my-5 text-center">
                <h1 class="color-blue fw-bold">MEETING CALENDAR</h1>
            </div>

            <div id="calendar">
                <div id="calendar_header"><i class="icon-chevron-left"></i>
                    <h1></h1><i class="icon-chevron-right"></i>
                </div>
                <div id="calendar_weekdays"></div>
                <div id="calendar_content"></div>
            </div>

            <div class="bg-goldenrod text-center w-100 d-flex justify-content-between align-items-center shadow rounded-top p-3">
                <a class="btn"><i class="fa-solid fa-caret-left"></i></a>
                <span class="fw-bold m-0 fs-4">October 2023</span>
                <a class="btn"><i class="fa-solid fa-caret-right"></i></a>
            </div>

            <div class="row justify-content-center my-4 gap-5">
                <div class="col-md-1">
                    <p>Sun</p>
                    <p>1</p>
                    <p>8</p>
                    <p>15</p>
                    <p>22</p>
                    <p>29</p>
                </div>
                <div class="col-md-1">
                    <p>Mon</p>
                    <p>2</p>
                    <p>9</p>
                    <p>16</p>
                    <p>23</p>
                    <p>30</p>
                </div>
                <div class="col-md-1">
                    <p>Tue</p>
                    <p>3</p>
                    <p>10</p>
                    <p>17</p>
                    <p>24</p>
                    <p>31</p>
                </div>
                <div class="col-md-1">
                    <p>Wed</p>
                    <p>4</p>
                    <p>11</p>
                    <p>18</p>
                    <p>25</p>
                </div>
                <div class="col-md-1">
                    <p>Thu</p>
                    <p>5</p>
                    <p>12</p>
                    <p>19</p>
                    <p>26</p>
                </div>
                <div class="col-md-1">
                    <p>Fri</p>
                    <p>6</p>
                    <p>13</p>
                    <p>20</p>
                    <p>27</p>
                </div>
                <div class="col-md-1">
                    <p>Mon</p>
                    <p>7</p>
                    <p>14</p>
                    <p>21</p>
                    <p>28</p>
                </div>
            </div>

        </div>

    </div>

    <!-- COMMITTEES TAB -->
    <div class="tab-pane fade mb-5 mt-5" id="committees" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
        <div class="container mt-5">
            <div class="my-5 text-center">
                <h1 class="color-blue fw-bold pt-5">COMMITTEES</h1>
            </div>

            <div class="row p-3 g-4 justify-content-center">
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
                <div class="col-12 col-md-3 col-xl-3 text-center trigger">
                    <a class="modal-trigger" data-bs-target="#committeeModal" data-bs-toggle="modal">
                        <img src="{{ asset('images/committee-img.png') }}" class="img-fluid mb-3" alt="..." width="200">
                        <h4 class="fw-bold">AGRICULTURE</h4>
                    </a>
                </div>
            </div>

            <style>
                .trigger:hover {
                    transform: scale(1.1);
                    transition: transform 0.3s ease-in-out;
                }

                .trigger {
                    transform: scale(1);
                    transition: transform 0.3s ease-in-out;
                }
            </style>


            <div class="modal fade" id="committeeModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-bottom-0">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body r px-5">
                            <div class="text-center mb-5 d-flex flex-column align-items-center text-center">
                                <h1 class="fw-bold mb-4 fs-2">AGRICULTURE</h1>
                                <p class="justify">
                                    The Agriculture Committee ebables collaborative engagement and policy advocacy regarding sustainable agriculture development through
                                    regular interaction among stakeholders and information-shaking activities. It works closely with the government to develop a more inclusive
                                    and robust regulatory framework that will benefit smallholder
                                </p>
                            </div>

                            <h1 class="fw-bold mb-4 fs-2">Committee Leaders</h1>

                            <div class="row mb-5">
                                <div class="col-12 col-md-4 col-xl-4 text-center">
                                    <img src="{{ asset('images/agriculture-leader.jpg') }}" class="img-fluid mb-3" alt="..." width="200">
                                    <h4 class="fw-bold">Jane Doe</h4>
                                    <span class="fs-5">Co-Chair</span>
                                    <p>Vice-President - Corporate Affairs Executive, Nestle Philippines</p>
                                </div>
                                <div class="col-12 col-md-4 col-xl-4 text-center">
                                    <img src="{{ asset('images/agriculture-leader.jpg') }}" class="img-fluid mb-3" alt="..." width="200">
                                    <h4 class="fw-bold">Jane Doe</h4>
                                    <span class="fs-5">Co-Chair</span>
                                    <p>Vice-President - Corporate Affairs Executive, Nestle Philippines</p>
                                </div>
                                <div class="col-12 col-md-4 col-xl-4 text-center">
                                    <img src="{{ asset('images/agriculture-leader.jpg') }}" class="img-fluid mb-3" alt="..." width="200">
                                    <h4 class="fw-bold">Jane Doe</h4>
                                    <span class="fs-5">Co-Chair</span>
                                    <p>Vice-President - Corporate Affairs Executive, Nestle Philippines</p>
                                </div>
                            </div>

                            <div class="text-center mb-5">
                                <p class="m-0">Enrollment to any JRS Holdings Inc.</p>
                                <p class="m-0">Committees is exclusive to JRS Holdings Inc. Members only.</p>
                                <p class="m-0">Want to join a committee but not yet a member?</p>
                                <p class="m-0">Please reach out to gen.anaquita@JRSHoldingsInc.com.</p>
                            </div>

                            <div class="text-center">
                                <button class="button-green-inquire" data-bs-target="#committeeInquiryModal" data-bs-toggle="modal"></button>
                            </div>


                        </div>
                        <div class="modal-footer border-top-0">
                        </div>
                    </div>
                </div>
            </div>

            <!-- INQUIRY MODAL -->
            <div class="modal fade" id="committeeInquiryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-bottom-0">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body r px-5 text-center">
                            <form action="{{ url('/submit-inquiryCommittee') }}" id="myForm" method="POST">
                                @csrf
                                <div class="text-center mb-5 d-flex flex-column align-items-center">
                                    <span class=" fw-bold my-4 fs-2">COMMITTEE INQUIRY</span>

                                    <input type="text" class="form-control mb-3" id="fullname" name="fullname" placeholder="Full Name">

                                    <input type="text" class="form-control mb-3" id="company" name="company" placeholder="Company Name">

                                    <input type="email" class="form-control mb-3" id="email" name="email" placeholder="Email">

                                    <input type="number" class="form-control mb-3" id="contact" name="contact" placeholder="Contact Details">

                                    <textarea class="form-control mb-3" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
                                </div>

                                <div class="text-center">
                                    <button class="button-green-inquire" data-bs-target="#committeeModal" data-bs-toggle="modal"></button>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer border-top-0">
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!-- MANAGEMENT TAB -->
    <div class="tab-pane fade mb-5 mt-5" id="papers" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
        <div class="container mt-5">
            <div class="my-5 text-center">
                <h1 class="color-blue fw-bold pt-5">ADVOCACY PAPERS</h1>
            </div>

            <div class="row p-3 g-4 justify-content-center">
                @foreach ($downloads as $items)
                <div class="col-12 col-md-4 col-xl-4 text-center">
                    <img src="{{ asset('files/' . $items->image) }}" class="img-fluid mb-1 shadow rounded mb-5" alt="..." width="350" style="height: 450px;">
                    <h4 class="fw-bold mb-3">{{ $items->title }}</h4>
                    <a href="{{ asset('files/' . $items->actualfile) }}" download="{{ $items->actualfile }}"><button class="button-green-download"></button></a>
                </div>
                @endforeach
                <!-- <div class="col-12 col-md-4 col-xl-4 text-center">
                    <img src="{{ asset('images/advocacy-papers.jpg') }}" class="img-fluid mb-1" alt="..." width="350">
                    <h4 class="fw-bold">JOHN DOE</h4>
                    <button class="button-green-download"></button>
                </div>
                <div class="col-12 col-md-4 col-xl-4 text-center">
                    <img src="{{ asset('images/advocacy-papers.jpg') }}" class="img-fluid mb-1" alt="..." width="350">
                    <h4 class="fw-bold">JOHN DOE</h4>
                    <button class="button-green-download"></button>
                </div>
                <div class="col-12 col-md-4 col-xl-4 text-center">
                    <img src="{{ asset('images/advocacy-papers.jpg') }}" class="img-fluid mb-1" alt="..." width="350">
                    <h4 class="fw-bold">JOHN DOE</h4>
                    <button class="button-green-download"></button>
                </div> -->

            </div>

        </div>
    </div>

    <!-- BE ONE OF YOUR COMMITTEES TAB -->
    <div class="tab-pane fade" id="becommittees" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
        <div class="container justify-content-center overflow-hidden">

            <div class="my-5 text-center">
                <h1 class="color-blue fw-bold">BE ONE OF OUR COMMITTEES</h1>
                <p class="justify">
                    Enrollment to any JRS Holdings Inc. Committees is exclusive to JRS Holdings Inc. Members only.
                    Want to join a committee but not yet a member? Please reach out to argena.anaquita@JRSHoldingsInc.com
                </p>
            </div>
            <form action="{{ url('/submit-enroll') }}" id="myForm" method="POST">
                @csrf
                <div class="mb-5">
                    <div class="row gy-3 mb-3">
                        <div class="col-12 col-md-5 col-xl-5">
                            <input type="text" name="fname" class="form-control rounded shadow" id="fname" placeholder="First Name">
                        </div>
                        <div class="col-12 col-md-5 col-xl-5">
                            <input type="text" name="lname" class="form-control rounded shadow" id="lname" placeholder="Last Name">
                        </div>
                        <div class="col-12 col-md-2 col-xl-2">
                            <input type="text" name="suffix" class="form-control rounded shadow" id="suffix" placeholder="Suffix">

                        </div>
                        <div class="col-12 col-md-12 col-xl-12">
                            <input type="email" name="email" class="form-control rounded shadow" id="email" placeholder="Email Address">
                        </div>
                        <div class="col-12 col-md-12 col-xl-12">
                            <select name="committeeName" id="committeeName" size="10" class="form-control rounded shadow">
                                <option value="Agriculture"> Agriculture </option>
                                <option value="Automotive"> Automotive </option>
                                <option value="Aviation"> Aviation </option>
                                <option value="Creatives"> Creatives </option>
                                <option value="Customs"> Customs </option>
                                <option value="Lorem Ipsum"> Lorem Ipsum </option>
                                <option value="Lorem Ipsum"> Lorem Ipsum </option>
                                <option value="Lorem Ipsum"> Lorem Ipsum </option>
                                <option value="Lorem Ipsum"> Lorem Ipsum </option>
                                <option value="Lorem Ipsum"> Lorem Ipsum </option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <input type="text" name="position" class="form-control rounded shadow" id="position" placeholder="Position">
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <input type="number" name="contact" class="form-control rounded shadow" id="contact" placeholder="Contact Details">
                        </div>
                        <div class="col-12 col-md-12 col-xl-12">
                            <input type="text" name="company" class="form-control rounded shadow" id="company" placeholder="Company/Organization">
                        </div>
                        <div class="col-12 col-md-12 col-xl-12">
                            <textarea type="text" name="message" class="form-control rounded shadow" id="message" placeholder="Message"></textarea>
                        </div>
                    </div>

                    <button class="button-green-submit"></button>
                </div>
            </form>
        </div>

    </div>

</div>

<style>
    .banner {
        background-image: url("{{ asset('images/banner-advocacy.jpg') }}");
        background-position: center;
        background-size: cover;
        align-items: center;
        display: flex;
        height: 45vh;
        width: 100%;
    }

    /* button red */
    .button {
        padding: 10px 20px;
        font-size: 1.1rem;
        background-color: transparent;
        border-color: #ee2831;
        color: white;
        position: relative;
        width: 130px;
        height: 55px;
        transition: background-color 0.2s ease-in, all 0.15s ease-in;
        border-radius: 10px;
    }

    .button::after {
        display: flex;
        align-items: center;
        justify-content: center;
        content: "View Website";
        width: 130px;
        height: 55px;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(5px, 5px);
        background-color: #ee2831;
        transition: all 0.15s ease-in;
        border-radius: 10px;
    }

    .button:hover::after {
        transform: translate(-7px, -7px);
    }

    .button:hover {
        transform: translate(5px, 5px);
    }

    .button:active::after {
        background-color: #ee2831;
    }
</style>

<script>
    // Get the URL parameter
    const urlParams = new URLSearchParams(window.location.search);
    const activeTab = urlParams.get('tab');

    // Add the "active" class to the corresponding button and "show active" class to the appropriate tab pane
    const buttons = document.querySelectorAll('.about-link');
    const tabPanes = document.querySelectorAll('.tab-pane');

    buttons.forEach(button => {
        const target = button.getAttribute('data-bs-target').substring(1);
        if (target === activeTab) {
            button.classList.add('active');
            button.setAttribute('aria-selected', 'true');
        } else {
            button.classList.remove('active');
            button.setAttribute('aria-selected', 'false');
        }
    });

    tabPanes.forEach(tabPane => {
        const id = tabPane.getAttribute('id');
        if (id === activeTab) {
            tabPane.classList.add('show', 'active');
        } else {
            tabPane.classList.remove('show', 'active');
        }
    });
</script>

<script>
    // JavaScript code to handle the modal triggers
    // var triggerButtons = document.querySelectorAll('.modal-trigger');
    // triggerButtons.forEach(function(button) {
    //     button.addEventListener('click', function() {
    //         var targetModalId = button.getAttribute('data-bs-target');
    //         var modal = new bootstrap.Modal(document.querySelector(targetModalId));
    //         modal.show();
    //     });
    // });
</script>
@endsection