// ── Services Page ─────────────────────────────────────────────────────────────

const ServicesPage = ({ setPage }) => (
  <div style={{ background: '#F5F7FA', minHeight: '100vh', paddingTop: 80 }}>
    <ServicesHero setPage={setPage} />
    <EssentialsSection setPage={setPage} />
    <EnterpriseSection setPage={setPage} />
    <ComparisonSection />
    <ServicesCTA setPage={setPage} />
  </div>
);

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

const ServicesHero = ({ setPage }) => (
  <section style={{ padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,8vw,8rem) clamp(3rem,6vh,5rem)' }}>
    <Reveal>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.8rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#2D8CFF', marginBottom: '1.25rem' }}>Layanan</p>
    </Reveal>
    <Reveal delay={80}>
      <h1 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(2.5rem,6vw,5rem)', fontWeight: 800, color: '#0D1117', letterSpacing: '-0.03em', lineHeight: 1.1, marginBottom: '1.5rem', maxWidth: 720 }}>
        Dua lini, satu misi:<br /><span style={{ color: '#2D8CFF' }}>bisnis Anda tumbuh.</span>
      </h1>
    </Reveal>
    <Reveal delay={160}>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 'clamp(1rem,1.5vw,1.2rem)', color: '#475569', lineHeight: 1.7, maxWidth: 580 }}>
        Smartek X melayani dua segmen — UMKM yang ingin adopsi AI dengan cepat dan terjangkau, serta perusahaan menengah-besar yang membutuhkan transformasi digital menyeluruh.
      </p>
    </Reveal>
  </section>
);

// ── Essentials ────────────────────────────────────────────────────────────────

const EssentialsSection = ({ setPage }) => (
  <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background: '#F4F6FA' }}>
    {/* Header */}
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: '2rem', marginBottom: '3rem' }}>
      <div>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: 'rgba(45,140,255,0.08)', border: '1px solid rgba(45,140,255,0.2)', borderRadius: 100, padding: '6px 16px', marginBottom: '1.25rem' }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#2D8CFF' }} />
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.78rem', fontWeight: 700, color: '#1A6FD4', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Smartek X Essentials</span>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <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.2 }}>
            Untuk UMKM yang siap<br />adopsi AI hari ini.
          </h2>
        </Reveal>
      </div>
      <Reveal delay={160} direction="right">
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.95rem', color: '#64748B', lineHeight: 1.7, maxWidth: 360 }}>
          Paket terstruktur, harga transparan, delivery cepat. Dimulai dari AI Audit gratis untuk menemukan titik awal yang paling tepat.
        </p>
      </Reveal>
    </div>

    {/* Cards */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: '1.25rem' }}>
      {ESSENTIALS.map((s, i) => (
        <Reveal key={s.title} delay={i * 70}>
          <div style={{
            background: i === 0 ? 'linear-gradient(135deg, #1A6FD4, #2D8CFF)' : '#fff',
            borderRadius: 20, padding: '2rem',
            border: i === 0 ? 'none' : '1px solid #F1F5F9',
            boxShadow: i === 0 ? '0 8px 32px rgba(45,140,255,0.25)' : '0 2px 12px rgba(0,0,0,0.04)',
            transition: 'transform 0.25s, box-shadow 0.25s', height: '100%', boxSizing: 'border-box',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; }}
          >
            {i === 0 && (
              <span style={{ display: 'inline-block', background: 'rgba(255,255,255,0.2)', color: '#fff', fontSize: '0.7rem', fontWeight: 700, padding: '3px 10px', borderRadius: 100, marginBottom: '1.25rem', letterSpacing: '0.05em', textTransform: 'uppercase' }}>Entry Point</span>
            )}
            <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.15rem', fontWeight: 700, color: i === 0 ? '#fff' : '#0D1117', letterSpacing: '-0.02em' }}>{s.title}</h3>
              <span style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1rem', fontWeight: 800, color: i === 0 ? '#B3D4FF' : '#2D8CFF' }}>{s.price}</span>
            </div>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.88rem', color: i === 0 ? '#D6EAFF' : '#64748B', lineHeight: 1.65, marginBottom: '1rem' }}>{s.desc}</p>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.78rem', fontWeight: 600, color: i === 0 ? '#90C0FF' : '#94A3B8' }}>⏱ {s.time}</p>
          </div>
        </Reveal>
      ))}
    </div>

    <Reveal delay={400}>
      <div style={{ marginTop: '2.5rem', textAlign: 'center' }}>
        <button onClick={() => setPage('contact')} style={{
          background: '#E8FF47', color: '#0D1117', border: 'none', borderRadius: 14,
          padding: '14px 32px', fontSize: '0.95rem', fontWeight: 600,
          cursor: 'pointer', fontFamily: 'Inter, sans-serif',
          boxShadow: '0 4px 20px rgba(45,140,255,0.3)',
        }}>Mulai dengan AI Audit Gratis</button>
      </div>
    </Reveal>
  </section>
);

