/* Wired CIO marketing site — Case studies (preview block, index, full article) */
(function () {
  const DS = window.WiredCIODesignSystem_afa0a4;
  const I = window.WCIcons;
  const { OutcomeBadge, Badge, Button, OUTCOMES } = DS;
  const DATA = (window.WCData && window.WCData.CASE_STUDIES) || [];

  const OUTCOME_ICONS = { grow: I.Rocket, protect: I.ShieldCheck, automate: I.Burst, align: I.BadgeCheck };
  const PILLAR_DEEP = { grow: 'var(--pillar-grow-deep)', protect: 'var(--pillar-protect-deep)', automate: 'var(--pillar-automate-deep)', align: 'var(--pillar-align-deep)' };
  const PILLAR_SOFT = { grow: 'var(--pillar-grow-soft)', protect: 'var(--pillar-protect-soft)', automate: 'var(--pillar-automate-soft)', align: 'var(--pillar-align-soft)' };
  const PILLAR_BG = { grow: 'bg-04', protect: 'bg-05', automate: 'bg-03', align: 'bg-01' };

  function href(slug) { return 'case-study.html?slug=' + slug; }

  function CaseStudyCard({ study }) {
    const o = OUTCOMES[study.outcome] || {};
    const draft = study.status === 'draft';
    return (
      <a href={href(study.slug)} style={{
        display: 'flex', flexDirection: 'column', textDecoration: 'none',
        background: 'var(--surface-card)', border: '1px solid var(--border-subtle)',
        borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)',
        transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
      }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}>
        <div style={{ height: 8, background: o.accent || 'var(--wc-emerald)' }} />
        <div style={{ padding: '24px 26px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <OutcomeBadge outcome={study.outcome} />
            {draft ? <Badge tone="neutral" variant="soft">Coming soon</Badge> : null}
          </div>
          <div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.375rem', color: 'var(--text-strong)', margin: 0 }}>{study.client}</h3>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--text-muted)', marginTop: 4 }}>{study.descriptor}</div>
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', lineHeight: 1.55, color: 'var(--text-body)', margin: 0, flex: 1 }}>{study.summary}</p>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.875rem', color: 'var(--accent-2)' }}>
            {draft ? 'Story in progress' : 'Read the case study'} <I.ArrowRight size={16} />
          </span>
        </div>
      </a>
    );
  }

  function CaseStudiesPreview() {
    const featured = DATA.filter((c) => c.featured && c.status === 'published').slice(0, 3);
    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={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 640 }}>
              <span className="wc-eyebrow">Case studies</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' }}>Real outcomes from real engagements.</h2>
            </div>
            <a href="case-studies.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.9375rem', color: 'var(--accent-2)', textDecoration: 'none', whiteSpace: 'nowrap' }}>View all case studies <I.ArrowRight size={16} /></a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20, marginTop: 40 }}>
            {featured.map((s) => <CaseStudyCard key={s.slug} study={s} />)}
          </div>
        </div>
      </section>
    );
  }

  function CaseStudiesIndex() {
    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)' }}>
          <span className="wc-eyebrow">Case studies</span>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.25rem, 4.5vw, 3.25rem)', lineHeight: 1.06, letterSpacing: '-0.025em', color: 'var(--text-strong)', margin: '12px 0 0', maxWidth: 720, textWrap: 'balance' }}>The work, and the outcomes it drove.</h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.125rem', lineHeight: 1.6, color: 'var(--text-muted)', margin: '16px 0 0', maxWidth: 620 }}>A look at how Wired CIO engagements map to the four pillars, from Dynamics implementations to Microsoft 365 migrations and AI document processing.</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 20, marginTop: 44 }}>
            {DATA.map((s) => <CaseStudyCard key={s.slug} study={s} />)}
          </div>
        </div>
      </section>
    );
  }

  function Block({ kicker, children }) {
    return (
      <div>
        <span className="wc-eyebrow" style={{ color: 'var(--cs-accent, var(--wc-emerald))' }}>{kicker}</span>
        <div style={{ marginTop: 14 }}>{children}</div>
      </div>
    );
  }

  function CaseStudyArticle() {
    const params = new URLSearchParams(window.location.search);
    const slug = params.get('slug') || (DATA[0] && DATA[0].slug);
    const study = DATA.find((c) => c.slug === slug) || DATA[0];
    if (!study) return <div style={{ padding: 80, textAlign: 'center' }}>Case study not found.</div>;
    const o = OUTCOMES[study.outcome] || {};
    const Ico = OUTCOME_ICONS[study.outcome];
    const draft = study.status === 'draft';
    const accent = o.accent || 'var(--wc-emerald)';
    const accentSoft = PILLAR_SOFT[study.outcome] || 'var(--accent-2-soft)';
    const accentDeep = PILLAR_DEEP[study.outcome] || 'var(--wc-ink-900)';
    const heroBg = PILLAR_BG[study.outcome] || 'bg-04';

    return (
      <article data-screen-label="Case Study" data-pillar={study.outcome} style={{ ['--cs-accent']: accent, ['--cs-soft']: accentSoft, ['--cs-deep']: accentDeep }}>
        {/* Hero — pillar-tinted wash + brand texture + complementary glow */}
        <header style={{ position: 'relative', overflow: 'hidden', background: 'radial-gradient(130% 110% at 88% -20%, color-mix(in srgb, var(--cs-accent) 42%, transparent) 0%, transparent 58%), linear-gradient(140deg, var(--cs-deep) 0%, var(--wc-ink-900) 78%)' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('../../assets/backgrounds/" + heroBg + ".svg')", backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.6, mixBlendMode: 'soft-light' }} />
          <div style={{ position: 'relative', maxWidth: '880px', margin: '0 auto', padding: '56px var(--container-pad) 64px' }}>
            <a href="case-studies.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '0.875rem', color: 'rgba(255,255,255,0.82)', textDecoration: 'none' }}>
              <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><I.ArrowRight size={15} /></span> All case studies
            </a>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 22 }}>
              <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: o.accent, color: 'var(--wc-white)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{Ico ? <Ico size={22} /> : null}</span>
              <OutcomeBadge outcome={study.outcome} />
              {draft ? <Badge tone="neutral" variant="solid">Coming soon</Badge> : null}
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.25rem, 4.5vw, 3.25rem)', lineHeight: 1.06, letterSpacing: '-0.025em', color: 'var(--wc-white)', margin: '20px 0 0', textWrap: 'balance' }}>{study.client}</h1>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: '1rem', color: 'var(--wc-ink-200)', marginTop: 8 }}>{study.descriptor}{study.service ? '  ·  ' + study.service : ''}</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.25rem', lineHeight: 1.55, color: 'var(--wc-ink-100)', margin: '22px 0 0', maxWidth: 660 }}>{study.summary}</p>
            {study.facts && study.facts.length ? (
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px 40px', marginTop: 30, paddingTop: 26, borderTop: '1px solid rgba(255,255,255,0.15)' }}>
                {study.facts.map((f, i) => (
                  <div key={i}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.5rem', color: 'var(--wc-white)', lineHeight: 1 }}>{f.value}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--wc-ink-200)', marginTop: 6 }}>{f.label}</div>
                  </div>
                ))}
              </div>
            ) : null}
          </div>
        </header>

        {/* Body */}
        <div style={{ maxWidth: '880px', margin: '0 auto', padding: '64px var(--container-pad)' }}>
          {draft ? (
            <div style={{ background: 'var(--wc-green-50)', border: '1px solid var(--wc-green-100)', borderRadius: 'var(--radius-lg)', padding: '28px 30px', fontFamily: 'var(--font-body)', color: 'var(--text-strong)' }}>
              <strong style={{ fontFamily: 'var(--font-display)' }}>This story is in progress.</strong> {study.challenge}
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
              <Block kicker="The challenge">
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.125rem', lineHeight: 1.7, color: 'var(--text-body)', margin: 0 }}>{study.challenge}</p>
              </Block>

              <Block kicker="The pain points">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  {study.painPoints.map((p, i) => (
                    <div key={i} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '22px 24px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                      <span style={{ width: 9, height: 9, borderRadius: 2, background: '#d9822b', marginTop: 8, flexShrink: 0 }} />
                      <div>
                        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '1.0625rem', color: 'var(--text-strong)', lineHeight: 1.45 }}>{p.pain}</div>
                        <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', color: 'var(--text-muted)', lineHeight: 1.55, marginTop: 7 }}><strong style={{ color: 'var(--text-body)', fontWeight: 700 }}>Business impact:</strong> {p.impact}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </Block>

              <Block kicker="How we solved it">
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {study.solution.map((a, i) => (
                    <li key={i} style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
                      <span style={{ width: 26, height: 26, flexShrink: 0, borderRadius: '50%', background: 'var(--cs-soft)', color: 'var(--cs-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}><I.Check size={15} stroke={3} /></span>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: '1.0625rem', lineHeight: 1.55, color: 'var(--text-body)' }}>{a}</span>
                    </li>
                  ))}
                </ul>
              </Block>

              <Block kicker="The impact">
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
                  {study.impact.map((r, i) => (
                    <div key={i} style={{ background: 'var(--surface-page)', border: '1px solid var(--border-subtle)', borderLeft: '3px solid ' + (o.accent || 'var(--wc-emerald)'), borderRadius: 'var(--radius-md)', padding: '18px 20px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '0.9375rem', color: 'var(--text-strong)', lineHeight: 1.4 }}>{r}</div>
                  ))}
                </div>
              </Block>

              {/* Quote slot — representative, pending client approval */}
              <div style={{ background: 'var(--surface-inverse-2)', borderRadius: 'var(--radius-xl)', padding: '40px 44px', position: 'relative' }}>
                {study.quote ? (
                  <div>
                    <blockquote style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.5rem', lineHeight: 1.4, color: 'var(--wc-white)', textWrap: 'balance' }}>"{study.quote.text}"</blockquote>
                    <div style={{ marginTop: 18, fontFamily: 'var(--font-body)', fontSize: '0.9375rem', color: 'var(--wc-ink-200)' }}>{study.quote.name ? <strong style={{ color: 'var(--wc-white)' }}>{study.quote.name}</strong> : null}{study.quote.name ? ' · ' : ''}{study.quote.role}</div>
                    {study.quote.representative ? (
                      <div style={{ marginTop: 12, fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--wc-ink-300)', fontStyle: 'italic' }}>Representative quote, pending client approval.</div>
                    ) : null}
                  </div>
                ) : (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: 'var(--wc-ink-200)', fontFamily: 'var(--font-body)' }}>
                    <span style={{ color: 'var(--wc-emerald)', display: 'inline-flex' }}><I.Star size={22} /></span>
                    <span style={{ fontSize: '0.9375rem' }}>Client quote pending approval. The story above is drawn from the engagement record.</span>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Related service + CTA */}
        <section style={{ background: 'var(--surface-page)', borderTop: '1px solid var(--border-subtle)', padding: '56px 0' }}>
          <div style={{ maxWidth: '880px', margin: '0 auto', padding: '0 var(--container-pad)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--text-muted)' }}>{study.service ? 'Service line' : 'Outcome'}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.375rem', color: 'var(--text-strong)', marginTop: 2 }}>{study.service || (o.label + ' \u2014 ' + (o.tagline || ''))}</div>
            </div>
            <Button size="lg" onClick={() => { window.location.href = 'index.html#assessment'; }} iconRight={<I.ArrowRight size={18} />}>Book a Strategy Call</Button>
          </div>
        </section>
      </article>
    );
  }

  window.WCKit = Object.assign(window.WCKit || {}, { CaseStudyCard, CaseStudiesPreview, CaseStudiesIndex, CaseStudyArticle });
})();
