@extends('layouts.website_layout')
@section('meta_title', $meta_data->meta_title)
@section('meta_description', $meta_data->meta_description)
@section('canonical_tag', $meta_data->canonical_tag)
@section('banner_image', "banners/".$banner->banner_image)

@section('content')

<style>
  /* ====== ABOUT (MATCH ATTACHMENT LAYOUT) ====== */
  .aboutA{ --navy:#1f3f73; --navy2:#163763; --teal:#37b7c6; --ink:#0b1220; --muted:#526073; --line:#e7edf6; }
  .aboutA .wrapA{ width:min(1200px, calc(100% - 48px)); margin-inline:auto; }

  /* 1) FULL BANNER IMAGE (no caption overlay) */
  .aboutA__banner{ position:relative; }
  .aboutA__banner img{ width:100%; height:auto; display:block; }
  .aboutA__banner .desktop_image{ display:block; }
  .aboutA__banner .mobile_image{ display:none; }
  @media (max-width: 768px){
    .aboutA__banner .desktop_image{ display:none; }
    .aboutA__banner .mobile_image{ display:block; }
  }

  /* 2) WHITE SPLIT SECTION */
/* Discover – Image Only */
.aboutDiscoverImage{
  width:100%;
  margin:0;
  padding:0;
  line-height:0; /* removes white gaps */
}

.aboutDiscoverImage img{
  width:100%;
  height:auto;
  display:block;
}


  /* 3) PMVV BLUE BANDS */
  /* Purpose Mission Vision – Image Only */
.aboutPMVImage{
  width:100%;
  margin:0;
  padding:0;
  line-height:0; /* removes gaps */
}

.aboutPMVImage img{
  width:100%;
  height:auto;
  display:block;
}


  /* 4) RELIABLE PARTNERSHIPS BANNER */
/* 
  .aboutA__partners{
    background: radial-gradient(1100px 380px at 50% 30%, rgba(55,183,198,.22), transparent 55%),
                linear-gradient(180deg, #1a3c6f 0%, #102e57 100%);
    color:#fff;
    padding:56px 0;
    text-align:center;
  }
 */
  
  .aboutA__partners{
	  color:#fff;
	  padding:56px 0;
	  text-align:center;
	}

  .aboutA__partners h2{
    font-size:44px;
    font-weight:900;
    margin:0 0 14px;
  }
  .aboutA__partners p{
    margin:0 auto;
    max-width:900px;
    font-size:18px;
    line-height:1.7;
    color:rgba(255,255,255,.88);
  }
  .aboutA__partners .chips{
    margin-top:14px;
    font-weight:800;
    letter-spacing:.02em;
    color:rgba(255,255,255,.9);
  }
  @media (max-width: 768px){
    .aboutA__partners h2{ font-size:32px; }
  }
  
  /* Our Reliable Partnerships – Image Only */
	.aboutA__partnersImage{
	  width:100%;
	  margin:0;
	  padding:0;
	  line-height:0; /* removes image white gaps */
	}
	
	.aboutA__partnersImage img{
	  width:100%;
	  height:auto;
	  display:block;
	}


  /* 5) OUR PLANTS */
/* OUR PLANTS – clickable static thumbnails */
.aboutPlantsReal{
  background:#fff;
  padding:56px 0 64px;
}

.wrapA{
  width:min(1200px, calc(100% - 48px));
  margin-inline:auto;
}

.plantsTitle{
  font-size:48px;
  font-weight:900;
  margin:0 0 28px;
  letter-spacing:-.5px;
  color:#000;
}

/* Grid */
.plantsGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}

/* Card is now <a> */
.plantCardReal{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Thumbnail */
.plantThumb{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#f3f4f6;
  box-shadow:0 12px 26px rgba(0,0,0,.12);
}

.plantThumb img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

/* Play button */
.plantPlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:54px;
  height:38px;
  background:#e53935;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(229,57,53,.35);
}

.plantPlay::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-40%, -50%);
  width:0;
  height:0;
  border-left:14px solid #fff;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}

/* Title */
.plantLabel{
  margin-top:14px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
  color:#000;
}

/* Hover like modern sites (subtle) */
.plantCardReal:hover .plantThumb{
  transform:translateY(-2px);
  transition:transform .18s ease;
}
.plantCardReal .plantThumb{
  transition:transform .18s ease;
}

