/* Wired CIO marketing site — Outcome Explorer (services organized by outcome) */
(function () {
  const DS = window.WiredCIODesignSystem_afa0a4;
  const I = window.WCIcons;
  const { OutcomeBadge, OUTCOMES } = DS;
  const svcHref = (name) => 'service.html?slug=' + String(name).toLowerCase().replace(/&/g, ' ').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');

  function Eyebrow({ children }) { return <span className="wc-eyebrow">{children}</span>; }
  function SectionHead({ kicker, title, sub, dark }) {
    return (
      <div style={{ maxWidth: 700 }}>
        <Eyebrow>{kicker}</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem, 3.6vw, 2.75rem)', lineHeight: 1.12, letterSpacing: '-0.02em', color: dark ? 'var(--wc-white)' : 'var(--text-strong)', margin: '12px 0 0', textWrap: 'balance' }}>{title}</h2>
        {sub ? <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.0625rem', lineHeight: 1.6, color: dark ? 'var(--wc-ink-100)' : 'var(--text-muted)', margin: '16px 0 0' }}>{sub}</p> : null}
      </div>
    );
  }

  const OUTCOME_ICONS = { grow: I.Rocket, protect: I.ShieldCheck, automate: I.Burst, align: I.BadgeCheck };
  const ORDER = ['grow', 'protect', 'automate', 'align'];

  // icon per service line, by outcome
  const SERVICE_ICONS = {
    grow: [I.Database, I.TrendingUp, I.Workflow, I.Headset, I.BarChart],
    protect: [I.Headset, I.Server, I.Cloud, I.Database, I.ShieldCheck],
    automate: [I.Cpu, I.Workflow, I.Workflow, I.Cpu],
    align: [I.FileCheck, I.ShieldCheck, I.Shield, I.Lock],
  };

  function OutcomeExplorer() {
    const [active, setActive] = React.useState('grow');
    const o = OUTCOMES[active] || {};
    const Ico = OUTCOME_ICONS[active];
    const icons = SERVICE_ICONS[active];
    const services = o.services || [];

    return (
      <section id="explore" data-screen-label="Outcome Explorer" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
          <SectionHead kicker="How we work" title="Everything we do maps to one of four pillars." sub="Pick an outcome to see the Microsoft-aligned work that drives it. No generic IT checklist, just the systems that move your business." />

          <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 24, marginTop: 44 }} className="wc-explore-grid">
            {/* Outcome selector rail */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }} className="wc-explore-rail">
              {ORDER.map((k) => {
                const oo = OUTCOMES[k] || {};
                const Ic = OUTCOME_ICONS[k];
                const on = k === active;
                return (
                  <button key={k} onClick={() => setActive(k)} style={{
                    display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left', cursor: 'pointer',
                    padding: '16px 18px', borderRadius: 'var(--radius-lg)',
                    background: on ? 'var(--wc-white)' : 'transparent',
                    border: on ? '1px solid var(--border-subtle)' : '1px solid transparent',
                    borderLeft: on ? `4px solid ${oo.accent}` : '4px solid transparent',
                    boxShadow: on ? 'var(--shadow-md)' : 'none',
                    transition: 'background var(--dur-base), box-shadow var(--dur-base)',
                  }}>
                    <span style={{ width: 44, height: 44, flexShrink: 0, borderRadius: 'var(--radius-md)', background: on ? oo.accent : `color-mix(in srgb, ${oo.accent} 13%, transparent)`, color: on ? 'var(--wc-white)' : oo.accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'background var(--dur-base), color var(--dur-base)' }}><Ic size={21} /></span>
                    <span>
                      <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '0.9375rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-strong)' }}>{oo.label}</span>
                      <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--text-muted)', marginTop: 2 }}>{oo.tagline}</span>
                    </span>
                  </button>
                );
              })}
            </div>

            {/* Active outcome panel */}
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '34px 36px', boxShadow: 'var(--shadow-sm)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: o.accent, color: 'var(--wc-white)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Ico size={26} /></span>
                  <div>
                    <OutcomeBadge outcome={active} />
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.5rem', color: 'var(--text-strong)', marginTop: 6 }}>{o.tagline}</div>
                  </div>
                </div>
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.0625rem', lineHeight: 1.6, color: 'var(--text-body)', margin: '20px 0 26px', maxWidth: 640 }}>{o.long}</p>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="wc-svc-grid">
                {services.map((s, i) => {
                  const SIco = icons[i] || I.Check;
                  return (
                    <a key={s} href={svcHref(s)}
                      style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '15px 16px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', background: 'var(--surface-page)', textDecoration: 'none', transition: 'border-color var(--dur-base), background var(--dur-base)' }}
                      onMouseEnter={(e) => { e.currentTarget.style.borderColor = o.accent; e.currentTarget.style.background = 'var(--wc-white)'; }}
                      onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.background = 'var(--surface-page)'; }}>
                      <span style={{ width: 38, height: 38, flexShrink: 0, borderRadius: 'var(--radius-sm)', background: `color-mix(in srgb, ${o.accent} 13%, transparent)`, color: o.accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><SIco size={19} /></span>
                      <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '0.9375rem', color: 'var(--text-strong)', lineHeight: 1.3 }}>{s}</span>
                    </a>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  window.WCKit = Object.assign(window.WCKit || {}, { OutcomeExplorer, SectionHead, Eyebrow });
})();