{{-- ============================================================================
     PAGE CONTENT — Lokasi (HUBUNGI KAMI)
     Site  : nres  ·  Page slug: location  ·  Page ID: 38
     URL   : /nres/location

     Konsep diambil daripada portal asal:
       https://www.nres.gov.my/ms-my/Mengenai/Pages/LokasiNRECC.aspx
       (nama kementerian · alamat penuh · pautan Google Maps · peta embed
        · Tel / Fax / E-mel — dipaparkan penuh lebar, responsif)

     Nota:
     · SEMUA logik + markup + CSS ada dalam fail ini — tiada komponen, tiada partial.
     · Warna guna CSS variable tema (--teal/--green/--fade/--line/--ink) → dark mode.
     · Ikon guna inline SVG (gaya sama seperti footer_nres).
     ============================================================================ --}}

@php
    $locLang = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';
    $locIsEn = $locLang === 'en';

    /* ------------------------------------------------------------------
     | Data lokasi (sumber: halaman Lokasi portal asal)
     ------------------------------------------------------------------ */
    $locName  = 'Kementerian Sumber Asli dan Kelestarian Alam (NRES)';
    $locNameEn = 'Ministry of Natural Resources and Environmental Sustainability (NRES)';

    $locAddr = $locIsEn
        ? ['Block F11, Complex F', 'Precinct 1, Federal Government Administrative Centre', '62000 Federal Territory of Putrajaya']
        : ['Blok F11, Kompleks F', 'Presint 1, Pusat Pentadbiran Kerajaan Persekutuan', '62000 Wilayah Persekutuan Putrajaya'];

    $locMapUrl   = 'https://goo.gl/maps/pDtS53MSbWAJHgoF8';
    $locMapEmbed = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3668.064339243475!2d101.70515077455784!3d2.9460852543682163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdc97d13c1e969%3A0xb8fdcae13d44e156!2sKementerian%20Sumber%20Asli%2C%20Alam%20Sekitar%20dan%20Perubahan%20Iklim%20-%20NRECC!5e1!3m2!1sen!2smy!4v1694143875718!5m2!1sen!2smy';

    $locTel   = '+603 8000 8000';
    $locFax   = '+603 8889 2672';
    $locEmail = 'webmaster@nres.gov.my';

    $locContact = [
        [
            'label' => $locIsEn ? 'Telephone' : 'Telefon',
            'value' => $locTel,
            'href'  => 'tel:'.str_replace(' ', '', $locTel),
            'icon'  => '<path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>',
        ],
        [
            'label' => $locIsEn ? 'Fax' : 'Faks',
            'value' => $locFax,
            'href'  => '',
            'icon'  => '<path d="M7 9V4h10v5"/><rect x="4" y="9" width="16" height="7" rx="2"/><path d="M7 16h10v4H7z"/>',
        ],
        [
            'label' => $locIsEn ? 'E-mail' : 'E-mel',
            'value' => $locEmail,
            'href'  => 'mailto:'.$locEmail,
            'icon'  => '<path d="M3 6h18v12H3z"/><path d="M3.5 7l8.5 6 8.5-6"/>',
        ],
    ];

    $locRelated = [
        [
            'title' => $locIsEn ? 'Officer Directory' : 'Direktori Pegawai',
            'url'   => url(trim(((string) ($siteSlug ?? '')).'/officer-directory', '/')),
        ],
        [
            'title' => $locIsEn ? 'Complaints and Feedback' : 'Aduan dan Maklum Balas',
            'url'   => url(trim(((string) ($siteSlug ?? '')).'/complaints-feedback', '/')),
        ],
    ];
@endphp

