// ── HomePage ──────────────────────────────────────────────────────────────────

const HomePage = ({ setPage }) => (
  <div style={{ background: '#F5F7FA', minHeight: '100vh' }}>
    <HeroSection setPage={setPage} />
    <LogoBar />
    <TwoPathsSection setPage={setPage} />
    <FrameworkSection />
    <OutcomesSection />
    <VideoSection />
    <PortfolioSection setPage={setPage} />
    <InsightsPreview setPage={setPage} />
    <CTASection setPage={setPage} />
  </div>
);

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

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

  return (
    <section style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', padding: 'clamp(6rem,12vh,10rem) clamp(1.5rem,8vw,8rem) clamp(4rem,8vh,6rem)', overflow: 'hidden' }}>
      <div style={{ position:'absolute',inset:0,pointerEvents:'none', backgroundImage:'linear-gradient(rgba(45,140,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(45,140,255,0.035) 1px,transparent 1px)', backgroundSize:'72px 72px' }} />
      <div style={{ position:'absolute',top:'-5%',right:'-2%',width:'50vw',height:'50vw',maxWidth:680,maxHeight:680,borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.08) 0%,transparent 70%)',pointerEvents:'none' }} />
      <div style={{ position:'absolute',bottom:'0',left:'10%',width:'35vw',height:'35vw',maxWidth:420,borderRadius:'50%',background:'radial-gradient(circle,rgba(26,111,212,0.05) 0%,transparent 70%)',pointerEvents:'none' }} />

      <div style={{ position:'relative', display:'grid', gridTemplateColumns:'1fr minmax(0,480px)', gap:'clamp(3rem,6vw,8rem)', alignItems:'center', width:'100%', maxWidth:1400 }} className="hero-grid">
        <div>
          <div style={{ ...fade(0), 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', marginBottom:'2rem' }}>
            <div style={{ width:7,height:7,borderRadius:'50%',background:'#2D8CFF',boxShadow:'0 0 0 3px rgba(45,140,255,0.25)' }} />
            <span style={{ fontSize:'0.78rem',fontWeight:700,color:'#1A6FD4',fontFamily:'Inter,sans-serif',letterSpacing:'0.04em',textTransform:'uppercase' }}>Business-First Technology Partner</span>
          </div>
          <h1 style={{ ...fade(120), fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2.8rem,6vw,6rem)', fontWeight:800, lineHeight:1.05, color:'#0D1117', letterSpacing:'-0.03em', marginBottom:'1.75rem', textWrap:'balance' }}>
            Teknologi yang<br /><span style={{ color:'#2D8CFF' }}>bekerja</span> untuk<br />bisnis Anda.
          </h1>
          <p style={{ ...fade(220), fontFamily:'Inter,sans-serif', fontSize:'clamp(1rem,1.5vw,1.25rem)', color:'#475569', lineHeight:1.7, maxWidth:520, marginBottom:'2.75rem' }}>
            Kami masuk dari sisi bisnis — memahami masalah nyata Anda — baru kemudian membawa teknologi yang tepat sebagai solusinya.
          </p>
          <div style={{ ...fade(320), display:'flex', flexWrap:'wrap', gap:14, alignItems:'center' }}>
            <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', letterSpacing:'-0.01em' }}
            onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow='0 8px 32px rgba(45,140,255,0.4)'}}
            onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 4px 24px rgba(45,140,255,0.3)'}}>
              Dapatkan AI Audit Gratis
            </button>
            <button onClick={() => setPage('portfolio')} style={{ display:'inline-flex',alignItems:'center',gap:10,background:'#fff',color:'#1C2B3E',border:'1.5px solid #E2E8F0',borderRadius:14,padding:'14px 28px',fontSize:'1rem',fontWeight:600,cursor:'pointer',fontFamily:'Inter,sans-serif',transition:'border-color 0.2s,transform 0.2s',boxShadow:'0 2px 8px rgba(0,0,0,0.06)' }}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='#2D8CFF';e.currentTarget.style.transform='translateY(-2px)'}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='#E2E8F0';e.currentTarget.style.transform='none'}}>
              Lihat Portfolio Kami →
            </button>
          </div>
          <div style={{ ...fade(420), marginTop:'2.5rem', display:'flex', alignItems:'center', gap:12 }}>
            {['JM','AF','AB','SP','YC'].map((i2,i)=>(
              <div key={i} style={{ width:30,height:30,borderRadius:'50%',background:`hsl(${230+i*25},65%,${48+i*4}%)`,border:'2px solid #fff',marginLeft:i?-8:0,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'0.55rem',fontWeight:800,color:'#fff' }}>{i2}</div>
            ))}
            <span style={{ fontSize:'0.83rem',color:'#64748B',fontFamily:'Inter,sans-serif' }}>Dipercaya <strong style={{ color:'#374151' }}>Jasa Marga, Ombudsman RI, Adira Finance</strong> &amp; klien enterprise lainnya</span>
          </div>
        </div>

        <div style={{ ...fade(200) }} className="hero-mockup">
          <HeroVisual />
        </div>
      </div>
    </section>
  );
};

