// ═══════════════════════════════════════════════════════════════
// SMARTEK X ESSENTIALS — Halaman Khusus UMKM
// Tone: Warm, practical, approachable. Bukan enterprise, bukan korporat.
// ═══════════════════════════════════════════════════════════════

const EssentialsPage = ({ setPage }) => (
  <div style={{ background: '#F5F7FA', minHeight: '100vh', paddingTop: 80 }}>
    <EssHero setPage={setPage} />
    <EssForWho />
    <EssProducts setPage={setPage} />
    <EssJourney setPage={setPage} />
    <EssUseCases />
    <EssROICalc />
    <EssFAQ />
    <EssCTA setPage={setPage} />
  </div>
);

// ── Hero ──────────────────────────────────────────────────────────────────────

const EssHero = ({ setPage }) => {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => { setTimeout(() => setLoaded(true), 80); }, []);
  const fade = d => ({ opacity: loaded ? 1 : 0, transform: loaded ? 'none' : 'translateY(22px)', transition: `all 0.8s cubic-bezier(.16,1,.3,1) ${d}ms` });

  return (
    <section style={{ position: 'relative', padding: 'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem) clamp(3rem,6vh,5rem)', overflow: 'hidden', background: '#fff', borderBottom: '1px solid #E8EDF5' }}>
      {/* Subtle grid */}
      <div style={{ position:'absolute',inset:0,backgroundImage:'linear-gradient(rgba(45,140,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(45,140,255,0.03) 1px,transparent 1px)',backgroundSize:'56px 56px',pointerEvents:'none' }} />
      {/* Blue orb */}
      <div style={{ position:'absolute',top:'-10%',right:'5%',width:'40vw',height:'40vw',maxWidth:500,borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.06) 0%,transparent 70%)',pointerEvents:'none' }} />

      <div style={{ position:'relative', maxWidth:900 }}>
        {/* Sub-brand badge */}
        <div style={{ ...fade(0), display:'inline-flex', alignItems:'center', gap:10, marginBottom:'1.75rem' }}>
          <div style={{ display:'inline-flex',alignItems:'center',gap:8,background:'rgba(45,140,255,0.08)',border:'1px solid rgba(45,140,255,0.18)',borderRadius:100,padding:'6px 14px' }}>
            <div style={{ width:7,height:7,borderRadius:'50%',background:'#2D8CFF',boxShadow:'0 0 0 3px rgba(45,140,255,0.2)' }} />
            <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,color:'#1A6FD4',letterSpacing:'0.05em',textTransform:'uppercase' }}>Smartek X Essentials</span>
          </div>
          <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.8rem',color:'#94A3B8' }}>untuk UMKM & Bisnis Berkembang</span>
        </div>

        <h1 style={{ ...fade(100), fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2.5rem,6vw,5.5rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', lineHeight:1.05, marginBottom:'1.5rem', textWrap:'balance' }}>
          Bisnis lebih ringan.<br />
          Mulai dari <span style={{ color:'#2D8CFF' }}>Rp 5 juta.</span>
        </h1>

        <p style={{ ...fade(180), fontFamily:'Inter,sans-serif', fontSize:'clamp(1rem,1.5vw,1.2rem)', color:'#475569', lineHeight:1.75, maxWidth:580, marginBottom:'2.5rem' }}>
          Kami bantu UMKM otomasi operasional, bangun sistem digital, dan adopsi AI — tanpa jargon teknologi, tanpa kontrak yang rumit, dan tanpa harus mengerti coding.
        </p>

        <div style={{ ...fade(240), display:'flex', flexWrap:'wrap', gap:14 }}>
          <button onClick={() => setPage('contact')} style={{ background:'#E8FF47', color:'#0D1117', border:'none', borderRadius:14, padding:'15px 32px', fontSize:'1rem', fontWeight:700, cursor:'pointer', fontFamily:'Inter,sans-serif', boxShadow:'0 4px 20px rgba(232,255,71,0.3)', transition:'transform 0.2s,box-shadow 0.2s' }}
          onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow='0 8px 28px rgba(232,255,71,0.45)'}}
          onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 4px 20px rgba(232,255,71,0.3)'}}>
            Mulai dengan AI Audit Gratis
          </button>
          <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20tertarik%20dengan%20paket%20Essentials." target="_blank" rel="noreferrer" style={{ display:'inline-flex',alignItems:'center',gap:10,background:'#fff',color:'#0D1117',border:'1.5px solid #E8EDF5',borderRadius:14,padding:'14px 24px',fontSize:'1rem',fontWeight:600,fontFamily:'Inter,sans-serif',textDecoration:'none',boxShadow:'0 2px 8px rgba(0,0,0,0.06)',transition:'all 0.2s' }}
          onMouseEnter={e=>{e.currentTarget.style.borderColor='#2D8CFF';e.currentTarget.style.transform='translateY(-2px)'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='#E8EDF5';e.currentTarget.style.transform='none'}}>
            <WAIcon size={18} color="#25D366" /> Tanya via WhatsApp
          </a>
        </div>

        {/* Quick trust signals */}
        <div style={{ ...fade(320), display:'flex', flexWrap:'wrap', gap:'1.5rem 3rem', marginTop:'3rem', paddingTop:'2rem', borderTop:'1px solid #F1F5F9' }}>
          {[{v:'GRATIS',l:'AI Audit pertama'},{v:'Rp 5 jt',l:'Mulai dari'},{v:'2 minggu',l:'Delivery pertama'},{v:'Tidak perlu',l:'Background teknis'}].map(s=>(
            <div key={s.l}>
              <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.2rem',fontWeight:800,color:'#2D8CFF',letterSpacing:'-0.02em' }}>{s.v}</div>
              <div style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#64748B',marginTop:3 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── For Who ───────────────────────────────────────────────────────────────────

const EssForWho = () => {
  const segments = [
    { icon:'🛍', title:'Retail & F&B', desc:'Manajemen stok, pesanan, dan laporan penjualan yang masih manual — siap diotomasi.' },
    { icon:'🏡', title:'Properti & Hospitality', desc:'Booking, laporan occupancy, follow-up leads — semua bisa berjalan otomatis.' },
    { icon:'⚙️', title:'Jasa & Kontraktor', desc:'Quotation, invoice, progress tracking project — dari WhatsApp ke sistem yang proper.' },
    { icon:'🏥', title:'Klinik & Kesehatan', desc:'Jadwal pasien, reminder, dan rekam medis sederhana yang tidak butuh sistem mahal.' },
    { icon:'📦', title:'Distributor & Logistik', desc:'Order management, tracking pengiriman, dan rekapan harian yang selama ini manual.' },
    { icon:'🎓', title:'Edukasi & Kursus', desc:'Pendaftaran, absensi, tagihan SPP, dan komunikasi siswa yang terintegrasi.' },
  ];
  return (
    <section style={{ padding:'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background:'#F5F7FA' }}>
      <div style={{ textAlign:'center',marginBottom:'3rem' }}>
        <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'0.75rem' }}>Untuk siapa?</p></Reveal>
        <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.75rem,3.5vw,2.75rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',lineHeight:1.15 }}>Bisnis Anda tidak harus besar<br />untuk mulai pakai teknologi.</h2></Reveal>
      </div>
      <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))',gap:'1rem' }}>
        {segments.map((s,i)=>(
          <Reveal key={s.title} delay={i*55}>
            <div style={{ background:'#fff',borderRadius:18,padding:'1.75rem',border:'1px solid #E8EDF5',transition:'transform 0.2s,box-shadow 0.2s,border-color 0.2s' }}
            onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-3px)';e.currentTarget.style.boxShadow='0 8px 32px rgba(45,140,255,0.08)';e.currentTarget.style.borderColor='rgba(45,140,255,0.2)'}}
            onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='none';e.currentTarget.style.borderColor='#E8EDF5'}}>
              <span style={{ fontSize:'1.8rem',display:'block',marginBottom:'0.75rem' }}>{s.icon}</span>
              <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.05rem',fontWeight:700,color:'#0D1117',marginBottom:'0.5rem',letterSpacing:'-0.01em' }}>{s.title}</h3>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.85rem',color:'#64748B',lineHeight:1.6 }}>{s.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ── Products ──────────────────────────────────────────────────────────────────

const EssProducts = ({ setPage }) => {
  const products = [
    {
      name:'AI Audit', price:'GRATIS', time:'1–2 hari', badge:'Mulai di sini',
      color:'#2D8CFF', bg:'rgba(45,140,255,0.05)', border:'rgba(45,140,255,0.15)',
      desc:'Kami analisa proses bisnis Anda dan identifikasi 3 area yang paling worth untuk diotomasi — lengkap dengan estimasi waktu dan biaya.',
      includes:['Sesi 45 menit via Zoom atau tatap muka','Peta proses bisnis Anda saat ini','3 rekomendasi konkret dengan estimasi ROI','Tidak ada kewajiban untuk lanjut'],
      cta:'Minta Sekarang',
    },
    {
      name:'Starter Automation', price:'Rp 5–10 jt', time:'2–3 minggu', badge:'Paling populer',
      color:'#1A6FD4', bg:'rgba(26,111,212,0.05)', border:'rgba(26,111,212,0.15)',
      desc:'Otomasi 1 proses bisnis spesifik yang paling membuang waktu — laporan otomatis, WhatsApp bot, reminder, atau notifikasi.',
      includes:['Pilih 1 proses untuk diotomasi','Setup + testing + dokumentasi','1 bulan free support setelah delivery','Training tim Anda (1 sesi)'],
      cta:'Lihat Detail',
    },
    {
      name:'Digital Operations', price:'Rp 10–20 jt', time:'4–6 minggu', badge:'',
      color:'#0D1117', bg:'rgba(13,17,23,0.03)', border:'#E8EDF5',
      desc:'Sistem operasional digital untuk 1 fungsi bisnis: inventory, manajemen pesanan, atau HR sederhana yang terintegrasi.',
      includes:['Sistem web-based yang bisa diakses di mana saja','Dashboard reporting real-time','Import data dari sistem lama','3 bulan support & perbaikan bug'],
      cta:'Konsultasi Gratis',
    },
    {
      name:'Business App', price:'Rp 20–30 jt', time:'6–10 minggu', badge:'',
      color:'#0D1117', bg:'rgba(13,17,23,0.03)', border:'#E8EDF5',
      desc:'Aplikasi mobile atau web custom untuk 1 fungsi bisnis utama — booking, loyalty program, atau portal pelanggan.',
      includes:['Aplikasi mobile (Android) atau web app','Design UI/UX yang user-friendly','Integrasi dengan WhatsApp & pembayaran','6 bulan support pasca-delivery'],
      cta:'Konsultasi Gratis',
    },
  ];

  return (
    <section style={{ padding:'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background:'#fff', borderTop:'1px solid #E8EDF5', borderBottom:'1px solid #E8EDF5' }}>
      <div style={{ textAlign:'center',marginBottom:'3rem' }}>
        <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'0.75rem' }}>Paket & Harga</p></Reveal>
        <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.75rem,3.5vw,2.75rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',lineHeight:1.15,marginBottom:'0.75rem' }}>Harga transparan.<br />Tidak ada biaya tersembunyi.</h2></Reveal>
        <Reveal delay={130}><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.95rem',color:'#64748B',maxWidth:480,margin:'0 auto' }}>Semua paket menggunakan model lump sum — Anda tahu persis berapa yang dibayar sebelum mulai.</p></Reveal>
      </div>

      <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:'1.25rem',maxWidth:1200,margin:'0 auto' }}>
        {products.map((p,i)=>(
          <Reveal key={p.name} delay={i*70}>
            <div style={{ background:p.bg, borderRadius:22, border:`1.5px solid ${p.border}`, padding:'2rem', display:'flex', flexDirection:'column', height:'100%', boxSizing:'border-box', transition:'transform 0.25s,box-shadow 0.25s' }}
            onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow=`0 16px 48px ${p.color}14`}}
            onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='none'}}>
              {/* Badge */}
              {p.badge && <div style={{ display:'inline-block',background:p.color,color:'#fff',fontSize:'0.68rem',fontWeight:700,padding:'3px 10px',borderRadius:100,marginBottom:'1rem',letterSpacing:'0.04em',textTransform:'uppercase',fontFamily:'Inter,sans-serif',width:'fit-content' }}>{p.badge}</div>}
              {/* Header */}
              <div style={{ display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'1rem',flexWrap:'wrap',gap:8 }}>
                <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.25rem',fontWeight:800,color:'#0D1117',letterSpacing:'-0.02em' }}>{p.name}</h3>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.1rem',fontWeight:800,color:p.color }}>{p.price}</div>
                  <div style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',color:'#94A3B8',marginTop:2 }}>⏱ {p.time}</div>
                </div>
              </div>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.88rem',color:'#64748B',lineHeight:1.65,marginBottom:'1.25rem' }}>{p.desc}</p>
              {/* Includes */}
              <div style={{ flex:1 }}>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.72rem',fontWeight:700,color:'#94A3B8',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'0.6rem' }}>Yang sudah termasuk</p>
                {p.includes.map(inc=>(
                  <div key={inc} style={{ display:'flex',gap:10,alignItems:'flex-start',marginBottom:'0.5rem' }}>
                    <span style={{ color:p.color,fontWeight:700,flexShrink:0,marginTop:1 }}>✓</span>
                    <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.83rem',color:'#374151',lineHeight:1.5 }}>{inc}</span>
                  </div>
                ))}
              </div>
              <button onClick={()=>setPage('contact')} style={{ marginTop:'1.5rem', width:'100%', background:i===0?'#E8FF47':p.color, color:i===0?'#0D1117':'#fff', border:'none', borderRadius:12, padding:'13px', fontSize:'0.9rem', fontWeight:700, cursor:'pointer', fontFamily:'Inter,sans-serif', transition:'opacity 0.2s,transform 0.15s', boxShadow:i===0?'0 4px 16px rgba(232,255,71,0.3)':'none' }}
              onMouseEnter={e=>{e.currentTarget.style.opacity='0.9';e.currentTarget.style.transform='translateY(-1px)'}}
              onMouseLeave={e=>{e.currentTarget.style.opacity='1';e.currentTarget.style.transform='none'}}>
                {p.cta}
              </button>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Add-on note */}
      <Reveal delay={320}>
        <div style={{ maxWidth:700,margin:'2.5rem auto 0',padding:'1.25rem 2rem',background:'rgba(45,140,255,0.04)',border:'1px solid rgba(45,140,255,0.1)',borderRadius:16,textAlign:'center' }}>
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.88rem',color:'#475569',lineHeight:1.65 }}>
            <strong style={{ color:'#0D1117' }}>Butuh lebih dari satu paket?</strong> Kami buat proposal custom. Semua harga di atas adalah titik awal — bukan langit-langit.
          </p>
        </div>
      </Reveal>
    </section>
  );
};

