/* Case Studies — three side-by-side stories. Left: story + numbers + quote.
   Right: REAL content slot (screenshot / embed). Visual rhythm alternates.
*/
function CaseStudies() {
  const cases = [
  {
    id: 'cognizant',
    tag: 'Pilot · Awareness + Lead-Gen',
    icon: '🎯',
    goal: 'Cognizant Mobility wollte Workshop-Anmeldungen von Automotive-Entscheidern',
    narrative: [
    'Cognizant Mobility berät internationale Automobilunternehmen beim Markteintritt in Europa. Asiatische und amerikanische Unternehmen, die nach Europa expandieren. Sie hatten einen Workshop im Angebot. Den „Market Entry Check".',
    'Sie brauchten Anmeldungen direkt aus der Entscheider-Ebene europäischer OEMs.',
    'Wir haben einen LinkedIn-Post und eine Podcast-Episode gemacht. Eine Kampagne. Ein Ziel. Eine Woche.'],

    kpis: [
    { n: '65.970', l: 'Impressions' },
    { n: '250', l: 'Kommentare' },
    { n: '60', l: 'Leads' }],

    channels: ['LinkedIn', 'Podcast'],
    quote: '„Hier kommen die Unternehmen direkt auf uns zu. Echte Entscheider aus der Automobilindustrie."',
    who: 'Martin Wöhrle · Cognizant Mobility',
    slot: {
      label: 'LinkedIn-Post · Real-Screenshot',
      kind: 'cognizant',
      postImg: 'assets/cases/cognizant-linkedin.png',
      help: ''
    }
  },
  {
    id: 'thoughtworks',
    tag: 'Thought-Leadership-Story',
    icon: '🎙',
    goal: 'Thoughtworks wollte als SDV-Experte sichtbar werden',
    narrative: [
    'Thoughtworks hatte eine Studie zum Software-Defined Vehicle veröffentlicht. Das Problem: Niemand außerhalb der Tech-Bubble kannte sie.',
    'Sie wollten die Studie vor Automotive-Entscheider bringen. Und Thoughtworks als Stimme zum Thema verankern.',
    'Wir haben daraus eine Thought-Leadership-Story über alle vier Kanäle gemacht. Plus Gastartikel auf Focus Online.'],

    kpis: [
    { n: '~140.000', l: 'Impressions über alle Kanäle' },
    { n: '1.203', l: 'Klicks zur Studie von Thoughtworks' },
    { n: '1', l: 'OEM-Einkauf Follow-up-Meeting' }],

    channels: ['YouTube', 'Newsletter', 'Focus Online'],
    quote: '„Über 1.200 Klicks auf unsere Landing Page, LinkedIn-Anfragen und ein Follow-up-Meeting direkt aus der Kampagne."',
    who: 'Nikolas Buckstegen · Thoughtworks',
    slot: {
      label: 'YouTube + Newsletter + Focus Online',
      kind: 'thoughtworks',
      videoId: 'kkyWbVkGGT0',
      focusImg: 'assets/cases/thoughtworks-focus-2.png',
      adImg: 'assets/cases/thoughtworks-newsletter-ad.png',
      help: ''
    }
  },
  {
    id: 'exxeta',
    tag: 'Partnership · 6 Monate',
    icon: '🤝',
    goal: 'Exxeta wollte vom unsichtbaren IT-Dienstleister zur Branchen-Stimme werden',
    narrative: [
    'Exxeta machte seit Jahren Digitalisierung für Autobauer. Bekannt war das trotzdem nicht. Sie kamen in keiner Branchen-Diskussion vor.',
    'Sechs Monate sollten das ändern. Konstant präsent sein. Thema-Ownership aufbauen. Konkrete Webinar-Anmeldungen generieren.',
    'Multi-Channel über sechs Monate. Awareness-Posts, Newsletter-Features, eine Lead-Gen-Kampagne für ein Webinar.'],

    kpis: [
    { n: '108.439', l: 'Impressions auf einem viralen Post' },
    { n: '250', l: 'Webinar-Anmeldungen aus einer Kampagne' },
    { n: '92', l: 'Kommentare' }],

    channels: ['LinkedIn', 'Newsletter'],
    quote: 'C-Level-Entscheider sprechen mich seither direkt auf Exxeta an.',
    who: 'Beobachtung von Philipp',
    slot: {
      label: 'Viraler LinkedIn-Post · Real-Screenshot',
      kind: 'exxeta',
      postImg: 'assets/cases/exxeta-linkedin.png',
      adImg: 'assets/cases/exxeta-newsletter-ad.png',
      impressions: '108.439',
      engagement: '92 Kommentare · 21 Reposts · 719 Reaktionen',
      help: ''
    }
  }];


  return (
    <section id="cases" style={{ padding: '120px 0 96px', background: 'var(--bg-page)', borderTop: '1px solid var(--border-default)' }}>
      <div className="container">
        <div style={{ maxWidth: 880, margin: '0 0 80px' }}>
          <div className="section-eyebrow" style={{ marginBottom: 24 }}>
            <span className="kicker-line"></span>Case Studies
          </div>
          <h2 className="section-title" style={{ fontSize: 56 }}>
            Was meine Partner <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>mit mir erreicht haben.</em>
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 20, lineHeight: 1.5, color: 'var(--fg-2)', marginTop: 20 }}>
            Drei Beispiele aus drei Kategorien. Echte Kampagnen. Echte Zahlen. Echter Content.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          {cases.map((c, i) =>
          <CaseCard key={c.id} c={c} flipped={i % 2 === 1} index={i} />
          )}
        </div>

        {/* Link-out to full reference list — keeps this page lean, full archive lives elsewhere */}
        <div style={{ marginTop: 56, padding: '32px 40px', background: '#fff', border: '1px solid var(--border-default)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 8 }}>Mehr Beispiele?</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.01em', lineHeight: 1.3 }}>
              Alle Kampagnen, Referenzen und die echten Content-Pieces.
            </div>
          </div>
          <a href="https://autopro.notion.site/19d152c94dcf8080bc0ffcaafc010db0?v=81cc4086ee284cf9aaeff6ae401d47e7" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500, color: 'var(--ap-blue)', textDecoration: 'none', padding: '14px 22px', border: '1px solid var(--ap-blue)', borderRadius: 8, whiteSpace: 'nowrap' }}>
            Alle Cases ansehen <span>↗</span>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .case-card-grid {
            grid-template-columns: 1fr !important;
          }
          /* Force story BEFORE screenshot on mobile, regardless of desktop flipped order */
          .case-card-grid > .case-story { order: 1 !important; border-left: 0 !important; padding: 36px 32px !important; }
          .case-card-grid > .case-slot  { order: 2 !important; border-right: 0 !important; border-top: 1px solid var(--border-default); padding: 28px !important; }
        }
        @media (max-width: 560px) {
          .case-card-grid > .case-story { padding: 28px 22px !important; }
          .case-card-grid > .case-slot  { padding: 22px !important; }
        }
      `}</style>
    </section>);

}

function CaseCard({ c, flipped, index }) {
  return (
    <article className="card case-card" style={{ padding: 0, overflow: 'hidden', background: '#fff' }}>
      <div className="case-card-grid" style={{
        display: 'grid',
        gridTemplateColumns: flipped ? '1fr 1.05fr' : '1.05fr 1fr',
        minHeight: 600
      }}>
        {/* Story side */}
        <div className="case-story" style={{ padding: '48px 56px', display: 'flex', flexDirection: 'column', order: flipped ? 2 : 1, borderLeft: flipped ? '1px solid var(--border-default)' : 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>Case {String(index + 1).padStart(2, '0')}</span>
            <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--border-default)' }}></span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ap-blue)' }}>{c.tag}</span>
          </div>

          <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 34, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1.15, margin: 0 }}>
            <span style={{ marginRight: 8 }}>{c.icon}</span>{c.goal}
          </h3>

          <div style={{ marginTop: 24, fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)' }}>
            {c.narrative.map((p, i) =>
            <p key={i} style={{ margin: i === 0 ? 0 : '16px 0 0' }}>{p}</p>
            )}
          </div>

          {/* Result block */}
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border-default)' }}>
            <div className="section-eyebrow" style={{ marginBottom: 20 }}>Ergebnis</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {c.kpis.map((k, i) =>
              <div key={i}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 36, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.03em', lineHeight: 1 }}>{k.n}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', marginTop: 6, lineHeight: 1.4 }}>{k.l}</div>
                </div>
              )}
            </div>
          </div>

          {/* Channels used */}
          <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {c.channels.map((ch) =>
            <span key={ch} className="chip" style={{ background: 'var(--bg-page)', color: 'var(--fg-2)', border: '1px solid var(--border-default)', gap: 8 }}>
                <CaseChannelIcon name={ch} />
                {ch}
              </span>
            )}
          </div>

          <div style={{ flex: 1 }}></div>

          {/* Quote */}
          <blockquote style={{ margin: '32px 0 0', padding: '20px 0 0', borderTop: '1px solid var(--border-default)' }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: 'var(--fg-1)' }}>{c.quote}</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', marginTop: 10, fontWeight: 500 }}>{c.who}</div>
          </blockquote>
        </div>

        {/* Real-content side */}
        <div className="case-slot" style={{ background: 'linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%)', padding: 40, display: 'flex', alignItems: 'stretch', order: flipped ? 1 : 2, borderRight: flipped ? '1px solid var(--border-default)' : 0 }}>
          {c.slot.kind === 'linkedin' && <LinkedInSlot c={c} />}
          {c.slot.kind === 'cognizant' &&
          <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <LinkedInPostSlot c={c} impressions="65.970" engagement="250 Kommentare · 19 Reposts" />
            </div>
          }
          {c.slot.kind === 'exxeta' &&
          <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <LinkedInPostSlot c={c} impressions={c.slot.impressions} engagement={c.slot.engagement} />
              <NewsletterAdCard src={c.slot.adImg} alt="Newsletter-Anzeige für das Exxeta-Webinar zu KI im Konzern" />
            </div>
          }
          {c.slot.kind === 'thoughtworks' && <ThoughtworksSlot c={c} />}
        </div>
      </div>
    </article>);

}

/* Visually richer slots that already hint at the kind of content that will live there. */
function LinkedInSlot({ c }) {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Mock LinkedIn post header */}
      <div style={{ background: '#fff', borderRadius: 10, border: '1px solid #e0e4ea', boxShadow: '0 8px 24px rgba(0,0,0,0.06)', overflow: 'hidden' }}>
        <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid #f0f2f5' }}>
          <img src="assets/philipp.png" style={{ width: 44, height: 44, borderRadius: 999, objectFit: 'cover', objectPosition: 'center 22%' }} alt="" />
          <div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, color: '#000' }}>Philipp Raasch</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: '#666' }}>Founder · Der Autopreneur · 60.000+ Follower</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, color: '#888' }}>2 Tage · 🌍</div>
          </div>
          <div style={{ marginLeft: 'auto', fontSize: 18, color: '#888' }}>•••</div>
        </div>
        <div style={{ padding: 16 }}>
          <div className="slot" style={{ height: 240, flexDirection: 'column', background: '#fafbfc' }}>
            <div className="slot-label">{c.slot.label}</div>
            <span className="slot-icon">💼</span>
            <div className="slot-body">
              <strong>Echtes Post-Screenshot einsetzen</strong>
              {c.slot.help}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 16, paddingTop: 12, borderTop: '1px solid #f0f2f5', fontFamily: 'var(--font-sans)', fontSize: 12, color: '#666' }}>
            <span>👍 ❤ 🤝 1.2k</span>
            <span style={{ marginLeft: 'auto' }}>{c.kpis[1]?.n || '249'} Kommentare</span>
          </div>
        </div>
      </div>
    </div>);

}

/* Consistent channel icon set used in case-study chips. Same family as Hero icons. */
function CaseChannelIcon({ name }) {
  const props = { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'LinkedIn') {
    // Solid LinkedIn glyph — official "in" mark style
    return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z" /></svg>;
  }
  if (name === 'Newsletter') return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>;
  if (name === 'Podcast') return <svg {...props}><path d="M5 13a7 7 0 0 1 14 0" /><rect x="4" y="13" width="4" height="7" rx="1.5" /><rect x="16" y="13" width="4" height="7" rx="1.5" /></svg>;
  if (name === 'YouTube') return <svg {...props}><rect x="2.5" y="5" width="19" height="14" rx="3" /><path d="M10.5 9.5v5l4.5-2.5z" fill="currentColor" stroke="none" /></svg>;
  if (name === 'Focus Online') return <svg {...props}><circle cx="12" cy="12" r="8" /><path d="M8 12h8M12 8v8" /></svg>;
  return null;
}

/* REAL LinkedIn-Post screenshot card. Used for both Cognizant and Exxeta.
   Tall screenshots get cropped at max-height with a soft fade-out at the bottom.
*/
function LinkedInPostSlot({ c, impressions, engagement }) {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 12, alignSelf: 'start' }}>
      <figure style={{ margin: 0, borderRadius: 10, overflow: 'hidden', background: '#fff', border: '1px solid #e0e4ea', boxShadow: '0 12px 32px rgba(0,0,0,0.10)', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: '#fff', borderBottom: '1px solid #e0e4ea' }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="#0a66c2"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z" /></svg>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: '#666' }}>LinkedIn · Philipp Raasch</span>
          <span style={{ flex: 1 }}></span>
          <span title="Impressions" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, color: 'var(--ap-blue)', background: 'var(--bg-accent-soft)', padding: '3px 10px', borderRadius: 999 }}>
            <span>{impressions} Impressions</span>
          </span>
        </div>
        <div style={{ maxHeight: 540, overflow: 'hidden', position: 'relative', background: '#f4f6f8' }}>
          <img
            src={c.slot.postImg}
            alt={`LinkedIn-Post von Philipp Raasch · ${c.id}`}
            style={{ width: '100%', display: 'block' }} />
          
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 90, background: 'linear-gradient(to bottom, rgba(244,246,248,0) 0%, rgba(255,255,255,0.95) 100%)', pointerEvents: 'none' }}></div>
        </div>
        <figcaption style={{ padding: '12px 14px', borderTop: '1px solid #e0e4ea', fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--ap-blue)' }}></span>
          {engagement}
        </figcaption>
      </figure>
    </div>);

}

function YouTubeSlot({ c }) {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Mock YouTube player */}
      <div style={{ background: '#000', borderRadius: 10, overflow: 'hidden', boxShadow: '0 8px 24px rgba(0,0,0,0.10)' }}>
        <div className="slot" style={{ aspectRatio: '16/9', background: 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)', border: 'none', borderRadius: 0, color: 'rgba(255,255,255,0.7)' }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: 'rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(8px)' }}>
            <div style={{ width: 0, height: 0, borderLeft: '18px solid rgba(255,255,255,0.95)', borderTop: '12px solid transparent', borderBottom: '12px solid transparent', marginLeft: 6 }}></div>
          </div>
          <div className="slot-label" style={{ background: 'rgba(0,0,0,0.6)', color: 'var(--ap-pink)', border: 'none' }}>{c.slot.label}</div>
        </div>
      </div>
      <div style={{ background: '#fff', borderRadius: 10, border: '1px solid #e0e4ea', padding: 16 }}>
        <div className="slot" style={{ height: 110, flexDirection: 'column', background: '#fafbfc' }}>
          <span className="slot-icon">📰</span>
          <div className="slot-body">
            <strong>Focus-Online-Gastartikel-Screenshot</strong>
            {c.slot.help}
          </div>
        </div>
      </div>
    </div>);

}

/* REAL content slot for the Thoughtworks case study.
   - Top: YouTube iframe of the SDV-study episode
   - Bottom: Focus Online gastbeitrag screenshot, framed as a browser-window-ish card.
*/
function ThoughtworksSlot({ c }) {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Live YouTube embed */}
      <div style={{ borderRadius: 10, overflow: 'hidden', boxShadow: '0 12px 32px rgba(0,0,0,0.14)', background: '#000', aspectRatio: '16/9' }}>
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${c.slot.videoId}?rel=0&modestbranding=1`}
          title="Thoughtworks SDV-Episode auf Der Autopreneur"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          style={{ width: '100%', height: '100%', display: 'block', border: 0 }} />
        
      </div>

      {/* Focus Online gastbeitrag — real screenshot in a faux browser frame */}
      <figure style={{ margin: 0, borderRadius: 10, overflow: 'hidden', background: '#fff', border: '1px solid #e0e4ea', boxShadow: '0 8px 24px rgba(0,0,0,0.08)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', background: '#f5f6f8', borderBottom: '1px solid #e0e4ea' }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#ff5f57' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#febc2e' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28c840' }}></span>
          <span style={{ flex: 1, marginLeft: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#666', background: '#fff', padding: '3px 10px', borderRadius: 4, border: '1px solid #e0e4ea', textAlign: 'center' }}>
            focus.de/auto/gastbeitrag-philipp-raasch
          </span>
        </div>
        <img
          src={c.slot.focusImg}
          alt="Gastbeitrag von Philipp Raasch auf Focus Online"
          style={{ width: '100%', display: 'block', objectFit: 'cover', objectPosition: 'top', maxHeight: 240 }} />
        
        <figcaption style={{ padding: '10px 14px', borderTop: '1px solid #e0e4ea', fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--ap-blue)' }}></span>
          Gastbeitrag auf Focus Online · 50.000 bis 150.000 zusätzliche Aufrufe pro Artikel
        </figcaption>
      </figure>

      {/* Newsletter-Ad — image of the actual sponsored block as it appeared in the Sunday Newsletter */}
      <NewsletterAdCard src={c.slot.adImg} alt="Newsletter-Anzeige für den SDV Pulse Report von Thoughtworks" />
    </div>);

}

/* Re-usable Newsletter-Ad card. Used for Thoughtworks + Exxeta newsletter screenshots. */
function NewsletterAdCard({ src, alt }) {
  return (
    <figure style={{ margin: 0, borderRadius: 10, overflow: 'hidden', background: '#fff', border: '1px solid #e0e4ea', boxShadow: '0 8px 24px rgba(0,0,0,0.08)' }}>
      <div style={{ padding: '8px 14px', background: '#fff', borderBottom: '1px solid #e0e4ea', display: 'flex', alignItems: 'center', gap: 8 }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ap-blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: '#666', fontWeight: 500 }}>Newsletter-Anzeige · Der Autopreneur</span>
      </div>
      <img src={src} alt={alt} style={{ width: '100%', display: 'block' }} />
    </figure>);

}
window.CaseStudies = CaseStudies;