// ── Logo Bar ──────────────────────────────────────────────────────────────────

const LogoBar = () => {
  const [ref, visible] = useScrollReveal();
  return (
    <section ref={ref} style={{ padding:'2.5rem clamp(1.5rem,6vw,6rem)', borderTop:'1px solid #F1F5F9', borderBottom:'1px solid #F1F5F9', background:'#F4F6FA' }}>
      <p style={{ textAlign:'center', fontFamily:'Inter,sans-serif', fontSize:'0.75rem', fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#C4CADB', marginBottom:'1.5rem', opacity: visible?1:0, transition:'opacity 0.6s' }}>Dipercaya oleh</p>
      <div style={{ display:'flex', flexWrap:'wrap', justifyContent:'center', alignItems:'center', gap:'clamp(1rem,3vw,2rem) clamp(2rem,5vw,4rem)' }}>
        {CLIENTS.map((c,i)=>(
          <div key={c} style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(0.8rem,1.2vw,0.95rem)', fontWeight:800, color:'#B0B8CC', letterSpacing:'-0.01em', opacity:visible?1:0, transition:`opacity 0.5s ${i*50}ms` }}>{c}</div>
        ))}
      </div>
    </section>
  );
};

// ── Two Paths Section ─────────────────────────────────────────────────────────

const TwoPathsSection = ({ setPage }) => (
  <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)' }}>
    <div style={{ textAlign:'center', marginBottom:'clamp(2.5rem,5vh,4rem)' }}>
      <Reveal><p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.78rem', fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#2D8CFF', marginBottom:'1rem' }}>Siapa yang kami layani?</p></Reveal>
      <Reveal delay={80}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2rem,4vw,3.2rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', lineHeight:1.1, maxWidth:640, margin:'0 auto' }}>Dua jalur, satu filosofi:<br /><span style={{ color:'#2D8CFF' }}>bisnis Anda adalah prioritas.</span></h2></Reveal>
    </div>

    <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))', gap:'1.5rem', maxWidth:1100, margin:'0 auto' }}>
      {/* UMKM Card */}
      <Reveal delay={80}>
        <div style={{ borderRadius:28, overflow:'hidden', border:'1px solid #D6E8FF', boxShadow:'0 8px 40px rgba(45,140,255,0.08)', transition:'transform 0.3s,box-shadow 0.3s' }}
        onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-6px)';e.currentTarget.style.boxShadow='0 20px 60px rgba(45,140,255,0.15)'}}
        onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 8px 40px rgba(45,140,255,0.08)'}}>
          <div style={{ background:'linear-gradient(135deg,#EBF4FF 0%,#D6EAFF 100%)', padding:'2.5rem 2.5rem 2rem', position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute',top:-30,right:-30,width:160,height:160,borderRadius:'50%',background:'rgba(45,140,255,0.1)' }} />
            <div style={{ position:'absolute',bottom:-20,right:40,width:80,height:80,borderRadius:'50%',background:'rgba(45,140,255,0.08)' }} />
            <div style={{ position:'relative' }}>
              <div style={{ display:'inline-flex',alignItems:'center',gap:8,background:'rgba(45,140,255,0.12)',borderRadius:100,padding:'5px 14px',marginBottom:'1.25rem' }}>
                <div style={{ width:7,height:7,borderRadius:'50%',background:'#2D8CFF' }} />
                <span style={{ fontFamily:'Inter,sans-serif', fontSize:'0.72rem', fontWeight:700, color:'#1A6FD4', letterSpacing:'0.06em', textTransform:'uppercase' }}>Essentials</span>
              </div>
              <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(1.6rem,3vw,2.2rem)', fontWeight:800, color:'#1C2B3E', letterSpacing:'-0.03em', lineHeight:1.1, marginBottom:'0.75rem' }}>Untuk UMKM yang<br />siap naik kelas.</h3>
              <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.9rem', color:'#1460C8', fontWeight:500 }}>Omzet Rp 1–50 miliar/tahun</p>
            </div>
            <div style={{ display:'flex', gap:10, marginTop:'1.5rem' }}>
              {[{v:'1–2 hari',l:'AI Audit'},{v:'Rp 5 jt',l:'Mulai dari'},{v:'2 minggu',l:'Time-to-value'}].map(m=>(
                <div key={m.l} style={{ flex:1, background:'rgba(255,255,255,0.7)', backdropFilter:'blur(8px)', borderRadius:12, padding:'10px', textAlign:'center' }}>
                  <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'0.95rem', fontWeight:800, color:'#1C2B3E' }}>{m.v}</div>
                  <div style={{ fontFamily:'Inter,sans-serif', fontSize:'0.62rem', color:'#2D8CFF', fontWeight:600, marginTop:2 }}>{m.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background:'#fff', padding:'2rem 2.5rem' }}>
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.8rem', fontWeight:700, color:'#94A3B8', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:'1rem' }}>Pain points yang kami selesaikan</p>
            {['Proses manual yang membuang waktu','Laporan yang tidak real-time','Customer service kewalahan','Tidak tahu harus mulai dari mana'].map(p=>(
              <div key={p} style={{ display:'flex',gap:10,alignItems:'flex-start',marginBottom:'0.6rem' }}>
                <span style={{ color:'#2D8CFF',fontWeight:700,marginTop:2,flexShrink:0 }}>✓</span>
                <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.9rem',color:'#374151' }}>{p}</span>
              </div>
            ))}
            <button onClick={()=>setPage('essentials')} style={{ marginTop:'1.5rem', width:'100%', background:'#E8FF47', color:'#0D1117', border:'none', borderRadius:12, padding:'13px', fontSize:'0.95rem', fontWeight:600, cursor:'pointer', fontFamily:'Inter,sans-serif', transition:'opacity 0.2s' }}
            onMouseEnter={e=>e.currentTarget.style.opacity='0.9'} onMouseLeave={e=>e.currentTarget.style.opacity='1'}>
              Lihat Paket Essentials →
            </button>
          </div>
        </div>
      </Reveal>

      {/* Enterprise Card */}
      <Reveal delay={160}>
        <div style={{ borderRadius:28, overflow:'hidden', border:'1px solid rgba(255,255,255,0.06)', boxShadow:'0 8px 40px rgba(0,0,0,0.2)', transition:'transform 0.3s,box-shadow 0.3s' }}
        onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-6px)';e.currentTarget.style.boxShadow='0 20px 60px rgba(0,0,0,0.3)'}}
        onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 8px 40px rgba(0,0,0,0.2)'}}>
          <div style={{ background:'linear-gradient(135deg,#0D1117 0%,#1C2B3E 100%)', padding:'2.5rem 2.5rem 2rem', position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute',top:-40,right:-40,width:200,height:200,borderRadius:'50%',background:'rgba(45,140,255,0.08)' }} />
            <div style={{ position:'relative' }}>
              <div style={{ display:'inline-flex',alignItems:'center',gap:8,background:'rgba(45,140,255,0.15)',border:'1px solid rgba(45,140,255,0.2)',borderRadius:100,padding:'5px 14px',marginBottom:'1.25rem' }}>
                <div style={{ width:7,height:7,borderRadius:'50%',background:'#7AB8FF' }} />
                <span style={{ fontFamily:'Inter,sans-serif', fontSize:'0.72rem', fontWeight:700, color:'#90C0FF', letterSpacing:'0.06em', textTransform:'uppercase' }}>Enterprise</span>
              </div>
              <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(1.6rem,3vw,2.2rem)', fontWeight:800, color:'#F8FAFC', letterSpacing:'-0.03em', lineHeight:1.1, marginBottom:'0.75rem' }}>Untuk transformasi<br />digital menyeluruh.</h3>
              <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.9rem', color:'#90C0FF', fontWeight:500 }}>Perusahaan menengah-besar &amp; BUMN</p>
            </div>
            <div style={{ display:'flex', gap:10, marginTop:'1.5rem' }}>
              {[{v:'Tier-1',l:'Portfolio'},{v:'Rp 50 jt',l:'Mulai dari'},{v:'ID & MY',l:'2 Negara'}].map(m=>(
                <div key={m.l} style={{ flex:1, background:'rgba(255,255,255,0.06)', borderRadius:12, padding:'10px', textAlign:'center' }}>
                  <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'0.95rem', fontWeight:800, color:'#F8FAFC' }}>{m.v}</div>
                  <div style={{ fontFamily:'Inter,sans-serif', fontSize:'0.62rem', color:'#7AB8FF', fontWeight:600, marginTop:2 }}>{m.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background:'#131A24', padding:'2rem 2.5rem' }}>
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.8rem', fontWeight:700, color:'#4B5563', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:'1rem' }}>Kapabilitas enterprise</p>
            {['AI Transformation Consulting &amp; Roadmap','Custom Software Development (Web, Mobile)','System Migration — Monolith ke Microservices','AI as a Service &amp; Ongoing Managed Service'].map(p=>(
              <div key={p} style={{ display:'flex',gap:10,alignItems:'flex-start',marginBottom:'0.6rem' }}>
                <span style={{ color:'#7AB8FF',fontWeight:700,marginTop:2,flexShrink:0 }}>✓</span>
                <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.9rem',color:'#94A3B8' }} dangerouslySetInnerHTML={{__html:p}} />
              </div>
            ))}
            <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.78rem', color:'#475569', marginTop:'1.25rem', marginBottom:'0.5rem' }}>Telah bekerja dengan:</p>
            <div style={{ display:'flex',flexWrap:'wrap',gap:8,marginBottom:'1.5rem' }}>
              {['Adira Finance','Jasa Marga','Amar Bank','Ombudsman RI'].map(c=>(
                <span key={c} style={{ fontFamily:'Inter,sans-serif', fontSize:'0.72rem', fontWeight:600, color:'#2D8CFF', background:'rgba(45,140,255,0.1)', padding:'3px 10px', borderRadius:100 }}>{c}</span>
              ))}
            </div>
            <button onClick={()=>setPage('enterprise')} style={{ width:'100%', background:'rgba(45,140,255,0.15)', color:'#90C0FF', border:'1px solid rgba(45,140,255,0.2)', borderRadius:12, padding:'13px', fontSize:'0.95rem', fontWeight:600, cursor:'pointer', fontFamily:'Inter,sans-serif', transition:'all 0.2s' }}
            onMouseEnter={e=>{e.currentTarget.style.background='rgba(45,140,255,0.25)';e.currentTarget.style.color='#B3D4FF'}}
            onMouseLeave={e=>{e.currentTarget.style.background='rgba(45,140,255,0.15)';e.currentTarget.style.color='#90C0FF'}}>
              Lihat Layanan Enterprise →
            </button>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

// ── Framework Section ─────────────────────────────────────────────────────────

const FrameworkSection = () => (
  <section style={{ background:'#0D1117', padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', overflow:'hidden' }}>
    <div style={{ textAlign:'center', marginBottom:'clamp(3rem,6vh,5rem)' }}>
      <Reveal>
        <p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.75rem', fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#2D8CFF', marginBottom:'1rem' }}>Framework</p>
      </Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2rem,4vw,3.2rem)', fontWeight:800, color:'#F8FAFC', letterSpacing:'-0.03em', lineHeight:1.1, maxWidth:680, margin:'0 auto', marginBottom:'1rem' }}>
          Dari masalah bisnis ke hasil yang terukur.
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily:'Inter,sans-serif', fontSize:'1rem', color:'#64748B', maxWidth:520, margin:'0 auto' }}>
          Teknologi hanyalah alat. Yang kami jual adalah <strong style={{ color:'#B3D4FF' }}>business outcome</strong> — dan kami buktikan sebelum proyek dimulai.
        </p>
      </Reveal>
    </div>
    <AnimatedBusinessFlow />
  </section>
);

