// Post-PC Labs — Hero (Brutalist Light Mode)

const Hero = ({ onCTA, isMobile }) => {
  return (
    <section style={{
      background: '#F5F4EF',
      paddingTop: 60, // offset for fixed nav
      borderBottom: '2px solid #0F0F0F',
    }}>
      {/* Top bar — eyebrow */}
      <div style={{
        borderBottom: '1px solid #0F0F0F',
        padding: isMobile ? '12px 20px' : '12px 40px',
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: '#555',
        }}>Strategic &amp; Implementation Consultancy</span>
        {!isMobile && (
          <span style={{
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: 13, letterSpacing: '0.1em', color: '#999',
          }}>Est. 2012 — Post-PC Labs, LLC</span>
        )}
      </div>

      {/* Main hero content */}
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '48px 20px 52px' : '72px 40px 64px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 380px',
        gap: isMobile ? 0 : 64,
        alignItems: 'end',
      }}>
        <div>
          <h1 style={{
            fontFamily: "'Barlow Semi Condensed', 'Helvetica Neue', sans-serif",
            fontSize: isMobile ? 'clamp(34px, 11vw, 80px)' : 'clamp(60px, 8vw, 104px)',
            fontWeight: 800, lineHeight: 0.95,
            letterSpacing: '-0.03em',
            color: '#0F0F0F',
            margin: isMobile ? '0 0 32px' : '0 0 40px',
            textTransform: 'uppercase',
          }}>
            Enterprise<br/>
            Transformation.<br/>
            <span style={{ color: '#43C1C0' }}>Actually<br/>Delivered.</span>
          </h1>

          {/* CTAs */}
          <div style={{ display: 'flex', gap: 0 }}>
            <a href="https://linkedin.com/in/hanshenyuan" target="_blank" rel="noopener"
              style={{
                fontFamily: "'IBM Plex Sans', sans-serif",
                fontSize: 14, fontWeight: 700,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                padding: '14px 32px',
                background: '#0F0F0F', color: '#F5F4EF',
                textDecoration: 'none', whiteSpace: 'nowrap',
                border: '2px solid #0F0F0F',
                transition: 'background 150ms, color 150ms',
              }}
              onMouseEnter={e => { e.currentTarget.style.background='#43C1C0'; e.currentTarget.style.color='#0F0F0F'; e.currentTarget.style.borderColor='#43C1C0'; }}
              onMouseLeave={e => { e.currentTarget.style.background='#0F0F0F'; e.currentTarget.style.color='#F5F4EF'; e.currentTarget.style.borderColor='#0F0F0F'; }}
            >Talk to Us →</a>
            {!isMobile && (
              <a href="#" onClick={e => { e.preventDefault(); onCTA && onCTA('services'); }}
                style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: 14, fontWeight: 600,
                  letterSpacing: '0.1em', textTransform: 'uppercase',
                  padding: '14px 28px',
                  background: 'transparent', color: '#0F0F0F',
                  textDecoration: 'none', whiteSpace: 'nowrap',
                  border: '2px solid #0F0F0F',
                  borderLeft: 'none',
                  transition: 'background 150ms',
                }}
                onMouseEnter={e => { e.currentTarget.style.background='#EBEBEA'; }}
                onMouseLeave={e => { e.currentTarget.style.background='transparent'; }}
              >View Services →</a>
            )}
          </div>
        </div>

        {/* Right column — hidden on mobile */}
        {!isMobile && (
          <div style={{
            borderLeft: '2px solid #0F0F0F',
            paddingLeft: 40,
            paddingBottom: 4,
          }}>
            <p style={{
              fontFamily: "'IBM Plex Sans', sans-serif",
              fontSize: 18, lineHeight: 1.65, fontWeight: 400,
              color: '#333', margin: '0 0 32px',
            }}>
              We partner with C-suite leaders to transform operations — combining fractional executive leadership, AI-powered automation, and hands-on implementation.
            </p>
            <p style={{
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 17, lineHeight: 1.6, fontWeight: 500,
              color: '#555', margin: 0,
            }}>
              No slide decks.<br/>
              No staffing firms.<br/>
              No generic platforms.<br/>
              Operators only.
            </p>
          </div>
        )}
      </div>

    </section>
  );
};

Object.assign(window, { Hero });