// ── Portfolio Page ─────────────────────────────────────────────────────────────

const PORTFOLIO_EXTENDED = [
  {
    id: 'travoy',
    client: 'Jasa Marga (BUMN)',
    project: 'Travoy Mudik App',
    category: 'Mobile · IoT · Big Data',
    segment: 'Enterprise',
    year: '2021',
    scope: 'Android, iOS, IoT Integration, Big Data',
    desc: 'Aplikasi mobilitas untuk pengguna tol nasional selama musim mudik. Mengelola data real-time dari sensor IoT di seluruh ruas tol Jasa Marga dengan tampilan yang intuitif untuk jutaan pengguna.',
    challenge: 'Jasa Marga membutuhkan solusi mobile yang bisa menangani lonjakan traffic jutaan pengguna dalam waktu singkat, terintegrasi dengan sistem IoT existing mereka.',
    result: '5.000+ pengguna aktif dalam 3 minggu pertama launch. Sistem stabil di bawah load peak musim mudik nasional.',
    metrics: [{ v: '5.000+', l: 'Users dalam 3 minggu' }, { v: '99.9%', l: 'Uptime saat peak' }, { v: '3 mgg', l: 'Waktu deployment' }],
    tags: ['Android', 'iOS', 'IoT', 'Big Data', 'BUMN'],
    accent: '#1A6FD4',
    sector: 'Infrastruktur & Transportasi',
  },
  {
    id: 'dicicilaja',
    client: 'Adira Finance',
    project: 'dicicilaja — Full Ecosystem Rebuild',
    category: 'Fintech · Microservices · Full-Stack',
    segment: 'Enterprise',
    year: '2020',
    scope: 'Web App, Android, iOS, Microservices Architecture',
    desc: 'Rebuild total ekosistem digital dicicilaja dari arsitektur monolith lama ke microservices modern. Mencakup 25 screens mobile (34 modul), 10 halaman web (17 modul), dan seluruh backend infrastructure.',
    challenge: 'Sistem monolith lama tidak bisa scale sesuai pertumbuhan bisnis Adira. Setiap deploy menjadi operasi berisiko tinggi. Performance buruk di mobile.',
    result: 'Sistem baru bisa deploy independen per service. Time-to-market untuk fitur baru turun drastis. Performa mobile meningkat signifikan.',
    metrics: [{ v: '25+', l: 'Mobile screens' }, { v: '17', l: 'Web modules' }, { v: 'Mono→Micro', l: 'Arsitektur' }],
    tags: ['Microservices', 'Web', 'Android', 'iOS', 'Fintech'],
    accent: '#0369A1',
    sector: 'Financial Services',
  },
  {
    id: 'sarawak',
    client: 'Sarawak Product Pavilion',
    project: 'E-Commerce + Voice AI Platform',
    category: 'International · E-Commerce · Voice AI · IoT',
    segment: 'Enterprise',
    year: '2019',
    scope: 'E-Commerce Platform, Microservices, Big Data, IoT, Voice Assistant',
    desc: 'Platform e-commerce komprehensif untuk pavilion produk Sarawak, Malaysia. Dilengkapi dengan microservices architecture, big data analytics, integrasi IoT untuk display products, dan Voice Assistant berbasis AI.',
    challenge: 'Klien membutuhkan platform yang tidak sekadar e-commerce biasa — melainkan experience yang mencerminkan identitas produk lokal Sarawak dengan teknologi modern termasuk voice interaction.',
    result: 'Platform internasional berhasil didelivery dari Bandung. Menjadi proof point bahwa Smartek X bisa menghandle proyek multi-teknologi bertaraf internasional.',
    metrics: [{ v: 'Malaysia', l: 'International project' }, { v: '5 tech', l: 'Stacks integrated' }, { v: 'AI Voice', l: 'Feature unik' }],
    tags: ['E-Commerce', 'IoT', 'Voice AI', 'Big Data', 'International'],
    accent: '#0D9488',
    sector: 'Retail & E-Commerce',
  },
  {
    id: 'ombudsman',
    client: 'Ombudsman Republik Indonesia',
    project: 'Portal Layanan Publik',
    category: 'Government · UI/UX · Web',
    segment: 'Enterprise',
    year: '2022',
    scope: 'UI/UX Redesign, Web Application',
    desc: 'Redesign menyeluruh sistem layanan publik Ombudsman RI — lembaga pemerintah yang menangani laporan masyarakat. Fokus pada aksesibilitas, kemudahan penggunaan, dan kepercayaan.',
    challenge: 'Sistem lama memiliki UX yang buruk, membuat masyarakat kesulitan melaporkan masalah. Tingkat penyelesaian form rendah, bounce rate tinggi.',
    result: 'Interface baru yang jauh lebih intuitif dan accessible. Mempermudah jutaan warga Indonesia dalam mengakses layanan pengawasan publik.',
    metrics: [{ v: 'Gov\'t', l: 'Sektor pemerintah' }, { v: 'RI', l: 'Lembaga negara' }, { v: 'UX+', l: 'Improvement focus' }],
    tags: ['UI/UX', 'Web', 'Government', 'Accessibility'],
    accent: '#7C3AED',
    sector: 'Pemerintahan',
  },
  {
    id: 'amarbank',
    client: 'Amar Bank',
    project: 'Procurement Analytics System',
    category: 'Perbankan · Data Analytics · SPSS',
    segment: 'Enterprise',
    year: '2021',
    scope: 'Data Analytics System, SPSS Integration, Procurement',
    desc: 'Sistem analytics untuk divisi procurement Amar Bank — digital bank yang beroperasi penuh di Indonesia. Integrasi SPSS untuk analisis data procurement dan pengambilan keputusan berbasis data.',
    challenge: 'Tim procurement membutuhkan visibility yang lebih baik terhadap data pengeluaran dan pola procurement. Keputusan masih banyak dibuat secara intuitif tanpa data yang cukup.',
    result: 'Dashboard analytics yang memberikan visibility real-time ke seluruh data procurement. Keputusan berbasis data, bukan intuisi.',
    metrics: [{ v: 'Bank', l: 'Digital banking' }, { v: 'SPSS', l: 'Analytics engine' }, { v: 'Real-time', l: 'Data visibility' }],
    tags: ['Analytics', 'SPSS', 'Procurement', 'Banking'],
    accent: '#B45309',
    sector: 'Financial Services',
  },
  {
    id: 'mhucoal',
    client: 'MHU Coal (Tbk)',
    project: 'Corporate Secretary System',
    category: 'Enterprise · Web · Corporate Communications',
    segment: 'Enterprise',
    year: '2020',
    scope: 'Company Profile, Corporate Secretary System, News Publishing, Corporate Communications',
    desc: 'Sistem corporate secretary dan komunikasi korporat untuk perusahaan pertambangan publik (Tbk). Mencakup company profile, news publishing system, dan manajemen komunikasi korporat untuk kebutuhan perusahaan terbuka.',
    challenge: 'Sebagai perusahaan publik (Tbk), MHU Coal membutuhkan sistem yang memenuhi standar komunikasi korporat dan keterbukaan informasi sesuai regulasi.',
    result: 'Platform komunikasi korporat yang profesional dan compliant untuk perusahaan publik Indonesia.',
    metrics: [{ v: 'Tbk', l: 'Public company' }, { v: 'Corp Sec', l: 'Full system' }, { v: 'Compliant', l: 'Regulatory' }],
    tags: ['Web', 'CMS', 'Corporate', 'Public Company'],
    accent: '#374151',
    sector: 'Mining & Energy',
  },
];

