window.Services = function Services({ tweaks }) {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const items = [
    {
      tag: 'Tools',
      t: 'No new SaaS',
      d: 'We deploy agents into the tools you already use — Shopify, Figma, Workspace, your IDE. No new dashboard to log into.',
    },
    {
      tag: 'Timeline',
      t: 'Weeks, not quarters',
      d: 'Production-grade agentic automation in the time most agencies take to scope it. A working version in week one.',
    },
    {
      tag: 'Ownership',
      t: 'Owners, not vendors',
      d: "We leave behind runbooks, model configs, and a teammate trained to operate the system. We're not trying to stay forever.",
    },
  ];

  const sectionPadding = isMobile ? '64px 16px' : isTablet ? '80px 32px' : '96px 48px';
  const introMargin = isMobile ? 40 : 56;
  const h2Size = isMobile ? 32 : isTablet ? 38 : 44;
  const gridCols = isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1fr 1fr 1fr';
  const gridGap = isMobile ? 16 : 24;
  const cardH3Size = isMobile ? 20 : 24;

  return (
    <section id="services" style={{ padding: sectionPadding, maxWidth: 1120, margin: '0 auto' }}>
      <div style={{ maxWidth: 640, marginBottom: introMargin }}>
        <div style={{ font: '600 12px/1.4 Inter, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--thread-deep)', marginBottom: 16 }}>How we work</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: h2Size, lineHeight: 1.1, letterSpacing: '-0.015em', color: 'var(--ink)' }}>
          Three principles. Earned the hard way.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: gridCols, gap: gridGap }}>
        {items.map((it, i) => (
          <FadeInCard key={i} delay={i * 0.1}>
            <div className={'card' + (i === 1 ? ' card--featured' : '')} style={{ height: '100%' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <div style={{ font: '400 11px "JetBrains Mono", monospace', color: 'var(--slate)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  0{i + 1} · {it.tag}
                </div>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: cardH3Size, lineHeight: 1.2, letterSpacing: '-0.01em', color: 'var(--ink)', margin: '0 0 12px' }}>{it.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--graphite)' }}>{it.d}</p>
            </div>
          </FadeInCard>
        ))}
      </div>
    </section>
  );
};

window.FadeInCard = function FadeInCard({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); observer.disconnect(); } },
      { threshold: 0.15 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(16px)',
      transition: `opacity 0.5s ${delay}s var(--ease), transform 0.5s ${delay}s var(--ease)`,
    }}>
      {children}
    </div>
  );
};