// Services section, 4 service cards in 2x2 grid
const { useRef: useSvcRef, useEffect: useSvcEffect, useState: useSvcState } = React;

const SERVICES = [
  {
    id: 'agents',
    icon: 'AGENT',
    title: 'AI Agents',
    description: 'Autonomous systems that handle real work, intake, qualification, follow-up, drafting, triage. Not chatbots. Agents.',
    detail: 'Multi-step reasoning, memory, tool use, evals. Built for production reliability.',
    color: '#00D9A0',
    href: '#',
    visual: (
      <svg width="48" height="36" viewBox="0 0 48 36" fill="none">
        <circle cx="8" cy="18" r="5" stroke="#00D9A0" strokeWidth="1.5" opacity="0.8"/>
        <circle cx="24" cy="8" r="5" stroke="#00D9A0" strokeWidth="1.5" opacity="0.8"/>
        <circle cx="24" cy="28" r="5" stroke="#00D9A0" strokeWidth="1.5" opacity="0.8"/>
        <circle cx="40" cy="18" r="5" stroke="#00D9A0" strokeWidth="1.5" opacity="0.8"/>
        <line x1="13" y1="18" x2="19" y2="10" stroke="#00D9A0" strokeWidth="1" opacity="0.4"/>
        <line x1="13" y1="18" x2="19" y2="26" stroke="#00D9A0" strokeWidth="1" opacity="0.4"/>
        <line x1="29" y1="10" x2="35" y2="16" stroke="#00D9A0" strokeWidth="1" opacity="0.4"/>
        <line x1="29" y1="26" x2="35" y2="20" stroke="#00D9A0" strokeWidth="1" opacity="0.4"/>
        <circle cx="8" cy="18" r="2" fill="#00D9A0" opacity="0.9"/>
        <circle cx="40" cy="18" r="2" fill="#00D9A0" opacity="0.9"/>
      </svg>
    ),
  },
  {
    id: 'integrations',
    icon: 'INTG',
    title: 'AI Workflows',
    description: 'Connect your AI to any stack, CRMs, EHRs, MLS, accounting tools, and internal systems. End-to-end intelligent workflows.',
    detail: 'We architect the data pipelines so intelligence flows where it needs to.',
    color: '#8B5CF6',
    href: '#',
    visual: (
      <svg width="48" height="36" viewBox="0 0 48 36" fill="none">
        <rect x="2" y="8" width="12" height="8" rx="2" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.8"/>
        <rect x="2" y="20" width="12" height="8" rx="2" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.5"/>
        <rect x="34" y="8" width="12" height="8" rx="2" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.8"/>
        <rect x="34" y="20" width="12" height="8" rx="2" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.5"/>
        <rect x="18" y="13" width="12" height="10" rx="3" stroke="#8B5CF6" strokeWidth="1.5" fill="rgba(124,92,255,0.1)"/>
        <line x1="14" y1="12" x2="18" y2="16" stroke="#8B5CF6" strokeWidth="1" opacity="0.5"/>
        <line x1="14" y1="24" x2="18" y2="20" stroke="#8B5CF6" strokeWidth="1" opacity="0.5"/>
        <line x1="30" y1="16" x2="34" y2="12" stroke="#8B5CF6" strokeWidth="1" opacity="0.5"/>
        <line x1="30" y1="20" x2="34" y2="24" stroke="#8B5CF6" strokeWidth="1" opacity="0.5"/>
      </svg>
    ),
  },
  {
    id: 'automation',
    icon: 'AUTO',
    title: 'Process Automation',
    description: 'End-to-end workflows that replace hours of manual ops. n8n where it fits, custom code where it doesn\'t.',
    detail: 'No religion about the stack. We pick the tool that ships and survives.',
    color: '#F59E0B',
    href: '#',
    visual: (
      <svg width="48" height="36" viewBox="0 0 48 36" fill="none">
        <rect x="2" y="14" width="8" height="8" rx="1.5" stroke="#F59E0B" strokeWidth="1.5" opacity="0.9"/>
        <rect x="14" y="10" width="8" height="16" rx="1.5" stroke="#F59E0B" strokeWidth="1.5" opacity="0.7"/>
        <rect x="26" y="12" width="8" height="12" rx="1.5" stroke="#F59E0B" strokeWidth="1.5" opacity="0.8"/>
        <rect x="38" y="8" width="8" height="20" rx="1.5" stroke="#F59E0B" strokeWidth="1.5" opacity="0.6"/>
        <line x1="10" y1="18" x2="14" y2="18" stroke="#F59E0B" strokeWidth="1" opacity="0.5"/>
        <line x1="22" y1="18" x2="26" y2="18" stroke="#F59E0B" strokeWidth="1" opacity="0.5"/>
        <line x1="34" y1="18" x2="38" y2="18" stroke="#F59E0B" strokeWidth="1" opacity="0.5"/>
      </svg>
    ),
  },
  {
    id: 'software',
    icon: 'BSPO',
    title: 'Custom AI Software',
    description: 'Bespoke web apps and internal tools, Next.js, FastAPI, Firebase, Postgres. AI-first from day one.',
    detail: 'Not templated. Not SaaS. Yours. Owned, maintained, and compounding in value.',
    color: '#00D9A0',
    href: '#',
    visual: (
      <svg width="48" height="36" viewBox="0 0 48 36" fill="none">
        <rect x="4" y="4" width="40" height="28" rx="3" stroke="#00D9A0" strokeWidth="1.5" opacity="0.4"/>
        <line x1="4" y1="11" x2="44" y2="11" stroke="#00D9A0" strokeWidth="1" opacity="0.3"/>
        <circle cx="9" cy="7.5" r="1.5" fill="#F87171" opacity="0.7"/>
        <circle cx="14" cy="7.5" r="1.5" fill="#FBBF24" opacity="0.7"/>
        <circle cx="19" cy="7.5" r="1.5" fill="#34D399" opacity="0.7"/>
        <text x="8" y="22" fill="#00D9A0" fontSize="7" fontFamily="'JetBrains Mono',monospace" opacity="0.8">const ai =</text>
        <text x="8" y="29" fill="#8B5CF6" fontSize="7" fontFamily="'JetBrains Mono',monospace" opacity="0.6">new Agent()</text>
      </svg>
    ),
  },
];

