// Services — advisory service areas. Minimal two-column disclosure grid: each item
// shows name + plain-language sub-label; click expands the full description + outcome
// line. One open at a time. Staggered grid reveal row-by-row on scroll.
function useRevealSvc(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 -10% 0px', threshold: 0.12, ...(options || {}) });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, shown];
}

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

const SVC_AREAS = [
  {
    name: 'AI-Enabled Operating Models',
    sub: 'What stays human. What gets automated. What gets augmented.',
    desc: "Determine what stays human, what gets augmented, and what gets fully automated. I map your organization's capabilities, functions, and processes to design an operating model that puts AI where it creates the most value — with human oversight where it matters most.",
    outcome: "You walk away knowing exactly where AI fits in your operations — and where it doesn't.",
  },
  {
    name: 'AI Transformation Strategy',
    sub: 'A clear plan tied to measurable business outcomes.',
    desc: 'Identify the capabilities driving your most critical business outcomes and build an AI strategy that targets measurable KPI improvements — not generic AI adoption. This includes platform selection, data infrastructure requirements, and the organizational change management needed to execute.',
    outcome: 'You get a strategy tied to real numbers — not a slide deck full of buzzwords.',
  },
  {
    name: 'AI-Enabled Workforce Planning',
    sub: 'How your roles evolve and who builds your AI solutions.',
    desc: 'Your roles are going to change. The question is whether you design that shift or react to it. I help you plan how existing roles evolve, what new roles you\u2019ll need, and how to answer the most critical build decision in AI transformation: who actually develops and maintains your AI solutions.',
    outcome: "You'll know exactly how your team needs to change — and have a plan for making it happen.",
  },
  {
    name: 'AI-Enabled Process Design Workshops',
    sub: 'Hands-on mapping of where AI fits in your critical workflows.',
    desc: 'Hands-on, end-to-end process mapping of your mission-critical workflows. I identify bottlenecks and high-impact entry points for AI automation — and you walk out with a clear path to a fully autonomous, AI-driven process.',
    outcome: 'You leave with a roadmap from current-state to fully AI-driven process.',
  },
  {
    name: 'AI Citizen Developer Programs',
    sub: 'Build an internal community of AI builders inside your organization.',
    desc: 'Build an internal community of AI builders inside your organization — based on the operating model I designed and led at a Fortune 500 engineering and manufacturing company, where I grew one of the first AI Citizen Developer communities in the world to over 600 members who developed 115+ agentic AI solutions.',
    outcome: 'Your team stops waiting for IT and starts building AI solutions themselves.',
  },
  {
    name: 'AI Readiness & Value Creation for Private Equity',
    sub: 'Deploy AI across your portfolio for measurable value creation.',
    desc: 'Evaluate AI readiness across your portfolio companies, identify the highest-leverage transformation opportunities, and build an implementation roadmap that drives measurable value creation. I help PE firms turn AI from a due diligence checkbox into an operational advantage across the portfolio.',
    outcome: "You'll know exactly where AI creates value in your portfolio — and have a plan to capture it.",
  },
];

function SvcItem({ area, index, open, onToggle }) {
  const [ref, shown] = useRevealSvc();
  // row-by-row stagger: top row first (L→R), then next rows
  const row = Math.floor(index / 2);
  const col = index % 2;
  const delay = row * 170 + col * 100;
  const panelId = `svc-panel-${index}`;
  return (
    <div
      ref={ref}
      className={`svc-item reveal${shown ? ' is-visible' : ''}${open ? ' is-open' : ''}`}
      style={{ transitionDelay: (shown ? delay : 0) + 'ms' }}
    >
      <button
        type="button"
        className="svc-trigger"
        aria-expanded={open}
        aria-controls={panelId}
        onClick={onToggle}
      >
        <span className="svc-heading">
          <span className="svc-name">{area.name}</span>
          <span className="svc-sublabel">{area.sub}</span>
        </span>
        <span className="svc-toggle" aria-hidden="true"></span>
      </button>
      <div className="svc-disc" id={panelId} role="region">
        <div className="svc-disc-inner">
          <div className="svc-disc-content">
            <p className="svc-desc">{area.desc}</p>
            <p className="svc-outcome">{area.outcome}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Services() {
  const [openIdx, setOpenIdx] = React.useState(null);
  return (
    <section id="services" style={{
      padding: 'clamp(56px, 8vh, 100px) 0 clamp(80px, 12vh, 130px)',
    }}>
      <div className="container" style={{ display: 'flex', flexDirection: 'column' }}>

        <RevealSvc style={{ marginBottom: 'clamp(28px, 4vh, 40px)' }}>
          <span className="rule-label-left">Advisory service areas</span>
        </RevealSvc>
        <RevealSvc as="h2" delay={90} style={{
          margin: 0, marginBottom: 'clamp(20px, 2.6vh, 28px)',
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(2.2rem, 4vw, 3.2rem)', lineHeight: 1.12, letterSpacing: '-0.015em',
          color: 'var(--color-ink)',
        }}>
          Where I come in.
        </RevealSvc>
        <RevealSvc as="p" delay={150} style={{
          margin: 0, marginBottom: 'clamp(40px, 6vh, 64px)',
          fontFamily: 'var(--font-body)', fontWeight: 400,
          fontSize: 'clamp(1.05rem, 1.3vw, 1.22rem)', lineHeight: 1.62,
          color: 'var(--color-ink-muted)', maxWidth: 620, textWrap: 'pretty',
        }}>
          The challenges above aren't new to me. I've solved each one — and built specific engagements around them. Here's what that looks like.
        </RevealSvc>

        <div className="svc-grid">
          {SVC_AREAS.map((area, i) => (
            <SvcItem
              key={i}
              index={i}
              area={area}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? null : i)}
            />
          ))}
        </div>

        <RevealSvc delay={120} style={{
          marginTop: 'clamp(80px, 12vh, 130px)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'clamp(24px, 3vh, 34px)',
          textAlign: 'center',
        }}>
          <p style={{
            margin: 0, maxWidth: 640,
            fontFamily: 'var(--font-display)', fontWeight: 500, fontStyle: 'italic',
            fontSize: 'clamp(1.4rem, 2.2vw, 1.95rem)', lineHeight: 1.34,
            color: 'var(--color-ink)', textWrap: 'balance',
          }}>
            Not sure which of these you need?
          </p>
          <a className="btn-primary" href="https://cal.com/matthew-grote-riqgua/30min" style={{ fontSize: 18, padding: '1.15rem 2.4rem' }}>Book a Call</a>
        </RevealSvc>

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