@php use Illuminate\Support\Str; @endphp
<x-frontend-layout>
  <section class="banner-section" style=" background: url('{{ asset('storage/' . $banners->banner_image) }}'); width: 100%; height: 900px; background-size: cover;">
    <div class="container">
      <div class="banner-text">
        <div class="w-100">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6">
              <h1>
                {{ $banners->banner_title }} <br> {{ $banners->banner_sub_title }}
                <!-- The Health Nexus <br />
                  accelerator -->
              </h1>
              <div class="banner-sub-hd mt-5">
                {{ $banners->banner_small_text_1 }} <br />
                <span> {{ $banners->banner_small_text_2 }}</span>
              </div>
              {!! $banners->banner_about_details !!}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="key-features section">
    <div class="container position-relative">
      <div class="row">
        <div class="key-features-circle-ar yellow text-center">
          <div class="key-features-circle">
            <img src="{{ asset('frontend/images/Key-features-circle.png') }}" />
          </div>
          <div class="key-features-ar yellow">
            <div class="key-features-img">
              <img src="{{ asset('frontend/images/key-features/yellow-icon.png') }}" />
            </div>
            <div class="key-features-text">
              <h3>Unmatched Industry Expertise</h3>
              <p>
                Invaluable insights on business strategy, pricing, marketing, and scaling are provided through access to seasoned mentors, hospital leaders, diagnostics experts, and MedTech pioneers.
              </p>
            </div>
          </div>
          <div class="key-features-ar c-green">
            <div class="key-features-img">
              <img src="{{ asset('frontend/images/key-features/c-green.png')}}" />
            </div>
            <div class="key-features-text">
              <h3>High-Impact Networking</h3>
              <p>
                Startups are connected with hospitals, investors, research institutions, and key healthcare stakeholders, enabling partnerships that drive growth and adoption.
              </p>
            </div>
          </div>

          <div class="key-features-ar red">
            <div class="key-features-img">
              <img src="{{ asset('frontend/images/key-features/red-icon.png')}}" />
            </div>
            <div class="key-features-text">
              <h3>Regulatory & Policy Navigation</h3>
              <p>
                Customized regulatory guidance, workshops, and direct interactions with policymakers are provided to ensure smooth compliance with healthcare laws and standards.
              </p>
            </div>
          </div>
          <div class="key-features-ar sky">
            <div class="key-features-img">
              <img src="{{ asset('frontend/images/key-features/sky.png') }}" />
            </div>
            <div class="key-features-text">
              <h3>Visibility & Market Positioning</h3>
              <p>
                Brand visibility, promotional support, and ecosystem recognition are offered through NATHEALTH’s platforms, events, and media channels.
              </p>
            </div>
          </div>
          <div class="key-features-ar green">
            <div class="key-features-img">
              <img src="{{ asset('frontend/images/key-features/green.png') }}" />
            </div>
            <div class="key-features-text">
              <h3>Access to Funding & Resources</h3>
              <p>
                Access to government funding, VCs, and impact funds is granted to select startups, along with strategic support for securing long-term investments.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="about-section section">
    <div class="container position-relative">
      <div class="row">
        <div class="col-md-5">
          <div class="about-img-sec">
            <div class="about-img">
              <img src="{{ asset('frontend/images/about-img.jpg') }}" />
            </div>
          </div>
        </div>
        <div class="col-md-7">
          <div class="about-text ps-5">
            <div class="section-title">
              <h2 class="no-trnsfrm-font">Time to <span>Collaborate and Grow</span></h2>
            </div>
            <p>
              The <b>Health Nexus Accelerator Program, </b>an initiative by NATHEALTH, serves as a central platform to:
            </p>
            <ul class="row">
              <li class="col-md-6">
                <span><i class="ri-checkbox-fill"></i></span><span>Showcase Nathealth’s Innovation Ecosystem of industry leaders, investors, and mentors</span>
              </li>
              <li class="col-md-6">
                <span><i class="ri-checkbox-fill"></i></span><span>Empower startups in navigating the second valley of death by leveraging the power of the ecosystem</span>
              </li>
              <li class="col-md-6">
                <span><i class="ri-checkbox-fill"></i></span><span>Provide a means to ecosystem partners to support and mentor the startups</span>
              </li>
              <li class="col-md-6">
                <span><i class="ri-checkbox-fill"></i></span><span>Establish a foundation for future healthcare advancements</span>
              </li>
              <p>
                The Accelerator is designed to evolve through a phased approach, ensuring scalability and adaptability to meet future healthcare demands. This initiative provides startups with access to mentorship, funding, and networking opportunities to drive their growth.
              </p>
            </ul>
            <a href="{{route('about-us')  }}" class="primary-btn btn">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="blue-band-sec mt-5">
    <div class="container-fluid">
      <div class="blue-band">
        <div class="d-flex align-items-center position-relative">
          <img src="{{ asset('frontend/images/parson-chat.png') }}" />
          <h3 class="mb-0 ms-4 text-white">
            Introducing the First Cohort of the Program
          </h3>
        </div>
      </div>
    </div>
  </section>

  @if ($homeStartup->isNotEmpty())
  <section class="earth-text-section section pt-1">
    <div class="container-fluid position-relative">
      <div class="line-circle"></div>
      <div class="row justify-content-center">
        <div class="col-md-6">
          <div class="section-title">
            <!-- <h2>Health Nexus Accelerator, highlight the first cohort, and narrate the journey of the program so far.
                </h2> -->
            <p>
              The inaugural cohort of the accelerator program, meticulously curated in partnership with the <b>I-Hub Foundation for Cobotics (IHFC)</b>, the <b>Technology Innovation Hub (TIH) of IIT Delhi,</b> showcases groundbreaking innovations across Medtech, Diagnostics, AI-powered Healthcare Platforms, Telemedicine, and Robotic Medical Devices. This exceptional group of 25 high-impact startups underwent a rigorous selection process before being introduced to our vibrant ecosystem. These visionary startups have not only gained invaluable insights from our distinguished mentors but also participated in an intensive lab-to-market workshop at IIT Delhi, organized collaboratively by IHFC and the <b>Department of Management Studies, IIT Delhi</b>
            </p>
            <a href="{{ route('cohort') }}" class="primary-btn btn mb-3">Learn More</a>
          </div>
        </div>
      </div>
      <div class="earth-circle-section position-relative">
        <ul class="d-flex justify-content-between">

          @foreach ($homeStartup as $startup_item)
          <li>
            <a href="{{'cohort-details/'.$startup_item->startup_pageurl_link}}" target="_blank" class="earth-box">
              <div class="earth-circle">
                <img src="{{ asset('storage/'.$startup_item->startup_logo) }}" />
              </div>
              <div class="earth-text">
                <p class="text-center">
                  {{ Str::words(strip_tags($startup_item->description), 15, '..') }}
                </p>
              </div>
            </a>
          </li>
          @endforeach

          <li>
            <a href="startup-list">
              <div class="earth-circle blue-circle">
                <div class="p-2">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path
                      d="M8.00008 6V9H5.00008V6H8.00008ZM3.00008 4V11H10.0001V4H3.00008ZM13.0001 4H21.0001V6H13.0001V4ZM13.0001 11H21.0001V13H13.0001V11ZM13.0001 18H21.0001V20H13.0001V18ZM10.7072 16.2071L9.29297 14.7929L6.00008 18.0858L4.20718 16.2929L2.79297 17.7071L6.00008 20.9142L10.7072 16.2071Z">
                    </path>
                  </svg>
                  <p>View All Startups</p>

                </div>
              </div>
            </a>
          </li>

        </ul>
      </div>
    </div>
  </section>
  @endif
  <section class="team-section section">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="section-title text-center">
            <h2>In The Spotlight, <span>The Leadership Team</span></h2>
          </div>
          <p class="text-center">
            Our leadership team represents the different facets of the
            healthcare ecosystem.
          </p>
        </div>
      </div>
      @if($health_teams->isNotEmpty())
      <div class="leader-sec mt-4">
        <div class="row">
          <!--  -->
          @foreach ($health_teams as $h_teams)
          <div class="col-md-2">
            <div class="leader-box">
              <div class="leader-img">
                <img src="{{ asset('storage/'.$h_teams->image) }}" />
              </div>
              <div class="leader-text">
                <h4>{{ $h_teams->full_name }}</h4>
                <p>
                  {{ $h_teams->designation }}
                </p>
              </div>
            </div>
          </div>
          @endforeach

        </div>
      </div>
      @endif
      <div class="text-center">
        <a href="{{ route('our-team') }}" class="primary-btn btn">Know More</a>
      </div>
    </div>
  </section>
  @if ($events->isNotEmpty())
  <section class="event-section section">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6">
          <div class="section-title text-center">
            <h2>
              Upcoming <span>Events</span>
              <p>
                NATHEALTH's media coverages as the unified voice of the
                healthcare industry. The communication channels are a way of
                deliberating on key industry talk points.
              </p>
            </h2>
          </div>
        </div>
      </div>
      <div class="owl-carousel owl-theme event-carousel mt-5">
        @foreach ($events as $eventItem)
        <div class="item">
          <a href="{{ $eventItem->event_external_link }}" target="_blank" class="event-box">
            <div class="row justify-content-lg-between">
              <div class="col-1">
                <div class="arrow">
                  <img src="{{ asset('frontend/images/arrow.png') }}" width="30" />
                </div>
              </div>
              <div class="col-md-8">
                <div class="blog-img">
                  <img src="{{ asset('storage/'.$eventItem->event_image) }}" class="w-100 h-auto" />
                </div>
              </div>
            </div>

            <div class="event-text">
              <div class="event-hd">
                <h3>{{ $eventItem->event_title }}</h3>
                <div class="date">
                  {{ $eventItem->parsed_event_date->format('M') }}<br />
                  <span>{{ $eventItem->parsed_event_date->format('d') }}</span>
                </div>
              </div>
              <div class="event-text-div">
                {!! $eventItem->description !!}
              </div>
            </div>
          </a>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
  @if ($collab->isNotEmpty())
  <section class="client-section section">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6">
          <div class="section-title text-center">
            <h2>Our <span>Collaborators</span></h2>
          </div>
        </div>
      </div>
      <div class="owl-carousel owl-theme brandlogo-ar">
        @foreach ($collab as $collabitem)
        <div class="item">
          <div class="client-logo">
            <img src="{{ asset('storage/'.$collabitem->logo) }}" />
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
  @push('scripts')
  @endpush
</x-frontend-layout>