// ── Hooks ─────────────────────────────────────────────────────────────────────

const useScrollReveal = (threshold = 0.12) => {
  const [revealed, setRevealed] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setRevealed(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, revealed];
};

const useCountUp = (target, duration = 2000, start = false) => {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    if (!start) return;
    let t0 = null;
    const tick = ts => {
      if (!t0) t0 = ts;
      const p = Math.min((ts - t0) / duration, 1);
      const ease = 1 - Math.pow(1 - p, 4);
      setCount(Math.floor(ease * target));
      if (p < 1) requestAnimationFrame(tick);
      else setCount(target);
    };
    requestAnimationFrame(tick);
  }, [start, target, duration]);
  return count;
};

// ── Reveal wrapper ─────────────────────────────────────────────────────────────

const Reveal = ({ children, delay = 0, direction = 'up', className = '', style = {} }) => {
  const [ref, visible] = useScrollReveal();
  const transforms = { up: 'translateY(24px)', down: 'translateY(-24px)', left: 'translateX(-28px)', right: 'translateX(28px)' };
  return (
    <div ref={ref} className={className} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'none' : (transforms[direction] || transforms.up),
      transition: `opacity 0.8s cubic-bezier(.16,1,.3,1) ${delay}ms, transform 0.8s cubic-bezier(.16,1,.3,1) ${delay}ms`,
      willChange: 'opacity, transform',
      ...style
    }}>
      {children}
    </div>
  );
};

// ── Stat card with countup ─────────────────────────────────────────────────────

const StatCard = ({ value, suffix = '', label, delay = 0 }) => {
  const [ref, visible] = useScrollReveal();
  const n = parseInt(value);
  const count = useCountUp(n, 1800, visible);
  return (
    <div ref={ref} style={{ opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(24px)', transition: `all 0.7s cubic-bezier(.16,1,.3,1) ${delay}ms` }}>
      <div style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(2.5rem, 5vw, 4rem)', fontWeight: 700, color: '#1C2B3E', lineHeight: 1 }}>
        {count}{suffix}
      </div>
      <div style={{ fontSize: '0.9rem', color: '#64748B', marginTop: 8, fontWeight: 500 }}>{label}</div>
    </div>
  );
};

// ── Data ──────────────────────────────────────────────────────────────────────

const PORTFOLIO = [
  {
    id: 'travoy', client: 'Jasa Marga', project: 'Travoy Mudik App',
    category: 'Mobile · IoT · Big Data',
    desc: 'Aplikasi iOS & Android untuk jutaan pengguna tol nasional, terintegrasi IoT dan Big Data real-time.',
    metric: '5.000+', metricLabel: 'Users aktif dalam 3 minggu',
    tags: ['Android', 'iOS', 'IoT', 'Big Data'], accent: '#1A6FD4',
  },
  {
    id: 'dicicilaja', client: 'Adira Finance', project: 'dicicilaja',
    category: 'Fintech · Microservices · Mobile',
    desc: 'Rebuild total monolith ke microservices. 25 screens mobile, 17 modul web — ekosistem digital penuh.',
    metric: '25+', metricLabel: 'Screens dibangun ulang',
    tags: ['Microservices', 'Web', 'Android', 'iOS'], accent: '#0369A1',
  },
  {
    id: 'sarawak', client: 'Sarawak Product Pavilion', project: 'E-Commerce Platform',
    category: 'International · E-Commerce · Voice AI',
    desc: 'Platform e-commerce lengkap dengan microservices, Big Data, IoT, dan Voice Assistant. Proyek Malaysia.',
    metric: 'MY', metricLabel: 'International project',
    tags: ['E-Commerce', 'IoT', 'Voice AI', 'Big Data'], accent: '#0D9488',
  },
  {
    id: 'ombudsman', client: 'Ombudsman RI', project: 'Portal Layanan Publik',
    category: 'Government · UI/UX · Web',
    desc: 'Redesign sistem layanan publik pemerintah yang melayani jutaan warga Indonesia setiap tahunnya.',
    metric: 'Gov', metricLabel: 'Sektor pemerintah',
    tags: ['UI/UX', 'Web', 'Government'], accent: '#7C3AED',
  },
  {
    id: 'amarbank', client: 'Amar Bank', project: 'Analytics System',
    category: 'Perbankan · Data Analytics',
    desc: 'Sistem SPSS untuk procurement dan data analytics perbankan digital.',
    metric: 'Bank', metricLabel: 'Sektor perbankan',
    tags: ['Analytics', 'SPSS', 'Perbankan'], accent: '#B45309',
  },
  {
    id: 'mhucow', client: 'MHU Coal', project: 'Corporate Secretary System',
    category: 'Enterprise · Web · CMS',
    desc: 'Company profile dan Corporate Secretary system termasuk news publishing dan komunikasi korporat.',
    metric: 'Tbk', metricLabel: 'Perusahaan publik',
    tags: ['Web', 'CMS', 'Enterprise'], accent: '#374151',
  },
];

const CLIENTS = [
  'Jasa Marga', 'Adira Finance', 'Amar Bank',
  'Sarawak Product Pavilion', 'Yummy Corp', 'MHU Coal',
  'Ombudsman RI', 'Universitas Jenderal Ahmad Yani',
];

const ESSENTIALS = [
  { title: 'AI Audit', price: 'GRATIS', time: '1–2 hari', desc: 'Analisa proses bisnis, identifikasi 3 area yang bisa di-AI-kan, laporan rekomendasi.' },
  { title: 'Starter Automation', price: 'Rp 5–15 jt', time: '1–2 minggu', desc: 'Otomasi 1 proses bisnis spesifik — laporan, invoice, follow-up, notifikasi.' },
  { title: 'AI Assistant', price: 'Rp 10–25 jt', time: '2–3 minggu', desc: 'Custom chatbot/assistant untuk operasional internal atau customer service.' },
  { title: 'Business Dashboard', price: 'Rp 15–30 jt', time: '2–4 minggu', desc: 'Dashboard analytics real-time dari data bisnis yang sudah ada.' },
  { title: 'Digital Presence Pro', price: 'Rp 8–20 jt', time: '2–3 minggu', desc: 'Website profesional + SEO dasar + integrasi WhatsApp.' },
];

const ENTERPRISE = [
  { title: 'AI Transformation Consulting', price: 'Rp 50–200 jt', desc: 'Assessment menyeluruh, roadmap transformasi AI, pendampingan implementasi.' },
  { title: 'Custom Software Development', price: 'Rp 75–500 jt', desc: 'Web, mobile, sistem enterprise — metodologi Waterfall atau Agile.' },
  { title: 'System Integration & Migration', price: 'Rp 100–400 jt', desc: 'Monolith → Microservices, legacy migration, API integration.' },
  { title: 'AI as a Service', price: 'Rp 50–300 jt', desc: 'Implementasi AI untuk proses spesifik: dokumen, predictive analytics, automation.' },
  { title: 'Technical Managed Service', price: 'Rp 10–50 jt/bln', desc: 'Ongoing support, maintenance, dan pengembangan sistem yang sudah berjalan.' },
];

// ── Export ─────────────────────────────────────────────────────────────────────

Object.assign(window, {
  useScrollReveal, useCountUp, Reveal, StatCard,
  PORTFOLIO, CLIENTS, ESSENTIALS, ENTERPRISE
});