const PortfolioPage = ({ setPage }) => {
  const [active, setActive] = React.useState(null);
  const [filter, setFilter] = React.useState('Semua');
  const filters = ['Semua', 'Enterprise', 'Financial Services', 'Pemerintahan', 'International'];
  const filtered = filter === 'Semua' ? PORTFOLIO_EXTENDED
    : PORTFOLIO_EXTENDED.filter(p => p.segment === filter || p.sector === filter || p.tags.includes(filter));

  return (
    <div style={{ background: '#F5F7FA', minHeight: '100vh', paddingTop: 80 }}>
      {/* Hero */}
      <section style={{ padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,8vw,8rem) clamp(2rem,4vh,3rem)' }}>
        <Reveal>
          <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.78rem', fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#2D8CFF', marginBottom:'1rem' }}>Portfolio</p>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2.5rem,6vw,5rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', lineHeight:1.05, marginBottom:'1.25rem', maxWidth:700 }}>
            Proyek nyata.<br /><span style={{ color:'#2D8CFF' }}>Klien yang bisa dicek.</span>
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily:'Inter,sans-serif', fontSize:'clamp(1rem,1.5vw,1.2rem)', color:'#475569', lineHeight:1.7, maxWidth:560, marginBottom:'2.5rem' }}>
            Kami tidak menampilkan case study fiktif. Setiap proyek di bawah ini adalah pekerjaan nyata yang bisa diverifikasi — dari BUMN, fintech, pemerintah, hingga klien internasional.
          </p>
        </Reveal>
        {/* Stats row */}
        <Reveal delay={200}>
          <div style={{ display:'flex', flexWrap:'wrap', gap:'2rem 4rem', marginBottom:'3rem' }}>
            {[{v:'9+',l:'Tahun beroperasi'},{v:'6',l:'Klien enterprise ditampilkan'},{v:'2',l:'Negara: Indonesia & Malaysia'},{v:'20+',l:'Total proyek delivered'}].map(s=>(
              <div key={s.l}>
                <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(1.8rem,3.5vw,2.8rem)', fontWeight:800, color:'#1C2B3E', lineHeight:1, letterSpacing:'-0.03em' }}>{s.v}</div>
                <div style={{ fontFamily:'Inter,sans-serif', fontSize:'0.82rem', color:'#64748B', marginTop:4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Reveal>
        {/* Filter tabs */}
        <Reveal delay={260}>
          <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
            {filters.map(f=>(
              <button key={f} onClick={()=>setFilter(f)} style={{
                fontFamily:'Inter,sans-serif', fontSize:'0.83rem', fontWeight:600,
                padding:'7px 18px', borderRadius:100, border:'1.5px solid',
                borderColor: filter===f ? '#2D8CFF' : '#E2E8F0',
                background: filter===f ? '#2D8CFF' : '#fff',
                color: filter===f ? '#fff' : '#64748B',
                cursor:'pointer', transition:'all 0.2s',
              }}>
                {f}
              </button>
            ))}
          </div>
        </Reveal>
      </section>

      {/* Grid */}
      <section style={{ padding:'0 clamp(1.5rem,8vw,8rem) clamp(5rem,10vh,8rem)' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(340px,1fr))', gap:'1.5rem' }}>
          {filtered.map((p,i)=>(
            <Reveal key={p.id} delay={i*60}>
              <div onClick={()=>setActive(p)} style={{
                background:'#fff', borderRadius:24, overflow:'hidden',
                border:'1px solid #F1F5F9', boxShadow:'0 2px 16px rgba(0,0,0,0.04)',
                cursor:'pointer', transition:'transform 0.25s,box-shadow 0.25s',
              }}
              onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-5px)';e.currentTarget.style.boxShadow=`0 16px 48px ${p.accent}18`}}
              onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 2px 16px rgba(0,0,0,0.04)'}}>
                {/* Top color bar + metrics */}
                <div style={{ background:`linear-gradient(135deg,${p.accent}14,${p.accent}06)`, borderBottom:`1px solid ${p.accent}14`, padding:'1.75rem 1.75rem 1.5rem' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:'1.25rem', flexWrap:'wrap', gap:8 }}>
                    <div>
                      <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.68rem', fontWeight:700, color:'#94A3B8', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:'0.3rem' }}>{p.client}</p>
                      <span style={{ fontFamily:'Inter,sans-serif', fontSize:'0.7rem', fontWeight:600, color:p.accent, background:`${p.accent}12`, padding:'2px 10px', borderRadius:100 }}>{p.sector}</span>
                    </div>
                    <span style={{ fontFamily:'Inter,sans-serif', fontSize:'0.72rem', color:'#94A3B8' }}>{p.year}</span>
                  </div>
                  <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'1.2rem', fontWeight:800, color:'#0D1117', letterSpacing:'-0.02em', lineHeight:1.2, marginBottom:'1.25rem' }}>{p.project}</h3>
                  {/* Mini metrics */}
                  <div style={{ display:'flex', gap:10 }}>
                    {p.metrics.map(m=>(
                      <div key={m.l} style={{ flex:1, background:'rgba(255,255,255,0.8)', borderRadius:10, padding:'8px', textAlign:'center' }}>
                        <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'0.9rem', fontWeight:800, color:p.accent, letterSpacing:'-0.01em' }}>{m.v}</div>
                        <div style={{ fontFamily:'Inter,sans-serif', fontSize:'0.6rem', color:'#94A3B8', marginTop:2, lineHeight:1.3 }}>{m.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
                {/* Bottom content */}
                <div style={{ padding:'1.5rem 1.75rem' }}>
                  <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.88rem', color:'#64748B', lineHeight:1.65, marginBottom:'1.25rem' }}>{p.desc.slice(0,140)}…</p>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                    <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                      {p.tags.slice(0,3).map(t=>(
                        <span key={t} style={{ fontFamily:'Inter,sans-serif', fontSize:'0.67rem', fontWeight:600, color:'#64748B', background:'#F1F5F9', padding:'2px 8px', borderRadius:100 }}>{t}</span>
                      ))}
                    </div>
                    <span style={{ fontFamily:'Inter,sans-serif', fontSize:'0.8rem', fontWeight:600, color:p.accent }}>Detail →</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding:'0 clamp(1.5rem,8vw,8rem) clamp(5rem,10vh,7rem)', background:'#F4F6FA', borderTop:'1px solid #F1F5F9' }}>
        <div style={{ paddingTop:'clamp(4rem,8vh,6rem)', maxWidth:680, margin:'0 auto', textAlign:'center' }}>
          <Reveal>
            <h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(1.75rem,3.5vw,2.75rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', marginBottom:'1rem' }}>
              Proyek Anda bisa jadi yang berikutnya.
            </h2>
          </Reveal>
          <Reveal delay={80}>
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'1rem', color:'#64748B', lineHeight:1.7, marginBottom:'2rem' }}>
              Mulai dengan AI Audit gratis — kami identifikasi 3 area bisnis Anda yang bisa langsung dioptimasi dalam 1–2 hari.
            </p>
          </Reveal>
          <Reveal delay={160}>
            <button onClick={()=>setPage('contact')} style={{ background:'#E8FF47', color:'#0D1117', border:'none', borderRadius:14, padding:'15px 36px', fontSize:'1rem', fontWeight:600, cursor:'pointer', fontFamily:'Inter,sans-serif', boxShadow:'0 4px 20px rgba(232,255,71,0.28)' }}>
              Minta AI Audit Gratis
            </button>
          </Reveal>
        </div>
      </section>

      {/* Detail Modal */}
      {active && <PortfolioModal p={active} onClose={()=>setActive(null)} />}
    </div>
  );
};