// ── Outcomes Section ──────────────────────────────────────────────────────────

const OutcomesSection = () => (
  <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'#FAFAFE' }}>
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(3rem,6vw,6rem)', alignItems:'center', maxWidth:1200, margin:'0 auto' }} className="outcomes-grid">
      <div>
        <Reveal><p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.75rem', fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#2D8CFF', marginBottom:'1rem' }}>Track Record</p></Reveal>
        <Reveal delay={80}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2rem,4vw,3rem)', fontWeight:800, color:'#0D1117', letterSpacing:'-0.03em', lineHeight:1.1, marginBottom:'1.5rem' }}>
          9 tahun. Portfolio nyata.<br />Angka yang bisa dicek.
        </h2></Reveal>
        <Reveal delay={140}><p style={{ fontFamily:'Inter,sans-serif', fontSize:'1rem', color:'#64748B', lineHeight:1.75, marginBottom:'2rem' }}>
          Setiap statistik berasal dari proyek nyata dengan klien yang bisa diverifikasi — bukan klaim marketing.
        </p></Reveal>
        <Reveal delay={200}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'1.5rem 3rem' }}>
            {[{value:9,suffix:'+',label:'Tahun beroperasi'},{value:20,suffix:'+',label:'Proyek terdeliver'},{value:2,suffix:'',label:'Negara: Indonesia & Malaysia'},{value:6,suffix:'',label:'Klien enterprise'}].map((s,i)=>(
              <StatCard key={s.label} {...s} delay={i*80} />
            ))}
          </div>
        </Reveal>
      </div>
      <Reveal delay={120} direction="right">
        <div style={{ display:'flex', flexDirection:'column', gap:'1rem' }}>
          {PORTFOLIO.slice(0,4).map((p,i)=>(
            <div key={p.id} style={{ background:'#fff',borderRadius:18,padding:'1.25rem 1.5rem',border:'1px solid #F1F5F9',boxShadow:'0 2px 12px rgba(0,0,0,0.04)',display:'flex',alignItems:'center',gap:'1.25rem',transition:'transform 0.2s,box-shadow 0.2s' }}
            onMouseEnter={e=>{e.currentTarget.style.transform='translateX(6px)';e.currentTarget.style.boxShadow='0 8px 24px rgba(0,0,0,0.08)'}}
            onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 2px 12px rgba(0,0,0,0.04)'}}>
              <div style={{ width:44,height:44,borderRadius:12,background:p.accent+'12',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.8rem',fontWeight:800,color:p.accent }}>{p.metric}</div>
              <div style={{ flex:1,minWidth:0 }}>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,color:'#94A3B8',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'0.2rem' }}>{p.client}</p>
                <p style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.95rem',fontWeight:700,color:'#0D1117',letterSpacing:'-0.01em',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis' }}>{p.project}</p>
              </div>
              <div style={{ flexShrink:0 }}>
                {p.tags.slice(0,1).map(t=><span key={t} style={{ background:p.accent+'10',color:p.accent,fontSize:'0.65rem',fontWeight:600,padding:'2px 8px',borderRadius:100,fontFamily:'Inter,sans-serif' }}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

// ── Video Section ─────────────────────────────────────────────────────────────

const VideoSection = () => (
  <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)' }}>
    <div style={{ maxWidth:960, margin:'0 auto' }}>
      <div style={{ textAlign:'center', marginBottom:'2.5rem' }}>
        <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:'0.75rem' }}>
            Dengar langsung dari founder.
          </h2>
        </Reveal>
        <Reveal delay={80}>
          <p style={{ fontFamily:'Inter,sans-serif', fontSize:'1rem', color:'#64748B', maxWidth:480, margin:'0 auto' }}>
            Filosofi Smartek X dijelaskan dalam 3 menit — mengapa kami mulai dari bisnis, bukan dari teknologi.
          </p>
        </Reveal>
      </div>
      <Reveal delay={140}>
        <FounderVideoPlaceholder />
      </Reveal>
    </div>
  </section>
);

// ── Portfolio Preview ─────────────────────────────────────────────────────────

const PortfolioSection = ({ setPage }) => (
  <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'#0D1117' }}>
    <div style={{ display:'flex',flexWrap:'wrap',justifyContent:'space-between',alignItems:'flex-end',gap:'1.5rem',marginBottom:'3.5rem' }}>
      <div>
        <Reveal><p style={{ fontFamily:'Inter,sans-serif', fontSize:'0.75rem', fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#2D8CFF', marginBottom:'1rem' }}>Portfolio</p></Reveal>
        <Reveal delay={80}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2rem,4vw,3rem)', fontWeight:800, color:'#F8FAFC', letterSpacing:'-0.03em', lineHeight:1.1 }}>Proyek nyata.<br />Klien yang bisa dicek.</h2></Reveal>
      </div>
      <Reveal delay={160} direction="right">
        <button onClick={()=>setPage('portfolio')} style={{ background:'none',border:'1.5px solid rgba(45,140,255,0.3)',borderRadius:10,padding:'10px 22px',color:'#7AB8FF',fontSize:'0.9rem',fontWeight:600,cursor:'pointer',fontFamily:'Inter,sans-serif',transition:'all 0.2s' }}
        onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(45,140,255,0.6)';e.currentTarget.style.color='#B3D4FF'}}
        onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(45,140,255,0.3)';e.currentTarget.style.color='#7AB8FF'}}>
          Lihat semua →
        </button>
      </Reveal>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:'1.25rem' }}>
      {PORTFOLIO.slice(0,4).map((p,i)=>(
        <Reveal key={p.id} delay={i*70}>
          <div style={{ background:'#131A24',borderRadius:22,padding:'2rem',border:'1px solid rgba(255,255,255,0.04)',transition:'transform 0.25s,background 0.2s,border-color 0.2s' }}
          onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.background='#1C2B3E';e.currentTarget.style.borderColor='rgba(45,140,255,0.15)'}}
          onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.background='#131A24';e.currentTarget.style.borderColor='rgba(255,255,255,0.04)'}}>
            <div style={{ display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'1.5rem' }}>
              <div style={{ display:'flex',gap:6,flexWrap:'wrap' }}>
                {p.tags.slice(0,2).map(t=><span key={t} style={{ background:p.accent+'15',color:p.accent,fontSize:'0.65rem',fontWeight:600,padding:'2px 8px',borderRadius:100,fontFamily:'Inter,sans-serif' }}>{t}</span>)}
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.3rem',fontWeight:800,color:p.accent,lineHeight:1 }}>{p.metric}</div>
                <div style={{ fontSize:'0.62rem',color:'#374151',fontFamily:'Inter,sans-serif',marginTop:2 }}>{p.metricLabel}</div>
              </div>
            </div>
            <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.65rem',fontWeight:700,letterSpacing:'0.07em',textTransform:'uppercase',color:'#374151',marginBottom:'0.3rem' }}>{p.client}</p>
            <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.1rem',fontWeight:700,color:'#F8FAFC',marginBottom:'0.65rem',letterSpacing:'-0.02em' }}>{p.project}</h3>
            <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.83rem',color:'#475569',lineHeight:1.65 }}>{p.desc}</p>
          </div>
        </Reveal>
      ))}
    </div>
  </section>
);

