const { BrandLock, Button, Input, Icon } = window.KKPMarineDigitalDesignSystem_4fef83;

const MODERN_DATA = [
  {title:'Kawasan Konservasi 2025',meta:'SIDAKO · data_kk_2025',desc:'Batas spasial kawasan konservasi laut untuk analisis EVIKA dan pemantauan ekosistem.',img:'https://images.unsplash.com/photo-1546026423-cc4642628d2b?auto=format&fit=crop&w=700&q=80'},
  {title:'Arus Laut Indonesia',meta:'Portal Satu Data KKP',desc:'Layer oseanografi untuk membaca pola arus dan konteks pergerakan kapal.',img:'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=700&q=80'},
  {title:'Monitoring Terumbu Karang',meta:'SIDAKO · ekosistem pesisir',desc:'Tutupan habitat, observasi lapangan, foto, serta histori perubahan kawasan.',img:'https://images.unsplash.com/photo-1546026423-cc4642628d2b?auto=format&fit=crop&w=700&q=80'},
  {title:'Survei Batimetri',meta:'GEBCO · survei KKP',desc:'Model elevasi dasar laut untuk perencanaan wilayah pesisir dan visualisasi 3D.',img:'https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=700&q=80'},
];
const MODERN_NEWS = [
  {tag:'Pembaruan',title:'GeoAI workspace kini menyimpan hasil per pengguna',desc:'Hasil analisis, peta, dan konteks percakapan dapat disimpan di Workspace untuk dilanjutkan kembali.',img:'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=760&q=80'},
  {tag:'Data baru',title:'Layer kawasan konservasi 2025 tersedia',desc:'Katalog OMS menambahkan data spasial kawasan konservasi terbaru dari SIDAKO.',img:'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=760&q=80'},
  {tag:'Operasional',title:'Pemeliharaan aliran VMS dan AIS',desc:'Pemeliharaan terjadwal dilakukan untuk meningkatkan reliabilitas monitoring kapal.',img:'https://images.unsplash.com/photo-1516939884455-1445c8652f83?auto=format&fit=crop&w=760&q=80'},
];

function ModernFooter(){return <footer style={{background:'#006a9f',color:'#fff',padding:'48px 0 22px'}}><div style={{maxWidth:1180,margin:'0 auto',padding:'0 28px'}}><BrandLock src="/assets/logo-kkp-mark.png" product="Ocean Monitoring System" inverse height={42}/><p style={{fontSize:11,lineHeight:1.7,color:'rgba(255,255,255,.75)',marginTop:18}}>Jl. Medan Merdeka Timur No.16, Jakarta Pusat<br/>Telp. (021) 3519070 · Call Center KKP: 141<br/>humas.kkp@kkp.go.id</p><div style={{marginTop:32,paddingTop:18,borderTop:'1px solid rgba(255,255,255,.35)',display:'flex',justifyContent:'space-between',fontSize:10,color:'rgba(255,255,255,.72)'}}><span>© 2026 Kementerian Kelautan dan Perikanan</span><span>Kebijakan Privasi · Ketentuan Layanan</span></div></div></footer>}

function ModernLogin({role,onRoleChange,onClose,onEnter}){return <div className="kkp-modal__scrim" style={{position:'fixed',background:'rgba(3,25,43,.52)',backdropFilter:'blur(8px)',zIndex:900}} onClick={onClose}><div className="kkp-modal" style={{maxWidth:430}} onClick={e=>e.stopPropagation()}><div className="kkp-modal__head"><div><h3 style={{margin:0}}>Masuk ke OMS</h3><p style={{margin:'4px 0 0',fontSize:12,color:'var(--text-muted)'}}>Gunakan identitas KKP untuk mengakses aplikasi.</p></div><button onClick={onClose} style={{border:0,background:'none',cursor:'pointer'}}><Icon name="x" size={15}/></button></div><div className="kkp-modal__body"><div className="kkp-eyebrow">Peran prototype</div><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:7,margin:'9px 0 16px'}}>{window.OMS_ROLES.map(r=><button key={r.id} onClick={()=>onRoleChange(r.id)} style={{padding:9,textAlign:'left',borderRadius:6,border:role.id===r.id?'1px solid var(--kkp-azure-500)':'1px solid var(--border-subtle)',background:role.id===r.id?'var(--surface-accent-soft)':'#fff',cursor:'pointer'}}><b style={{fontSize:10}}>{r.name}</b><small style={{display:'block',fontSize:8,color:'var(--text-muted)',marginTop:3}}>{r.unit}</small></button>)}</div><Input label="Surel dinas" icon="user" placeholder="nama@kkp.go.id"/><div style={{marginTop:12}}><Input label="Kata sandi" type="password" placeholder="••••••••"/></div></div><div className="kkp-modal__foot"><Button variant="secondary" onClick={onClose}>Batal</Button><Button variant="primary" onClick={onEnter}>Masuk dengan Akun KKP</Button></div></div></div>}

