// Post-PC Labs — Services Section

const ServiceCard = ({ eyebrow, title, body }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        borderTop: `4px solid ${hovered ? '#43C1C0' : '#0F0F0F'}`,
        padding: '40px 36px 48px',
        background: '#F5F4EF',
        transition: 'border-top-color 150ms',
        cursor: 'default',
        height: '100%',
        boxSizing: 'border-box',
      }}>
      {/* Teal bar — replaces ghost number */}
      <div style={{
        width: 48, height: 4,
        background: '#43C1C0',
        marginBottom: 28,
      }} />
      <div style={{
        fontFamily: "'IBM Plex Mono', monospace",
        fontSize: 13, fontWeight: 500,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: '#999', marginBottom: 16,
      }}>{eyebrow}</div>
      <h3 style={{
        fontFamily: "'Barlow Semi Condensed', sans-serif",
        fontSize: 30, fontWeight: 700,
        lineHeight: 1.1, letterSpacing: '-0.01em',
        color: '#0F0F0F', margin: '0 0 20px',
      }}>{title}</h3>
      <p style={{
        fontFamily: "'IBM Plex Sans', sans-serif",
        fontSize: 17, lineHeight: 1.7,
        color: '#555', margin: 0, fontWeight: 400,
      }}>{body}</p>
    </div>
  );
};

const Services = ({ isMobile }) => {
  const services = [
    {
      eyebrow: 'Fractional Leadership',
      title: 'Fractional Executive Leadership',
      body: 'Senior CTO, CPTO, CPO, or CDO embedded in your leadership team. Focused expertise without the $500K salary and 18-month search.',
    },
    {
      eyebrow: 'Due Diligence',
      title: 'Technology & Org Due Diligence',
      body: 'Operator-grade assessment for PE firms and acquirers. We evaluate through the lens of "can this team execute?" — not just "is the code clean?"',
    },
    {
      eyebrow: 'AI & Automation',
      title: 'AI & BPO Transformation',
      body: 'Forward-Deployed AI Engineers embed inside your org. They map every decision and exception first, then build agents that survive contact with reality.',
    },
    {
      eyebrow: 'Advisory',
      title: 'Strategic Advisory & Coaching',
      body: 'For CEOs navigating an AI strategy decision, platform rebuild, M&A integration, or reorg. On-call, direct, practitioner-led.',
    },
  ];

  return (
    <section style={{ background: '#F5F4EF', borderBottom: '2px solid #0F0F0F' }}>
      {/* Problem section */}
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '48px 20px 40px' : '80px 40px 72px',
        borderBottom: '1px solid #0F0F0F',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 24 : 80,
        alignItems: 'start',
      }}>
        <div>
          <div style={{
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: '#999', marginBottom: 24,
          }}>The Problem</div>
          <h2 style={{
            fontFamily: "'Barlow Semi Condensed', sans-serif",
            fontSize: isMobile ? 'clamp(28px, 8vw, 44px)' : 'clamp(32px, 4vw, 52px)', fontWeight: 800,
            lineHeight: 1.05, letterSpacing: '-0.02em', textTransform: 'uppercase',
            color: '#0F0F0F', margin: 0,
          }}>
            Most transformations fail.<br/>
            Not because the<br/>strategy is wrong.
          </h2>
        </div>
        <div style={{ paddingTop: isMobile ? 0 : 40 }}>
          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontSize: 18, lineHeight: 1.7, fontWeight: 400,
            color: '#333', margin: '0 0 24px',
          }}>
            Every transformation initiative we've seen fail had one thing in common: no operator accountable for bridging strategy and execution.
          </p>
          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontSize: 18, lineHeight: 1.7, fontWeight: 400,
            color: '#333', margin: 0,
          }}>
            Post-PC Labs fills that gap. We show up as operators, not advisors.
          </p>
        </div>
      </div>

      {/* Service grid / mobile list */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: isMobile ? '40px 20px 48px' : '64px 40px 80px' }}>
        <div style={{
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: '#999', marginBottom: 20,
        }}>What We Do</div>
        <h2 style={{
          fontFamily: "'Barlow Semi Condensed', sans-serif",
          fontSize: isMobile ? 'clamp(28px, 8vw, 40px)' : 'clamp(28px, 3vw, 40px)', fontWeight: 800,
          lineHeight: 1.0, letterSpacing: '-0.02em', textTransform: 'uppercase',
          color: '#0F0F0F', margin: '0 0 40px',
        }}>Four Services.</h2>

        {isMobile ? (
          /* Mobile: simple numbered text list */
          <div style={{ borderTop: '2px solid #0F0F0F' }}>
            {services.map((s, i) => (
              <div key={i} style={{
                padding: '24px 0',
                borderBottom: '1px solid #0F0F0F',
                display: 'flex', gap: 20, alignItems: 'flex-start',
              }}>
                <span style={{
                  fontFamily: "'IBM Plex Mono', monospace",
                  fontSize: 13, color: '#999',
                  flexShrink: 0,
                  paddingTop: 2,
                }}>0{i + 1}</span>
                <div>
                  <div style={{
                    fontFamily: "'Barlow Semi Condensed', sans-serif",
                    fontSize: 22, fontWeight: 700,
                    letterSpacing: '-0.01em', textTransform: 'uppercase',
                    color: '#0F0F0F', marginBottom: 6,
                  }}>{s.title}</div>
                  <div style={{
                    fontFamily: "'IBM Plex Mono', monospace",
                    fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase',
                    color: '#43C1C0',
                  }}>{s.eyebrow}</div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          /* Desktop: 2×2 card grid */
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 1, background: '#0F0F0F',
            border: '1px solid #0F0F0F',
          }}>
            {services.map((s, i) => (
              <ServiceCard key={i} {...s} />
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

Object.assign(window, { Services, ServiceCard });