@php $schoolName = $contact['school_name'] ?? null; @endphp

<style>
:root{
  --teal: #1ed6ca;
  --teal-dark: #17a8a0;
  --ink: #dee3e7;
  --ink-dim: rgba(227, 230, 235, 0.85);
  --white: #fff;

  --chip-bg: rgba(255, 255, 255, 0.18);
  --chip-bg-hover: rgba(255, 255, 255, 0.35);
  --shadow-1: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);

  --container-max: 1200px;
  --gutter: 16px;
}


html {
  scrollbar-gutter: stable;
}

.footer-mint{
  background: linear-gradient(
    180deg,
    #1bb4b9 0%,
    #1bb4b9 100%
  );
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
  font-size: clamp(14px,.95vw,15px);
  line-height: 1.5;
  overflow-x: hidden;
  padding: 40px 0px 0px 0px;
}

.footer-mint .container{
  max-width: var(--container-max);
  padding: 0 var(--gutter);
  margin-inline: auto;
}

.footer-mint .footer-grid{
  display: grid;
  grid-template-columns: minmax(300px,2fr) minmax(200px,1fr) minmax(220px,1fr);
  gap: 48px;
  padding: 36px 0 50px;
}
@media (max-width: 992px){
  .footer-mint .footer-grid{ grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .footer-mint .footer-grid{ grid-template-columns: 1fr; gap: 20px; }
}

.footer-mint .col h5{
  margin: 0 0 14px;
  font-weight: 700;
  color: var(--white);
  position: relative;
  display:inline-block;
  letter-spacing:.3px;
}
.footer-mint .col h5::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width: 30px; height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.8);
}

.footer-mint .about .brandline{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.footer-mint .about .brand img{
  height:44px; width:auto; display:block; border-radius:6px;
  box-shadow: var(--shadow-1);
}
.footer-mint .about .brand-name{ font-size:18px; font-weight:700; }
.footer-mint .blurb{ margin:8px 0 16px; color: var(--ink-dim); max-width: 42ch; }

.footer-mint .social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  background: var(--chip-bg);
  color: var(--white);
  margin-right:8px;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.footer-mint .social-row a:hover{
  transform: translateY(-2px);
  background: var(--chip-bg-hover);
}
.footer-mint .social-row a:focus-visible{
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.footer-mint .links ul{ list-style:none; margin:6px 0 0; padding:0; }
.footer-mint .links li{ margin:8px 0; position:relative; padding-left:14px; }
.footer-mint .links li::before{
  content:"›";
  position:absolute; left:0; top:0;
  color: var(--white); opacity:.8; font-weight:700;
}
.footer-mint .links a{
  color: var(--white);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.footer-mint .links a:hover{
  border-bottom-color: var(--white);
  transform: translateX(2px);
}

.footer-mint .address address{
  margin:6px 0 0; font-style:normal; color: var(--ink);
}
.footer-mint .address address div{
  margin:8px 0; display:flex; align-items:center; gap:6px;
}
.footer-mint .address i{
  color: var(--white);
  font-size:14px;
  min-width:16px;
}

.footer-mint .footer-bottom{
  background: rgba(0,0,0,.05);
  border-top: 1px solid rgba(0,0,0,.08);
  line-height:1;
}
.footer-mint .footer-bottom p{
  margin:0;
  padding:12px 0;
  text-align:center;
  color: rgba(255,255,255,0.85);
  font-size:14px;
  font-weight:500;
}

@media (prefers-reduced-motion: reduce){
  .footer-mint *{ transition:none !important; }
}
</style>

<footer class="footer-mint">
  <div class="container">
    <div class="footer-grid">
      
      <section class="col about">
        <div class="brandline">
          <a href="{{ url('/') }}" class="brand">
            <img src="{{ $contact['image'] ?? '' }}" alt="School Logo">
          </a>
        </div>

        @if($schoolName)
          <strong class="brand-name">{{ $schoolName }}</strong>
        @endif

        @if(!empty($footerInfo) && !empty($footerInfo['description']))
          <p class="blurb">
            {{ strip_tags($footerInfo['description']) ?? "" }}
          </p>
        @endif

        <div class="social-row">
          @if(!empty($contact['facebook_url']))  <a href="{{ $contact['facebook_url'] }}"><i class="fa fa-facebook"></i></a>@endif
          @if(!empty($contact['twitter_url']))   <a href="{{ $contact['twitter_url'] }}"><i class="fa fa-twitter"></i></a>@endif
          @if(!empty($contact['linkedin_url']))  <a href="{{ $contact['linkedin_url'] }}"><i class="fa fa-linkedin"></i></a>@endif
          @if(!empty($contact['instagram_url'])) <a href="{{ $contact['instagram_url'] }}"><i class="fa fa-instagram"></i></a>@endif
          @if(!empty($contact['youtube_url']))   <a href="{{ $contact['youtube_url'] }}"><i class="fa fa-youtube"></i></a>@endif
        </div>
      </section>

      <!-- Useful Links -->
      <nav class="col links" aria-label="Footer">
        <h5>Useful Links</h5>
        <ul>
          @foreach($pageNav as $page)
            @if(in_array($page['page'], ['about-us','blog','contact-us','gallery','home']))
              <li><a href="{{ url($page['page']) }}">{{ $page['title'] }}</a></li>
            @endif
          @endforeach
        </ul>
      </nav>

      <!-- Address -->
      <section class="col address">
        <h5>Address</h5>
        <address>
          @if(!empty($contact['address']))
            <div><i class="fa fa-map-marker"></i> {{ $contact['address'] }}</div>
          @endif
          @if(!empty($contact['contact_no']))
            <div><i class="fa fa-phone"></i> {{ $contact['contact_no'] }}</div>
          @endif
          @if(!empty($contact['email']))
            <div><i class="fa fa-envelope"></i> {{ $contact['email'] }}</div>
          @endif
        </address>
      </section>

    </div>
  </div>

  <div class="footer-bottom">
    <div class="container">
      <p>All rights reserved © {{ date('Y') }} @if($schoolName){{ $schoolName }}@endif</p>
    </div>
  </div>
</footer>