/* Responsive */
@media (max-width: 1024px){
  .plantsGrid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .plantsGrid{ grid-template-columns:1fr; }
  .plantsTitle{ font-size:36px; }
  .plantThumb img{ height:200px; }
}


  /* 6) TIMELINE HEADER STRIP */
  .aboutA__timelineHeader{
    background:
      linear-gradient(0deg, rgba(31,63,115,.86), rgba(31,63,115,.86)),
      url('{{ url('/') }}/assets/images/banners/{{$banner->banner_image}}');
    background-size:cover;
    background-position:center;
    padding:44px 0;
    color:#fff;
  }
  .aboutA__timelineHeader h2{
    margin:0;
    font-size:54px;
    font-weight:900;
    letter-spacing:-.6px;
  }
  @media (max-width: 768px){
    .aboutA__timelineHeader h2{ font-size:36px; }
  }

  /* 6b) TIMELINE BODY (vertical center) */
  .aboutA__timelineBody{ background:#fff; padding:44px 0 60px; }
  .tline{
    position:relative;
    padding:10px 0;
  }
  .tline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0; bottom:0;
    width:4px;
    background:rgba(31,63,115,.25);
    transform:translateX(-50%);
    border-radius:999px;
  }
  .tItem{
    position:relative;
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin:18px 0;
    align-items:center;
  }
  .tYear{
    width:92px; height:92px;
    border-radius:18px;
    background:#fff;
    border:2px solid rgba(31,63,115,.35);
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:grid;
    place-items:center;
    font-size:44px;
    font-weight:900;
    color:#1f3f73;
    box-shadow:0 16px 30px rgba(10,20,40,.10);
    z-index:2;
  }
  .tCard{
    max-width:520px;
    background:#fff;
    border:1px solid rgba(31,63,115,.35);
    border-radius:10px;
    padding:16px 16px 14px;
    box-shadow:0 16px 30px rgba(10,20,40,.10);
  }
  .tCard p{ margin:0; color:#1f3f73; line-height:1.55; }
  .tItem.left .tCard{ grid-column:1; justify-self:end; margin-right:60px; }
  .tItem.right .tCard{ grid-column:2; justify-self:start; margin-left:60px; }

  @media (max-width: 768px){
    .tline::before{ left:22px; transform:none; }
    .tYear{ left:22px; transform:none; width:74px; height:74px; font-size:34px; border-radius:14px; }
    .tItem{ grid-template-columns:1fr; padding-left:108px; }
    .tItem.left .tCard,
    .tItem.right .tCard{ grid-column:1; justify-self:start; margin:0; max-width:100%; }
  }

  /* 7) AWARDS */
  .aboutA__awards{ background:#fff; padding:54px 0 70px; }
  .aboutA__awards h2{
    font-size:54px;
    font-weight:900;
    margin:0 0 26px;
    letter-spacing:-.6px;
  }

  .awGrid{
    display:grid;
    grid-template-columns: 1fr;
    gap:0;
  }

  /* Keep your existing owl-carousel JS by keeping ID = threeDSlider_slider */
  .aboutA__awards .threeDSlider__slider .item{
    background:#f6f7f9;
    border:2px solid rgba(31,63,115,.55);
    border-radius:10px;
    padding:22px 18px 18px;
    text-align:center;
    min-height:260px;
  }
  .aboutA__awards .threeDSlider__slider .item img{
    width:110px; height:auto;
    margin:0 auto 10px;
    display:block;
    opacity:.9;
  }
  .aboutA__awards .product-title{
    font-size:18px;
    font-weight:900;
    margin:0 0 10px;
  }
  .aboutA__awards .threeDSlider__slider .paragraph{
    font-size:14px;
    line-height:1.55;
    color:#1c2a3d;
    margin:0;
  }

  /* Optional: make owl nav look like attachment arrows centered */
  .aboutA__awards .owl-nav{
    margin-top:18px;
    display:flex;
    justify-content:center;
    gap:14px;
  }
  .aboutA__awards .owl-nav button{
    width:44px; height:44px;
    border-radius:50%;
    border:none;
    background:#d7d9dd !important;
    color:#fff !important;
    font-size:22px !important;
  }
  .aboutA__awards .owl-nav button.owl-next{ background:#0e4d8f !important; }
</style>

<main class="aboutA">

  {{-- 1) Banner image (ignore header/footer as requested) --}}
  <section class="aboutA__banner">
    <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image}}" alt="{{$meta_data->page_name}}" class="img-fluid desktop_image">
    <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image_mobile}}" alt="{{$meta_data->page_name}}" class="img-fluid mobile_image">
  </section>

  {{-- 2) White split: Big heading + paragraph + right image --}}
<section class="aboutDiscoverImage">
  <img
    src="{{ url('/') }}/assets/about-lp/discover.png"
    alt="Discover the World of Raychem RPG"
    class="img-fluid"
  >
</section>


  {{-- 3) PURPOSE / MISSION / VISION / VALUES: horizontal bands --}}
<section class="aboutPMVImage">
  <img
    src="{{ url('/') }}/assets/about-lp/purpose-mission-vision.png"
    alt="Purpose Mission Vision"
    class="img-fluid"
  >
