// ── Insights Data ─────────────────────────────────────────────────────────────

const ARTICLES = [
  {
    id: 'why-tech-projects-fail',
    title: 'Kenapa Proyek Teknologi Gagal — Bukan Karena Teknologinya',
    slug: 'Pelajaran dari 9 tahun mengerjakan proyek untuk BUMN, fintech, dan pemerintah.',
    category: 'Strategi',
    readTime: '6 menit',
    featured: true,
    date: 'April 2026',
    tags: ['Digital Transformation', 'Strategy', 'Lessons Learned'],
    intro: 'Setelah 9 tahun mengerjakan lebih dari 20 proyek teknologi — dari BUMN seperti Jasa Marga, fintech seperti Adira Finance, hingga lembaga pemerintah — saya melihat satu pola yang terus berulang: proyek gagal bukan karena pilihan teknologinya salah. Proyek gagal karena masalah bisnisnya tidak pernah benar-benar dipahami.',
    sections: [
      {
        h: 'Vendor bertanya "teknologi apa?" — itu pertanyaan yang salah.',
        body: 'Ketika klien datang dengan permintaan "kami butuh aplikasi mobile", sebagian besar vendor langsung membuka laptop dan mulai mendesain wireframe. Pertanyaan pertama mereka adalah: React Native atau Flutter? AWS atau GCP?\n\nPertanyaan itu, meski teknis valid, adalah pertanyaan yang salah untuk diajukan pertama kali.\n\nPertanyaan yang benar: Apa masalah bisnis yang ingin diselesaikan dengan aplikasi ini? Siapa yang akan menggunakannya dan dalam kondisi seperti apa? Apa definisi sukses 6 bulan setelah launch?\n\nJika Anda tidak bisa menjawab pertanyaan ini dengan jelas, tidak ada pilihan teknologi yang akan menyelamatkan proyek Anda.',
      },
      {
        h: 'Tiga pola kegagalan yang paling sering saya lihat.',
        body: '1. **Scope yang tidak punya prioritas.** Klien datang dengan list 47 fitur. Vendor mengiyakan semuanya. Setelah 6 bulan, 30 fitur belum selesai, budget habis, dan bisnis tidak berubah sama sekali.\n\n2. **Success metric tidak didefinisikan di awal.** Proyek dianggap selesai ketika kode sudah di-deploy — bukan ketika bisnis berhasil. Akibatnya, tidak ada yang bisa mengatakan apakah proyek berhasil atau tidak.\n\n3. **Teknologi dipilih sebelum masalah dipahami.** "Kami ingin pakai AI" — untuk apa? Menyelesaikan masalah apa? Berapa nilai bisnis jika masalah itu selesai? Tanpa jawaban ini, AI hanyalah buzzword yang mahal.',
      },
      {
        h: 'Cara yang benar: mulai dari bisnis, bukan dari teknologi.',
        body: 'Setiap engagement Smartek X dimulai dengan satu pertanyaan sederhana: "Proses mana di bisnis Anda yang paling banyak membuang waktu atau uang?"\n\nDari jawaban itu, kami baru mulai memahami konteks. Mengapa proses itu terjadi? Apa yang akan berubah jika proses itu dioptimasi? Berapa nilainya dalam rupiah per bulan?\n\nBaru setelah itu kami bicara teknologi. Dan seringkali, solusinya jauh lebih sederhana dari yang klien bayangkan — yang berarti lebih cepat diimplementasikan dan lebih rendah risikonya.',
      },
      {
        h: 'Implikasi praktis untuk Anda.',
        body: 'Jika Anda sedang mempertimbangkan proyek teknologi, tanyakan pada diri sendiri — atau pada vendor Anda:\n\n• Apakah masalah bisnis yang ingin diselesaikan sudah didefinisikan dengan jelas?\n• Apakah success metric sudah disepakati sebelum proyek dimulai?\n• Apakah scope proyek diprioritaskan berdasarkan business impact, bukan wish list?\n\nJika jawabannya tidak, proyek Anda sedang berjalan di atas fondasi yang rapuh — terlepas dari seberapa canggih teknologi yang dipilih.',
      },
    ],
    cta: 'Ingin tahu proses bisnis mana yang paling worth untuk diotomasi? Dapatkan AI Audit Gratis dari Smartek X.',
  },
  {
    id: 'ai-audit-cara-memulai',
    title: 'AI Audit: Cara Menemukan Titik Awal Transformasi Digital yang Benar',
    slug: 'Panduan praktis — bukan teori — untuk UMKM yang ingin adopsi AI tanpa buang uang.',
    category: 'Panduan Praktis',
    readTime: '8 menit',
    featured: true,
    date: 'April 2026',
    tags: ['AI', 'UMKM', 'Praktis', 'Panduan'],
    intro: 'Setiap minggu, saya berbicara dengan pemilik bisnis yang ingin "pakai AI" di perusahaan mereka. Dan hampir setiap kali, pertanyaan pertama mereka adalah sama: "Mulai dari mana?"\n\nArtikel ini adalah jawaban jujur untuk pertanyaan itu — berdasarkan pengalaman nyata, bukan teori dari whitepaper.',
    sections: [
      {
        h: 'Mengapa kebanyakan orang salah memulai.',
        body: 'Kesalahan umum: langsung mencari tool AI atau vendor, tanpa tahu masalah apa yang ingin diselesaikan. Hasilnya: beli subscription ChatGPT atau tool otomasi, dicoba 2 minggu, lalu tidak terpakai karena "tidak tahu digunakan untuk apa".\n\nAI bukan solusi generik. AI adalah alat untuk menyelesaikan masalah yang spesifik. Dan untuk menemukan masalah yang spesifik, Anda perlu melakukan audit terlebih dahulu.',
      },
      {
        h: 'Apa itu AI Audit — dan mengapa ini langkah pertama yang benar.',
        body: 'AI Audit adalah proses sistematis untuk memetakan proses bisnis Anda dan mengidentifikasi area mana yang paling berpotensi untuk dioptimasi dengan AI.\n\nBukan soal apakah Anda siap pakai AI atau tidak. Soal: proses bisnis mana yang, jika diotomasi atau di-AI-kan, akan punya dampak paling besar terhadap revenue atau efisiensi Anda?\n\nDan — ini yang sering diabaikan — seberapa feasible untuk diimplementasikan dalam timeline dan budget yang realistis?',
      },
      {
        h: 'Framework 3 pertanyaan untuk self-audit singkat.',
        body: 'Sebelum berbicara dengan vendor apapun, jawab tiga pertanyaan ini:\n\n**1. Proses mana yang paling banyak membuang waktu?**\nContoh: membuat laporan harian, membalas pertanyaan pelanggan yang sama, input data manual, dll.\n\n**2. Proses mana yang paling sering error?**\nContoh: kesalahan input, perhitungan yang harus dicek ulang, ketidakkonsistenan data antara sistem.\n\n**3. Proses mana yang skalanya sulit karena bergantung pada orang tertentu?**\nContoh: hanya satu orang yang bisa buat laporan keuangan, approval yang bottleneck di satu direktur, dsb.\n\nProses yang muncul dari minimal 2 dari 3 pertanyaan ini adalah kandidat terkuat untuk diotomasi.',
      },
      {
        h: 'Quick win vs transformasi besar — kenapa urutan ini penting.',
        body: 'Jangan mulai dari yang paling ambisius. Mulai dari yang paling cepat menghasilkan hasil nyata.\n\nMengapa? Karena keberhasilan kecil yang terukur membangun kepercayaan tim, membuktikan ROI kepada pemilik bisnis, dan menciptakan momentum untuk inisiatif yang lebih besar.\n\nSetelah satu proses berhasil diotomasi dan menghemat, katakanlah, 10 jam/minggu senilai Rp 2 juta — semua orang di organisasi akan jauh lebih terbuka untuk langkah berikutnya.',
      },
    ],
    cta: 'Smartek X menawarkan AI Audit gratis untuk bisnis Anda — 1–2 hari, kami deliver laporan konkret dengan 3 rekomendasi prioritas.',
  },
  {
    id: '5-tanda-siap-ai',
    title: '5 Tanda Bisnis Anda Siap Adopsi AI — dan 3 Tanda Anda Belum',
    slug: 'Checklist jujur sebelum Anda memutuskan untuk investasi di teknologi AI.',
    category: 'Strategi',
    readTime: '5 menit',
    featured: false,
    date: 'Maret 2026',
    tags: ['AI', 'UMKM', 'Checklist', 'Readiness'],
    intro: 'Banyak bisnis yang terburu-buru adopsi AI karena takut ketinggalan. Tapi ada juga yang menunda terlalu lama karena merasa "belum siap". Keduanya bisa menjadi kesalahan mahal. Artikel ini adalah panduan jujur untuk menilai kesiapan Anda sendiri.',
    sections: [
      {
        h: '5 tanda Anda siap.',
        body: '**1. Anda punya proses yang berulang.** AI paling efektif untuk pekerjaan repetitif dengan pola yang jelas. Jika tim Anda melakukan hal yang sama setiap hari, setiap minggu — itu kandidat otomasi.\n\n**2. Anda punya data yang konsisten.** AI butuh data untuk belajar. Tidak sempurna tidak apa-apa, tapi harus ada — dalam format yang bisa diakses.\n\n**3. Anda tahu biaya "masalah saat ini".** Jika Anda bisa menghitung: "proses ini menghabiskan X jam/minggu = Rp Y/bulan" — Anda sudah selangkah lebih siap dari mayoritas bisnis.\n\n**4. Ada orang di tim yang mau belajar.** AI bukan autopilot. Perlu satu orang yang mau menjadi "AI champion" di organisasi Anda.\n\n**5. Anda realistis tentang ekspektasi.** AI bukan sihir. Ia mempercepat dan mengotomasi — bukan menggantikan judgement bisnis Anda.',
      },
      {
        h: '3 tanda Anda belum siap — dan apa yang harus dilakukan.',
        body: '**1. Proses bisnis Anda sendiri belum terdokumentasi.** Jika tidak ada yang bisa menjelaskan bagaimana sesuatu dikerjakan secara konsisten, otomasi akan mengotomasi kekacauan. Perbaiki prosesnya dulu.\n\n**2. Anda berharap AI akan menyelesaikan masalah organisasi.** Konflik tim, kurangnya akuntabilitas, budaya kerja yang tidak produktif — AI tidak akan memperbaiki ini. Justru bisa memperburuk.\n\n**3. Budget tidak ada, tapi ekspektasi besar.** Transformasi AI yang meaningful butuh investasi yang realistis. Jika budget sangat terbatas, mulai dari satu proses kecil dengan ROI yang clear — bukan program besar yang ambisius.',
      },
    ],
    cta: 'Tidak yakin bisnis Anda masuk kategori mana? Lakukan AI Audit gratis bersama Smartek X — kami bantu penilaian yang jujur dan konkret.',
  },
  {
    id: 'pelajaran-rebuild-dicicilaja',
    title: 'Pelajaran dari Rebuild dicicilaja: Dari Monolith ke Microservices',
    slug: 'Apa yang benar-benar terjadi ketika Anda mengubah arsitektur sistem enterprise dari dalam.',
    category: 'Case Study',
    readTime: '10 menit',
    featured: false,
    date: 'Maret 2026',
    tags: ['Case Study', 'Microservices', 'Enterprise', 'Lessons Learned'],
    intro: 'Membangun ulang sistem yang sudah berjalan adalah salah satu pekerjaan paling kompleks dan berisiko tinggi dalam dunia software. Ini adalah cerita jujur tentang apa yang terjadi ketika Smartek X mengerjakan rebuild total ekosistem digital dicicilaja untuk Adira Finance.',
    sections: [
      {
        h: 'Mengapa sistem lama tidak bisa dipertahankan.',
        body: 'Sistem monolith lama dicicilaja bukan sistem yang buruk — di masanya. Tapi ketika bisnis tumbuh, setiap perubahan kecil membutuhkan deploy ulang seluruh sistem. Risiko tinggi. Waktu tunggu panjang. Tim engineering tidak bisa bergerak cepat.\n\nMasalah bisnis yang sesungguhnya bukan "sistem ini teknologinya ketinggalan zaman". Masalahnya adalah: time-to-market untuk fitur baru terlalu lambat, dan risiko downtime terlalu tinggi untuk bisnis fintech yang bergantung pada kepercayaan pengguna.',
      },
      {
        h: 'Keputusan paling penting: tidak rebuild dari nol.',
        body: 'Banyak vendor akan menyarankan "bangun ulang dari scratch". Lebih bersih, lebih modern, lebih mudah diestimasi.\n\nTapi itu keputusan yang salah untuk kasus ini. Sistem lama masih harus berjalan. Bisnis tidak bisa berhenti selama 6 bulan menunggu sistem baru.\n\nPendekatan yang kami ambil: strangler fig pattern — membangun service baru satu per satu, sambil sistem lama tetap berjalan, lalu secara bertahap memindahkan traffic ke service baru.',
      },
      {
        h: 'Pelajaran terpenting: scope control adalah segalanya.',
        body: 'Dengan 25 screens mobile dan 17 modul web, godaan terbesar adalah menambahkan fitur baru di tengah jalan. "Sekalian kita tambahkan X" adalah kalimat yang paling berbahaya dalam proyek seperti ini.\n\nKami membuat satu aturan sederhana: tidak ada fitur baru masuk sampai arsitektur dasarnya stabil. Feature freeze selama fase migrasi. Keputusan ini tidak populer di awal, tapi menjadi alasan mengapa proyek ini selesai tepat waktu.',
      },
    ],
    cta: 'Punya sistem legacy yang mulai menghambat pertumbuhan? Diskusikan dengan Smartek X — mulai dari assessment tanpa biaya.',
  },
  {
    id: 'tidak-percaya-demo-pertama',
    title: 'Mengapa Saya Tidak Percaya Demo Produk di Pertemuan Pertama',
    slug: 'Sebuah manifesto tentang cara yang benar untuk memulai hubungan bisnis dengan klien teknologi.',
    category: 'Manifesto',
    readTime: '4 menit',
    featured: false,
    date: 'April 2026',
    tags: ['Philosophy', 'Business', 'Partnership'],
    intro: 'Jika Anda mengundang vendor teknologi dan yang pertama mereka lakukan adalah membuka laptop dan menunjukkan demo produk — itu tanda bahaya. Bukan karena produknya jelek. Tapi karena mereka belum tahu masalah Anda, dan sudah punya solusinya.',
    sections: [
      {
        h: 'Demo di pertemuan pertama adalah konfirmasi bahwa Anda hanya akan jadi target penjualan.',
        body: 'Vendor yang memulai dengan demo adalah vendor yang sudah tahu apa yang akan mereka jual sebelum berbicara dengan Anda. Mereka datang dengan jawaban — bukan dengan pertanyaan.\n\nApakah produk mereka bagus? Mungkin. Apakah produk mereka cocok untuk masalah spesifik Anda? Belum tentu — dan mereka belum pernah menanyakannya.',
      },
      {
        h: 'Pertemuan pertama yang benar seharusnya terasa seperti konsultasi, bukan presentasi.',
        body: 'Di Smartek X, pertemuan pertama kami tidak ada demo. Tidak ada deck 40 halaman. Tidak ada angka ROI yang dibuat-buat.\n\nYang ada: pertanyaan. Banyak pertanyaan.\n\nBisnis Anda bergerak di mana? Apa yang paling menyita energi tim Anda setiap minggu? Apa yang terjadi jika masalah itu tidak diselesaikan dalam 12 bulan ke depan? Apa yang sudah pernah dicoba?\n\nBaru setelah kami benar-benar memahami konteksnya — kami akan mulai bicara tentang apa yang mungkin bisa kami bantu.',
      },
      {
        h: 'Ini bukan strategi penjualan. Ini cara kami memastikan proyek berhasil.',
        body: 'Klien yang merasa didengar sebelum diajukan solusi adalah klien yang akan terbuka jika ada hambatan di tengah proyek. Dan hambatan selalu ada.\n\nKlien yang merasa diberi demo dan langsung diminta tanda tangan kontrak — adalah klien yang diam ketika ada masalah, lalu menghilang ketika proyek selesai.\n\nKami tidak ingin hubungan transaksional. Kami ingin menjadi partner bisnis jangka panjang. Dan itu dimulai dari cara kami masuk ke percakapan pertama.',
      },
    ],
    cta: 'Ingin bicara dulu — tanpa demo, tanpa pitch? Hubungi kami. Kopi virtual selama 30 menit, tidak ada agenda tersembunyi.',
  },
];

