{
    "id": 38,
    "slug": "location",
    "page_content": "{{-- ============================================================================\r\n     PAGE CONTENT — Lokasi (HUBUNGI KAMI)\r\n     Site  : nres  ·  Page slug: location  ·  Page ID: 38\r\n     URL   : /nres/location\r\n\r\n     Konsep diambil daripada portal asal:\r\n       https://www.nres.gov.my/ms-my/Mengenai/Pages/LokasiNRECC.aspx\r\n       (nama kementerian · alamat penuh · pautan Google Maps · peta embed\r\n        · Tel / Fax / E-mel — dipaparkan penuh lebar, responsif)\r\n\r\n     Nota:\r\n     · SEMUA logik + markup + CSS ada dalam fail ini — tiada komponen, tiada partial.\r\n     · Warna guna CSS variable tema (--teal/--green/--fade/--line/--ink) → dark mode.\r\n     · Ikon guna inline SVG (gaya sama seperti footer_nres).\r\n     ============================================================================ --}}\r\n\r\n@php\r\n    $locLang = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';\r\n    $locIsEn = $locLang === 'en';\r\n\r\n    /* ------------------------------------------------------------------\r\n     | Data lokasi (sumber: halaman Lokasi portal asal)\r\n     ------------------------------------------------------------------ */\r\n    $locName  = 'Kementerian Sumber Asli dan Kelestarian Alam (NRES)';\r\n    $locNameEn = 'Ministry of Natural Resources and Environmental Sustainability (NRES)';\r\n\r\n    $locAddr = $locIsEn\r\n        ? ['Block F11, Complex F', 'Precinct 1, Federal Government Administrative Centre', '62000 Federal Territory of Putrajaya']\r\n        : ['Blok F11, Kompleks F', 'Presint 1, Pusat Pentadbiran Kerajaan Persekutuan', '62000 Wilayah Persekutuan Putrajaya'];\r\n\r\n    $locMapUrl   = 'https://goo.gl/maps/pDtS53MSbWAJHgoF8';\r\n    $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';\r\n\r\n    $locTel   = '+603 8000 8000';\r\n    $locFax   = '+603 8889 2672';\r\n    $locEmail = 'webmaster@nres.gov.my';\r\n\r\n    $locContact = [\r\n        [\r\n            'label' => $locIsEn ? 'Telephone' : 'Telefon',\r\n            'value' => $locTel,\r\n            'href'  => 'tel:'.str_replace(' ', '', $locTel),\r\n            '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\"/>',\r\n        ],\r\n        [\r\n            'label' => $locIsEn ? 'Fax' : 'Faks',\r\n            'value' => $locFax,\r\n            'href'  => '',\r\n            'icon'  => '<path d=\"M7 9V4h10v5\"/><rect x=\"4\" y=\"9\" width=\"16\" height=\"7\" rx=\"2\"/><path d=\"M7 16h10v4H7z\"/>',\r\n        ],\r\n        [\r\n            'label' => $locIsEn ? 'E-mail' : 'E-mel',\r\n            'value' => $locEmail,\r\n            'href'  => 'mailto:'.$locEmail,\r\n            'icon'  => '<path d=\"M3 6h18v12H3z\"/><path d=\"M3.5 7l8.5 6 8.5-6\"/>',\r\n        ],\r\n    ];\r\n\r\n    $locRelated = [\r\n        [\r\n            'title' => $locIsEn ? 'Officer Directory' : 'Direktori Pegawai',\r\n            'url'   => url(trim(((string) ($siteSlug ?? '')).'/officer-directory', '/')),\r\n        ],\r\n        [\r\n            'title' => $locIsEn ? 'Complaints and Feedback' : 'Aduan dan Maklum Balas',\r\n            'url'   => url(trim(((string) ($siteSlug ?? '')).'/complaints-feedback', '/')),\r\n        ],\r\n    ];\r\n@endphp\r\n\r\n<style>\r\n.loc__container{padding:26px 16px 40px}\r\n.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}\r\n.loc__breadcrumb a{color:var(--teal);font-weight:600;text-decoration:none}\r\n.loc__breadcrumb a:hover{text-decoration:underline}\r\n.loc__header{margin:0 auto 20px;max-width:1080px;text-align:center}\r\n.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}\r\n.loc__lead{margin:0 auto;max-width:740px;color:var(--bs-secondary-color);font-size:.9rem;line-height:1.8}\r\n.loc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:1080px;margin:0 auto}\r\n@media (min-width:960px){.loc__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}\r\n.loc__card{border:1px solid var(--line);border-radius:16px;background:var(--bs-body-bg);padding:24px}\r\n.loc__name{margin:0 0 12px;color:var(--green);font-size:1.02rem;font-weight:800;line-height:1.45}\r\n.loc__addr{margin:0 0 18px;color:var(--ink);font-size:.92rem;line-height:1.9}\r\n.loc__contacts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}\r\n.loc__contact{display:flex;align-items:flex-start;gap:12px}\r\n.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}\r\n.loc__ico svg{width:19px;height:19px}\r\n.loc__contact small{display:block;margin-bottom:2px;color:var(--bs-secondary-color);font-size:.72rem;font-weight:600;letter-spacing:.03em}\r\n.loc__contact a,.loc__contact span{color:var(--ink);font-size:.9rem;font-weight:600;text-decoration:none;word-break:break-word}\r\n.loc__contact a:hover{color:var(--teal);text-decoration:underline}\r\n.loc__actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:18px;border-top:1px solid var(--line)}\r\n.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}\r\n.loc__btn:hover{background:var(--green);border-color:var(--green);color:#fff}\r\n.loc__btn svg{width:14px;height:14px}\r\n.loc__map{position:relative;min-height:340px;border:1px solid var(--line);border-radius:16px;background:var(--fade);overflow:hidden}\r\n.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}\r\n.loc__related{margin:20px auto 0;max-width:1080px}\r\n.loc__related-title{margin:0 0 12px;color:var(--green);font-size:.78rem;font-weight:800;letter-spacing:.05em}\r\n.loc__related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}\r\n.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}\r\n.loc__related a:hover{border-color:var(--teal);color:var(--teal)}\r\n.loc__related svg{width:15px;height:15px;flex:none;color:var(--teal)}\r\n.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}\r\n@media (max-width:600px){\r\n  .loc__card{padding:18px}\r\n  .loc__map{min-height:280px}\r\n}\r\n</style>\r\n\r\n<section class=\"loc\">\r\n    <div class=\"loc__container\">\r\n\r\n        {{-- ============================ BREADCRUMB ============================ --}}\r\n        <nav class=\"loc__breadcrumb\" aria-label=\"breadcrumb\">\r\n            <a href=\"{{ url('/') }}\">{{ $locIsEn ? 'Home' : 'Utama' }}</a>\r\n            <span>/</span>\r\n            <span>{{ $locIsEn ? 'Contact Us' : 'Hubungi Kami' }}</span>\r\n            <span>/</span>\r\n            <span>{{ $locIsEn ? 'Location' : 'Lokasi' }}</span>\r\n        </nav>\r\n\r\n        {{-- ============================== TAJUK ============================== --}}\r\n        <header class=\"loc__header\">\r\n            <h1>{{ $locIsEn ? 'Location' : 'Lokasi' }}</h1>\r\n            <p class=\"loc__lead\">\r\n                {{ $locIsEn\r\n                    ? 'Address, map and contact information of the '.$locNameEn.'.'\r\n                    : 'Alamat, peta dan maklumat perhubungan '.$locName.'.' }}\r\n            </p>\r\n        </header>\r\n\r\n        {{-- ======================= ALAMAT + PETA LOKASI ======================= --}}\r\n        <div class=\"loc__grid\">\r\n            <article class=\"loc__card\">\r\n                <h2 class=\"loc__name\">{{ $locIsEn ? $locNameEn : $locName }}</h2>\r\n\r\n                <p class=\"loc__addr\">\r\n                    @foreach ($locAddr as $locLine)\r\n                        {{ $locLine }}@if (! $loop->last)<br>@endif\r\n                    @endforeach\r\n                </p>\r\n\r\n                <ul class=\"loc__contacts\">\r\n                    @foreach ($locContact as $locItem)\r\n                        <li class=\"loc__contact\">\r\n                            <span class=\"loc__ico\" aria-hidden=\"true\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">{!! $locItem['icon'] !!}</svg>\r\n                            </span>\r\n                            <div>\r\n                                <small>{{ $locItem['label'] }}</small>\r\n\r\n                                @if ($locItem['href'] !== '')\r\n                                    <a href=\"{{ $locItem['href'] }}\">{{ $locItem['value'] }}</a>\r\n                                @else\r\n                                    <span>{{ $locItem['value'] }}</span>\r\n                                @endif\r\n                            </div>\r\n                        </li>\r\n                    @endforeach\r\n                </ul>\r\n\r\n                <div class=\"loc__actions\">\r\n                    <a class=\"loc__btn\" href=\"{{ $locMapUrl }}\" target=\"_blank\" rel=\"noopener\">\r\n                        <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>\r\n                        {{ $locIsEn ? 'Open in Google Maps' : 'Buka dalam Google Maps' }}\r\n                    </a>\r\n                </div>\r\n            </article>\r\n\r\n            <div class=\"loc__map\">\r\n                <iframe src=\"{{ $locMapEmbed }}\"\r\n                        title=\"{{ $locIsEn ? 'NRES location map' : 'Peta lokasi NRES' }}\"\r\n                        loading=\"lazy\" allowfullscreen\r\n                        referrerpolicy=\"no-referrer-when-downgrade\"></iframe>\r\n            </div>\r\n        </div>\r\n\r\n        {{-- ========================= PAUTAN BERKAITAN ========================= --}}\r\n        @if (! empty($locRelated))\r\n            <aside class=\"loc__related\">\r\n                <h2 class=\"loc__related-title\">{{ $locIsEn ? 'RELATED PAGES' : 'HALAMAN BERKAITAN' }}</h2>\r\n\r\n                <ul>\r\n                    @foreach ($locRelated as $locRel)\r\n                        <li>\r\n                            <a href=\"{{ $locRel['url'] }}\">\r\n                                <span>{{ $locRel['title'] }}</span>\r\n                                <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>\r\n                            </a>\r\n                        </li>\r\n                    @endforeach\r\n                </ul>\r\n            </aside>\r\n        @endif\r\n\r\n        {{-- =============================== NOTA =============================== --}}\r\n        <p class=\"loc__note\">\r\n            {{ $locIsEn\r\n                ? 'Note: For enquiries regarding our location or directions, please contact '.$locTel.' or e-mail '.$locEmail.'.'\r\n                : 'Nota: Untuk pertanyaan berkaitan lokasi atau arah ke kementerian, sila hubungi '.$locTel.' atau e-mel '.$locEmail.'.' }}\r\n        </p>\r\n    </div>\r\n</section>\r\n"
}