const { BrandLock, Button, Input, Card, Badge, Icon, Modal, SectionHeader, KpiCard, StatusDot } = window.KKPMarineDigitalDesignSystem_4fef83; /* Mirrors the design system's own PortalFooter (see _ds_bundle.js) — that component references BrandLock as a bare free variable that only resolves inside its own module scope, so importing it directly throws here. Same markup and copy, wired to the BrandLock this file already has in scope. */ function OmsFooter(){ const cols = [ { h:'Tentang KKP', items:['Sejarah','Visi dan Misi','Tugas dan Fungsi','Struktur Organisasi'] }, { h:'Publikasi', items:['Siaran Pers','Infografis','E-Majalah Segara','Video Kegiatan'] }, { h:'Layanan', items:['KUSUKA','Portal Data KP','PPID','JDIH','LAPOR!'] }, ]; return ( ); } /* Fades + slides a section in the first time it scrolls into view — pure IntersectionObserver, no animation library. */ function Reveal({ children, style }){ const ref = React.useRef(null); const [shown,setShown] = React.useState(false); React.useEffect(()=>{ const el = ref.current; if (!el) return; const io = new IntersectionObserver(([entry])=>{ if (entry.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); return (
{children}
); } /* Dark frosted-glass panel with hairline-divided rows, in the vein of webflow.com/made-in-webflow/website/glassmorphism-pricing-table — one big glass surface rather than N separate floating cards. */ const darkGlassPanel = { background:'rgba(11,18,32,.55)', backdropFilter:'blur(24px) saturate(180%)', WebkitBackdropFilter:'blur(24px) saturate(180%)', border:'1px solid rgba(255,255,255,.14)', borderRadius:'var(--radius-lg)', boxShadow:'0 24px 64px rgba(0,0,0,.28)', overflow:'hidden', }; const FEATURED_APPS = [ {id:'digitaltwin',kicker:'Ekosistem 3D',title:'Marine Ecosystem Digital Twin',description:'Jelajahi perubahan historis mangrove, lamun, dan terumbu karang dari pesisir hingga bawah laut.',icon:'globe',metric:'2018–2025',metricLabel:'rentang histori',image:'https://images.unsplash.com/photo-1546026423-cc4642628d2b?auto=format&fit=crop&w=1200&q=80'}, {id:'realtime',kicker:'Situation room',title:'Realtime Monitoring',description:'Pantau kapal, pelabuhan, kawasan konservasi, alert GeoEvent, dan laporan lapangan dalam satu tampilan.',icon:'graph-time-series',metric:'24/7',metricLabel:'monitoring aktif',image:'https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80'}, {id:'evika',kicker:'Konservasi',title:'Dashboard EVIKA',description:'Bandingkan efektivitas pengelolaan kawasan konservasi per tahun dan buka detail setiap kawasan.',icon:'graph-bar',metric:'127',metricLabel:'kawasan',image:'https://images.unsplash.com/photo-1530053969600-caed2596d242?auto=format&fit=crop&w=1200&q=80'}, {id:'bluecarbon',kicker:'Ekonomi biru',title:'Blue Carbon Intelligence',description:'Analisis potensi karbon mangrove dan lamun, risiko kehilangan habitat, serta peluang restorasi.',icon:'polygon-vertices',metric:'2D + 3D',metricLabel:'analisis spasial',image:'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80'}, {id:'search',kicker:'Satu Data KKP',title:'Katalog Data Geospasial',description:'Temukan dataset dan layanan peta resmi KKP, lalu tambahkan langsung ke ruang kerja analisis.',icon:'data',metric:'12.480',metricLabel:'data tersedia',image:'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=80'}, ]; function FeaturedAppsCarousel({go}){ const scroller=React.useRef(null),[active,setActive]=React.useState(0); const move=(index)=>{const next=Math.max(0,Math.min(FEATURED_APPS.length-1,index));setActive(next);const node=scroller.current,el=node?.children[next],first=node?.children[0];if(node&&el&&first)node.scrollTo({left:el.offsetLeft-first.offsetLeft,behavior:'smooth'});}; const onScroll=()=>{const node=scroller.current,first=node?.children[0];if(!node||!first)return;setActive(Math.max(0,Math.min(FEATURED_APPS.length-1,Math.round(node.scrollLeft/(first.clientWidth+16)))));}; return
{FEATURED_APPS.map((app,index)=>
go(app.id)} style={{position:'relative',flex:'0 0 280px',height:292,scrollSnapAlign:'start',overflow:'hidden',borderRadius:'var(--radius-lg)',boxShadow:active===index?'0 16px 38px rgba(18,21,74,.2)':'var(--shadow-md)',cursor:'pointer',transform:active===index?'translateY(-2px)':'none',transition:'transform .22s var(--ease-standard),box-shadow .22s var(--ease-standard)',background:'var(--kkp-indigo-900)'}}>
{app.kicker}

{app.title}

{app.description}

{app.metric}{app.metricLabel}
Tersedia
)}
{FEATURED_APPS.map((app,i)=>
; } function OmsLanding({ go, role, onRoleChange, reduceTransparency, onToggleTransparency }){ const [step,setStep] = React.useState('landing'); // landing → auth const [mode,setMode] = React.useState('ai'); // 'ai' | 'search' const [q,setQ] = React.useState(''); const [pendingDest,setPendingDest] = React.useState(null); const [pendingRequest,setPendingRequest] = React.useState(null); const submit = () => { setPendingDest(mode==='ai'?'assistant':'search'); setPendingRequest(mode==='ai'&&q.trim()?{seedQuestion:q.trim()}:null); setStep('auth'); }; const openApp = (dest, req) => { setPendingDest(dest); setPendingRequest(req||null); setStep('auth'); }; const glass = {background:'rgba(255,255,255,.55)',backdropFilter:'blur(20px) saturate(180%)',WebkitBackdropFilter:'blur(20px) saturate(180%)',border:'1px solid rgba(255,255,255,.5)',borderRadius:'var(--radius-lg)',boxShadow:'0 8px 32px rgba(11,18,32,.12)',overflow:'hidden'}; return (
Ocean Monitoring System

Laut Indonesia, dalam satu layar

Cukup tanya seperti bertanya ke rekan kerja, atau telusuri sendiri datanya. Setiap jawaban selalu jelas sumbernya, dan hal-hal penting tetap dicek oleh orang sebelum dikirim.

{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();submit();}}}> {mode==='ai' ? (