/* Wired CIO marketing site — Stats band, Industries, Testimonials */
(function () {
  const DS = window.WiredCIODesignSystem_afa0a4;
  const I = window.WCIcons;
  const { Stat, Tabs, Avatar, Badge, OUTCOMES } = DS;
  const { SectionHead } = window.WCKit;

  function StatsBand() {
    const products = [
      ['Dynamics 365', 'CRM & ERP', I.TrendingUp],
      ['Business Central', 'Finance & operations', I.Database],
      ['Power BI', 'Analytics & reporting', I.BarChart],
      ['Microsoft 365', 'Productivity & collaboration', I.Cloud],
      ['Azure', 'Cloud infrastructure', I.Server],
      ['Power Platform', 'Apps & automation', I.Workflow],
      ['Copilot', 'AI assistance', I.Cpu],
      ['Entra & Defender', 'Identity & security', I.ShieldCheck],
    ];
    return (
      <section style={{ background: 'var(--text-strong)', padding: '60px 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, marginBottom: 36 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '0.75rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--wc-emerald)' }}>Built on the Microsoft cloud</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', color: 'var(--wc-ink-200)' }}>The platforms behind every pillar of work we deliver.</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 14 }}>
            {products.map(([name, cat, Ico], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 20px', borderRadius: 'var(--radius-lg)', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-on-dark)' }}>
                <span style={{ width: 44, height: 44, flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'rgba(44,194,149,0.14)', color: 'var(--wc-emerald)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Ico size={22} /></span>
                <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.0625rem', color: 'var(--wc-white)', lineHeight: 1.2 }}>{name}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--wc-ink-200)', marginTop: 3 }}>{cat}</span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  const INDUSTRIES = {
    healthcare: { label: 'Healthcare', body: 'Safeguarding patient data and ensuring compliance with HIPAA and other healthcare regulations.', tags: ['HIPAA', 'PHI security', 'Audit-ready'], caseSlug: 'connectabilitymn' },
    legal: { label: 'Legal & Professional', body: 'Protecting client confidentiality with secure document management and reliable communication systems.', tags: ['Confidentiality', 'Co-managed IT', 'Secure email'], caseSlug: 'creative-fundraising-advisors' },
    manufacturing: { label: 'Manufacturing & Distribution', body: 'Streamlining operations, securing production environments, and minimizing costly downtime.', tags: ['ERP / Business Central', 'Uptime', 'Inventory'], caseSlug: 'technical-training-aids' },
    biotech: { label: 'Biotech & Pharma', body: 'FDA, CMMC, and SOC 2 readiness for regulated R&D, with compliance handled from day one.', tags: ['FDA', 'CMMC', 'SOC 2'], caseSlug: 'lynker' },
    smb: { label: 'Small & Medium Business', body: 'Enterprise-level IT strategy and support for growing teams that need clarity and control.', tags: ['vCIO', 'Help desk', 'Microsoft 365'], caseSlug: 'gruntworx' },
  };

  function IndustriesSection() {
    const keys = Object.keys(INDUSTRIES);
    const [active, setActive] = React.useState('healthcare');
    const it = INDUSTRIES[active];
    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)' }}>
          <SectionHead kicker="Industries" title="Trusted by businesses in every industry." sub="A strategic, security-first approach, adapted to the rules and realities of your field." />
          <div style={{ marginTop: 36, overflowX: 'auto' }}>
            <Tabs items={keys.map((k) => ({ value: k, label: INDUSTRIES[k].label }))} value={active} onChange={setActive} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 28, marginTop: 32, alignItems: 'stretch' }} className="wc-ind-grid">
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '34px 36px', boxShadow: 'var(--shadow-sm)' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.5rem', color: 'var(--text-strong)', margin: 0 }}>{it.label}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.0625rem', lineHeight: 1.6, color: 'var(--text-body)', margin: '14px 0 22px', maxWidth: 520 }}>{it.body}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {it.tags.map((t) => <Badge key={t} tone="emerald" variant="soft">{t}</Badge>)}
              </div>
            </div>
            <a href={(window.WCData && window.WCData.caseStudyBySlug && window.WCData.caseStudyBySlug(it.caseSlug)) ? ('case-study.html?slug=' + it.caseSlug) : 'case-studies.html'}
              style={{ display: 'flex', flexDirection: 'column', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-on-dark)', background: 'var(--text-strong)', boxShadow: 'var(--shadow-md)', textDecoration: 'none', transition: 'box-shadow var(--dur-base), transform var(--dur-base)' }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}>
              {(() => {
                const cs = (window.WCData && window.WCData.caseStudyBySlug && window.WCData.caseStudyBySlug(it.caseSlug)) || null;
                const co = (cs && OUTCOMES[cs.outcome]) || {};
                if (!cs) return <div style={{ padding: 32, fontFamily: 'var(--font-body)', color: 'var(--wc-ink-200)' }}>See all case studies →</div>;
                return (
                  <React.Fragment>
                    <div style={{ height: 6, background: co.accent || 'var(--wc-emerald)' }} />
                    <div style={{ padding: '26px 28px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '0.6875rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: co.accent || 'var(--wc-emerald)' }}>Related case study</span>
                      <div>
                        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.375rem', color: 'var(--wc-white)', lineHeight: 1.2 }}>{cs.client}</div>
                        <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--wc-ink-200)', marginTop: 3 }}>{cs.descriptor}</div>
                      </div>
                      <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', lineHeight: 1.55, color: 'var(--wc-ink-100)', margin: 0, flex: 1, display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{cs.summary}</p>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.875rem', color: 'var(--wc-white)' }}>Read the case study <I.ArrowRight size={16} /></span>
                    </div>
                  </React.Fragment>
                );
              })()}
            </a>
          </div>
        </div>
      </section>
    );
  }

  function Testimonials() {
    const quotes = [
      ['We used to get scam emails every day from someone impersonating an employee. Wired CIO fixed it, and now our inboxes are clean. No tech talk, just results.', 'Genny Stone', 'Owner, Grand Strategy Group'],
      ["We never spend time on our own systems anymore. Phil keeps everything up to date, and we get monthly reports on every improvement. I can focus on client work.", 'Layton Welborn', 'Owner, W3 Information Services'],
    ];
    return (
      <section style={{ background: 'var(--surface-card)', padding: 'var(--section-y) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
          <SectionHead kicker="Testimonials" title="What clients are saying." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 22, marginTop: 40 }}>
            {quotes.map(([q, name, role], i) => (
              <figure key={i} style={{ margin: 0, background: 'var(--wc-green-50)', border: '1px solid var(--wc-green-100)', borderRadius: 'var(--radius-lg)', padding: '30px 32px' }}>
                <blockquote style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: '1.0625rem', lineHeight: 1.6, color: 'var(--text-strong)' }}>"{q}"</blockquote>
                <figcaption style={{ display: 'flex', alignItems: 'center', gap: 13, marginTop: 22 }}>
                  <Avatar name={name} tone="ink" />
                  <span style={{ display: 'flex', flexDirection: 'column' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '0.9375rem', color: 'var(--text-strong)' }}>{name}</span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--text-muted)' }}>{role}</span>
                  </span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    );
  }

  window.WCKit = Object.assign(window.WCKit || {}, { StatsBand, IndustriesSection, Testimonials });
})();