</section>


  {{-- 4) Our Reliable Partnerships (repurpose your section_twos) --}}
  <section class="aboutA__partnersImage">
  <img
    src="{{ url('/') }}/assets/about-lp/Our-Reliable-Partnerships.png"
    alt="Our Reliable Partnerships"
    class="img-fluid"
  >
</section>


  {{-- 5) Our plants (4 thumbnails with play overlay) --}}
<section class="aboutPlantsReal" id="OurPlants">
  <div class="wrapA">
    <h2 class="plantsTitle">Our plants</h2>

    <div class="plantsGrid">

      {{-- 1 --}}
      <a class="plantCardReal" href="https://www.youtube.com/watch?v=VIDEO_ID_1" target="_blank" rel="noopener">
        <div class="plantThumb">
          <img src="{{ url('/') }}/assets/about-lp/plants/vasai-plant-inside.png" alt="VASAI PLANT INSIDE">
          <span class="plantPlay" aria-hidden="true"></span>
        </div>
        <h3 class="plantLabel">VASAI PLANT INSIDE</h3>
      </a>

      {{-- 2 --}}
      <a class="plantCardReal" href="https://www.youtube.com/watch?v=VIDEO_ID_2" target="_blank" rel="noopener">
        <div class="plantThumb">
          <img src="{{ url('/') }}/assets/about-lp/plants/naigaon-export-hub.png" alt="NAIGAON EXPORT HUB">
          <span class="plantPlay" aria-hidden="true"></span>
        </div>
        <h3 class="plantLabel">NAIGAON EXPORT HUB</h3>
      </a>

      {{-- 3 --}}
      <a class="plantCardReal" href="https://www.youtube.com/watch?v=VIDEO_ID_3" target="_blank" rel="noopener">
        <div class="plantThumb">
          <img src="{{ url('/') }}/assets/about-lp/plants/halol-factory-tour.png" alt="HALOL FACTORY TOUR">
          <span class="plantPlay" aria-hidden="true"></span>
        </div>
        <h3 class="plantLabel">HALOL FACTORY TOUR</h3>
      </a>

      {{-- 4 --}}
      <a class="plantCardReal" href="https://www.youtube.com/watch?v=VIDEO_ID_4" target="_blank" rel="noopener">
        <div class="plantThumb">
          <img src="{{ url('/') }}/assets/about-lp/plants/chakan-transformers.png" alt="CHAKAN TRANSFORMERS">
          <span class="plantPlay" aria-hidden="true"></span>
        </div>
        <h3 class="plantLabel">CHAKAN TRANSFORMERS</h3>
      </a>

    </div>
  </div>
</section>



  {{-- 6) Timeline: header strip + vertical timeline --}}
  @if(!empty(count($company_timelines)))
    <section class="aboutA__timelineHeader">
      <div class="wrapA">
        <h2>Moments That Shaped Us</h2>
      </div>
    </section>

    <section class="aboutA__timelineBody">
      <div class="wrapA">
        <div class="tline">
          @foreach($company_timelines as $k => $t)
            <div class="tItem @if($k % 2 == 0) left @else right @endif">
              <div class="tYear">{{ $t->company_timeline_year }}</div>
              <div class="tCard">
                <p>{!! $t->company_timeline_content !!}</p>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </section>
  @endif

  {{-- 7) Awards (use your existing owl carousel id to keep JS working) --}}
  @if(!empty(count($about_us_awards)))
  <section class="aboutA__awards aSection" id="Awards">
    <div class="wrapA">
      <h2>Awards &amp; Recognition</h2>

      <div class="threeDSlider__slider owl-carousel" id="threeDSlider_slider">
        @foreach($about_us_awards as $row)
          <figure class="item">
            {{-- If you want the laurel icon like attachment, keep a static laurel image in assets and use it here.
                 For now, we use your award image (or swap it to a laurel svg). --}}
            @if(!empty($row->about_us_award_image))
              <img src="{{url('/')}}/assets/images/about-us/{{$row->about_us_award_image}}" alt="{{$row->about_us_award_caption}}">
            @else
              <img src="{{url('/')}}/assets/images/about-us/laurel.png" alt="Award">
            @endif

            <figcaption>
              <h3 class="product-title">{{$row->about_us_award_caption}}</h3>
              <p class="paragraph">{!! nl2br($row->about_us_award_description) !!}</p>
            </figcaption>
          </figure>
        @endforeach
      </div>
    </div>
  </section>
  @endif

</main>

{{-- Left nav (keep same anchors) --}}
<!-- 
<div class="left_nav">
  <div class="about_nav">
    <ul>
      <li data-id="WhoWeAre" class="active"><span></span><a href="#WhoWeAre">Who we are</a></li>
      <li data-id="Awards"><span></span><a href="#Awards">Awards</a></li>
    </ul>
  </div>
</div>
 -->

@endsection