// ── Journey ────────────────────────────────────────────────────────────────────

const EssJourney = ({ setPage }) => {
  const steps = [
    { n:'01', icon:'💬', title:'AI Audit Gratis', time:'Hari 1–2', desc:'Kami diagnosa bisnis Anda. Identifikasi 3 peluang terbesar. Tidak ada komitmen, tidak ada biaya.' },
    { n:'02', icon:'📋', title:'Proposal Konkret', time:'Hari 3–5', desc:'Anda terima proposal yang jelas: scope, timeline, harga. Tidak ada angka yang tiba-tiba berubah.' },
    { n:'03', icon:'🔨', title:'Kami Bangun', time:'Minggu 2–10', desc:'Tim kami eksekusi. Anda dapat update progress setiap minggu. Revisi termasuk dalam paket.' },
    { n:'04', icon:'🚀', title:'Delivery + Training', time:'Akhir proyek', desc:'Sistem live, tim Anda ditraining, dokumentasi siap. Dukungan after-sales sesuai paket.' },
    { n:'05', icon:'📈', title:'Anda Tumbuh', time:'Seterusnya', desc:'Bisnis berjalan lebih ringan. Kapan pun mau expand, kami siap untuk paket berikutnya.' },
  ];
  return (
    <section style={{ padding:'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background:'#F5F7FA' }}>
      <div style={{ display:'flex',flexWrap:'wrap',justifyContent:'space-between',alignItems:'flex-end',gap:'2rem',marginBottom:'3rem' }}>
        <div>
          <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'0.75rem' }}>Proses</p></Reveal>
          <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.75rem,3.5vw,2.75rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',lineHeight:1.15 }}>Dari audit ke hasil<br />dalam hitungan minggu.</h2></Reveal>
        </div>
        <Reveal delay={130} direction="right">
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.95rem',color:'#64748B',maxWidth:360,lineHeight:1.7 }}>
            Tidak perlu pengalaman teknis. Tidak perlu siapkan dokumen panjang. Cukup ceritakan bisnis Anda.
          </p>
        </Reveal>
      </div>

      <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(200px,1fr))',gap:'1px',background:'#E8EDF5',borderRadius:24,overflow:'hidden' }}>
        {steps.map((s,i)=>(
          <Reveal key={s.n} delay={i*60}>
            <div style={{ background:'#fff',padding:'2rem 1.75rem',height:'100%',boxSizing:'border-box',transition:'background 0.2s' }}
            onMouseEnter={e=>e.currentTarget.style.background='#F8FAFF'}
            onMouseLeave={e=>e.currentTarget.style.background='#fff'}>
              <div style={{ display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'1.25rem' }}>
                <span style={{ fontSize:'1.5rem' }}>{s.icon}</span>
                <span style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.68rem',fontWeight:800,color:'#2D8CFF',letterSpacing:'0.04em' }}>{s.n}</span>
              </div>
              <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1rem',fontWeight:700,color:'#0D1117',marginBottom:'0.3rem',letterSpacing:'-0.01em' }}>{s.title}</h3>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',fontWeight:600,color:'#2D8CFF',marginBottom:'0.6rem' }}>{s.time}</p>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.83rem',color:'#64748B',lineHeight:1.6 }}>{s.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ── Use Cases ─────────────────────────────────────────────────────────────────

const EssUseCases = () => {
  const [active, setActive] = React.useState(0);
  const cases = [
    {
      segment:'Warung & Restoran',
      headline:'Dari catat manual di buku ke laporan otomatis setiap malam.',
      before:['Rekapan penjualan ditulis tangan setiap hari','Tidak tahu mana menu paling laku','Stok habis tidak ketahuan sampai kehabisan','Owner harus ada fisik untuk pantau'],
      after:['Laporan penjualan otomatis via WhatsApp setiap malam','Dashboard menu terlaku dan jam tersibuk','Alert otomatis ketika stok mau habis','Pantau bisnis dari mana saja lewat HP'],
      product:'Starter Automation + Business Dashboard',
      price:'Rp 15–25 juta',
      time:'4–6 minggu',
    },
    {
      segment:'Toko & Retail',
      headline:'Stok yang selalu akurat tanpa input manual.',
      before:['Stok dicatat di Excel yang sering tidak update','Tidak tahu produk mana yang fast-moving','Retur dan diskon susah ditracking','Tidak ada laporan profit yang real'],
      after:['Sistem inventory yang update otomatis saat ada transaksi','Analisa produk laku dan tidak laku','Tracking retur dan promo yang terstruktur','P&L sederhana yang bisa dilihat kapan saja'],
      product:'Digital Operations (Inventory)',
      price:'Rp 10–18 juta',
      time:'3–5 minggu',
    },
    {
      segment:'Klinik & Praktek',
      headline:'Jadwal yang tidak pernah bentrok, pasien yang tidak pernah lupa.',
      before:['Booking via WhatsApp manual, sering kelewatan','Tidak ada reminder otomatis untuk pasien','Rekam medis di buku atau Excel yang sulit dicari','Follow-up pasca-kunjungan tidak konsisten'],
      after:['Sistem booking online 24/7 yang terintegrasi','Reminder otomatis H-1 dan H-hari kunjungan','Rekam medis digital yang bisa dicari dalam detik','Otomasi follow-up pasca-kunjungan'],
      product:'Business App (Klinik)',
      price:'Rp 20–30 juta',
      time:'6–8 minggu',
    },
    {
      segment:'Jasa & Kontraktor',
      headline:'Dari quotation di WhatsApp ke sistem yang profesional.',
      before:['Quotation dibuat manual di Word/WhatsApp','Status project hanya di kepala owner','Invoice sering telat dikirim atau lupa','Tidak ada history pekerjaan yang terstruktur'],
      after:['Generate quotation profesional dalam hitungan menit','Dashboard status semua project real-time','Reminder otomatis untuk invoice dan pembayaran','Database pelanggan dan history lengkap'],
      product:'Digital Operations (Jasa)',
      price:'Rp 12–20 juta',
      time:'4–6 minggu',
    },
  ];
  const c = cases[active];

  return (
    <section style={{ padding:'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background:'#fff', borderTop:'1px solid #E8EDF5' }}>
      <div style={{ textAlign:'center',marginBottom:'2.5rem' }}>
        <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'0.75rem' }}>Use Cases</p></Reveal>
        <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.75rem,3.5vw,2.75rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',lineHeight:1.15 }}>Lihat bagaimana bisnis<br />seperti Anda berubah.</h2></Reveal>
      </div>

      {/* Tabs */}
      <div style={{ display:'flex',flexWrap:'wrap',gap:8,justifyContent:'center',marginBottom:'2.5rem' }}>
        {cases.map((c2,i)=>(
          <button key={c2.segment} onClick={()=>setActive(i)} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.83rem',fontWeight:600,padding:'8px 18px',borderRadius:100,border:'1.5px solid',borderColor:active===i?'#2D8CFF':'#E8EDF5',background:active===i?'#2D8CFF':'#fff',color:active===i?'#fff':'#64748B',cursor:'pointer',transition:'all 0.2s' }}>
            {c2.segment}
          </button>
        ))}
      </div>

      {/* Content */}
      <div style={{ maxWidth:900,margin:'0 auto',background:'#F5F7FA',borderRadius:24,overflow:'hidden',border:'1px solid #E8EDF5' }}>
        {/* Header */}
        <div style={{ background:'linear-gradient(135deg,#1C2B3E,#2D8CFF)', padding:'2.5rem 2.5rem 2rem' }}>
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,color:'rgba(255,255,255,0.6)',textTransform:'uppercase',letterSpacing:'0.07em',marginBottom:'0.6rem' }}>{c.segment}</p>
          <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.2rem,2.5vw,1.6rem)',fontWeight:800,color:'#fff',letterSpacing:'-0.02em',lineHeight:1.2 }}>{c.headline}</h3>
          <div style={{ display:'flex',gap:12,flexWrap:'wrap',marginTop:'1.25rem' }}>
            <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',fontWeight:600,color:'#E8FF47',background:'rgba(232,255,71,0.1)',border:'1px solid rgba(232,255,71,0.2)',padding:'4px 12px',borderRadius:100 }}>{c.product}</span>
            <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',fontWeight:600,color:'rgba(255,255,255,0.7)',background:'rgba(255,255,255,0.08)',padding:'4px 12px',borderRadius:100 }}>{c.price} · {c.time}</span>
          </div>
        </div>
        {/* Before/After */}
        <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',padding:'2rem 2.5rem',gap:'2rem' }} className="usecase-grid">
          {[{title:'Kondisi sekarang',items:c.before,color:'#EF4444',bg:'rgba(239,68,68,0.04)',bullet:'✗'},{title:'Setelah Smartek X',items:c.after,color:'#2D8CFF',bg:'rgba(45,140,255,0.04)',bullet:'✓'}].map(col=>(
            <div key={col.title} style={{ background:col.bg,borderRadius:16,padding:'1.5rem',border:`1px solid ${col.color}18` }}>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.72rem',fontWeight:700,color:col.color,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'1rem' }}>{col.title}</p>
              {col.items.map((item,i)=>(
                <div key={i} style={{ display:'flex',gap:10,alignItems:'flex-start',marginBottom:'0.7rem' }}>
                  <span style={{ color:col.color,fontWeight:700,flexShrink:0,marginTop:1 }}>{col.bullet}</span>
                  <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.85rem',color:'#374151',lineHeight:1.55 }}>{item}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── ROI Estimator ─────────────────────────────────────────────────────────────

const EssROICalc = () => {
  const [hoursPerWeek, setHoursPerWeek] = React.useState(10);
  const [hourlyRate, setHourlyRate] = React.useState(50000);
  const weeklySavings = hoursPerWeek * hourlyRate;
  const monthlySavings = weeklySavings * 4;
  const yearlySavings = monthlySavings * 12;
  const investMin = 5000000;
  const roiMonths = Math.ceil(investMin / monthlySavings);

  const fmt = v => 'Rp ' + (v >= 1000000 ? (v/1000000).toFixed(1) + ' jt' : v >= 1000 ? (v/1000).toFixed(0) + ' rb' : v);

  return (
    <section style={{ padding:'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background:'#F5F7FA', borderTop:'1px solid #E8EDF5' }}>
      <div style={{ maxWidth:800,margin:'0 auto' }}>
        <div style={{ textAlign:'center',marginBottom:'2.5rem' }}>
          <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'0.75rem' }}>Kalkulator ROI</p></Reveal>
          <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.5rem,3vw,2.25rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',lineHeight:1.15,marginBottom:'0.75rem' }}>Berapa jam yang bisa dihemat?</h2></Reveal>
          <Reveal delay={120}><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.95rem',color:'#64748B' }}>Geser slider untuk estimasi kasar — bukan janji, tapi gambaran nyata.</p></Reveal>
        </div>
        <Reveal delay={150}>
          <div style={{ background:'#fff',borderRadius:24,padding:'clamp(2rem,4vw,3rem)',border:'1px solid #E8EDF5',boxShadow:'0 4px 24px rgba(0,0,0,0.05)' }}>
            <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:'2rem',marginBottom:'2.5rem' }} className="calc-grid">
              {/* Slider 1 */}
              <div>
                <label style={{ fontFamily:'Inter,sans-serif',fontSize:'0.82rem',fontWeight:600,color:'#374151',display:'block',marginBottom:'0.5rem' }}>
                  Jam kerja manual per minggu yang bisa diotomasi
                </label>
                <input type="range" min={2} max={40} value={hoursPerWeek} onChange={e=>setHoursPerWeek(+e.target.value)} style={{ width:'100%',accentColor:'#2D8CFF',marginBottom:'0.5rem' }} />
                <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.5rem',fontWeight:800,color:'#2D8CFF' }}>{hoursPerWeek} jam/minggu</div>
              </div>
              {/* Slider 2 */}
              <div>
                <label style={{ fontFamily:'Inter,sans-serif',fontSize:'0.82rem',fontWeight:600,color:'#374151',display:'block',marginBottom:'0.5rem' }}>
                  Nilai rata-rata 1 jam kerja tim Anda
                </label>
                <input type="range" min={25000} max={200000} step={5000} value={hourlyRate} onChange={e=>setHourlyRate(+e.target.value)} style={{ width:'100%',accentColor:'#2D8CFF',marginBottom:'0.5rem' }} />
                <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.5rem',fontWeight:800,color:'#2D8CFF' }}>{fmt(hourlyRate)}/jam</div>
              </div>
            </div>

            {/* Results */}
            <div style={{ background:'linear-gradient(135deg,#1C2B3E,#2D8CFF)',borderRadius:18,padding:'2rem',display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'1.5rem',textAlign:'center' }} className="calc-results">
              {[{v:fmt(monthlySavings),l:'Penghematan/bulan'},{v:fmt(yearlySavings),l:'Penghematan/tahun'},{v:`${roiMonths} bln`,l:'Balik modal (paket Rp 5 jt)'}].map(r=>(
                <div key={r.l}>
                  <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.2rem,2.5vw,1.8rem)',fontWeight:800,color:'#E8FF47',letterSpacing:'-0.02em',lineHeight:1 }}>{r.v}</div>
                  <div style={{ fontFamily:'Inter,sans-serif',fontSize:'0.72rem',color:'rgba(255,255,255,0.6)',marginTop:6 }}>{r.l}</div>
                </div>
              ))}
            </div>
            <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',color:'#94A3B8',textAlign:'center',marginTop:'1rem' }}>Estimasi kasar berdasarkan penghematan waktu saja — belum termasuk pengurangan error, peningkatan kepuasan pelanggan, dan dampak growth.</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ── FAQ ───────────────────────────────────────────────────────────────────────

const EssFAQ = () => {
  const [open, setOpen] = React.useState(null);
  const faqs = [
    { q:'Apakah saya harus mengerti teknologi?', a:'Tidak sama sekali. Kami menjelaskan segalanya dalam bahasa bisnis, bukan bahasa teknis. Yang Anda butuhkan hanya ceritakan operasional bisnis Anda kepada kami.' },
    { q:'Berapa lama sampai bisa digunakan?', a:'Paket Starter Automation bisa selesai dalam 2–3 minggu. Untuk paket yang lebih besar, timeline jelas disepakati di proposal — dan kami komit ke timeline tersebut.' },
    { q:'Bagaimana jika saya tidak puas hasilnya?', a:'Kami tidak akan deliver tanpa approval Anda di setiap tahap. Ada review dan revisi termasuk dalam setiap paket. Jika ada yang tidak sesuai dengan scope yang disepakati, kami perbaiki tanpa biaya tambahan.' },
    { q:'Apakah ada biaya bulanan setelah proyek selesai?', a:'Tergantung paket. Paket Starter Automation tidak ada biaya bulanan. Paket yang lebih besar bisa ada biaya hosting/server kecil (sekitar Rp 200–500 ribu/bulan) tergantung infrastruktur yang dipilih — selalu kami jelaskan di proposal.' },
    { q:'Bagaimana jika bisnis saya berkembang dan butuh lebih?', a:'Semua yang kami bangun dirancang untuk bisa berkembang. Ketika Anda siap untuk upgrade, kami bisa extend sistem yang ada — tidak perlu bangun ulang dari nol.' },
    { q:'Apakah AI Audit benar-benar gratis?', a:'Ya, 100% gratis. Tidak ada kartu kredit, tidak ada contract. Tujuan kami sederhana: kami ingin membuktikan nilai kami sebelum Anda berkomitmen. Jika tidak ada fit, tidak apa-apa.' },
  ];
  return (
    <section style={{ padding:'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background:'#fff', borderTop:'1px solid #E8EDF5' }}>
      <div style={{ maxWidth:700,margin:'0 auto' }}>
        <Reveal><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.5rem,3vw,2.25rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',marginBottom:'2.5rem',textAlign:'center' }}>Pertanyaan yang sering ditanya.</h2></Reveal>
        {faqs.map((f,i)=>(
          <Reveal key={f.q} delay={i*40}>
            <div style={{ borderBottom:'1px solid #F1F5F9' }}>
              <button onClick={()=>setOpen(open===i?null:i)} style={{ width:'100%',background:'none',border:'none',padding:'1.25rem 0',display:'flex',justifyContent:'space-between',alignItems:'center',cursor:'pointer',gap:'1rem',textAlign:'left' }}>
                <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.95rem',fontWeight:600,color:'#0D1117',lineHeight:1.4 }}>{f.q}</span>
                <span style={{ color:'#2D8CFF',fontSize:'1.2rem',flexShrink:0,transition:'transform 0.2s',transform:open===i?'rotate(45deg)':'none' }}>+</span>
              </button>
              {open===i && <div style={{ paddingBottom:'1.25rem' }}><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.9rem',color:'#64748B',lineHeight:1.7 }}>{f.a}</p></div>}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ── CTA ───────────────────────────────────────────────────────────────────────

const EssCTA = ({ setPage }) => (
  <section style={{ padding:'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background:'#F5F7FA', borderTop:'1px solid #E8EDF5' }}>
    <Reveal>
      <div style={{ maxWidth:700,margin:'0 auto',background:'#fff',borderRadius:28,padding:'clamp(2.5rem,5vw,4rem)',border:'1px solid #E8EDF5',boxShadow:'0 8px 40px rgba(0,0,0,0.06)',textAlign:'center' }}>
        <div style={{ width:56,height:56,borderRadius:16,background:'rgba(232,255,71,0.15)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 1.5rem',fontSize:'1.5rem' }}>✦</div>
        <h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.5rem,3.5vw,2.25rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',marginBottom:'1rem',lineHeight:1.15 }}>
          Mulai hari ini, gratis.
        </h2>
        <p style={{ fontFamily:'Inter,sans-serif',fontSize:'1rem',color:'#64748B',lineHeight:1.7,marginBottom:'2rem',maxWidth:480,margin:'0 auto 2rem' }}>
          AI Audit kami membantu Anda menemukan titik mulai yang paling tepat — tanpa buang waktu dan uang di hal yang belum perlu.
        </p>
        <div style={{ display:'flex',flexWrap:'wrap',justifyContent:'center',gap:12 }}>
          <button onClick={()=>setPage('contact')} style={{ background:'#E8FF47',color:'#0D1117',border:'none',borderRadius:14,padding:'15px 36px',fontSize:'1rem',fontWeight:700,cursor:'pointer',fontFamily:'Inter,sans-serif',boxShadow:'0 4px 20px rgba(232,255,71,0.3)',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%20tertarik%20dengan%20paket%20Essentials." target="_blank" rel="noreferrer" style={{ display:'inline-flex',alignItems:'center',gap:8,background:'#fff',color:'#0D1117',border:'1.5px solid #E8EDF5',borderRadius:14,padding:'14px 24px',fontSize:'1rem',fontWeight:600,fontFamily:'Inter,sans-serif',textDecoration:'none',boxShadow:'0 2px 8px rgba(0,0,0,0.05)' }}>
            <WAIcon size={17} color="#25D366" /> WhatsApp Sekarang
          </a>
        </div>
        <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#94A3B8',marginTop:'1.5rem' }}>Gratis. Tanpa komitmen. Respons dalam 1 hari kerja.</p>
      </div>
    </Reveal>
  </section>
);

Object.assign(window, { EssentialsPage });