{{-- ============================================================================
     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' => t('loc.telephone'),
            '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' => t('loc.fax'),
            'value' => $locFax,
            'href'  => '',
            'icon'  => '<path d="M7 9V4h10v5"/><rect x="4" y="9" width="16" height="7" rx="2"/><path d="M7 16h10v4H7z"/>',
        ],
        [
            'label' => t('loc.e_mail'),
            'value' => $locEmail,
            'href'  => 'mailto:'.$locEmail,
            'icon'  => '<path d="M3 6h18v12H3z"/><path d="M3.5 7l8.5 6 8.5-6"/>',
        ],
    ];
@endphp

<style>
.loc__container {
    padding: 40px 20px 64px;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--teal) 6%, transparent), transparent 50%);
}
.loc__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 auto 28px;
    max-width: 1140px;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}
.loc__breadcrumb a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s ease;
}
.loc__breadcrumb a:hover {
    opacity: .8;
    text-decoration: underline;
}
.loc__header {
    margin: 0 auto 40px;
    max-width: 1140px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding-bottom: 28px;
    position: relative;
}
.loc__header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--teal);
    border-radius: 2px;
}
.loc__header h1 {
    margin: 0 0 12px;
    color: var(--green);
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.loc__lead {
    margin: 0;
    max-width: 800px;
    color: var(--bs-secondary-color);
    font-size: 1.025rem;
    line-height: 1.75;
}
.loc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: stretch;
}
@media (min-width: 992px) {
    .loc__grid {
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    }
}
.loc__card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--bs-body-bg);
    padding: 36px;
    box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--ink) 7%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .3s ease;
}
.loc__card:hover {
    border-color: color-mix(in srgb, var(--teal) 50%, var(--line));
    box-shadow: 0 24px 48px -12px color-mix(in srgb, var(--teal) 12%, transparent);
}
.loc__name {
    margin: 0 0 18px;
    color: var(--green);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.4;
}
.loc__addr {
    margin: 0 0 24px;
    color: var(--ink);
    font-size: .975rem;
    line-height: 1.85;
    padding: 18px;
    background: color-mix(in srgb, var(--fade) 40%, var(--bs-body-bg));
    border-radius: 16px;
    border: 1px solid var(--line);
}
.loc__contacts {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.loc__contact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    transition: background-color .2s ease, border-color .2s ease;
    border: 1px solid transparent;
}
.loc__contact:hover {
    background: color-mix(in srgb, var(--teal) 5%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--teal) 20%, var(--line));
}
.loc__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--teal) 12%, var(--bs-body-bg));
    color: var(--teal);
    flex: none;
    border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 10%, transparent);
}
.loc__ico svg {
    width: 20px;
    height: 20px;
}
.loc__contact small {
    display: block;
    margin-bottom: 2px;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.loc__contact a,
.loc__contact span {
    color: var(--ink);
    font-size: .975rem;
    font-weight: 700;
    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: 24px;
    border-top: 1px solid var(--line);
}
.loc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding: 14px 24px;
    border: 1px solid var(--teal);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--teal), var(--green));
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 30%, transparent);
}
.loc__btn:hover {
    opacity: .95;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--teal) 40%, transparent);
}
.loc__btn svg {
    width: 18px;
    height: 18px;
}
.loc__map {
    position: relative;
    min-height: 480px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--fade);
    overflow: hidden;
    box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--ink) 7%, transparent);
}
.loc__map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(1.1) contrast(1.05);
}
.loc__note {
    margin: 32px auto 0;
    max-width: 1140px;
    padding: 18px 24px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fade) 30%, var(--bs-body-bg));
    color: var(--bs-secondary-color);
    font-size: .9rem;
    line-height: 1.85;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 3%, transparent);
}
@media (max-width: 768px) {
    .loc__container { padding: 24px 16px 48px; }
    .loc__card { padding: 24px; }
    .loc__map { min-height: 360px; }
}
</style>

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

        {{-- ============================ BREADCRUMB ============================ --}}
        <nav class="loc__breadcrumb" aria-label="breadcrumb">
            <a href="{{ url('/') }}">{{ t('Home') }}</a>
            <span>/</span>
            <span>{{ t('Hubungi Kami') }}</span>
            <span>/</span>
            <span>{{ t('Location') }}</span>
        </nav>

        {{-- ============================== TAJUK ============================== --}}
        <header class="loc__header">
            <h1>{{ t('Location') }}</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">
                <div>
                    <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>

                <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>
                        {{ t('loc.open_in_google_maps') }}
                    </a>
                </div>
            </article>

            <div class="loc__map">
                <iframe src="{{ $locMapEmbed }}"
                        title="{{ t('loc.nres_location_map') }}"
                        loading="lazy" allowfullscreen
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>

        {{-- =============================== 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>