// ── Enterprise ────────────────────────────────────────────────────────────────

const EnterpriseSection = ({ setPage }) => (
  <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)' }}>
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: '2rem', marginBottom: '3rem' }}>
      <div>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: 'rgba(30,27,75,0.06)', border: '1px solid rgba(30,27,75,0.12)', borderRadius: 100, padding: '6px 16px', marginBottom: '1.25rem' }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#1C2B3E' }} />
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.78rem', fontWeight: 700, color: '#1C2B3E', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Smartek X Enterprise</span>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <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.2 }}>
            Untuk transformasi digital<br />skala penuh.
          </h2>
        </Reveal>
      </div>
      <Reveal delay={160} direction="right">
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.95rem', color: '#64748B', lineHeight: 1.7, maxWidth: 360 }}>
          Dari AI consulting hingga system migration skala enterprise — dengan standar yang telah kami buktikan di Adira Finance, Jasa Marga, dan Amar Bank.
        </p>
      </Reveal>
    </div>

    <div style={{ display: 'flex', flexDirection: 'column', gap: '1px', background: '#F1F5F9', borderRadius: 20, overflow: 'hidden' }}>
      {ENTERPRISE.map((s, i) => (
        <Reveal key={s.title} delay={i * 60}>
          <div style={{
            background: '#fff', padding: 'clamp(1.5rem,3vw,2rem) clamp(1.5rem,4vw,2.5rem)',
            display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center',
            gap: '1rem', transition: 'background 0.2s',
          }}
          onMouseEnter={e => e.currentTarget.style.background = '#F4F6FA'}
          onMouseLeave={e => e.currentTarget.style.background = '#fff'}
          >
            <div style={{ flex: '1 1 300px' }}>
              <h3 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1.15rem', fontWeight: 700, color: '#0D1117', marginBottom: '0.4rem', letterSpacing: '-0.02em' }}>{s.title}</h3>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.88rem', color: '#64748B', lineHeight: 1.6 }}>{s.desc}</p>
            </div>
            <div style={{ textAlign: 'right', flexShrink: 0 }}>
              <span style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1rem', fontWeight: 700, color: '#1A6FD4' }}>{s.price}</span>
            </div>
          </div>
        </Reveal>
      ))}
    </div>
    <Reveal delay={350}>
      <div style={{ marginTop: '2.5rem', textAlign: 'center' }}>
        <button onClick={() => setPage('contact')} style={{
          background: '#0D1117', color: '#fff', border: 'none', borderRadius: 14,
          padding: '14px 32px', fontSize: '0.95rem', fontWeight: 600,
          cursor: 'pointer', fontFamily: 'Inter, sans-serif',
          transition: 'background 0.2s',
        }}
        onMouseEnter={e => e.currentTarget.style.background = '#1C2B3E'}
        onMouseLeave={e => e.currentTarget.style.background = '#0D1117'}
        >Diskusikan Kebutuhan Enterprise</button>
      </div>
    </Reveal>
  </section>
);

// ── Comparison ────────────────────────────────────────────────────────────────

