// About — the "real person" moment. Reverse of the hero: B&W headshot on the LEFT,
// narrative on the RIGHT. Photo (original, rounded corners) fades+scales into focus;
// headline + paragraphs stagger in on scroll.
function useRevealAb(options) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (!('IntersectionObserver' in window)) { setShown(true); return; }
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setShown(true); io.disconnect(); }
    }, { rootMargin: '0px 0px -12% 0px', threshold: 0.14, ...(options || {}) });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, shown];
}

function RevealAb({ as = 'div', delay = 0, className = '', style, children, ...rest }) {
  const [ref, shown] = useRevealAb();
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={`reveal${shown ? ' is-visible' : ''}${className ? ' ' + className : ''}`}
      style={{ transitionDelay: (shown ? delay : 0) + 'ms', ...style }}
      {...rest}
    >{children}</Tag>
  );
}

function About() {
  const [photoRef, photoShown] = useRevealAb();
  const strong = { color: '#f2f2f0', fontWeight: 600 };
  return (
    <section id="about" style={{ padding: 'clamp(72px, 11vh, 130px) 0' }}>
      <div className="container">
        <RevealAb style={{ marginBottom: 'clamp(40px, 5.5vh, 64px)' }}>
          <span className="rule-label-left">About</span>
        </RevealAb>
        <div className="about-grid">

          <div
            ref={photoRef}
            className={`about-photo${photoShown ? ' is-visible' : ''}`}
          >
            <img src="assets/headshot.jpg" alt="Matthew T. Grote" />
          </div>

          <div className="about-copy">
            <RevealAb as="h2" delay={90} style={{
              margin: 0, marginBottom: 'clamp(28px, 4vh, 40px)',
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 'clamp(1.85rem, 3vw, 2.6rem)', lineHeight: 1.22, letterSpacing: '-0.01em',
              color: 'var(--color-ink)', textWrap: 'balance',
            }}>
              I've driven AI transformation inside some of the most complex organizations in the world. <span style={{ color: 'var(--accent-strong)' }}>Now I'll do it for you.</span>
            </RevealAb>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(22px, 2.8vh, 30px)' }}>
              <RevealAb as="p" delay={160} className="about-para">
                As <strong style={strong}>Head of AI Strategy at Siemens Energy Grid Technologies</strong> — a €14B+ company with over 22,000 people — I designed and led the AI transformation program. A complete operating system for how an entire organization adopts, builds, and deploys AI.
              </RevealAb>
              <RevealAb as="p" delay={240} className="about-para">
                Before Siemens, I was a research lab director and transformation strategist at <strong style={strong}>The MITRE Corporation</strong> — the federally funded R&amp;D organization behind some of the most critical technology and infrastructure systems in the country.
              </RevealAb>
              <RevealAb as="p" delay={320} className="about-para">
                Now I apply everything I built at that scale directly to business owners, executives, and private equity firms who need the same caliber of thinking.
              </RevealAb>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
window.About = About;