@extends('layouts.site')

@section('content')

    <!-- Header Section Start -->
    <header id="hero-area" data-stellar-background-ratio="0.5"
            @if ($sections['hero']?->imageUrl()) style="background-image: url('{{ $sections['hero']->imageUrl() }}');" @endif>
      @include('partials.navbar')
      <!-- Navbar End -->
      <div class="container">
        <div class="row justify-content-md-center">
          <div class="col-md-10">
            <div class="contents text-center">
              @php $hero = $sections['hero'] ?? null; @endphp
              <h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">{{ $hero->title ?? 'WELCOME TO DGFORM' }}</h1>
              <p class="lead  wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">{{ $hero?->subtitle }}</p>
              <div class="hero-actions wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="400ms">
                <a href="{{ $hero->button_link ?? '#services' }}" class="btn btn-common">{{ $hero->button_text ?? 'More Info' }}</a>
                <a href="{{ route('contact') }}" class="btn btn-border">{{ __('Contact') }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- Header Section End -->

    <!-- About Us Section -->
    <section id="services" class="section">
      <div class="container">
        @php $services = $sections['services'] ?? null; @endphp
        <div class="section-header">
          <h2 class="section-title wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s">{{ $services->title ?? 'ABOUT US' }}</h2>
          <hr class="lines wow zoomIn" data-wow-delay="0.3s">
          <p class="section-subtitle wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s">{{ $services?->subtitle }}</p>
        </div>

        <div class="row align-items-center about-us-row">
          <div class="col-12 col-md-6">
            @if ($services?->content)
              <div class="about-us-content wow fadeIn" data-wow-delay="0.2s">{!! $services->content !!}</div>
            @endif
          </div>
          <div class="col-12 col-md-6">
            <div class="row">
              @foreach ($services->items ?? [] as $item)
                <div class="col-12 mb-3">
                  <div class="stat-card stat-card-row wow fadeInDown" data-wow-delay="{{ $loop->iteration * 0.2 }}s">
                    @if ($item->icon)
                      <span class="stat-icon-badge"><i class="{{ $item->icon }}"></i></span>
                    @endif
                    <div>
                      <div class="stat-number">{{ $item->title }}</div>
                      <div class="stat-label">{!! $item->description !!}</div>
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>

        <!-- Visi & Misi (nested inside About) -->
        @php $visimisi = $sections['visimisi'] ?? null; @endphp
        <div id="visimisi" class="license-subsection visimisi-band">
          <div class="container">
            <div class="section-header">
              <h3 class="license-subsection-title">{{ $visimisi->title ?? 'Visi & Misi' }}</h3>
              <hr class="lines">
            </div>
            <div class="row visimisi-row">
              <div class="col-12 col-md-6 mb-4 mb-md-0">
                <div class="visimisi-card visimisi-card-vision">
                  <span class="visimisi-icon-badge"><i class="fa fa-eye"></i></span>
                  <h4 class="visimisi-heading">{{ __('Vision') }}</h4>
                  <div>{!! $visimisi?->content !!}</div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="visimisi-card visimisi-card-mission">
                  <span class="visimisi-icon-badge"><i class="fa fa-bullseye"></i></span>
                  <h4 class="visimisi-heading">{{ __('Mission') }}</h4>
                  <ul class="visimisi-list">
                    @foreach ($visimisi->items ?? [] as $item)
                      <li><i class="fa fa-check-circle"></i> {{ $item->title }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- What We Do (nested inside About, boxed cards) -->
        @php $whatwedo = $sections['whatwedo'] ?? null; @endphp
        <div id="whatwedo" class="license-subsection">
          <div class="section-header">
            <h3 class="license-subsection-title">{{ $whatwedo->title ?? 'What We Do' }}</h3>
            <hr class="lines">
            <p class="section-subtitle">{{ $whatwedo?->subtitle }}</p>
          </div>
          <div class="row">
            @foreach ($whatwedo->items ?? [] as $item)
              <div class="col-12 col-sm-6 col-md-4 mb-4">
                <div class="whatwedo-card wow fadeInDown" data-wow-delay="{{ $loop->iteration * 0.2 }}s">
                  <span class="whatwedo-icon-badge">
                    <i class="{{ $item->icon }}"></i>
                  </span>
                  <h4>{{ $item->title }}</h4>
                  <div>{!! $item->description !!}</div>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </section>
    <!-- About Us Section End -->

    <!-- Features Section -->
    <section id="features" class="section" data-stellar-background-ratio="0.2">
      <div class="container">
        @php $features = $sections['features'] ?? null; @endphp
        <div class="section-header">
          <h2 class="section-title">{{ $features->title ?? 'OUR SERVICES' }}</h2>
          <hr class="lines">
          <p class="section-subtitle">{{ $features?->subtitle }}</p>
        </div>
        <div class="row">
            <div class="container">
              <div class="row">
                @foreach ($features->items ?? [] as $item)
                  <div class="col-lg-6 col-sm-6 col-xs-6 box-item">
                    @if ($item->link)
                      <a href="{{ $item->link }}" target="_blank" rel="noopener noreferrer" class="box-item-link">
                        <span class="icon">
                          <i class="{{ $item->icon }}"></i>
                        </span>
                        <div class="text">
                          <h4>{{ $item->title }}</h4>
                          <div>{!! $item->description !!}</div>
                        </div>
                      </a>
                    @else
                      <span class="icon">
                        <i class="{{ $item->icon }}"></i>
                      </span>
                      <div class="text">
                        <h4>{{ $item->title }}</h4>
                        <div>{!! $item->description !!}</div>
                      </div>
                    @endif
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Features Section End -->

    <!-- Partner Section -->
    <section id="partner" class="section">
      <div class="container">
        @php $partner = $sections['partner'] ?? null; @endphp
        <div class="section-header">
          <h2 class="section-title">{{ $partner->title ?? 'OUR PARTNER' }}</h2>
          <hr class="lines">
          <p class="section-subtitle">{{ $partner?->subtitle }}</p>
        </div>
      </div>
      <div class="counters">
        <div class="partner-marquee">
          <div class="partner-marquee-track">
            @foreach ([1, 2] as $duplicate)
              @foreach ($partner->items ?? [] as $item)
                <div class="facts-item" aria-hidden="{{ $duplicate === 2 ? 'true' : 'false' }}">
                  <div class="partner-card">
                    <img src="{{ $item->imageUrl() }}" alt="{{ $item->title }}"/>
                  </div>
                </div>
              @endforeach
            @endforeach
          </div>
        </div>
      </div>
    </section>
    <!-- Partner Section End -->

    <!-- Contact CTA -->
    @php $contactCta = $sections['contact_cta'] ?? null; @endphp
    <section class="contact-cta-band">
      <div class="container text-center">
        <h2 class="contact-cta-title">{{ $contactCta->title ?? 'Ready to Work With Us?' }}</h2>
        <p class="contact-cta-subtitle">{{ $contactCta?->subtitle }}</p>
        <a href="{{ route('contact') }}" class="btn btn-white-cta">
          {{ $contactCta->button_text ?? 'Contact Us' }}
          <i class="fa fa-arrow-right"></i>
        </a>
      </div>
    </section>
    <!-- Contact CTA End -->

@endsection