/* Wired CIO marketing site — Hero (outcomes framework forward) */
(function () {
  const DS = window.WiredCIODesignSystem_afa0a4;
  const I = window.WCIcons;
  const { Button, OUTCOMES } = DS;

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

  function Hero({ onCta }) {
    const goExplore = () => { const el = document.getElementById('explore'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: 'smooth' }); };

    return (
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--grad-hero)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('../../assets/backgrounds/bg-04.svg')", backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.5, mixBlendMode: 'soft-light', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: '-22%', right: '-6%', width: 520, height: 520, background: 'radial-gradient(circle, rgba(44,194,149,0.32) 0%, rgba(44,194,149,0) 68%)', pointerEvents: 'none' }} />

        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '80px var(--container-pad) 0' }}>
          <div style={{ maxWidth: 820 }}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.6rem, 5.6vw, 4.5rem)', lineHeight: 1.03, letterSpacing: '-0.025em', color: 'var(--wc-white)', margin: '0 0 0', textWrap: 'balance' }}>
              Your IT department of the future, built to&nbsp;
              <span style={{ color: 'var(--pillar-grow)' }}>grow</span>,&nbsp;
              <span style={{ color: 'var(--pillar-protect)' }}>protect</span>,&nbsp;
              <span style={{ color: 'var(--pillar-automate)' }}>automate</span>, and&nbsp;
              <span style={{ color: 'var(--pillar-align)' }}>align</span> your business.
            </h1>

            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.1875rem', lineHeight: 1.6, color: 'var(--wc-ink-100)', margin: '24px 0 0', maxWidth: 620 }}>
              For growing SMBs that have outgrown basic IT support but don't want a bloated team or a one-size-fits-all MSP. We organize everything around four pillars, and think like the IT leadership you'd hire internally.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 34 }}>
              <Button size="lg" onClick={onCta} iconRight={<I.ArrowRight size={18} />}>Book a Strategy Call</Button>
              <Button size="lg" variant="on-dark" onClick={goExplore} style={{ background: 'transparent', color: 'var(--wc-white)', borderColor: 'rgba(255,255,255,0.4)' }}>Explore the four pillars</Button>
            </div>
          </div>

          {/* Spacer preserves the hero height previously held by the pillar strip */}
          <div aria-hidden="true" style={{ marginTop: 56, height: 168 }} className="wc-hero-outcomes" />
        </div>
      </section>
    );
  }

  window.WCKit = Object.assign(window.WCKit || {}, { Hero });
})();