// services-page.jsx — full services catalog page (Option B reference): sidebar + detail panels.
const { useState: useSv, useEffect: useEffectSv } = React;

function ServicesPage() {
  const ns = window.ITbyPeopleDesignSystem_44acd8 || {};
  const { Button } = ns;
  const [active, setActive] = useSv('hds');
  const [openSections, setOpenSections] = useSv({ managed: true, projects: true, advisory: true });

  // deep-link via #service-id
  useEffectSv(() => {
    const h = (location.hash || '').replace('#', '');
    if (h && SERVICE_DETAIL[h]) setActive(h);
  }, []);

  const onNav = (key) => {
    if (key === 'services') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    window.location.href = 'index.html#' + key;
  };
  const toggle = (id) => setOpenSections((s) => ({ ...s, [id]: !s[id] }));
  const pick = (id) => { setActive(id); document.getElementById('svc-detail').scrollIntoView({ behavior: 'smooth', block: 'start' }); };

  const d = SERVICE_DETAIL[active];
  const badge = BADGE_META[d.badge];

  const NavItem = (id) => {
    const s = SERVICE_DETAIL[id];
    const on = id === active;
    return (
      <button key={id} className={'svc-nav-item' + (on ? ' active' : '')} onClick={() => setActive(id)}>
        <Ti name={s.icon} size={15} /><span>{s.title.replace(/ \(IaaS\)/, '')}</span>
      </button>
    );
  };

  return (
    <div>
      <SiteHeader page="services" active="services" onNav={onNav} />

      {/* intro band */}
      <section style={{ backgroundColor: 'var(--color-cloud)', borderBottom: '1px solid var(--color-line)' }}>
        <div style={wrap(1200, '54px 32px 46px')}>
          <Eyebrow>What we do</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 44, color: 'var(--color-navy)', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 12px' }}>Services built around your business.</h1>
          <p style={{ fontSize: 17.5, color: 'var(--color-slate)', lineHeight: 1.6, margin: 0, maxWidth: 620 }}>Whether you need a complete IT department, a specific project delivered or an honest assessment of where you stand — we have a service for that. Browse the catalog, then book a call to talk it through.</p>
        </div>
      </section>

      {/* catalog */}
      <section style={{ backgroundColor: '#fff', padding: '40px 32px 80px' }}>
        <div style={wrap(1200, 0)} className="svc-layout">
          {/* SIDEBAR */}
          <aside className="svc-sidebar">
            {SERVICE_NAV.map((sec) => (
              <div key={sec.id} style={{ marginBottom: 10 }}>
                <button className="svc-sec-header" onClick={() => toggle(sec.id)}>
                  <span className="svc-sec-label">{sec.label}</span>
                  <Ti name="chevron-down" size={14} color="var(--color-teal-mid)" style={{ transition: 'transform 0.2s', transform: openSections[sec.id] ? 'rotate(180deg)' : 'none' }} />
                </button>
                <div className="svc-nav-group" style={{ maxHeight: openSections[sec.id] ? 700 : 0 }}>
                  {sec.groups ? sec.groups.map((g) => (
                    <div key={g.label}>
                      <div className="svc-sub-header"><span className="svc-sub-label">{g.label}</span><span className="svc-sub-divider" /></div>
                      {g.items.map(NavItem)}
                    </div>
                  )) : sec.items.map(NavItem)}
                </div>
              </div>
            ))}
          </aside>

          {/* DETAIL */}
          <div id="svc-detail" className="svc-content">
            <div className="svc-panel-eyebrow">{d.eyebrow}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--color-navy)', letterSpacing: '-0.01em', margin: '0 0 12px' }}>{d.title}</h2>
            <span className={'svc-badge ' + badge.cls}>{badge.icon && <Ti name={badge.icon} size={11} color="currentColor" />}{badge.label}</span>
            <p style={{ fontSize: 16, color: 'var(--color-slate)', lineHeight: 1.65, margin: '16px 0 22px', maxWidth: 640 }}>{d.desc}</p>
            <div className="svc-cards">
              {d.cards.map(([icon, name, desc]) => (
                <div key={name} className="svc-card">
                  <div className="svc-card-name"><Ti name={icon} size={16} />{name}</div>
                  <div className="svc-card-desc">{desc}</div>
                </div>
              ))}
            </div>
            {d.note && <div className="svc-note">{d.note}</div>}

            <div style={{ marginTop: 30, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="index.html#schedule" style={{ textDecoration: 'none' }}>
                <Button variant="primary" iconLeft={<Icon name="calendar" size={17} color="#fff" />}>Book a call about this</Button>
              </a>
              <a href="index.html#support" style={{ textDecoration: 'none' }}>
                <Button variant="secondary" iconLeft={<Icon name="ticket" size={17} color="var(--color-navy)" />}>Open a ticket</Button>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* closing CTA */}
      <section style={{ backgroundColor: 'var(--color-navy)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <Constellation opacity={0.4} seed={17} />
        <div style={wrap(900, '64px 32px', { position: 'relative', textAlign: 'center' })}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 34, letterSpacing: '-0.02em', margin: '0 0 12px' }}>Not sure where to start?</h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: '0 auto 26px', maxWidth: 520 }}>Every engagement starts with a 30-minute call — no jargon, no pressure. Tell us what's on your mind and we'll point you to the right service.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="index.html#schedule" style={{ textDecoration: 'none' }}>
              <Button variant="primary" size="lg" iconLeft={<Icon name="calendar" size={18} color="#fff" />}>Book a call</Button>
            </a>
            <a href="index.html#support" style={{ textDecoration: 'none' }}>
              <button style={ghostDark}><Icon name="ticket" size={18} color="#fff" />Open a ticket</button>
            </a>
          </div>
        </div>
      </section>

      <SiteFooter onNav={onNav} />
    </div>
  );
}

(function mountServices() {
  const tryMount = () => {
    if (!window.ITbyPeopleDesignSystem_44acd8 || !window.SiteHeader || !window.SERVICE_DETAIL || !window.Icon) { setTimeout(tryMount, 40); return; }
    ReactDOM.createRoot(document.getElementById('root')).render(<ServicesPage />);
  };
  tryMount();
})();