// ── Insights Preview ──────────────────────────────────────────────────────────

const InsightsPreview = ({ setPage }) => {
  const previews = typeof ARTICLES !== 'undefined' ? ARTICLES.slice(0,3) : [];
  return (
    <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'#FAFAFE' }}>
      <div style={{ display:'flex',flexWrap:'wrap',justifyContent:'space-between',alignItems:'flex-end',gap:'1.5rem',marginBottom:'3rem' }}>
        <div>
          <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'1rem' }}>Insights</p></Reveal>
          <Reveal delay={80}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(2rem,4vw,3rem)',fontWeight:800,color:'#0D1117',letterSpacing:'-0.03em',lineHeight:1.1 }}>Dari pengalaman nyata.<br /><span style={{ color:'#2D8CFF' }}>Bukan dari AI.</span></h2></Reveal>
        </div>
        <Reveal delay={140} direction="right">
          <button onClick={()=>setPage('insights')} style={{ background:'none',border:'1.5px solid #E8EDF5',borderRadius:10,padding:'10px 22px',color:'#64748B',fontSize:'0.88rem',fontWeight:600,cursor:'pointer',fontFamily:'Inter,sans-serif',transition:'all 0.2s' }}
          onMouseEnter={e=>{e.currentTarget.style.borderColor='#2D8CFF';e.currentTarget.style.color='#2D8CFF'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='#E8EDF5';e.currentTarget.style.color='#64748B'}}>
            Semua artikel →
          </button>
        </Reveal>
      </div>
      <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:'1.25rem' }}>
        {previews.map((a,i)=>(
          <Reveal key={a.id} delay={i*80}>
            <div onClick={()=>setPage('insights')} style={{ background:'#fff',borderRadius:20,overflow:'hidden',border:'1px solid #F1F5F9',cursor:'pointer',boxShadow:'0 2px 12px rgba(0,0,0,0.04)',transition:'transform 0.25s,box-shadow 0.25s',display:'flex',flexDirection:'column' }}
            onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 12px 40px rgba(45,140,255,0.08)'}}
            onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 2px 12px rgba(0,0,0,0.04)'}}>
              <div style={{ background:i===0?'linear-gradient(135deg,#0D1117,#1C2B3E)':i===1?'linear-gradient(135deg,#1C2B3E,#2D8CFF33)':'linear-gradient(135deg,#131A24,#1A3A5C)',padding:'1.75rem',minHeight:140,display:'flex',flexDirection:'column',justifyContent:'space-between',position:'relative',overflow:'hidden' }}>
                <div style={{ position:'absolute',top:'-20%',right:'-10%',width:'60%',paddingBottom:'60%',borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.12),transparent 70%)' }}/>
                <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,color:'#7AB8FF',background:'rgba(45,140,255,0.1)',border:'1px solid rgba(45,140,255,0.15)',padding:'3px 10px',borderRadius:100,width:'fit-content' }}>{a.category}</span>
                <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1rem',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.02em',lineHeight:1.25,position:'relative',marginTop:'1rem' }}>{a.title}</h3>
              </div>
              <div style={{ padding:'1.25rem 1.5rem',flex:1,display:'flex',flexDirection:'column',justifyContent:'space-between' }}>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.85rem',color:'#64748B',lineHeight:1.6,marginBottom:'1rem' }}>{a.slug}</p>
                <div style={{ display:'flex',justifyContent:'space-between',alignItems:'center' }}>
                  <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.72rem',color:'#94A3B8' }}>{a.date} · {a.readTime}</span>
                  <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.8rem',fontWeight:600,color:'#2D8CFF' }}>Baca →</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ── CTA Section ───────────────────────────────────────────────────────────────

