// ═══════════════════════════════════════════════════════════════
// SMARTEK X ENTERPRISE — Halaman Khusus Enterprise
// Tone: Confident, precise, premium dark. Peer-to-peer dengan CTO/IT Director.
// ═══════════════════════════════════════════════════════════════

const EnterprisePage = ({ setPage }) => (
  <div style={{ background: '#0D1117', minHeight: '100vh', paddingTop: 80 }}>
    <EntHero setPage={setPage} />
    <EntProofBar />
    <EntCapabilities />
    <EntEngagementModel />
    <EntUseCases />
    <EntArchVisual />
    <EntPortfolio setPage={setPage} />
    <EntCTA setPage={setPage} />
  </div>
);

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

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

  return (
    <section style={{ position:'relative', padding:'clamp(5rem,10vh,9rem) clamp(1.5rem,8vw,8rem) clamp(4rem,8vh,7rem)', overflow:'hidden', background:'#0D1117' }}>
      {/* Tech grid bg */}
      <div style={{ position:'absolute',inset:0,backgroundImage:'linear-gradient(rgba(45,140,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(45,140,255,0.04) 1px,transparent 1px)',backgroundSize:'72px 72px',pointerEvents:'none' }} />
      {/* Glow orbs */}
      <div style={{ position:'absolute',top:'-15%',right:'0',width:'60vw',height:'60vw',maxWidth:700,borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.07) 0%,transparent 60%)',pointerEvents:'none' }} />
      <div style={{ position:'absolute',bottom:'-20%',left:'10%',width:'40vw',height:'40vw',maxWidth:500,borderRadius:'50%',background:'radial-gradient(circle,rgba(28,43,62,0.8) 0%,transparent 70%)',pointerEvents:'none' }} />

      <div style={{ position:'relative', display:'grid', gridTemplateColumns:'1fr auto', gap:'4rem', alignItems:'center', maxWidth:1400 }} className="ent-hero-grid">
        <div>
          {/* Badge */}
          <div style={{ ...fade(0), display:'inline-flex',alignItems:'center',gap:10,marginBottom:'2rem' }}>
            <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 16px' }}>
              <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:'#7AB8FF',letterSpacing:'0.05em',textTransform:'uppercase' }}>Smartek X Enterprise</span>
            </div>
            <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#475569' }}>untuk Korporasi & Pemerintah</span>
          </div>

          <h1 style={{ ...fade(100), fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(2.8rem,6vw,6rem)', fontWeight:800, color:'#F8FAFC', letterSpacing:'-0.03em', lineHeight:1.02, marginBottom:'1.75rem', textWrap:'balance' }}>
            Enterprise-grade delivery.<br />
            <span style={{ color:'#2D8CFF' }}>Business-first</span><br />
            approach.
          </h1>

          <p style={{ ...fade(180), fontFamily:'Inter,sans-serif', fontSize:'clamp(1rem,1.5vw,1.2rem)', color:'#64748B', lineHeight:1.75, maxWidth:560, marginBottom:'2.75rem' }}>
            Track record di Adira Finance, Jasa Marga, dan Amar Bank — bukan sebagai technology vendor, tapi sebagai partner bisnis yang kebetulan sangat jago teknologi.
          </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.25)',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.4)'}}
            onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 4px 20px rgba(232,255,71,0.25)'}}>
              Jadwalkan Technical Assessment
            </button>
            <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20tertarik%20dengan%20solusi%20Enterprise." target="_blank" rel="noreferrer" style={{ display:'inline-flex',alignItems:'center',gap:10,background:'rgba(255,255,255,0.04)',color:'#B3D4FF',border:'1.5px solid rgba(45,140,255,0.2)',borderRadius:14,padding:'14px 24px',fontSize:'1rem',fontWeight:600,fontFamily:'Inter,sans-serif',textDecoration:'none',transition:'all 0.2s' }}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(45,140,255,0.5)';e.currentTarget.style.background='rgba(45,140,255,0.08)'}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(45,140,255,0.2)';e.currentTarget.style.background='rgba(255,255,255,0.04)'}}>
              <WAIcon size={18} color="#25D366" /> Diskusi Langsung
            </a>
          </div>

          {/* Proof numbers */}
          <div style={{ ...fade(320), display:'flex', flexWrap:'wrap', gap:'2rem 4rem', marginTop:'3rem', paddingTop:'2.5rem', borderTop:'1px solid rgba(45,140,255,0.1)' }}>
            {[{v:'9+',l:'Tahun track record'},{v:'6',l:'Klien enterprise'},{v:'ID & MY',l:'2 Negara'},{v:'Monolith→Micro',l:'Migrasi skala besar'}].map(s=>(
              <div key={s.l}>
                <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.3rem',fontWeight:800,color:'#2D8CFF',letterSpacing:'-0.02em',lineHeight:1 }}>{s.v}</div>
                <div style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',color:'#475569',marginTop:4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: Tech architecture diagram */}
        <div style={{ ...fade(160), flexShrink:0 }} className="ent-arch-preview">
          <ArchDiagramMini />
        </div>
      </div>
    </section>
  );
};

// ── Mini Architecture Diagram ─────────────────────────────────────────────────

const ArchDiagramMini = () => (
  <div style={{ width:320, background:'rgba(28,43,62,0.6)', borderRadius:20, border:'1px solid rgba(45,140,255,0.12)', padding:'1.5rem', backdropFilter:'blur(10px)' }}>
    <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,color:'#475569',textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:'1.25rem' }}>Architecture Overview</p>
    {/* Layers */}
    {[
      { label:'Client Layer', items:['Mobile App (iOS/Android)','Web App (React/Next.js)','Third-party Integrations'], color:'#2D8CFF' },
      { label:'API Gateway', items:['Auth · Rate Limiting · Routing'], color:'#1A6FD4', compact:true },
      { label:'Microservices', items:['User Service','Business Logic','Notification','Analytics'], color:'#1460C8', row:true },
      { label:'Data Layer', items:['PostgreSQL · Redis · Elasticsearch · S3'], color:'#90C0FF', compact:true },
    ].map((layer, i) => (
      <div key={layer.label} style={{ marginBottom: i < 3 ? '0.75rem' : 0 }}>
        {i > 0 && (
          <div style={{ display:'flex',justifyContent:'center',marginBottom:'0.5rem' }}>
            <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M4 10l4 4 4-4" stroke="#2D8CFF" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        )}
        <div style={{ background:`${layer.color}08`, border:`1px solid ${layer.color}20`, borderRadius:10, padding:'0.65rem 0.85rem' }}>
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.6rem',fontWeight:700,color:layer.color,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:layer.compact?0:'0.5rem' }}>{layer.label}</p>
          {!layer.compact && (
            layer.row
              ? <div style={{ display:'flex',gap:4,flexWrap:'wrap',marginTop:'0.4rem' }}>
                  {layer.items.map(it=><span key={it} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.58rem',color:'#64748B',background:'rgba(255,255,255,0.04)',padding:'2px 6px',borderRadius:4 }}>{it}</span>)}
                </div>
              : layer.items.map(it=><p key={it} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.62rem',color:'#64748B',marginTop:'0.2rem' }}>· {it}</p>)
          )}
          {layer.compact && (
            <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.62rem',color:'#64748B',marginTop:'0.25rem' }}>{layer.items[0]}</p>
          )}
        </div>
      </div>
    ))}
    <div style={{ marginTop:'1rem',padding:'0.6rem',background:'rgba(232,255,71,0.06)',borderRadius:8,border:'1px solid rgba(232,255,71,0.12)' }}>
      <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.6rem',fontWeight:600,color:'rgba(232,255,71,0.8)',textAlign:'center' }}>AI-Augmented Delivery Layer</p>
    </div>
  </div>
);

// ── Proof Bar ─────────────────────────────────────────────────────────────────

const EntProofBar = () => {
  const [ref, visible] = useScrollReveal();
  const clients = CLIENTS;
  return (
    <section ref={ref} style={{ padding:'2rem clamp(1.5rem,6vw,6rem)', borderTop:'1px solid rgba(45,140,255,0.08)', borderBottom:'1px solid rgba(45,140,255,0.08)', background:'rgba(28,43,62,0.3)', backdropFilter:'blur(8px)' }}>
      <p style={{ textAlign:'center',fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#374151',marginBottom:'1.25rem',opacity:visible?1:0,transition:'opacity 0.6s' }}>TELAH DIPERCAYA OLEH</p>
      <div style={{ display:'flex',flexWrap:'wrap',justifyContent:'center',alignItems:'center',gap:'clamp(1rem,3vw,2rem) clamp(2.5rem,5vw,5rem)' }}>
        {clients.map((c,i)=>(
          <div key={c} style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(0.78rem,1.1vw,0.88rem)',fontWeight:800,color:'#374151',letterSpacing:'-0.01em',opacity:visible?1:0,transition:`opacity 0.5s ${i*50}ms` }}>{c}</div>
        ))}
      </div>
    </section>
  );
};

// ── Capabilities ──────────────────────────────────────────────────────────────

const EntCapabilities = () => {
  const caps = [
    {
      title:'System Transformation',
      code:'SYS-TRANS',
      range:'Rp 150–500 jt',
      desc:'Rebuild sistem legacy ke arsitektur modern. Monolith → Microservices, cloud migration, API modernization. Terbukti di Adira Finance (25 screens, 34 modul).',
      tech:['Microservices','Docker/K8s','PostgreSQL','Redis','REST/GraphQL'],
      highlight:'Tanpa downtime untuk sistem yang sudah berjalan',
    },
    {
      title:'Custom Enterprise Application',
      code:'ENT-APP',
      range:'Rp 80–200 jt',
      desc:'Aplikasi mobile (iOS/Android) atau web enterprise custom — dari prototype ke production-ready dengan metodologi yang terbukti.',
      tech:['React Native','Next.js','Node.js','Python','Cloud Deploy'],
      highlight:'Full-stack delivery: dari UI/UX hingga DevOps',
    },
    {
      title:'AI Integration & Automation',
      code:'AI-INT',
      range:'Rp 50–150 jt',
      desc:'Implementasi AI ke proses bisnis eksisting: document processing, predictive analytics, intelligent automation, dan conversational AI.',
      tech:['LLM APIs','Python ML','RAG Pipeline','Workflow Automation','Analytics'],
      highlight:'AI-augmented, bukan AI-hype — hanya implementasi yang menghasilkan ROI nyata',
    },
    {
      title:'Data Engineering & BI',
      code:'DATA-ENG',
      range:'Rp 50–100 jt',
      desc:'Data pipeline, business intelligence platform, dan analytics infrastructure. Dari raw data ke business insight yang actionable.',
      tech:['BigQuery','Airflow','dbt','Metabase','Python Pandas'],
      highlight:'Terbukti di Amar Bank (procurement analytics) dan Jasa Marga (IoT Big Data)',
    },
    {
      title:'Technical Architecture Consulting',
      code:'ARCH-CONSULT',
      range:'Rp 30–80 jt',
      desc:'Assessment arsitektur sistem eksisting, technology roadmap, dan rekomendasi konkret — sebelum Anda komit ke investasi besar.',
      tech:['System Design','Architecture Review','Tech Debt Analysis','Roadmapping'],
      highlight:'Engagement pendek untuk de-risk keputusan investasi teknologi besar',
    },
    {
      title:'Technical Managed Service',
      code:'TMS',
      range:'Rp 10–50 jt/bln',
      desc:'Ongoing maintenance, monitoring, dan pengembangan incremental sistem yang sudah berjalan — dengan SLA yang jelas dan dedicated contact.',
      tech:['24/5 Monitoring','SLA','Incident Response','Monthly Dev','Reporting'],
      highlight:'Continuous improvement, bukan sekedar maintenance',
    },
  ];

  return (
    <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:'2rem',marginBottom:'3.5rem' }}>
        <div>
          <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'0.75rem' }}>Kapabilitas</p></Reveal>
          <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(2rem,4vw,3.2rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.03em',lineHeight:1.1 }}>Service lines<br />untuk skala enterprise.</h2></Reveal>
        </div>
        <Reveal delay={120} direction="right">
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.9rem',color:'#475569',maxWidth:360,lineHeight:1.7 }}>Semua engagement dimulai dengan Technical Assessment — untuk memastikan scope yang tepat sebelum ada commitment.</p>
        </Reveal>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(320px,1fr))', gap:'1.5px', background:'rgba(45,140,255,0.08)', borderRadius:24, overflow:'hidden' }}>
        {caps.map((c,i)=>(
          <Reveal key={c.code} delay={i*50}>
            <div style={{ background:'#131A24',padding:'2rem',height:'100%',boxSizing:'border-box',transition:'background 0.2s' }}
            onMouseEnter={e=>e.currentTarget.style.background='#1C2B3E'}
            onMouseLeave={e=>e.currentTarget.style.background='#131A24'}>
              <div style={{ display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'1rem',flexWrap:'wrap',gap:8 }}>
                <code style={{ fontFamily:'\'JetBrains Mono\',monospace',fontSize:'0.62rem',fontWeight:700,color:'#2D8CFF',letterSpacing:'0.06em',background:'rgba(45,140,255,0.08)',padding:'2px 8px',borderRadius:4 }}>{c.code}</code>
                <span style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.88rem',fontWeight:700,color:'#7AB8FF' }}>{c.range}</span>
              </div>
              <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.1rem',fontWeight:700,color:'#F8FAFC',marginBottom:'0.65rem',letterSpacing:'-0.02em' }}>{c.title}</h3>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.85rem',color:'#64748B',lineHeight:1.65,marginBottom:'1.25rem' }}>{c.desc}</p>
              {/* Tech stack */}
              <div style={{ display:'flex',flexWrap:'wrap',gap:5,marginBottom:'1rem' }}>
                {c.tech.map(t=><span key={t} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.65rem',fontWeight:500,color:'#475569',background:'rgba(255,255,255,0.04)',border:'1px solid rgba(255,255,255,0.06)',padding:'2px 8px',borderRadius:4 }}>{t}</span>)}
              </div>
              {/* Highlight */}
              <div style={{ borderTop:'1px solid rgba(45,140,255,0.08)',paddingTop:'0.75rem' }}>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#2D8CFF',fontWeight:500,fontStyle:'italic' }}>→ {c.highlight}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ── Engagement Model ──────────────────────────────────────────────────────────

const EntEngagementModel = () => {
  const phases = [
    { code:'PHASE-01', label:'Discovery', title:'Assessment & Scoping', duration:'1–2 minggu', desc:'Technical assessment mendalam. Kami pahami arsitektur eksisting, pain point, dan goal bisnis. Output: scope dokumen dan estimasi yang akurat.', deliverable:'Scope doc · Tech audit · Cost estimate' },
    { code:'PHASE-02', label:'PoC', title:'Proof of Concept', duration:'2–4 minggu', desc:'Untuk proyek transformasi besar: build PoC kecil untuk de-risk asumsi teknis terbesar sebelum full commitment.', deliverable:'Working prototype · Risk register · Go/No-go decision' },
    { code:'PHASE-03', label:'Build', title:'Full Delivery', duration:'6–20 minggu', desc:'Eksekusi dengan standar engineering yang ketat — code review, testing, dokumentasi. Update progress setiap sprint (1–2 minggu).', deliverable:'Production system · Test coverage · Technical docs' },
    { code:'PHASE-04', label:'Launch', title:'Deploy & Handover', duration:'1–2 minggu', desc:'Deployment ke production, training tim Anda, dan handover dokumentasi. Tidak ada black box.', deliverable:'Live system · Training · Runbook · Source code' },
    { code:'PHASE-05', label:'Scale', title:'Managed Service', duration:'Ongoing', desc:'Optional: ongoing maintenance, monitoring, dan continuous improvement. Dedicated contact, SLA yang jelas.', deliverable:'Monthly reporting · Incident SLA · Feature roadmap' },
  ];

  return (
    <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'linear-gradient(180deg,#131A24 0%,#0D1117 100%)' }}>
      <div style={{ display:'flex',flexWrap:'wrap',justifyContent:'space-between',alignItems:'flex-end',gap:'2rem',marginBottom:'3.5rem' }}>
        <div>
          <Reveal><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'0.75rem' }}>Engagement Model</p></Reveal>
          <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(2rem,4vw,3rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.03em',lineHeight:1.1 }}>Proses yang transparan.<br />Tidak ada kejutan.</h2></Reveal>
        </div>
        <Reveal delay={120} direction="right">
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.9rem',color:'#475569',maxWidth:340,lineHeight:1.7 }}>Setiap fase punya deliverable yang jelas dan bisa Anda pegang. Kami tidak akan minta payment berikutnya sebelum fase sebelumnya selesai.</p>
        </Reveal>
      </div>

      <div style={{ display:'flex',flexDirection:'column',gap:0,maxWidth:1100,margin:'0 auto' }}>
        {phases.map((p,i)=>(
          <Reveal key={p.code} delay={i*60}>
            <div style={{ display:'grid',gridTemplateColumns:'auto 1fr auto',gap:'0 2rem',alignItems:'start',padding:'2rem 0',borderBottom:i<phases.length-1?'1px solid rgba(255,255,255,0.04)':'none' }} className="phase-row">
              {/* Left: code + connector */}
              <div style={{ display:'flex',flexDirection:'column',alignItems:'center',gap:0,paddingTop:4 }}>
                <div style={{ width:36,height:36,borderRadius:10,background:'rgba(45,140,255,0.1)',border:'1px solid rgba(45,140,255,0.2)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
                  <span style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.6rem',fontWeight:800,color:'#2D8CFF' }}>{String(i+1).padStart(2,'0')}</span>
                </div>
                {i < phases.length-1 && <div style={{ width:1,flex:1,minHeight:48,background:'linear-gradient(to bottom,rgba(45,140,255,0.2),transparent)',marginTop:4 }} />}
              </div>
              {/* Center: content */}
              <div>
                <div style={{ display:'flex',alignItems:'center',gap:10,marginBottom:'0.6rem',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,textTransform:'uppercase',letterSpacing:'0.05em' }}>{p.label}</span>
                  <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',color:'#374151' }}>⏱ {p.duration}</span>
                </div>
                <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.1rem',fontWeight:700,color:'#F8FAFC',letterSpacing:'-0.02em',marginBottom:'0.5rem' }}>{p.title}</h3>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.88rem',color:'#64748B',lineHeight:1.65 }}>{p.desc}</p>
              </div>
              {/* Right: deliverable */}
              <div style={{ background:'rgba(45,140,255,0.04)',border:'1px solid rgba(45,140,255,0.08)',borderRadius:12,padding:'0.75rem 1rem',minWidth:180,flexShrink:0 }}>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.6rem',fontWeight:700,color:'#475569',textTransform:'uppercase',letterSpacing:'0.07em',marginBottom:'0.35rem' }}>Deliverable</p>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',color:'#7AB8FF',lineHeight:1.5 }}>{p.deliverable}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

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

const EntUseCases = () => {
  const [active, setActive] = React.useState(0);
  const cases = [
    {
      sector:'Financial Services',
      title:'Saat sistem lama tidak bisa scale dengan pertumbuhan bisnis.',
      context:'Adira Finance menggunakan sistem monolith lama yang setiap deploy berisiko downtime. Feature baru butuh waktu 6+ bulan untuk go-live.',
      challenge:'Migrasi sistem yang sudah berjalan tanpa downtime. 25 screens mobile, 17 modul web, ratusan ribu pengguna aktif.',
      approach:'Strangler Fig Pattern — bangun microservices baru satu per satu, traffic dipindahkan bertahap. Tidak ada big bang migration.',
      result:'Sistem baru live tanpa downtime. Deploy time turun dari mingguan ke jam-jaman. Feature baru bisa dirilis independen.',
      stack:['Node.js Microservices','React Native','PostgreSQL','Redis','Docker','AWS'],
      impact:[{v:'25+',l:'Screens rebuilt'},{v:'17',l:'Web modules'},{v:'0',l:'Downtime saat migrasi'}],
    },
    {
      sector:'BUMN & Infrastruktur',
      title:'Ketika jutaan pengguna datang dalam 3 minggu pertama.',
      context:'Jasa Marga butuh aplikasi untuk musim mudik nasional — deadline ketat, ekspektasi tinggi, infrastruktur IoT yang harus terintegrasi.',
      challenge:'Build, test, dan deploy aplikasi yang bisa handle jutaan pengguna dengan integrasi sensor IoT di seluruh ruas tol — dalam waktu sangat terbatas.',
      approach:'Rapid development dengan arsitektur yang sudah proven. IoT integration via message queue. Load testing intensif sebelum launch.',
      result:'5.000+ pengguna aktif dalam 3 minggu pertama. Tidak ada downtime selama peak mudik. Sensor data real-time berhasil diintegrasikan.',
      stack:['React Native','Node.js','MQTT (IoT)','Big Data Pipeline','Cloud Infrastructure'],
      impact:[{v:'5.000+',l:'Users minggu ke-3'},{v:'99.9%',l:'Uptime peak'},{v:'Real-time',l:'IoT integration'}],
    },
    {
      sector:'Perbankan Digital',
      title:'Dari intuisi ke keputusan berbasis data di procurement.',
      context:'Amar Bank butuh visibility terhadap data procurement yang selama ini tersebar di berbagai spreadsheet dan sistem terpisah.',
      challenge:'Konsolidasi data dari berbagai sumber, build analytics platform yang bisa digunakan oleh tim non-teknis, integrasi SPSS untuk analisis statistik.',
      approach:'Data pipeline yang mengagregasi data dari semua sumber. Dashboard yang dirancang untuk business user, bukan data analyst. SPSS integration untuk advanced analytics.',
      result:'Tim procurement bisa lihat semua data dalam satu dashboard. Keputusan pembelian berbasis data, bukan feeling. Reporting yang biasanya butuh 2 hari jadi real-time.',
      stack:['Python','SPSS Integration','PostgreSQL','Metabase','ETL Pipeline'],
      impact:[{v:'2 hari',l:'→ Real-time reporting'},{v:'Satu',l:'Source of truth'},{v:'Data-driven',l:'Decision making'}],
    },
    {
      sector:'Government',
      title:'Ketika layanan publik harus accessible untuk semua warga.',
      context:'Ombudsman RI menangani pengaduan masyarakat — sistem lama punya UX yang buruk, form yang sulit, dan tingkat penyelesaian yang rendah.',
      challenge:'Redesign sistem yang melayani jutaan warga Indonesia. Harus accessible, mudah digunakan oleh semua segmen masyarakat, dan bisa dioperasikan oleh staff non-teknis.',
      approach:'User research pertama — bukan langsung wireframe. Design system yang konsisten. Accessibility testing menyeluruh. Iteration berdasarkan feedback nyata.',
      result:'Interface baru yang jauh lebih intuitif. Proses pengaduan yang sebelumnya membingungkan menjadi self-explanatory. Form completion rate meningkat signifikan.',
      stack:['React.js','Government UI Standards','WCAG Accessibility','Performance Optimization'],
      impact:[{v:'Gov\'t',l:'Sector served'},{v:'WCAG',l:'Accessibility compliant'},{v:'UX+',l:'Measurable improvement'}],
    },
  ];
  const c = cases[active];

  return (
    <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'#0D1117' }}>
      <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' }}>Case Studies</p></Reveal>
        <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(2rem,4vw,3rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.03em',lineHeight:1.1 }}>Masalah nyata.<br />Solusi yang terbukti.</h2></Reveal>
      </div>

      {/* Sector tabs */}
      <div style={{ display:'flex',flexWrap:'wrap',gap:8,justifyContent:'center',marginBottom:'2.5rem' }}>
        {cases.map((c2,i)=>(
          <button key={c2.sector} onClick={()=>setActive(i)} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',fontWeight:600,padding:'7px 18px',borderRadius:100,border:'1.5px solid',borderColor:active===i?'#2D8CFF':'rgba(45,140,255,0.15)',background:active===i?'rgba(45,140,255,0.12)':'transparent',color:active===i?'#7AB8FF':'#475569',cursor:'pointer',transition:'all 0.2s' }}>
            {c2.sector}
          </button>
        ))}
      </div>

      {/* Case content */}
      <div style={{ maxWidth:1000,margin:'0 auto',background:'#131A24',borderRadius:24,overflow:'hidden',border:'1px solid rgba(45,140,255,0.1)' }}>
        {/* Header */}
        <div style={{ background:'linear-gradient(135deg,#131A24,#1C2B3E)',padding:'2.5rem',borderBottom:'1px solid rgba(45,140,255,0.08)' }}>
          <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',fontWeight:700,color:'#2D8CFF',background:'rgba(45,140,255,0.1)',padding:'3px 10px',borderRadius:100,letterSpacing:'0.05em',textTransform:'uppercase' }}>{c.sector}</span>
          <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1.2rem,2.5vw,1.6rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.025em',lineHeight:1.2,marginTop:'0.75rem' }}>{c.title}</h3>
          {/* Metrics */}
          <div style={{ display:'flex',gap:12,flexWrap:'wrap',marginTop:'1.5rem' }}>
            {c.impact.map(m=>(
              <div key={m.l} style={{ background:'rgba(45,140,255,0.06)',border:'1px solid rgba(45,140,255,0.1)',borderRadius:10,padding:'10px 16px',textAlign:'center',minWidth:100 }}>
                <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.2rem',fontWeight:800,color:'#E8FF47',letterSpacing:'-0.02em' }}>{m.v}</div>
                <div style={{ fontFamily:'Inter,sans-serif',fontSize:'0.65rem',color:'#475569',marginTop:2 }}>{m.l}</div>
              </div>
            ))}
          </div>
        </div>
        {/* Body */}
        <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',padding:'2rem 2.5rem',gap:'2rem' }} className="case-body-grid">
          {[
            {t:'Context',c:c.context},{t:'Challenge',c:c.challenge},
            {t:'Approach',c:c.approach},{t:'Result',c:c.result},
          ].map(s=>(
            <div key={s.t}>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,color:'#2D8CFF',textTransform:'uppercase',letterSpacing:'0.07em',marginBottom:'0.5rem' }}>{s.t}</p>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.88rem',color:'#64748B',lineHeight:1.65 }}>{s.c}</p>
            </div>
          ))}
        </div>
        {/* Stack */}
        <div style={{ padding:'0 2.5rem 2rem',display:'flex',gap:8,flexWrap:'wrap',alignItems:'center' }}>
          <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,color:'#374151',textTransform:'uppercase',letterSpacing:'0.06em',marginRight:4 }}>Stack:</span>
          {c.stack.map(t=><span key={t} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.72rem',fontWeight:500,color:'#7AB8FF',background:'rgba(45,140,255,0.06)',border:'1px solid rgba(45,140,255,0.1)',padding:'3px 10px',borderRadius:4 }}>{t}</span>)}
        </div>
      </div>
    </section>
  );
};

// ── Architecture Visual ───────────────────────────────────────────────────────

const EntArchVisual = () => {
  const layers = [
    { label:'Frontend Layer', items:['React / Next.js','React Native (iOS & Android)','Third-party Integrations'], color:'#2D8CFF' },
    { label:'API & Security Layer', items:['API Gateway','Auth (JWT / OAuth)','Rate Limiting','Load Balancer'], color:'#1A6FD4' },
    { label:'Business Logic Layer (Microservices)', items:['User Service','Core Business Logic','Notification Engine','Payment Integration','File/Media Service'], color:'#1460C8', wide:true },
    { label:'AI Layer', items:['LLM Integration','Document Processing','Predictive Analytics','Workflow Automation'], color:'rgba(232,255,71,0.7)', dark:true },
    { label:'Data Layer', items:['PostgreSQL (Primary)','Redis (Cache)','Elasticsearch (Search)','S3 / Object Storage'], color:'#90C0FF' },
    { label:'Infrastructure', items:['Docker + Kubernetes','CI/CD Pipeline','Monitoring (Grafana)','Cloud (AWS / GCP)'], color:'#475569' },
  ];

  return (
    <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'linear-gradient(180deg,#131A24 0%,#0D1117 100%)' }}>
      <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' }}>Architecture Stack</p></Reveal>
        <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(2rem,4vw,3rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.03em',lineHeight:1.1,marginBottom:'0.75rem' }}>Tech stack yang terbukti<br />di production.</h2></Reveal>
        <Reveal delay={120}><p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.95rem',color:'#475569',maxWidth:480,margin:'0 auto' }}>Bukan buzzword. Ini adalah stack yang benar-benar kami gunakan di Adira Finance, Jasa Marga, dan Sarawak Malaysia.</p></Reveal>
      </div>

      <div style={{ maxWidth:900,margin:'0 auto',display:'flex',flexDirection:'column',gap:'1px',background:'rgba(45,140,255,0.06)',borderRadius:24,overflow:'hidden' }}>
        {layers.map((l,i)=>(
          <Reveal key={l.label} delay={i*60}>
            <div style={{ background:l.dark?'rgba(232,255,71,0.03)':'#131A24',padding:'1.5rem 2rem',display:'flex',flexWrap:'wrap',gap:'1rem',alignItems:'center',transition:'background 0.2s' }}
            onMouseEnter={e=>e.currentTarget.style.background=l.dark?'rgba(232,255,71,0.05)':'#1C2B3E'}
            onMouseLeave={e=>e.currentTarget.style.background=l.dark?'rgba(232,255,71,0.03)':'#131A24'}>
              <div style={{ width:140,flexShrink:0 }}>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',fontWeight:700,color:l.color,textTransform:'uppercase',letterSpacing:'0.06em',lineHeight:1.3 }}>{l.label}</p>
              </div>
              <div style={{ flex:1,display:'flex',flexWrap:'wrap',gap:8 }}>
                {l.items.map(it=>(
                  <span key={it} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.8rem',fontWeight:500,color:'#94A3B8',background:'rgba(255,255,255,0.03)',border:'1px solid rgba(255,255,255,0.06)',padding:'4px 12px',borderRadius:6 }}>{it}</span>
                ))}
              </div>
              {/* Vertical connector */}
              {i===0 && <div style={{ position:'absolute',right:0,width:1 }} />}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ── Portfolio ─────────────────────────────────────────────────────────────────

const EntPortfolio = ({ 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:'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' }}>Portfolio Enterprise</p></Reveal>
        <Reveal delay={70}><h2 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(2rem,4vw,3rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.03em',lineHeight:1.1 }}>Track record<br />yang bisa Anda verifikasi.</h2></Reveal>
      </div>
      <Reveal delay={120} direction="right">
        <button onClick={()=>setPage('portfolio')} style={{ background:'none',border:'1.5px solid rgba(45,140,255,0.25)',borderRadius:10,padding:'10px 22px',color:'#7AB8FF',fontSize:'0.88rem',fontWeight:600,cursor:'pointer',fontFamily:'Inter,sans-serif',transition:'all 0.2s' }}
        onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(45,140,255,0.5)';e.currentTarget.style.color='#B3D4FF'}}
        onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(45,140,255,0.25)';e.currentTarget.style.color='#7AB8FF'}}>
          Lihat semua portfolio →
        </button>
      </Reveal>
    </div>
    <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:'1.25rem' }}>
      {PORTFOLIO_EXTENDED.slice(0,4).map((p,i)=>(
        <Reveal key={p.id} delay={i*60}>
          <div style={{ background:'#131A24',borderRadius:22,padding:'2rem',border:'1px solid rgba(45,140,255,0.08)',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.2)'}}
          onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.background='#131A24';e.currentTarget.style.borderColor='rgba(45,140,255,0.08)'}}>
            <div style={{ display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'1.5rem',flexWrap:'wrap',gap:8 }}>
              <div style={{ display:'flex',gap:6,flexWrap:'wrap' }}>
                {p.tags.slice(0,2).map(t=><span key={t} style={{ background:`${p.accent}12`,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.2rem',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>
);

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

const EntCTA = ({ setPage }) => (
  <section style={{ padding:'clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,8rem)', background:'linear-gradient(135deg,#0D1117 0%,#131A24 50%,#1C2B3E 100%)', position:'relative', overflow:'hidden' }}>
    <div style={{ position:'absolute',top:'-20%',right:'-5%',width:'55vw',height:'55vw',maxWidth:600,borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.07) 0%,transparent 70%)',pointerEvents:'none' }} />
    <div style={{ position:'relative',maxWidth:750 }}>
      <Reveal>
        <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#2D8CFF',marginBottom:'1.25rem' }}>Mulai percakapan</p>
      </Reveal>
      <Reveal delay={80}>
        <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' }}>
          Proyek enterprise dimulai dengan percakapan bisnis — bukan RFQ.
        </h2>
      </Reveal>
      <Reveal delay={150}>
        <p style={{ fontFamily:'Inter,sans-serif',fontSize:'1.05rem',color:'#64748B',lineHeight:1.75,marginBottom:'2.5rem',maxWidth:560 }}>
          Ceritakan tantangan teknis atau bisnis yang sedang Anda hadapi. Kami berikan perspektif jujur — bahkan jika jawabannya adalah Smartek X bukan yang paling tepat untuk Anda.
        </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.25)',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.4)'}}
          onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 4px 20px rgba(232,255,71,0.25)'}}>
            Jadwalkan Technical Assessment
          </button>
          <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20tertarik%20dengan%20solusi%20Enterprise." target="_blank" rel="noreferrer" style={{ display:'inline-flex',alignItems:'center',gap:10,color:'#B3D4FF',border:'1.5px solid rgba(45,140,255,0.2)',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(45,140,255,0.5)';e.currentTarget.style.color='#D6EAFF'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(45,140,255,0.2)';e.currentTarget.style.color='#B3D4FF'}}>
            <WAIcon size={18} color="#25D366" /> WhatsApp
          </a>
        </div>
      </Reveal>
      {/* Bottom note */}
      <Reveal delay={300}>
        <div style={{ marginTop:'3rem',paddingTop:'2rem',borderTop:'1px solid rgba(45,140,255,0.08)',display:'flex',flexWrap:'wrap',gap:'2rem' }}>
          {['Technical Assessment tersedia (berbayar, Rp 30–80 jt)','Atau mulai dengan konsultasi awal 30 menit — gratis','NDA tersedia untuk diskusi yang lebih dalam'].map(n=>(
            <div key={n} style={{ display:'flex',gap:8,alignItems:'flex-start' }}>
              <span style={{ color:'#2D8CFF',flexShrink:0,marginTop:2 }}>·</span>
              <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.82rem',color:'#475569' }}>{n}</span>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { EnterprisePage });