const Services = () => {
  const goToService = (id) => { window.location.href = '/services/' + id; };
  const [hovered, setHovered] = React.useState(null);
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const rawServices = window.zData ? window.zData('services') : null;
  const services = rawServices || [
    {
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="2" y="2" width="9" height="9" rx="2" stroke="#2563eb" strokeWidth="1.7"/>
          <rect x="15" y="2" width="9" height="9" rx="2" stroke="#2563eb" strokeWidth="1.7"/>
          <rect x="2" y="15" width="9" height="9" rx="2" stroke="#2563eb" strokeWidth="1.7"/>
          <path d="M15 19.5H24M19.5 15V24" stroke="#2563eb" strokeWidth="1.7" strokeLinecap="round"/>
        </svg>
      ),
      id: 'custom-software',
      title: 'Custom Software Development',
      desc: 'End-to-end software products built to your exact specifications — web apps, APIs, enterprise platforms, and everything in between.',
      tags: ['Web Apps', 'APIs', 'Enterprise'],
    },
    {
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="13" cy="13" r="4" stroke="#2563eb" strokeWidth="1.7"/>
          <path d="M13 2V6M13 20V24M2 13H6M20 13H24" stroke="#2563eb" strokeWidth="1.7" strokeLinecap="round"/>
          <path d="M5.22 5.22L8.05 8.05M17.95 17.95L20.78 20.78M5.22 20.78L8.05 17.95M17.95 8.05L20.78 5.22" stroke="#2563eb" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
      id: 'ai-ml',
      title: 'AI & Machine Learning',
      desc: 'Intelligent systems that learn, predict, and automate — from NLP models and computer vision to custom recommendation engines.',
      tags: ['NLP', 'Computer Vision', 'Automation'],
    },
    {
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="2" y="5" width="22" height="16" rx="3" stroke="#2563eb" strokeWidth="1.7"/>
          <path d="M7 10.5H19" stroke="#2563eb" strokeWidth="1.7" strokeLinecap="round"/>
          <path d="M7 14H14" stroke="#2563eb" strokeWidth="1.7" strokeLinecap="round"/>
          <circle cx="20" cy="10.5" r="1.2" fill="#2563eb"/>
        </svg>
      ),
      id: 'saas-platform',
      title: 'SaaS Platform Development',
      desc: 'Multi-tenant, scalable SaaS products built with robust architecture — subscription management, onboarding flows, and analytics built in.',
      tags: ['Multi-tenant', 'Subscriptions', 'Analytics'],
    },
    {
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13 3L21 7.5V13C21 17.5 17.5 21.5 13 23C8.5 21.5 5 17.5 5 13V7.5L13 3Z" stroke="#2563eb" strokeWidth="1.7" strokeLinejoin="round"/>
          <path d="M9.5 13L11.5 15L16.5 10" stroke="#2563eb" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      id: 'blockchain',
      title: 'Blockchain Integration',
      desc: 'Smart contracts, DeFi platforms, NFT systems, and enterprise blockchain solutions on Ethereum, Solana, and beyond.',
      tags: ['Smart Contracts', 'DeFi', 'Web3'],
    },
    {
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 20L9 13L13.5 17L19 9L23 12" stroke="#2563eb" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="23" cy="9" r="2" fill="#2563eb"/>
          <path d="M3 23H23" stroke="#2563eb" strokeWidth="1.2" strokeLinecap="round" opacity="0.35"/>
        </svg>
      ),
      id: 'predictive-analytics',
      title: 'Predictive Analytics',
      desc: 'Turn your business data into foresight — churn prediction, demand forecasting, anomaly detection, and executive dashboards.',
      tags: ['Forecasting', 'Dashboards', 'Data Science'],
    },
    {
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 18C4.5 18 2.5 16 2.5 13.5C2.5 11.3 4 9.5 6.1 9.1C6 8.7 6 8.3 6 8C6 5.2 8.2 3 11 3C13 3 14.8 4.1 15.7 5.7C16.2 5.4 16.8 5.2 17.5 5.2C19.7 5.2 21.5 7 21.5 9.2V9.5C23 10.3 24 11.8 24 13.5C24 16 22 18 19.5 18H7Z" stroke="#2563eb" strokeWidth="1.7" strokeLinejoin="round"/>
          <path d="M10 22L13 19L16 22" stroke="#2563eb" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M13 19V24" stroke="#2563eb" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ),
      id: 'cloud-infrastructure',
      title: 'Cloud Infrastructure',
      desc: 'Cloud-native architectures on AWS, GCP, and Azure — CI/CD pipelines, microservices, DevOps, and auto-scaling systems.',
      tags: ['AWS', 'GCP', 'DevOps'],
    },
  ];

  const servicesList = rawServices || services;

  return (
    <section id="services" data-screen-label="02 Services" ref={ref} style={{ padding: '100px 0', background: '#f8fafc' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 60px', opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(28px)', transition: 'all 0.6s ease' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'rgba(37,99,235,0.07)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 18 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: '#1d4ed8', letterSpacing: '0.07em' }}>OUR SERVICES</span>
          </div>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 4vw, 46px)', fontWeight: 700, color: '#0f172a', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 14px' }}>
            Technology built for real business outcomes
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#64748b', lineHeight: 1.7, margin: 0 }}>
            We don't just write code — we engineer complete solutions across the full technology stack, from architecture through deployment.
          </p>
        </div>

        {/* Grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 20 }}>
          {servicesList.map((s, i) => (
            <div key={s.id || i}
              onClick={() => { if (s.id) goToService(s.id); }}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{ cursor: 'pointer',
                padding: '28px 30px', borderRadius: 14,
                background: '#fff',
                border: `1.5px solid ${hovered === i ? '#2563eb' : 'rgba(0,0,0,0.07)'}`,
                transition: 'all 0.25s ease',
                boxShadow: hovered === i ? '0 12px 40px rgba(29,78,216,0.12)' : '0 2px 8px rgba(0,0,0,0.04)',
                transform: hovered === i ? 'translateY(-3px)' : 'translateY(0)',
                opacity: visible ? 1 : 0,
                transitionDelay: visible ? `${i * 0.06}s` : '0s',
              }}>
              <div style={{
                width: 52, height: 52, borderRadius: 13,
                background: hovered === i ? 'rgba(37,99,235,0.1)' : '#f1f5f9',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18, transition: 'background 0.25s',
                border: hovered === i ? '1.5px solid rgba(37,99,235,0.2)' : '1.5px solid transparent',
              }}>
                {s.icon}
              </div>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 17, fontWeight: 600, color: '#0f172a', margin: '0 0 10px', letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, color: '#64748b', lineHeight: 1.65, margin: '0 0 18px' }}>{s.desc}</p>
              <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginBottom: 16 }}>
                {s.tags.map(t => (
                  <span key={t} style={{ padding: '3px 10px', borderRadius: 100, background: 'rgba(37,99,235,0.06)', border: '1px solid rgba(37,99,235,0.15)', fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#2563eb', fontWeight: 500 }}>{t}</span>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5, paddingTop: 14, borderTop: '1px solid var(--border2, rgba(0,0,0,0.06))' }}>
                <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, color: hovered === i ? '#1d4ed8' : '#64748b', transition: 'color 0.2s' }}>View Details</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ transition: 'transform 0.2s', transform: hovered === i ? 'translateX(3px)' : 'translateX(0)' }}><path d="M3 7H11M8 4L11 7L8 10" stroke={hovered === i ? '#1d4ed8' : '#94a3b8'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Services });