const CTASection = ({ setPage }) => (
  <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'linear-gradient(135deg,#1C2B3E 0%,#1A3A5C 100%)', position:'relative', overflow:'hidden' }}>
    <div style={{ position:'absolute',top:'-20%',right:'-5%',width:'60vw',height:'60vw',maxWidth:600,maxHeight:600,borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.12) 0%,transparent 70%)',pointerEvents:'none' }}/>
    <div style={{ position:'absolute',bottom:'-10%',left:'5%',width:'30vw',height:'30vw',maxWidth:300,borderRadius:'50%',background:'radial-gradient(circle,rgba(232,255,71,0.06) 0%,transparent 70%)',pointerEvents:'none' }}/>
    <div style={{ position:'relative', maxWidth:700 }}>
      <Reveal><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2rem,5vw,3.5rem)', fontWeight:800, color:'#F8FAFC', letterSpacing:'-0.03em', lineHeight:1.1, marginBottom:'1.25rem' }}>
        Mulai dengan AI Audit Gratis — tanpa komitmen.
      </h2></Reveal>
      <Reveal delay={120}><p style={{ fontFamily:'Inter,sans-serif', fontSize:'1.1rem', color:'#90C0FF', lineHeight:1.7, marginBottom:'2.5rem' }}>
        Dalam 1–2 hari, kami identifikasi 3 area bisnis Anda yang paling worth untuk dioptimasi. Gratis. Tanpa syarat.
      </p></Reveal>
      <Reveal delay={220}>
        <div style={{ display:'flex',flexWrap:'wrap',gap:14 }}>
          <button onClick={()=>setPage('contact')} style={{ background:'#E8FF47',color:'#0D1117',border:'none',borderRadius:14,padding:'16px 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,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)'}}>
            Minta AI Audit Gratis
          </button>
          <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20mau%20mulai%20AI%20Audit%20Gratis." target="_blank" rel="noreferrer" style={{ display:'inline-flex',alignItems:'center',gap:10,color:'#F8FAFC',border:'1.5px solid rgba(255,255,255,0.25)',borderRadius:14,padding:'15px 28px',fontSize:'1rem',fontWeight:600,fontFamily:'Inter,sans-serif',textDecoration:'none',transition:'all 0.2s' }}
          onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.5)';e.currentTarget.style.transform='translateY(-2px)'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.25)';e.currentTarget.style.transform='none'}}>
            <WAIcon size={18} color="#25D366" /> WhatsApp
          </a>
        </div>
      </Reveal>
    </div>
  </section>
);

const WAIcon = ({ size = 20, color = '#25D366' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
    <path d="M12 0C5.373 0 0 5.373 0 12c0 2.118.549 4.107 1.51 5.831L0 24l6.335-1.487A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.8 9.8 0 01-5.03-1.385l-.36-.214-3.762.883.932-3.654-.235-.376A9.79 9.79 0 012.182 12C2.182 6.57 6.57 2.182 12 2.182S21.818 6.57 21.818 12 17.43 21.818 12 21.818z"/>
  </svg>
);

Object.assign(window, { HomePage, WAIcon });