/* Wired CIO marketing site — Wired CIO Team page sections */
(function () {
  const DS = window.WiredCIODesignSystem_afa0a4;
  const I = window.WCIcons;
  const { OutcomeBadge, Badge } = DS;

  function TeamHero() {
    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' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '80px var(--container-pad) 88px' }}>
          <div style={{ maxWidth: 760 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.8125rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--wc-green-300)' }}>
              <I.Users size={15} /> The Wired CIO Team
            </span>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.4rem, 5vw, 3.75rem)', lineHeight: 1.05, letterSpacing: '-0.025em', color: 'var(--wc-white)', margin: '20px 0 0', textWrap: 'balance' }}>
              An IT team that runs your business like it's <span style={{ color: 'var(--wc-emerald)' }}>their own</span>.
            </h1>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.1875rem', lineHeight: 1.6, color: 'var(--wc-ink-100)', margin: '22px 0 0', maxWidth: 600 }}>
              Founded in 2022 by a team of IT strategists and entrepreneurs, Wired CIO brings enterprise-level guidance to growing businesses, combining deep technical knowledge with real business insight.
            </p>
          </div>
        </div>
      </section>
    );
  }

  const LEADERS = [
    'Founder & CEO',
    'Chief Revenue Officer',
    'Chief Technology Officer',
    'Director of Service Delivery',
    'Business Development Lead',
    'Sales & Marketing Specialist',
    'Client Success Lead',
    'Compliance Lead',
    'Senior Solutions Architect',
    'Solutions Architect',
    'Systems Engineer',
    'Security Operations Analyst',
  ];

  function TeamLeadership() {
    return (
      <section style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 640 }}>
              <span className="wc-eyebrow">Leadership</span>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem, 3.6vw, 2.75rem)', lineHeight: 1.12, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '12px 0 0' }}>The people behind your IT.</h2>
            </div>
            <Badge tone="neutral" variant="soft">Sample layout · add your team</Badge>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 20, marginTop: 40 }}>
            {LEADERS.map((role, i) => (
              <div key={i} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' }}>
                <div style={{ height: 180, background: 'var(--grad-mint)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-2)' }}>
                  <I.User size={56} stroke={1.5} />
                </div>
                <div style={{ padding: '18px 20px 22px' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.0625rem', color: 'var(--text-strong)' }}>Team member</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--text-muted)', marginTop: 3 }}>{role}</div>
                  <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 12, color: 'var(--accent-2)', textDecoration: 'none', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '0.8125rem' }}>
                    <I.Linkedin size={15} /> Connect
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  const PODS = [
    ['grow', 'Business Applications', ['Virtual CIO / strategy', 'Dynamics 365 consultant', 'Solutions architect']],
    ['protect', 'Operations & Security', ['Service desk engineers', 'Systems & cloud engineer', 'Security operations analyst']],
    ['automate', 'Automation & AI', ['Automation engineer', 'AI / Copilot solutions lead', 'Power Platform developer']],
    ['align', 'Compliance', ['Compliance specialist', 'Virtual CISO', 'Audit & documentation lead']],
  ];
  const POD_ICONS = { grow: I.TrendingUp, protect: I.Server, automate: I.Workflow, align: I.Lock };

  function TeamPods() {
    return (
      <section style={{ background: 'var(--surface-card)', padding: 'var(--section-y) 0', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
          <div style={{ maxWidth: 680 }}>
            <span className="wc-eyebrow">How we're built</span>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem, 3.6vw, 2.75rem)', lineHeight: 1.12, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '12px 0 0', textWrap: 'balance' }}>One pod, organized around your four pillars.</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.0625rem', lineHeight: 1.6, color: 'var(--text-muted)', margin: '16px 0 0' }}>You get a full team of specialists at a fraction of the cost of hiring, with no training and no overhead, just the disciplines your business needs.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 18, marginTop: 44 }}>
            {PODS.map(([key, title, roles]) => {
              const Ico = POD_ICONS[key];
              return (
                <div key={key} style={{ background: 'var(--surface-page)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '26px 24px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--accent-2-soft)', color: 'var(--accent-2)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Ico size={21} /></span>
                    <OutcomeBadge outcome={key} />
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.1875rem', color: 'var(--text-strong)', margin: '16px 0 12px' }}>{title}</h3>
                  <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                    {roles.map((r) => (
                      <li key={r} style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-body)', fontSize: '0.9375rem', color: 'var(--text-body)' }}>
                        <I.Check size={16} stroke={2.5} style={{ color: 'var(--wc-emerald)', flexShrink: 0 }} />{r}
                      </li>
                    ))}
                  </ul>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  const VALUES = [
    [<I.ShieldCheck size={22} />, 'Transparency', 'You see what we do and why. Monthly reporting on every improvement we make.'],
    [<I.TrendingUp size={22} />, 'Continuous improvement', 'We strengthen your environment over time with proactive strategy that gets ahead of problems.'],
    [<I.Workflow size={22} />, 'Solution-first mindset', 'We focus on the business problem behind every ticket, then solve it.'],
  ];

  function TeamValues() {
    return (
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--grad-deep)', padding: 'var(--section-y) 0' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('../../assets/backgrounds/bg-04.svg')", backgroundSize: 'cover', opacity: 0.3, mixBlendMode: 'soft-light' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
          <span className="wc-eyebrow" style={{ color: 'var(--wc-green-300)' }}>What guides us</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem, 3.6vw, 2.75rem)', lineHeight: 1.12, letterSpacing: '-0.02em', color: 'var(--wc-white)', margin: '12px 0 0', maxWidth: 640, textWrap: 'balance' }}>Core principles, on every engagement.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 18, marginTop: 44 }}>
            {VALUES.map(([icon, title, body], i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-on-dark)', borderRadius: 'var(--radius-lg)', padding: '26px 24px' }}>
                <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--wc-emerald)', color: 'var(--text-strong)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.1875rem', color: 'var(--wc-white)', margin: '16px 0 8px' }}>{title}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', lineHeight: 1.55, color: 'var(--wc-ink-100)', margin: 0 }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function TeamPage() {
    return (
      <div data-screen-label="Wired CIO Team">
        <TeamHero />
        <TeamLeadership />
        <TeamPods />
        <TeamValues />
      </div>
    );
  }

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