<style>
.loc__container{padding:26px 16px 40px}
.loc__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 auto 14px;max-width:1080px;color:var(--bs-secondary-color);font-size:.8rem}
.loc__breadcrumb a{color:var(--teal);font-weight:600;text-decoration:none}
.loc__breadcrumb a:hover{text-decoration:underline}
.loc__header{margin:0 auto 20px;max-width:1080px;text-align:center}
.loc__header h1{margin:0 0 10px;color:var(--green);font-size:clamp(1.4rem,2.9vw,2rem);font-weight:800;line-height:1.25}
.loc__lead{margin:0 auto;max-width:740px;color:var(--bs-secondary-color);font-size:.9rem;line-height:1.8}
.loc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:1080px;margin:0 auto}
@media (min-width:960px){.loc__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.loc__card{border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);padding:24px}
.loc__name{margin:0 0 12px;color:var(--green);font-size:1.02rem;font-weight:800;line-height:1.45}
.loc__addr{margin:0 0 18px;color:var(--ink);font-size:.92rem;line-height:1.9}
.loc__contacts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.loc__contact{display:flex;align-items:flex-start;gap:12px}
.loc__ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);flex:none}
.loc__ico svg{width:19px;height:19px}
.loc__contact small{display:block;margin-bottom:2px;color:var(--bs-secondary-color);font-size:.72rem;font-weight:600;letter-spacing:.03em}
.loc__contact a,.loc__contact span{color:var(--ink);font-size:.9rem;font-weight:600;text-decoration:none;word-break:break-word}
.loc__contact a:hover{color:var(--teal);text-decoration:underline}
.loc__actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.loc__btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1px solid var(--teal);border-radius:999px;background:var(--teal);color:#fff;font-size:.78rem;font-weight:700;text-decoration:none;transition:.18s}
.loc__btn:hover{background:var(--green);border-color:var(--green);color:#fff}
.loc__btn svg{width:14px;height:14px}
.loc__map{position:relative;min-height:340px;border:1px solid var(--line);border-radius:16px;background:var(--fade);overflow:hidden}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loc__related{margin:20px auto 0;max-width:1080px}
.loc__related-title{margin:0 0 12px;color:var(--green);font-size:.78rem;font-weight:800;letter-spacing:.05em}
.loc__related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.loc__related a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bs-body-bg);color:var(--ink);font-size:.84rem;font-weight:600;text-decoration:none;transition:.18s}
.loc__related a:hover{border-color:var(--teal);color:var(--teal)}
.loc__related svg{width:15px;height:15px;flex:none;color:var(--teal)}
.loc__note{margin:20px auto 0;max-width:1080px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;background:color-mix(in srgb,var(--fade) 45%,transparent);color:var(--bs-secondary-color);font-size:.82rem;line-height:1.75}
@media (max-width:600px){
  .loc__card{padding:18px}
  .loc__map{min-height:280px}
}
</style>

<section class="loc">
    <div class="loc__container">

        {{-- ============================ BREADCRUMB ============================ --}}
        <nav class="loc__breadcrumb" aria-label="breadcrumb">
            <a href="{{ url('/') }}">{{ $locIsEn ? 'Home' : 'Utama' }}</a>
            <span>/</span>
            <span>{{ $locIsEn ? 'Contact Us' : 'Hubungi Kami' }}</span>
            <span>/</span>
            <span>{{ $locIsEn ? 'Location' : 'Lokasi' }}</span>
        </nav>

        {{-- ============================== TAJUK ============================== --}}
        <header class="loc__header">
            <h1>{{ $locIsEn ? 'Location' : 'Lokasi' }}</h1>
            <p class="loc__lead">
                {{ $locIsEn
                    ? 'Address, map and contact information of the '.$locNameEn.'.'
                    : 'Alamat, peta dan maklumat perhubungan '.$locName.'.' }}
            </p>
        </header>

        {{-- ======================= ALAMAT + PETA LOKASI ======================= --}}
        <div class="loc__grid">
            <article class="loc__card">
                <h2 class="loc__name">{{ $locIsEn ? $locNameEn : $locName }}</h2>

                <p class="loc__addr">
                    @foreach ($locAddr as $locLine)
                        {{ $locLine }}@if (! $loop->last)<br>@endif
                    @endforeach
                </p>

                <ul class="loc__contacts">
                    @foreach ($locContact as $locItem)
                        <li class="loc__contact">
                            <span class="loc__ico" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">{!! $locItem['icon'] !!}</svg>
                            </span>
                            <div>
                                <small>{{ $locItem['label'] }}</small>

                                @if ($locItem['href'] !== '')
                                    <a href="{{ $locItem['href'] }}">{{ $locItem['value'] }}</a>
                                @else
                                    <span>{{ $locItem['value'] }}</span>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>

                <div class="loc__actions">
                    <a class="loc__btn" href="{{ $locMapUrl }}" target="_blank" rel="noopener">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
                        {{ $locIsEn ? 'Open in Google Maps' : 'Buka dalam Google Maps' }}
                    </a>
                </div>
            </article>

            <div class="loc__map">
                <iframe src="{{ $locMapEmbed }}"
                        title="{{ $locIsEn ? 'NRES location map' : 'Peta lokasi NRES' }}"
                        loading="lazy" allowfullscreen
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>

        {{-- ========================= PAUTAN BERKAITAN ========================= --}}
        @if (! empty($locRelated))
            <aside class="loc__related">
                <h2 class="loc__related-title">{{ $locIsEn ? 'RELATED PAGES' : 'HALAMAN BERKAITAN' }}</h2>

                <ul>
                    @foreach ($locRelated as $locRel)
                        <li>
                            <a href="{{ $locRel['url'] }}">
                                <span>{{ $locRel['title'] }}</span>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </aside>
        @endif

        {{-- =============================== NOTA =============================== --}}
        <p class="loc__note">
            {{ $locIsEn
                ? 'Note: For enquiries regarding our location or directions, please contact '.$locTel.' or e-mail '.$locEmail.'.'
                : 'Nota: Untuk pertanyaan berkaitan lokasi atau arah ke kementerian, sila hubungi '.$locTel.' atau e-mel '.$locEmail.'.' }}
        </p>
    </div>
</section>