function OmsLandingModern({go,role,onRoleChange,onLogout,authenticated}){
  const [profileOpen,setProfileOpen]=React.useState(false);
  const [menuOpen,setMenuOpen]=React.useState(false);
  const [headerScrolled,setHeaderScrolled]=React.useState(false);
  React.useEffect(()=>{const update=()=>setHeaderScrolled(window.scrollY>100);update();window.addEventListener('scroll',update,{passive:true});return()=>window.removeEventListener('scroll',update);},[]);
  const kpis=[['data','12.480','Data yang tersedia','search'],['map','386','Peta yang bisa diakses','search'],['crop','54','Alat bantu analisis','gis'],['globe','9','Tampilan 3D laut','digitaltwin']];
  return <div className="oms-landing-modern" style={{minHeight:'100vh',background:'#fff',color:'var(--text-body)'}}>
    <section className="oms-landing-hero" style={{minHeight:720,position:'relative',overflow:'hidden',background:'#052b46',backgroundImage:"url('https://view-baste-97428324.figma.site/assets/site/709c9.png')",backgroundSize:'cover',backgroundPosition:'center'}}>
      <video autoPlay muted loop playsInline preload="metadata" poster="https://view-baste-97428324.figma.site/assets/site/709c9.png" onError={event=>{const video=event.currentTarget;if(video.dataset.fallback)return;video.dataset.fallback='1';video.src='/assets/video/hero-ocean.mp4';video.load();}} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}><source src="https://view-baste-97428324.figma.site/assets/site/undersea2.mp4" type="video/mp4"/></video>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(63deg,rgba(2,6,6,.81) 10%,rgba(0,108,172,.81) 69%,rgba(251,252,253,0) 118%)'}}/>
      <div style={{position:'relative',maxWidth:1180,margin:'0 auto',padding:'18px 28px 34px'}}>
        <header className={'oms-landing-header'+(headerScrolled?' is-scrolled':'')} style={{height:58,display:'flex',alignItems:'center',gap:18}}>
          <button className="oms-landing-home" onClick={()=>go('landing')} aria-label="Beranda OMS"><img src="/assets/logo-kkp-mark.png" alt=""/><span>Kementerian Kelautan dan Perikanan</span></button>
          <button className="oms-landing-menu-toggle" aria-label="Buka menu utama" aria-expanded={menuOpen} onClick={()=>setMenuOpen(open=>!open)}>☰</button>
          <nav className={'oms-head-nav'+(menuOpen?' is-open':'')} aria-label="Navigasi utama" style={{display:'flex',alignItems:'center',gap:4,marginLeft:'auto'}}>
            {[['assistant','Ask AI'],['search','Katalog Data'],['apps','Katalog Aplikasi']].map(([id,label])=><button key={id} onClick={()=>{setMenuOpen(false);go(id);}} style={{border:0,borderRadius:6,background:'transparent',color:'#fff',padding:'8px 10px',fontFamily:'inherit',fontSize:13,fontWeight:500,cursor:'pointer'}}>{label}</button>)}
          </nav>
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            {authenticated?<div style={{position:'relative'}}><button onClick={()=>setProfileOpen(v=>!v)} aria-label="Profil atau ganti pengguna" aria-expanded={profileOpen} style={{display:'flex',alignItems:'center',gap:8,border:0,background:'transparent',color:'#fff',fontFamily:'inherit',cursor:'pointer',padding:'3px 5px'}}><span style={{width:29,height:29,borderRadius:'50%',display:'grid',placeItems:'center',background:role.color||'#f1bb3c',color:'#111a42',fontSize:9,fontWeight:800}}>{role.initials}</span><span className="oms-head-meta" style={{textAlign:'left'}}><b style={{display:'block',fontSize:9.5}}>{role.name}</b><small style={{display:'block',fontSize:7.5,color:'rgba(255,255,255,.68)'}}>{role.unit}</small></span><span style={{fontSize:9}}>⌄</span></button>{profileOpen?<div style={{position:'absolute',right:0,top:40,width:190,padding:8,borderRadius:7,background:'#fff',boxShadow:'0 12px 30px rgba(0,0,0,.2)',zIndex:20}}><button onClick={()=>{setProfileOpen(false);onLogout();}} style={{width:'100%',border:0,background:'transparent',padding:'9px 11px',textAlign:'left',color:'#b4232b',fontFamily:'inherit',fontWeight:700,cursor:'pointer'}}>Logout</button></div>:null}</div>:<button onClick={()=>go('login')} style={{height:32,padding:'0 16px',border:'1px solid rgba(255,255,255,.55)',borderRadius:6,background:'#fff',color:'var(--kkp-azure-800)',fontFamily:'inherit',fontSize:11,fontWeight:800,cursor:'pointer'}}>Mulai</button>}
          </div>
        </header>
        <div className="oms-landing-hero-grid" style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) 300px',gap:64,alignItems:'start',paddingTop:86}}>
          <div><h1 style={{fontSize:'clamp(42px,4.6vw,58px)',lineHeight:1.06,letterSpacing:'-.025em',color:'#fff',maxWidth:800,margin:'0 0 27px'}}>Ocean Monitoring System<br/>Lautra</h1><p style={{fontSize:14,lineHeight:1.63,color:'#fff',maxWidth:745,margin:0}}>Discover the Ocean Monitoring Dashboard! This platform, managed by the Ministry of Marine Affairs and Fisheries, offers real-time spatial monitoring. Utilize remote sensing, digital twins, and GeoAI to analyze and enhance your work while improving your Evika score. Dive into analytics and explore the vast resources of Indonesia's archipelago and blue corners.</p>
            <button className="oms-landing-launch" onClick={()=>go('gis')}>Launch Platform <span aria-hidden="true">✣</span></button>
          </div>
          <aside aria-label="Ringkasan Ocean Monitoring AI" className="oms-landing-ai-card" style={{position:'relative',justifySelf:'end',width:'100%',boxSizing:'border-box',marginTop:50,padding:'30px 18px 23px',border:'1px solid rgba(255,255,255,.18)',borderRadius:14,background:'linear-gradient(145deg,rgba(42,143,216,.95),rgba(19,117,184,.94))',boxShadow:'0 18px 34px rgba(0,42,75,.24)',color:'#fff'}}>
            <div className="oms-landing-ai-tag"><Icon name="apps" size={13} style={{filter:'brightness(0) invert(1)'}}/>AI Features</div>
            <img className="oms-landing-ai-logo" src="/assets/ai-assistant-logo.svg" alt=""/>
            <h2 style={{margin:0,fontSize:19,lineHeight:1.15,color:'#fff'}}>Ocean Monitoring AI</h2><p style={{margin:'5px 0 14px',fontSize:11,lineHeight:1.45,color:'rgba(255,255,255,.94)'}}>AI-powered analytics for real-time ocean monitoring &amp; maritime intelligence.</p>
            {['Detect illegal fishing activity in Zone 7','Analyze sea temperature anomalies this month'].map(prompt=><button key={prompt} className="oms-landing-ai-prompt" onClick={()=>go('assistant',{seedQuestion:prompt})}><span aria-hidden="true">✦</span>{prompt}</button>)}
          </aside>
        </div>
        <div className="oms-landing-kpis" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:15,marginTop:69}}>{kpis.map(([icon,value,label,target])=><button key={label} onClick={()=>go(target)} style={{textAlign:'left',padding:'18px 20px',borderRadius:11,border:'1px solid rgba(255,255,255,.08)',background:'linear-gradient(110deg,rgba(30,46,51,.72),rgba(44,137,195,.69))',backdropFilter:'blur(14px)',boxShadow:'0 8px 24px rgba(0,19,38,.12)',color:'#fff',cursor:'pointer'}}><Icon name={icon} size={17} style={{filter:'brightness(0) invert(1)',opacity:.92}}/><strong style={{display:'block',fontSize:28,lineHeight:1,fontWeight:800,letterSpacing:'-.02em',marginTop:15}}>{value}</strong><span style={{display:'block',fontSize:11.5,lineHeight:1.25,fontWeight:700,color:'rgba(255,255,255,.9)',marginTop:4}}>{label}</span></button>)}</div>
      </div><div style={{position:'absolute',left:0,right:0,bottom:0,height:7,background:'linear-gradient(90deg,var(--kkp-azure-500),var(--kkp-lime-500))'}}/>
    </section>

    <section className="oms-landing-discover" style={{background:'linear-gradient(135deg,#e4f3fb 0%,#f4fbff 55%,#ccebf8 100%)',padding:'62px 0 72px'}}><div style={{maxWidth:1180,margin:'0 auto',padding:'0 28px'}}><div><h2 style={{fontSize:30,margin:'0 0 7px'}}>Discover OMS</h2><p style={{margin:0,color:'var(--text-muted)',fontSize:14}}>Jelajahi analisis spasial untuk memantau dan memahami wilayah laut Indonesia.</p><div style={{width:90,height:3,background:'linear-gradient(90deg,var(--kkp-azure-500),var(--kkp-lime-500))',marginTop:16}}/></div>
      <div className="oms-landing-discover-grid" style={{display:'grid',gridTemplateColumns:'1fr 1.05fr',gap:64,alignItems:'center',marginTop:40}}><div><h3 style={{fontSize:23,margin:'0 0 13px'}}>Spatial Analytics (SIG)</h3><p style={{fontSize:14,lineHeight:1.7,color:'var(--text-muted)',maxWidth:520}}>Ruang analisis geospasial untuk menjelajahi data perikanan, kondisi laut, dan kawasan konservasi di seluruh wilayah pengelolaan perikanan Indonesia.</p><ul className="oms-landing-feature-list">{['Analisis ad hoc dengan data dan pertanyaan sendiri','Analisis terpandu langkah demi langkah','Pemantauan kondisi laut dan kawasan','Skenario untuk membandingkan kemungkinan perubahan','Analisis berbantuan AI dengan konteks spasial'].map(t=><li key={t}>{t}</li>)}</ul><button className="oms-landing-dashboard" onClick={()=>go('gis')}>Buka OMS GIS Workspace</button></div><div className="oms-landing-map-preview"><img src="/assets/map-sample-wpp-indonesia.png" alt="Peta analisis spasial Indonesia di OMS"/><div className="oms-landing-map-ai"><img src="/assets/ai-sparkle-16.svg" alt=""/><strong>AI Assistant</strong><span>Dapatkan wawasan dari peta dan data laut.</span><small>Bagaimana kondisi kawasan konservasi?</small><small>Bandingkan tutupan habitat pesisir</small></div></div></div>
    </div></section>

    <section style={{padding:'62px 0'}}><div style={{maxWidth:1180,margin:'0 auto',padding:'0 28px'}}><div style={{display:'flex',justifyContent:'space-between',alignItems:'end'}}><div><h2 style={{fontSize:27,margin:'0 0 7px'}}>Data yang dapat dijelajahi</h2><p style={{fontSize:13,color:'var(--text-muted)',margin:0}}>Sebagian data kelautan resmi lengkap dengan sumbernya.</p><div style={{width:88,height:3,background:'linear-gradient(90deg,var(--kkp-azure-500),var(--kkp-lime-500))',marginTop:15}}/></div><Button size="s" variant="secondary" iconEnd="chevron-right" onClick={()=>go('search')}>Lihat semua</Button></div><div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20,marginTop:28}}>{MODERN_DATA.map(d=><article key={d.title} style={{minWidth:0}}><img src={d.img} alt="" style={{width:'100%',height:142,objectFit:'cover',borderRadius:7}}/><h3 style={{fontSize:14,margin:'14px 0 7px'}}>{d.title}</h3><p style={{fontSize:11,lineHeight:1.55,color:'var(--text-muted)',margin:0,height:52,overflow:'hidden'}}>{d.desc}</p><div style={{fontSize:9,color:'var(--text-muted)',marginTop:12}}>{d.meta}</div></article>)}</div></div></section>

    <section style={{padding:'54px 0 62px',background:'#eef3f6'}}><div style={{maxWidth:1180,margin:'0 auto',padding:'0 28px'}}><div style={{display:'flex',justifyContent:'space-between',alignItems:'end'}}><div><h2 style={{fontSize:27,margin:'0 0 7px'}}>Berita dan pembaruan terbaru</h2><p style={{fontSize:13,color:'var(--text-muted)',margin:0}}>Pembaruan data, layanan, dan operasi platform.</p></div><Button size="s" variant="secondary">Lihat semua berita</Button></div><div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:22,marginTop:30}}>{MODERN_NEWS.map(n=><article key={n.title}><img src={n.img} alt="" style={{width:'100%',height:180,objectFit:'cover',borderRadius:7}}/><div className="kkp-eyebrow" style={{fontSize:8,color:'var(--kkp-azure-700)',marginTop:14}}>{n.tag}</div><h3 style={{fontSize:15,margin:'9px 0'}}>{n.title}</h3><p style={{fontSize:11,lineHeight:1.6,color:'var(--text-muted)',margin:0}}>{n.desc}</p><div style={{fontSize:9,color:'var(--text-muted)',marginTop:14}}>19 September 2026 · Tim OMS KKP</div></article>)}</div></div></section>
    <ModernFooter/>
  </div>;
}
window.OmsLanding=OmsLandingModern;