function Services() {
  const [revealed, setRevealed] = useSvcState(false);
  const [hoveredCard, setHoveredCard] = useSvcState(null);
  const sectionRef = useSvcRef(null);

  useSvcEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) setRevealed(true);
    }, { threshold: 0.1 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section id="services" ref={sectionRef} style={{ padding: '120px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        {/* Header */}
        <div style={{
          marginBottom: 56,
          opacity: revealed ? 1 : 0,
          transform: revealed ? 'translateY(0)' : 'translateY(24px)',
          transition: 'all 0.6s var(--ease-expo)',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: 'var(--accent-mint-text)', letterSpacing: '0.12em',
            textTransform: 'uppercase', marginBottom: 12,
          }}>// SERVICES</div>
          <h2 style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 'clamp(28px, 3.8vw, 52px)',
            fontWeight: 700, letterSpacing: '-0.02em',
            lineHeight: 1.12, maxWidth: 500,
          }}>Four ways we ship.</h2>
        </div>

        {/* Card grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 16,
        }} className="svc-grid">
          {SERVICES.map((svc, i) => {
            const isHov = hoveredCard === svc.id;
            return (
              <div
                className="premium-card"
                key={svc.id}
                onMouseEnter={() => setHoveredCard(svc.id)}
                onMouseLeave={() => setHoveredCard(null)}
                style={{
                  background: isHov ? 'var(--bg-tertiary)' : 'var(--bg-secondary)',
                  border: `1px solid ${isHov ? svc.color + '40' : 'var(--border-subtle)'}`,
                  borderRadius: 12,
                  padding: '32px',
                  cursor: 'pointer',
                  boxShadow: isHov ? `0 16px 48px ${svc.color}18` : 'none',
                  opacity: revealed ? 1 : 0,
                  position: 'relative',
                  overflow: 'hidden',
                }}
              >
                {/* Delayed reveal via inline animation */}
                <div style={{
                  opacity: revealed ? 1 : 0,
                  transform: revealed ? 'translateY(0)' : 'translateY(24px)',
                  transition: `all 0.6s var(--ease-expo) ${0.1 + i * 0.1}s`,
                }}>
                  {/* Top: mono tag + visual */}
                  <div style={{
                    display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
                    marginBottom: 20,
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 10,
                      color: svc.color, letterSpacing: '0.12em', opacity: 0.8,
                    }}>// {svc.icon}</span>
                    <div style={{
                      opacity: isHov ? 1 : 0.5,
                      transition: 'opacity 0.3s ease',
                    }}>{svc.visual}</div>
                  </div>

                  {/* Title */}
                  <h3 style={{
                    fontFamily: 'Syne, sans-serif',
                    fontSize: 20, fontWeight: 700,
                    letterSpacing: '-0.01em',
                    color: 'var(--text-primary)',
                    marginBottom: 10,
                    lineHeight: 1.2,
                  }}>{svc.title}</h3>

                  {/* Description */}
                  <p style={{
                    fontSize: 14, color: 'var(--text-secondary)',
                    lineHeight: 1.6, marginBottom: 16,
                  }}>{svc.description}</p>

                  {/* Detail, visible on hover */}
                  <p style={{
                    fontSize: 13, color: 'var(--text-tertiary)',
                    lineHeight: 1.55,
                    maxHeight: isHov ? '60px' : '0px',
                    overflow: 'hidden',
                    opacity: isHov ? 1 : 0,
                    transition: 'all 0.3s ease',
                    marginBottom: isHov ? 16 : 0,
                    fontStyle: 'italic',
                  }}>{svc.detail}</p>

                  {/* Link */}
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    opacity: isHov ? 1 : 0,
                    transform: isHov ? 'translateX(0)' : 'translateX(-8px)',
                    transition: 'all 0.3s ease',
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 12,
                      color: svc.color,
                    }}>Learn more</span>
                    <span style={{ color: svc.color, fontSize: 12 }}>→</span>
                  </div>

                  {/* Bottom accent line */}
                  <div style={{
                    position: 'absolute', bottom: 0, left: 0, right: 0,
                    height: 1,
                    background: `linear-gradient(90deg, transparent, ${svc.color}40, transparent)`,
                    opacity: isHov ? 1 : 0,
                    transition: 'opacity 0.3s ease',
                  }} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 768px) {
          .svc-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
          .svc-grid > div { padding: 24px !important; }
          .svc-detail { max-height: 80px !important; opacity: 1 !important; margin-bottom: 12px !important; }
          .svc-link { opacity: 1 !important; transform: translateX(0) !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Services });