// ── Insights Page ─────────────────────────────────────────────────────────────

const InsightsPage = ({ setPage }) => {
  const [active, setActive] = React.useState(null);
  const [filterTag, setFilterTag] = React.useState('Semua');
  const allTags = ['Semua', 'Strategi', 'Panduan Praktis', 'Case Study', 'Manifesto'];
  const filtered = filterTag === 'Semua' ? ARTICLES : ARTICLES.filter(a => a.category === filterTag);
  const featured = ARTICLES.filter(a => a.featured);
  const rest = ARTICLES.filter(a => !a.featured);

  if (active) return <ArticlePage article={active} onBack={()=>setActive(null)} setPage={setPage} />;

  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)', background:'linear-gradient(180deg,#F4F6FA 0%,#F5F7FA 100%)' }}>
        <Reveal>
          <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.78rem', fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#2D8CFF', marginBottom:'1rem' }}>Insights</p>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2.5rem,6vw,4.5rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', lineHeight:1.05, marginBottom:'1.25rem', maxWidth:700 }}>
            Konten dari pengalaman nyata.<br /><span style={{ color:'#2D8CFF' }}>Bukan dari AI.</span>
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily:'Inter,sans-serif', fontSize:'clamp(1rem,1.5vw,1.15rem)', color:'#475569', lineHeight:1.75, maxWidth:560, marginTop:'1.5rem' }}>
            Setiap artikel di sini ditulis dari pengalaman langsung — proyek enterprise, pelajaran mahal, dan pola yang kami temukan setelah 9 tahun bekerja dengan bisnis-bisnis nyata di Indonesia.
          </p>
        </Reveal>
      </section>

      {/* Featured articles */}
      <section style={{ padding:'0 clamp(1.5rem,8vw,8rem) clamp(3rem,6vh,4rem)' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(340px,1fr))', gap:'1.5rem', marginBottom:'4rem' }}>
          {featured.map((a,i)=>(
            <Reveal key={a.id} delay={i*80}>
              <div onClick={()=>setActive(a)} style={{
                background:'#fff', borderRadius:24, overflow:'hidden',
                border:'1px solid #F1F5F9', cursor:'pointer',
                boxShadow:'0 4px 24px rgba(0,0,0,0.05)',
                transition:'transform 0.25s,box-shadow 0.25s',
                display:'flex', flexDirection:'column',
              }}
              onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-5px)';e.currentTarget.style.boxShadow='0 16px 48px rgba(45,140,255,0.12)'}}
              onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 4px 24px rgba(0,0,0,0.05)'}}>
                {/* Visual header */}
                <div style={{ background:'linear-gradient(135deg,#0D1117,#1C2B3E)', padding:'2.5rem 2rem', position:'relative', overflow:'hidden', minHeight:200, display:'flex', flexDirection:'column', justifyContent:'flex-end' }}>
                  <div style={{ position:'absolute',top:'-30%',right:'-10%',width:'60%',paddingBottom:'60%',borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.2),transparent 70%)' }} />
                  <div style={{ position:'absolute',top:16,left:16,right:16,display:'flex',justifyContent:'space-between',alignItems:'center' }}>
                    <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',fontWeight:700,color:'#2D8CFF',background:'rgba(45,140,255,0.15)',border:'1px solid rgba(45,140,255,0.2)',padding:'3px 10px',borderRadius:100,letterSpacing:'0.04em' }}>{a.category}</span>
                    <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',color:'#475569' }}>✦ Featured</span>
                  </div>
                  <h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.2rem,2.5vw,1.5rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.02em',lineHeight:1.2,position:'relative' }}>{a.title}</h2>
                </div>
                {/* Content */}
                <div style={{ padding:'1.75rem 2rem', flex:1, display:'flex', flexDirection:'column' }}>
                  <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.9rem',color:'#64748B',lineHeight:1.65,flex:1,marginBottom:'1.5rem' }}>{a.slug}</p>
                  <div style={{ display:'flex',justifyContent:'space-between',alignItems:'center' }}>
                    <div style={{ display:'flex',gap:6 }}>
                      {a.tags.slice(0,2).map(t=><span key={t} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.65rem',fontWeight:600,color:'#94A3B8',background:'#F8FAFC',padding:'2px 8px',borderRadius:100 }}>{t}</span>)}
                    </div>
                    <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#94A3B8' }}>⏱ {a.readTime}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Filter + rest */}
        <div style={{ display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:'1rem',marginBottom:'2rem' }}>
          <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.2rem',fontWeight:700,color:'#0D1117',letterSpacing:'-0.02em' }}>Semua artikel</h3>
          <div style={{ display:'flex',gap:8,flexWrap:'wrap' }}>
            {allTags.map(t=>(
              <button key={t} onClick={()=>setFilterTag(t)} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',fontWeight:600,padding:'5px 14px',borderRadius:100,border:'1.5px solid',borderColor:filterTag===t?'#2D8CFF':'#E2E8F0',background:filterTag===t?'#2D8CFF':'#fff',color:filterTag===t?'#fff':'#64748B',cursor:'pointer',transition:'all 0.2s' }}>{t}</button>
            ))}
          </div>
        </div>

        <div style={{ display:'flex',flexDirection:'column',gap:'1px',background:'#F1F5F9',borderRadius:20,overflow:'hidden' }}>
          {filtered.map((a,i)=>(
            <Reveal key={a.id} delay={i*50}>
              <div onClick={()=>setActive(a)} style={{ background:'#fff',padding:'clamp(1.25rem,2.5vw,1.75rem) clamp(1.25rem,3vw,2rem)',display:'flex',flexWrap:'wrap',justifyContent:'space-between',alignItems:'center',gap:'1rem',cursor:'pointer',transition:'background 0.2s' }}
              onMouseEnter={e=>e.currentTarget.style.background='#F4F6FA'}
              onMouseLeave={e=>e.currentTarget.style.background='#fff'}>
                <div style={{ flex:'1 1 280px' }}>
                  <div style={{ display:'flex',gap:8,alignItems:'center',marginBottom:'0.5rem',flexWrap:'wrap' }}>
                    <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,color:'#2D8CFF',background:'rgba(45,140,255,0.08)',padding:'2px 8px',borderRadius:100 }}>{a.category}</span>
                    <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',color:'#94A3B8' }}>{a.date} · {a.readTime}</span>
                  </div>
                  <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.05rem',fontWeight:700,color:'#0D1117',letterSpacing:'-0.02em',lineHeight:1.3,marginBottom:'0.4rem' }}>{a.title}</h3>
                  <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.85rem',color:'#94A3B8',lineHeight:1.5 }}>{a.slug}</p>
                </div>
                <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.85rem',fontWeight:600,color:'#2D8CFF',flexShrink:0 }}>Baca →</span>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Lead magnet CTA */}
      <section style={{ margin:'clamp(3rem,6vh,5rem) clamp(1.5rem,8vw,8rem)', borderRadius:28, background:'linear-gradient(135deg,#1C2B3E,#1A3A5C)', padding:'clamp(3rem,6vh,4rem) clamp(2rem,5vw,4rem)', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute',top:'-30%',right:'-5%',width:'50%',paddingBottom:'50%',borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.2),transparent 70%)',pointerEvents:'none' }} />
        <div style={{ position:'relative',display:'flex',flexWrap:'wrap',justifyContent:'space-between',alignItems:'center',gap:'2rem' }}>
          <div style={{ maxWidth:520 }}>
            <Reveal>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#7AB8FF',marginBottom:'0.75rem' }}>Lead Magnet</p>
            </Reveal>
            <Reveal delay={60}>
              <h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.5rem,3.5vw,2.25rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.03em',lineHeight:1.15,marginBottom:'0.75rem' }}>
                Dapatkan AI Audit Gratis<br />untuk bisnis Anda.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.95rem',color:'#B3D4FF',lineHeight:1.7 }}>
                Baca artikel kami, lalu terapkan. Jika butuh perspektif dari orang yang sudah melakukannya — kami siap. 1–2 hari, laporan konkret, gratis.
              </p>
            </Reveal>
          </div>
          <Reveal delay={180} direction="right">
            <div style={{ display:'flex',flexDirection:'column',gap:12 }}>
              <button onClick={()=>setPage('contact')} style={{ background:'#fff',color:'#1460C8',border:'none',borderRadius:14,padding:'14px 32px',fontSize:'0.95rem',fontWeight:700,cursor:'pointer',fontFamily:'Inter,sans-serif',whiteSpace:'nowrap',boxShadow:'0 4px 16px rgba(0,0,0,0.2)',transition:'transform 0.2s' }}
              onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'} onMouseLeave={e=>e.currentTarget.style.transform='none'}>
                Minta AI Audit Gratis
              </button>
              <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20membaca%20artikel%20di%20website%20dan%20ingin%20diskusi." target="_blank" rel="noreferrer" style={{ display:'flex',alignItems:'center',justifyContent:'center',gap:8,color:'#B3D4FF',fontFamily:'Inter,sans-serif',fontSize:'0.88rem',fontWeight:600,textDecoration:'none',opacity:0.8 }}>
                atau hubungi via WhatsApp →
              </a>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
};

// ── Article Detail Page ────────────────────────────────────────────────────────

const ArticlePage = ({ article: a, onBack, setPage }) => {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(()=>{ setTimeout(()=>setLoaded(true),60); window.scrollTo(0,0); },[]);
  const fade = d => ({ opacity:loaded?1:0, transform:loaded?'none':'translateY(16px)', transition:`all 0.6s cubic-bezier(.16,1,.3,1) ${d}ms` });

  return (
    <div style={{ background:'#F5F7FA', minHeight:'100vh', paddingTop:80 }}>
      {/* Back + meta */}
      <section style={{ padding:'clamp(3rem,6vh,5rem) clamp(1.5rem,8vw,8rem) 0', maxWidth:800, margin:'0 auto' }}>
        <div style={{ ...fade(0), marginBottom:'2rem' }}>
          <button onClick={onBack} style={{ background:'none',border:'none',cursor:'pointer',fontFamily:'Inter,sans-serif',fontSize:'0.88rem',fontWeight:600,color:'#2D8CFF',display:'flex',alignItems:'center',gap:6,padding:0 }}>
            ← Kembali ke Insights
          </button>
        </div>
        {/* Category + meta */}
        <div style={{ ...fade(60), display:'flex',gap:10,alignItems:'center',flexWrap:'wrap',marginBottom:'1.5rem' }}>
          <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,color:'#2D8CFF',background:'rgba(45,140,255,0.08)',padding:'4px 12px',borderRadius:100 }}>{a.category}</span>
          <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#94A3B8' }}>{a.date}</span>
          <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#94A3B8' }}>⏱ {a.readTime}</span>
        </div>
        {/* Title */}
        <h1 style={{ ...fade(100), fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2rem,5vw,3.5rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', lineHeight:1.1, marginBottom:'1.25rem' }}>{a.title}</h1>
        {/* Slug / subtitle */}
        <p style={{ ...fade(140), fontFamily:'Inter,sans-serif',fontSize:'1.1rem',color:'#64748B',lineHeight:1.65,marginBottom:'2rem',fontStyle:'italic' }}>{a.slug}</p>
        {/* Tags */}
        <div style={{ ...fade(180), display:'flex',gap:8,flexWrap:'wrap',marginBottom:'2.5rem',paddingBottom:'2.5rem',borderBottom:'1px solid #F1F5F9' }}>
          {a.tags.map(t=><span key={t} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.72rem',fontWeight:600,color:'#64748B',background:'#F1F5F9',padding:'3px 10px',borderRadius:100 }}>{t}</span>)}
        </div>
      </section>

      {/* Article body */}
      <article style={{ padding:'0 clamp(1.5rem,8vw,8rem) clamp(4rem,8vh,6rem)', maxWidth:800, margin:'0 auto' }}>
        {/* Intro */}
        <div style={{ ...fade(220), marginBottom:'2.5rem' }}>
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'1.1rem',color:'#374151',lineHeight:1.85,fontWeight:500 }}>{a.intro}</p>
        </div>
        {/* Sections */}
        {a.sections.map((s,i)=>(
          <Reveal key={i} delay={i*60}>
            <div style={{ marginBottom:'2.5rem' }}>
              <h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.2rem,2.5vw,1.6rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.025em',lineHeight:1.2,marginBottom:'1rem' }}>{s.h}</h2>
              {s.body.split('\n\n').map((para,j)=>(
                <p key={j} style={{ fontFamily:'Inter,sans-serif',fontSize:'1rem',color:'#475569',lineHeight:1.85,marginBottom:'1rem' }}
                dangerouslySetInnerHTML={{ __html: para.replace(/\*\*(.*?)\*\*/g,'<strong style="color:#1E293B;font-weight:700">$1</strong>') }} />
              ))}
            </div>
          </Reveal>
        ))}

        {/* CTA box */}
        <Reveal delay={200}>
          <div style={{ background:'linear-gradient(135deg,rgba(45,140,255,0.06),rgba(20,96,200,0.04))',border:'1px solid rgba(45,140,255,0.12)',borderRadius:20,padding:'2rem 2.5rem',marginBottom:'4rem' }}>
            <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',fontWeight:700,color:'#2D8CFF',marginBottom:'0.75rem',textTransform:'uppercase',letterSpacing:'0.06em' }}>Langkah Berikutnya</p>
            <p style={{ fontFamily:'Inter,sans-serif',fontSize:'1rem',color:'#374151',lineHeight:1.7,marginBottom:'1.5rem' }}>{a.cta}</p>
            <div style={{ display:'flex',flexWrap:'wrap',gap:12 }}>
              <button onClick={()=>setPage('contact')} style={{ background:'#E8FF47', color:'#0D1117',border:'none',borderRadius:12,padding:'12px 28px',fontSize:'0.95rem',fontWeight:600,cursor:'pointer',fontFamily:'Inter,sans-serif',boxShadow:'0 4px 16px rgba(45,140,255,0.3)' }}>
                Minta AI Audit Gratis
              </button>
              <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20membaca%20artikel%20di%20website%20dan%20ingin%20diskusi." target="_blank" rel="noreferrer" style={{ display:'inline-flex',alignItems:'center',gap:8,background:'#fff',color:'#1C2B3E',border:'1.5px solid #E2E8F0',borderRadius:12,padding:'11px 22px',fontSize:'0.95rem',fontWeight:600,fontFamily:'Inter,sans-serif',textDecoration:'none' }}>
                <WAIcon size={16} color="#25D366" /> WhatsApp
              </a>
            </div>
          </div>
        </Reveal>

        {/* More articles */}
        <div style={{ borderTop:'1px solid #F1F5F9',paddingTop:'3rem' }}>
          <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.15rem',fontWeight:700,color:'#0D1117',letterSpacing:'-0.02em',marginBottom:'1.5rem' }}>Artikel lainnya</h3>
          <div style={{ display:'flex',flexDirection:'column',gap:'1px',background:'#F1F5F9',borderRadius:16,overflow:'hidden' }}>
            {ARTICLES.filter(x=>x.id!==a.id).slice(0,3).map(x=>(
              <div key={x.id} onClick={()=>{ window.scrollTo(0,0); setTimeout(()=>{ /* parent handles */ },10); onBack(); setTimeout(()=>{ /* reopen */ },100); }} style={{ background:'#fff',padding:'1.25rem 1.5rem',cursor:'pointer',transition:'background 0.2s' }}
              onClick={()=>{ window.scrollTo(0,0); }}>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',fontWeight:700,color:'#2D8CFF',marginBottom:'0.3rem' }}>{x.category} · {x.readTime}</p>
                <p style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1rem',fontWeight:700,color:'#0D1117',letterSpacing:'-0.02em' }}>{x.title}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign:'center',marginTop:'1.5rem' }}>
            <button onClick={onBack} style={{ background:'none',border:'1.5px solid #E2E8F0',borderRadius:10,padding:'10px 24px',fontSize:'0.88rem',fontWeight:600,color:'#64748B',cursor:'pointer',fontFamily:'Inter,sans-serif' }}>
              ← Semua Insights
            </button>
          </div>
        </div>
      </article>
    </div>
  );
};

Object.assign(window, { InsightsPage, ARTICLES });
