// Post-PC Labs — About / Why / Credentials

const About = ({ isMobile }) => {
  const credentials = [
    { company: 'Netflix',       logo: 'assets/logos/netflix.svg',    role: 'Director of Engineering, iOS & Android',               logoH: 30 },
    { company: 'eBay',          logo: 'assets/logos/ebay.svg',       role: 'Sr. Director of Engineering, Mobile & Innovation',      logoH: 44 },
    { company: 'Upwork',        logo: 'assets/logos/upwork.svg',     role: 'SVP Engineering — 300+ engineers, led through IPO',     logoH: 44 },
    { company: 'Recharge',      logo: 'assets/logos/recharge.svg',   role: 'CPTO — Platform processing $10B+ GMV annually',         logoH: 30 },
    { company: 'Outdoorsy',     logo: 'assets/logos/outdoorsy.svg',  role: 'CPTO — Marketplace, insurance & physical properties',   logoH: 30 },
    { company: 'AKF Partners',  logo: 'assets/logos/akf.png',        role: 'Associate Partner — 50+ due diligence transactions',    logoH: 30 },
  ];

  const differentiators = [
    { label: 'Operator Credibility',     body: 'Our leadership has held the SVP and C-suite seat at companies from pre-IPO startups to large-scale public enterprises. We know what good looks like at every stage.' },
    { label: 'Forward-Deployed Model',   body: 'FDAEs embed inside client organizations — alongside the AP clerk, the SRE on call at 3 AM — before a single line of agent code is written.' },
    { label: 'Institutional Knowledge',  body: 'We map every decision point, exception, and workaround first. The result is automation that works in production, not just in demos.' },
    { label: 'Outcomes, Not Slides',     body: 'Not a staffing firm. Not a report-delivery shop. Not a software vendor. We are accountable for measurable results.' },
  ];

  return (
    <>
      {/* Differentiators grid — hidden on mobile */}
      {!isMobile && (
        <section style={{
          background: '#EBEBEA',
          borderBottom: '2px solid #0F0F0F',
          paddingBottom: 48,
        }}>
          <div style={{ maxWidth: 1240, margin: '0 auto', padding: '80px 40px 0' }}>
            <div style={{
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: '#999', marginBottom: 24,
            }}>Why Post-PC Labs</div>
            <h2 style={{
              fontFamily: "'Barlow Semi Condensed', sans-serif",
              fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 800,
              lineHeight: 1.0, letterSpacing: '-0.03em', textTransform: 'uppercase',
              color: '#0F0F0F', margin: 0,
            }}>The Operating Partner<br/>for the AI Era.</h2>
          </div>

          <div style={{
            maxWidth: 1240, margin: '48px auto 0',
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
            borderTop: '2px solid #0F0F0F',
          }}>
            {differentiators.map((d, i) => (
              <div key={i} style={{
                padding: '36px 40px',
                borderBottom: i < 2 ? '1px solid #0F0F0F' : 'none',
                borderRight: i % 2 === 0 ? '1px solid #0F0F0F' : 'none',
              }}>
                <div style={{
                  fontFamily: "'Barlow Semi Condensed', sans-serif",
                  fontSize: 20, fontWeight: 700,
                  letterSpacing: '0.02em', textTransform: 'uppercase',
                  color: '#0F0F0F', marginBottom: 14,
                }}>{d.label}</div>
                <p style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: 16, lineHeight: 1.7, fontWeight: 400,
                  color: '#555', margin: 0,
                }}>{d.body}</p>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Credentials */}
      <section style={{
        background: '#F5F4EF',
        borderBottom: '2px solid #0F0F0F',
        padding: isMobile ? '48px 0' : '80px 0',
      }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px' }}>
          <div style={{
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: '#999', marginBottom: 24,
          }}>Leadership Background</div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
            gap: isMobile ? 24 : 60,
            alignItems: 'end', marginBottom: isMobile ? 32 : 48,
          }}>
            <h2 style={{
              fontFamily: "'Barlow Semi Condensed', sans-serif",
              fontSize: isMobile ? 'clamp(28px, 8vw, 44px)' : 'clamp(30px, 3.5vw, 46px)', fontWeight: 800,
              lineHeight: 1.05, letterSpacing: '-0.02em', textTransform: 'uppercase',
              color: '#0F0F0F', margin: 0,
            }}>25+ years building<br/>technology organizations.</h2>
            <p style={{
              fontFamily: "'IBM Plex Sans', sans-serif",
              fontSize: 16, lineHeight: 1.7, fontWeight: 400,
              color: '#555', margin: 0,
            }}>From pre-IPO startups to $10B+ platforms. We have personally conducted due diligence on 50+ transactions. Operator-first, not analyst-first.</p>
          </div>

          {/* Credential grid — 3-col desktop, 2-col mobile */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
            border: '2px solid #0F0F0F',
          }}>
            {credentials.map((c, i) => {
              const cols = isMobile ? 2 : 3;
              const isLastRow = isMobile
                ? i >= credentials.length - (credentials.length % 2 === 0 ? 2 : 1)
                : i >= 3;
              const isRightEdge = (i + 1) % cols === 0;
              return (
                <div key={i} style={{
                  padding: isMobile ? '20px 16px' : '28px 28px',
                  borderRight: !isRightEdge ? '1px solid #0F0F0F' : 'none',
                  borderBottom: !isLastRow ? '1px solid #0F0F0F' : 'none',
                  transition: 'background 150ms',
                }}
                onMouseEnter={e => e.currentTarget.style.background='#EBEBEA'}
                onMouseLeave={e => e.currentTarget.style.background='transparent'}
                >
                  <div style={{ height: isMobile ? 40 : 48, display: 'flex', alignItems: 'center', marginBottom: 12 }}>
                    <img
                      src={c.logo}
                      alt={c.company}
                      style={{
                        height: isMobile ? Math.round(c.logoH * 0.85) : c.logoH,
                        maxWidth: isMobile ? 110 : 140,
                        objectFit: 'contain',
                        filter: 'grayscale(1) brightness(0) opacity(0.6)',
                      }}
                    />
                  </div>
                  <div style={{
                    fontFamily: "'IBM Plex Sans', sans-serif",
                    fontSize: isMobile ? 14 : 15, lineHeight: 1.55,
                    color: '#555', fontWeight: 500,
                  }}>{c.role}</div>
                </div>
              );
            })}
          </div>

          {/* Pull quote — hidden on mobile */}
          {!isMobile && (
            <div style={{
              marginTop: 56,
              borderLeft: '4px solid #0F0F0F',
              paddingLeft: 32,
            }}>
              <blockquote style={{
                fontFamily: "'Barlow Semi Condensed', sans-serif",
                fontSize: 'clamp(22px, 2.5vw, 30px)', fontWeight: 500,
                lineHeight: 1.4, letterSpacing: '-0.01em',
                color: '#0F0F0F', margin: 0,
              }}>
                &#8220;Fractional doesn&#8217;t mean part-time commitment. It means focused expertise, without the $500K salary and 18-month search.&#8221;
              </blockquote>
            </div>
          )}
        </div>
      </section>
    </>
  );
};

Object.assign(window, { About });