const ComparisonSection = () => {
  const rows = [
    { label: 'Pendekatan', them: 'Technology-first', us: 'Business-first' },
    { label: 'Tim', them: 'Besar, banyak junior', us: 'Kecil, elite, AI-augmented' },
    { label: 'Pricing', them: 'Premium karena overhead', us: 'Kompetitif karena efisien' },
    { label: 'Output', them: 'Deliverable teknis', us: 'Business outcome' },
    { label: 'Komunikasi', them: 'Project manager sebagai proxy', us: 'Langsung ke decision-maker' },
    { label: 'Model', them: 'Vendor', us: 'Partner & Konsultan' },
  ];
  return (
    <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background: '#0D1117' }}>
      <Reveal>
        <h2 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(1.75rem,3.5vw,2.75rem)', fontWeight: 800, color: '#F8FAFC', letterSpacing: '-0.03em', lineHeight: 1.2, marginBottom: '3rem', maxWidth: 520 }}>
          Smartek X vs Vendor teknologi biasa
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderRadius: 20, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.06)' }}>
        {/* Header */}
        {['', 'Vendor Biasa', 'Smartek X'].map((h, i) => (
          <div key={i} style={{
            padding: '1rem 1.5rem', background: i === 2 ? '#1A3A5C' : '#131A24',
            fontFamily: 'Inter, sans-serif', fontSize: '0.82rem', fontWeight: 700,
            color: i === 2 ? '#B3D4FF' : '#94A3B8', letterSpacing: '0.06em', textTransform: 'uppercase',
            borderBottom: '1px solid rgba(255,255,255,0.06)',
          }}>{h}</div>
        ))}
        {rows.map((r, i) => (
          <React.Fragment key={r.label}>
            <div style={{ padding: '1rem 1.5rem', background: '#131A24', fontFamily: 'Inter, sans-serif', fontSize: '0.85rem', fontWeight: 600, color: '#94A3B8', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>{r.label}</div>
            <div style={{ padding: '1rem 1.5rem', background: '#131A24', fontFamily: 'Inter, sans-serif', fontSize: '0.85rem', color: '#64748B', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>{r.them}</div>
            <Reveal delay={i * 60}>
              <div style={{ padding: '1rem 1.5rem', background: '#1C2B3E', fontFamily: 'Inter, sans-serif', fontSize: '0.85rem', fontWeight: 600, color: '#90C0FF', borderBottom: '1px solid rgba(45,140,255,0.12)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ color: '#2D8CFF' }}>✓</span> {r.us}
              </div>
            </Reveal>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
};

// ── Services CTA ──────────────────────────────────────────────────────────────

const ServicesCTA = ({ setPage }) => (
  <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', textAlign: 'center' }}>
    <Reveal>
      <h2 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(1.75rem,4vw,3rem)', fontWeight: 800, color: '#0D1117', letterSpacing: '-0.03em', marginBottom: '1.25rem' }}>
        Tidak yakin mulai dari mana?
      </h2>
    </Reveal>
    <Reveal delay={100}>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '1.05rem', color: '#64748B', lineHeight: 1.7, maxWidth: 500, margin: '0 auto 2.5rem' }}>
        AI Audit gratis kami dirancang untuk menjawab pertanyaan itu — dalam 1–2 hari.
      </p>
    </Reveal>
    <Reveal delay={200}>
      <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 14 }}>
        <button onClick={() => setPage('contact')} style={{ background: '#E8FF47', color: '#0D1117', border: 'none', borderRadius: 14, padding: '14px 32px', fontSize: '0.95rem', fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter, sans-serif', boxShadow: '0 4px 20px rgba(45,140,255,0.3)' }}>
          Minta AI Audit Gratis
        </button>
        <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20ingin%20diskusi%20tentang%20layanan." target="_blank" rel="noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#fff', color: '#1C2B3E', border: '1.5px solid #E2E8F0', borderRadius: 14, padding: '13px 24px', fontSize: '0.95rem', fontWeight: 600, fontFamily: 'Inter, sans-serif', textDecoration: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="#25D366"><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>
          WhatsApp Sekarang
        </a>
      </div>
    </Reveal>
  </section>
);

Object.assign(window, { ServicesPage });