// ── Portfolio Modal ────────────────────────────────────────────────────────────

const PortfolioModal = ({ p, onClose }) => {
  React.useEffect(() => {
    const onKey = e => { if(e.key==='Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);

  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:300, background:'rgba(15,14,26,0.7)', backdropFilter:'blur(8px)', display:'flex', alignItems:'center', justifyContent:'center', padding:'1.5rem' }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:28, maxWidth:720, width:'100%', maxHeight:'90vh', overflow:'auto', boxShadow:'0 32px 80px rgba(0,0,0,0.25)' }}>
        {/* Header */}
        <div style={{ background:`linear-gradient(135deg,${p.accent}12,${p.accent}04)`, borderBottom:`1px solid ${p.accent}12`, padding:'2.5rem 2.5rem 2rem', position:'sticky', top:0 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
            <div>
              <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.72rem', fontWeight:700, color:'#94A3B8', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:'0.5rem' }}>{p.client} · {p.sector} · {p.year}</p>
              <h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(1.4rem,3vw,2rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', lineHeight:1.1 }}>{p.project}</h2>
            </div>
            <button onClick={onClose} style={{ background:'rgba(0,0,0,0.06)', border:'none', borderRadius:'50%', width:40, height:40, cursor:'pointer', fontSize:'1.1rem', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>✕</button>
          </div>
          {/* Tags */}
          <div style={{ display:'flex', flexWrap:'wrap', gap:6, marginTop:'1rem' }}>
            {p.tags.map(t=><span key={t} style={{ fontFamily:'Inter,sans-serif', fontSize:'0.72rem', fontWeight:600, color:p.accent, background:`${p.accent}10`, padding:'3px 10px', borderRadius:100 }}>{t}</span>)}
          </div>
        </div>
        {/* Body */}
        <div style={{ padding:'2rem 2.5rem 2.5rem' }}>
          {/* Metrics */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'1rem', marginBottom:'2rem' }}>
            {p.metrics.map(m=>(
              <div key={m.l} style={{ background:'#F8FAFC', borderRadius:16, padding:'1.25rem', textAlign:'center', border:'1px solid #F1F5F9' }}>
                <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'1.5rem', fontWeight:800, color:p.accent, letterSpacing:'-0.02em' }}>{m.v}</div>
                <div style={{ fontFamily:'Inter,sans-serif', fontSize:'0.75rem', color:'#94A3B8', marginTop:4 }}>{m.l}</div>
              </div>
            ))}
          </div>
          {/* Scope */}
          <div style={{ marginBottom:'1.5rem' }}>
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.75rem', fontWeight:700, color:'#94A3B8', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:'0.5rem' }}>Scope</p>
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.92rem', color:'#374151', lineHeight:1.6 }}>{p.scope}</p>
          </div>
          {/* Sections */}
          {[{t:'Tantangan',c:p.challenge},{t:'Solusi & Pendekatan',c:p.desc},{t:'Hasil',c:p.result}].map(s=>(
            <div key={s.t} style={{ marginBottom:'1.5rem', paddingBottom:'1.5rem', borderBottom:'1px solid #F1F5F9' }}>
              <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.75rem', fontWeight:700, color:'#94A3B8', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:'0.5rem' }}>{s.t}</p>
              <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.92rem', color:'#374151', lineHeight:1.7 }}>{s.c}</p>
            </div>
          ))}
          {/* Philosophical note */}
          <div style={{ background:'linear-gradient(135deg,rgba(45,140,255,0.06),rgba(20,96,200,0.04))', borderRadius:16, padding:'1.5rem', border:'1px solid rgba(45,140,255,0.1)' }}>
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.82rem', fontWeight:700, color:'#2D8CFF', marginBottom:'0.5rem' }}>Filosofi Smartek X</p>
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.88rem', color:'#475569', lineHeight:1.7, fontStyle:'italic' }}>"Proyek ini dimulai bukan dari demo teknologi, tapi dari pertanyaan: masalah bisnis apa yang paling berdampak untuk diselesaikan lebih dulu?"</p>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PortfolioPage, PORTFOLIO_EXTENDED });