// Cases section - featured + horizontal carousel + testimonials.
// Featured case is a hero-style block with the workflow timeline.
// Carousel uses native CSS scroll-snap (drag to swipe), with arrow buttons
// for desktop. Testimonials are a 3-card wall.

const Cases = ({ lang }) => {
  const data = (window.CASES && window.CASES[lang]) || (window.CASES && window.CASES.nl);
  const scrollRef = React.useRef(null);
  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
  const [canScrollNext, setCanScrollNext] = React.useState(true);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [progress, setProgress] = React.useState({ thumbWidth: 100, thumbLeft: 0 });

  const updateScrollState = React.useCallback(() => {
    const el = scrollRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    setCanScrollPrev(el.scrollLeft > 8);
    setCanScrollNext(el.scrollLeft < max - 8);
    // visible portion as % of total scrollable width
    const thumbPct = Math.max(20, Math.min(100, (el.clientWidth / el.scrollWidth) * 100));
    const leftPct = max > 0 ? (el.scrollLeft / max) * (100 - thumbPct) : 0;
    setProgress({ thumbWidth: thumbPct, thumbLeft: leftPct });
    // active index for dots
    const cards = el.querySelectorAll('[data-case-card]');
    let closestIdx = 0;
    let closestDist = Infinity;
    const center = el.scrollLeft + el.clientWidth / 2;
    cards.forEach((c, i) => {
      const cardCenter = c.offsetLeft + c.offsetWidth / 2;
      const d = Math.abs(cardCenter - center);
      if (d < closestDist) { closestDist = d; closestIdx = i; }
    });
    setActiveIdx(closestIdx);
  }, []);

  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    updateScrollState();
    el.addEventListener('scroll', updateScrollState, { passive: true });
    window.addEventListener('resize', updateScrollState);
    return () => {
      el.removeEventListener('scroll', updateScrollState);
      window.removeEventListener('resize', updateScrollState);
    };
  }, [updateScrollState]);

  const scrollBy = (dir) => {
    const el = scrollRef.current;
    if (!el) return;
    const cards = el.querySelectorAll('[data-case-card]');
    if (!cards.length) return;
    const cardW = cards[0].offsetWidth + 16; // gap
    el.scrollBy({ left: dir * cardW, behavior: 'smooth' });
  };

  if (!data) return null;

  return (
    <section id="cases" style={{ background: 'var(--bg-muted)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{data.sectionEyebrow}</span>
          <h2>{data.sectionH2}</h2>
          <p>{data.sectionLede}</p>
        </div>

        <FeaturedCase data={data.featured} featuredLabel={data.featuredLabel} readMore={data.readMore} />

        {/* Mobile CTA: full carousel + featured card is too heavy on phones.
            Show only featured + a 'see all cases' link, skip the carousel. */}
        <div className="cases-mobile-cta" style={{
          display: 'none',
          marginTop: 32,
          padding: '24px',
          textAlign: 'center',
          border: '1px solid color-mix(in oklab, var(--accent) 25%, var(--border))',
          borderRadius: 'var(--radius-card)',
          background: 'color-mix(in oklab, var(--accent) 4%, var(--bg-raised))',
        }}>
          <p style={{ margin: 0, fontSize: 15, color: 'var(--ink-secondary)', lineHeight: 1.5 }}>
            {lang === 'nl' ? 'Nog 5 cases - AI-automatisering + web & vindbaarheid.' : '5 more cases - AI automation + web & findability.'}
          </p>
          <a href={lang === 'en' ? 'cases-en.html' : 'cases.html'} style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            marginTop: 14,
            padding: '10px 18px',
            background: 'var(--accent)',
            color: 'var(--accent-ink)',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            fontSize: 12,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            fontWeight: 600,
            textDecoration: 'none',
          }}>
            {lang === 'nl' ? 'Bekijk alle cases' : 'See all cases'} →
          </a>
        </div>

        {/* Carousel header with arrows - hidden on mobile via CSS */}
        <div className="cases-carousel-block" style={{
          marginTop: 64,
          marginBottom: 20,
          display: 'flex',
          alignItems: 'flex-end',
          justifyContent: 'space-between',
          gap: 24,
          flexWrap: 'wrap',
        }}>
          <div>
            <span className="mono" style={{ color: 'var(--ink-muted)', fontSize: 13, letterSpacing: '0.08em' }}>
              {lang === 'nl' ? 'MEER CASES' : 'MORE CASES'} · {String(data.carousel.length).padStart(2, '0')}
            </span>
            <p className="secondary" style={{ marginTop: 6, fontSize: 14 }}>
              {data.swipeHint}
            </p>
          </div>
          <div style={{ display: 'inline-flex', gap: 8 }}>
            <CaseArrow direction="prev" disabled={!canScrollPrev} onClick={() => scrollBy(-1)} />
            <CaseArrow direction="next" disabled={!canScrollNext} onClick={() => scrollBy(1)} />
          </div>
        </div>

        {/* Carousel - hidden on mobile via the .cases-carousel-block class */}
        <div className="cases-carousel-block" style={{
          margin: '0 calc(-1 * var(--gutter))',
          paddingLeft: 'var(--gutter)',
          paddingRight: 'var(--gutter)',
          position: 'relative',
        }}>
          <div
            ref={scrollRef}
            style={{
              display: 'grid',
              gridAutoFlow: 'column',
              gridAutoColumns: 'min(380px, 80vw)',
              gap: 16,
              overflowX: 'auto',
              scrollSnapType: 'x mandatory',
              scrollPadding: 'var(--gutter)',
              paddingBottom: 8,
              scrollbarWidth: 'none',
              msOverflowStyle: 'none',
            }}
            className="cases-scroller"
          >
            {data.carousel.map((c, i) => (
              <CaseCard key={c.id} data={c} readMore={data.readMore} index={i + 1} />
            ))}
          </div>
        </div>

        {/* Scroll progress bar - hidden on mobile */}
        <div className="cases-carousel-block" style={{
          marginTop: 20,
          height: 4,
          borderRadius: 999,
          background: 'color-mix(in oklab, var(--ink-muted) 25%, transparent)',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: `${progress.thumbLeft}%`,
            width: `${progress.thumbWidth}%`,
            background: 'var(--accent)',
            borderRadius: 999,
            transition: 'left 200ms var(--ease), width 200ms var(--ease)',
            boxShadow: '0 0 12px color-mix(in oklab, var(--accent) 50%, transparent)',
          }}/>
        </div>

        {/* Dot indicator + bottom arrows - hidden on mobile (mobile uses the CTA) */}
        <div className="cases-carousel-block" style={{
          marginTop: 16,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 14,
        }}>
          <CaseArrow direction="prev" disabled={!canScrollPrev} onClick={() => scrollBy(-1)} />
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            {data.carousel.map((_, i) => (
              <span key={i} style={{
                width: i === activeIdx ? 22 : 8,
                height: 8,
                borderRadius: 999,
                background: i === activeIdx ? 'var(--accent)' : 'color-mix(in oklab, var(--ink-muted) 40%, transparent)',
                transition: 'all 200ms var(--ease)',
              }}/>
            ))}
          </div>
          <CaseArrow direction="next" disabled={!canScrollNext} onClick={() => scrollBy(1)} />
        </div>
      </div>

      <style>{`
        .cases-scroller::-webkit-scrollbar { display: none; }
        .cases-scroller > * { scroll-snap-align: start; }
        /* Mobile: hide the carousel (heavy on phones), show a CTA-only block */
        @media (max-width: 720px) {
          .cases-carousel-block { display: none !important; }
          .cases-mobile-cta { display: block !important; }
        }
      `}</style>
    </section>
  );
};

const FeaturedCase = ({ data, featuredLabel, readMore }) => {
  return (
    <div className="featured-case" style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 1fr)',
      gap: 0,
      padding: 0,
      overflow: 'hidden',
      borderRadius: 'var(--radius-card)',
      background: 'color-mix(in oklab, var(--accent) 7%, var(--bg-raised))',
      border: '1px solid color-mix(in oklab, var(--accent) 35%, var(--border))',
      boxShadow: '0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent), 0 8px 32px color-mix(in oklab, var(--accent) 8%, transparent)',
    }}>
      {/* Left: editorial */}
      <div style={{
        padding: 'clamp(20px, 2.2vw, 32px)',
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
        borderRight: '1px solid color-mix(in oklab, var(--accent) 25%, var(--border))',
      }} className="featured-case__left">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <span className="mono" style={{
            color: 'var(--accent)',
            fontSize: 13,
            letterSpacing: '0.08em',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: 'var(--accent)',
              boxShadow: '0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent)',
            }}/>
            {featuredLabel}
          </span>
          <span className="mono" style={{ color: 'var(--ink-muted)', fontSize: 11 }}>
            {data.kind}
          </span>
        </div>

        <div>
          <span className="mono" style={{ color: 'var(--ink-muted)', fontSize: 11 }}>
            {data.client} · {data.sector}
          </span>
        </div>

        <h3 style={{
          fontSize: 'clamp(1.25rem, 1.4vw + 0.6rem, 1.625rem)',
          letterSpacing: '-0.02em',
          lineHeight: 1.15,
          textWrap: 'balance',
        }}>
          {data.title}
        </h3>

        <p className="secondary" style={{ fontSize: 14.5, lineHeight: 1.55, maxWidth: '52ch' }}>
          {data.summary}
        </p>

        <a href={`cases.html#${data.id}`} style={{
          marginTop: 'auto',
          color: 'var(--accent)',
          fontFamily: 'var(--font-mono)',
          fontSize: 12,
          letterSpacing: '0.06em',
          textTransform: 'uppercase',
          fontWeight: 500,
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
        }}>
          {readMore} →
        </a>
      </div>

      {/* Right: metrics + flow */}
      <div style={{
        padding: 'clamp(20px, 2.2vw, 32px)',
        display: 'flex',
        flexDirection: 'column',
        gap: 18,
        background: 'color-mix(in oklab, var(--accent) 4%, transparent)',
      }} className="featured-case__right">
        {/* Big metric stack */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {data.metrics.map((m, i) => (
            <div key={i} style={{
              padding: '12px 0',
              borderTop: i === 0 ? '1px solid var(--border)' : 'none',
              borderBottom: '1px solid var(--border)',
              display: 'flex',
              alignItems: 'baseline',
              justifyContent: 'space-between',
              gap: 16,
            }}>
              <span className="mono-num" style={{
                fontSize: 'clamp(1.25rem, 1.6vw + 0.5rem, 1.75rem)',
                fontWeight: 600,
                color: i === 0 ? 'var(--accent)' : 'var(--ink-primary)',
                letterSpacing: '-0.02em',
                lineHeight: 1,
              }}>
                {m.value}
              </span>
              <span style={{
                color: 'var(--ink-secondary)',
                fontSize: 12.5,
                textAlign: 'right',
                maxWidth: '24ch',
                lineHeight: 1.4,
              }}>
                {m.label}
              </span>
            </div>
          ))}
        </div>

        {/* Flow timeline */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 10,
          padding: '16px 18px',
          background: 'var(--bg-raised)',
          border: '1px solid var(--border)',
          borderRadius: 12,
        }}>
          <span className="mono" style={{ color: 'var(--ink-muted)', fontSize: 12, letterSpacing: '0.08em' }}>
            TIMELINE
          </span>
          {data.flow.map((f, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '60px 1fr auto',
              gap: 12,
              alignItems: 'center',
              fontSize: 13,
            }}>
              <span className="mono" style={{ color: 'var(--ink-muted)', fontSize: 11 }}>
                {f.time}
              </span>
              <span style={{ color: 'var(--ink-primary)' }}>
                {f.label}
              </span>
              <span aria-hidden="true" style={{
                width: 12, height: 12, borderRadius: 999,
                background: 'color-mix(in oklab, var(--accent) 18%, transparent)',
                color: 'var(--accent)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="8" height="8" viewBox="0 0 12 12" fill="none">
                  <path d="M2.5 6.2 5 8.7l4.5-5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .featured-case { grid-template-columns: 1fr !important; }
          .featured-case__left { border-right: none !important; border-bottom: 1px solid var(--border); }
        }
      `}</style>
    </div>
  );
};

const CaseCard = ({ data, readMore, index = 0 }) => {
  const [hover, setHover] = React.useState(false);
  const isExternal = !!data.externalLink;
  const idx = String(index).padStart(2, '0');
  const primary = data.metrics && data.metrics[0];

  return (
    <a
      href={`cases.html#${data.id}`}
      data-case-card
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        flexDirection: 'column',
        padding: 0,
        background: 'var(--bg-raised)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius-card)',
        textDecoration: 'none',
        color: 'inherit',
        overflow: 'hidden',
        transition: 'transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover
          ? '0 18px 36px color-mix(in oklab, var(--ink-primary) 18%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent)'
          : '0 1px 2px color-mix(in oklab, var(--ink-primary) 4%, transparent)',
        borderColor: hover ? 'var(--border-strong)' : 'var(--border)',
        minHeight: 460,
        position: 'relative',
      }}
    >
      {/* Image strip - uniformly duotoned so all 3 cases harmonise */}
      {data.image ? (
        <div style={{
          aspectRatio: '16 / 7',
          background: '#0a0810',
          position: 'relative',
          overflow: 'hidden',
          borderBottom: '1px solid var(--border)',
        }}>
          <img src={data.image} alt=""
               aria-hidden="true"
               style={{
                 width: '100%',
                 height: '100%',
                 objectFit: 'cover',
                 display: 'block',
                 transition: 'transform 620ms var(--ease), filter 320ms var(--ease)',
                 transform: hover ? 'scale(1.04)' : 'scale(1)',
                 filter: hover
                   ? 'grayscale(0.25) contrast(1.0) brightness(0.95) saturate(1.05)'
                   : 'grayscale(0.85) contrast(1.05) brightness(0.55) saturate(0.7)',
               }} />
          {/* Violet duotone wash */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            inset: 0,
            background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 45%, transparent) 0%, transparent 55%), linear-gradient(180deg, transparent 30%, color-mix(in oklab, #0a0810 88%, transparent) 100%)',
            mixBlendMode: 'multiply',
            pointerEvents: 'none',
            transition: 'opacity 320ms var(--ease)',
            opacity: hover ? 0.35 : 1,
          }}/>
          {/* Subtle scanline texture for tactility */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            inset: 0,
            background: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px)',
            pointerEvents: 'none',
            mixBlendMode: 'overlay',
          }}/>
          {/* Tiny mono caption inside image */}
          <span className="mono" aria-hidden="true" style={{
            position: 'absolute',
            top: 12, left: 14,
            fontSize: 10,
            letterSpacing: '0.16em',
            color: 'color-mix(in oklab, #ffffff 80%, transparent)',
            textShadow: '0 1px 2px rgba(0,0,0,0.6)',
          }}>{(data.kind || '').toLowerCase()}</span>
          <span className="mono" aria-hidden="true" style={{
            position: 'absolute',
            top: 12, right: 14,
            fontSize: 10,
            letterSpacing: '0.16em',
            color: 'color-mix(in oklab, #ffffff 60%, transparent)',
            textShadow: '0 1px 2px rgba(0,0,0,0.6)',
          }}>{(data.client || '').toLowerCase()}</span>
        </div>
      ) : (
        /* No image: render a violet-tinted result strip at the same 16/7 aspect
           ratio. Same height as the image area means the case-number markers
           ('01/', '02/', etc.) below it land on the same baseline across all
           cards in the carousel. Showing the primary metric here also gives
           the automation cases an editorial "headline result" instead of an
           empty visual. */
        primary && (
          <div aria-hidden="true" style={{
            aspectRatio: '16 / 7',
            background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--bg-raised)) 0%, var(--bg-raised) 75%)',
            borderBottom: '1px solid color-mix(in oklab, var(--accent) 25%, var(--border))',
            position: 'relative',
            overflow: 'hidden',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '14px 22px',
          }}>
            <span className="mono" aria-hidden="true" style={{
              position: 'absolute',
              top: 12, left: 14,
              fontSize: 10,
              letterSpacing: '0.16em',
              color: 'var(--accent)',
            }}>{(data.kind || '').toLowerCase()}</span>
            <span className="mono" aria-hidden="true" style={{
              position: 'absolute',
              top: 12, right: 14,
              fontSize: 10,
              letterSpacing: '0.16em',
              color: 'var(--ink-muted)',
            }}>{(data.client || '').toLowerCase()}</span>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: 4,
              textAlign: 'center',
            }}>
              <span className="mono-num" style={{
                fontSize: 'clamp(1.5rem, 2vw + 0.5rem, 2rem)',
                fontWeight: 600,
                color: 'var(--accent)',
                letterSpacing: '-0.02em',
                lineHeight: 1,
                fontFeatureSettings: '"tnum"',
              }}>
                {primary.value}
              </span>
              <span style={{
                fontSize: 11,
                fontFamily: 'var(--font-mono)',
                letterSpacing: '0.04em',
                color: 'var(--ink-secondary)',
                maxWidth: '28ch',
                lineHeight: 1.35,
              }}>
                {primary.label}
              </span>
            </div>
          </div>
        )
      )}

      {/* Body */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 18,
        padding: '0 24px 24px',
        flex: 1,
        position: 'relative',
      }}>
        {/* Big index marker - overlapping image/result-strip seam, typographic anchor.
            With the no-image branch above now rendering a 16/7 strip, every card
            has the same header height so the marker lands on the same baseline. */}
        {idx !== '00' && (
          <div className="mono-num" aria-hidden="true" style={{
            position: 'relative',
            marginTop: -38,
            marginBottom: 4,
            marginLeft: -2,
            fontSize: 64,
            lineHeight: 1,
            fontWeight: 500,
            letterSpacing: '-0.04em',
            color: 'var(--accent)',
            textShadow: data.image ? '0 4px 18px rgba(0,0,0,0.55)' : 'none',
            fontFeatureSettings: '"tnum"',
            pointerEvents: 'none',
            zIndex: 2,
          }}>
            {idx}<span style={{ opacity: 0.45, marginLeft: 2 }}>/</span>
          </div>
        )}
        {/* Eyebrow row */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          gap: 8,
        }}>
          <span className="mono" style={{
            color: 'var(--accent)',
            fontSize: 11,
            letterSpacing: '0.12em',
            paddingBottom: 4,
            borderBottom: '1px solid color-mix(in oklab, var(--accent) 45%, transparent)',
          }}>
            {data.kind}
          </span>
          <span className="mono" style={{
            color: 'var(--ink-muted)',
            fontSize: 10,
            letterSpacing: '0.14em',
            textAlign: 'right',
            paddingTop: 2,
          }}>
            {data.sector}
          </span>
        </div>

        {/* Card title - mono uppercase keeps the overview functional;
            editorial italic display lives on the detail page */}
        <h3 style={{
          margin: 0,
          display: 'flex',
          flexDirection: 'column',
          gap: 10,
        }}>
          <span style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 'clamp(1.05rem, 0.55vw + 0.9rem, 1.25rem)',
            fontWeight: 500,
            letterSpacing: '0.02em',
            lineHeight: 1.05,
            color: 'var(--ink-primary)',
            textTransform: 'uppercase',
          }}>
            {data.client}
          </span>
          <span style={{
            fontFamily: 'var(--font-body)',
            fontSize: '0.95rem',
            fontWeight: 400,
            color: 'var(--ink-secondary)',
            lineHeight: 1.35,
            letterSpacing: '-0.005em',
            textWrap: 'balance',
          }}>
            {data.title}
          </span>
        </h3>

        {/* Single key result - the proof */}
        {primary && (
          <div style={{
            marginTop: 'auto',
            paddingTop: 18,
            borderTop: '1px solid var(--border)',
            display: 'flex',
            alignItems: 'baseline',
            gap: 14,
          }}>
            <span className="mono-num" style={{
              fontSize: 'clamp(1.5rem, 1.3vw + 1rem, 1.85rem)',
              fontWeight: 500,
              color: 'var(--accent)',
              letterSpacing: '-0.02em',
              lineHeight: 1,
              whiteSpace: 'nowrap',
            }}>
              {primary.value}
            </span>
            <span style={{
              fontSize: 12,
              color: 'var(--ink-muted)',
              fontFamily: 'var(--font-mono)',
              letterSpacing: '0.04em',
              lineHeight: 1.3,
            }}>
              {primary.label}
            </span>
          </div>
        )}

        {/* Footer: live indicator + arrow */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 8,
          paddingTop: 8,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
            {isExternal ? (
              <>
                <span aria-hidden="true" style={{
                  width: 6, height: 6, borderRadius: 999,
                  background: 'var(--accent)',
                  boxShadow: '0 0 10px color-mix(in oklab, var(--accent) 80%, transparent)',
                }}/>
                <span className="mono" style={{
                  fontSize: 10,
                  letterSpacing: '0.18em',
                  color: 'var(--ink-secondary)',
                }}>BEKIJK LIVE</span>
              </>
            ) : data.comingSoon ? (
              <>
                <span aria-hidden="true" style={{
                  width: 6, height: 6, borderRadius: 999,
                  background: 'var(--ink-muted)',
                }}/>
                <span className="mono" style={{
                  fontSize: 10,
                  letterSpacing: '0.18em',
                  color: 'var(--ink-muted)',
                }}>BINNENKORT LIVE</span>
              </>
            ) : (
              <span className="mono" style={{
                fontSize: 10,
                letterSpacing: '0.18em',
                color: 'var(--ink-muted)',
              }}>LEES CASE</span>
            )}
          </div>
          <span aria-hidden="true" style={{
            width: 28, height: 28, borderRadius: 999,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            background: hover ? 'var(--accent)' : 'transparent',
            color: hover ? 'var(--accent-ink)' : 'var(--ink-secondary)',
            border: '1px solid ' + (hover ? 'var(--accent)' : 'var(--border)'),
            transition: 'all 220ms var(--ease)',
            flexShrink: 0,
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </span>
        </div>
      </div>
    </a>
  );
};

const CaseArrow = ({ direction, disabled, onClick }) => (
  <button
    type="button"
    aria-label={direction === 'prev' ? 'Previous' : 'Next'}
    disabled={disabled}
    onClick={onClick}
    style={{
      width: 48, height: 48, borderRadius: 999,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: disabled ? 'var(--bg-raised)' : 'var(--accent)',
      border: disabled ? '1px solid var(--border)' : '1px solid var(--accent)',
      color: disabled ? 'var(--ink-muted)' : 'var(--accent-ink)',
      cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.5 : 1,
      transition: 'transform 160ms var(--ease), filter 160ms var(--ease)',
      boxShadow: disabled ? 'none' : '0 4px 16px color-mix(in oklab, var(--accent) 35%, transparent)',
    }}
    onMouseEnter={(e) => { if (!disabled) { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(1.08)'; } }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; }}
  >
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      {direction === 'prev'
        ? <path d="M19 12H5M12 19l-7-7 7-7"/>
        : <path d="M5 12h14M13 5l7 7-7 7"/>}
    </svg>
  </button>
);

const Testimonials = ({ lang }) => {
  const data = (window.CASES && window.CASES[lang]) || (window.CASES && window.CASES.nl);
  if (!data || !data.testimonials || !data.testimonials.length) return null;
  return (
    <section id="testimonials" style={{ background: 'var(--accent-muted)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{data.testimonialsEyebrow}</span>
          <h2>{data.testimonialsH2}</h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
          gap: 16,
        }} className="testimonials-grid">
          {data.testimonials.map((t, i) => (
            <TestimonialCard key={i} data={t} index={i} />
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        }
        /* Mobile (<=620px): horizontal scroll-snap carousel matches the
           Principles section. Each review card snaps to start. */
        @media (max-width: 620px) {
          .testimonials-grid {
            display: flex !important;
            grid-template-columns: none !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 12px !important;
            margin: 24px calc(-1 * var(--gutter)) 0 !important;
            padding: 4px var(--gutter);
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
          }
          .testimonials-grid::-webkit-scrollbar { display: none; }
          .testimonials-grid > * {
            flex: 0 0 80vw;
            max-width: 340px;
            scroll-snap-align: start;
          }
        }
      `}</style>
    </section>
  );
};

const TestimonialCard = ({ data, index }) => (
  <figure className="card" style={{
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 24,
    padding: 32,
    minHeight: 280,
    position: 'relative',
  }}>
    {/* Closing quote mark - bottom right, decorative */}
    <span aria-hidden="true" style={{
      position: 'absolute',
      bottom: 16,
      right: 24,
      fontFamily: 'var(--font-display)',
      fontSize: 64,
      lineHeight: 0.6,
      color: 'var(--accent)',
      opacity: 0.4,
      letterSpacing: '-0.02em',
      pointerEvents: 'none',
    }}>”</span>
    {/* Opening quote mark */}
    <span aria-hidden="true" style={{
      fontFamily: 'var(--font-display)',
      fontSize: 64,
      lineHeight: 0.6,
      color: 'var(--accent)',
      opacity: 0.4,
      height: 24,
      letterSpacing: '-0.02em',
    }}>“</span>

    <blockquote style={{
      margin: 0,
      fontSize: 17,
      lineHeight: 1.5,
      color: 'var(--ink-primary)',
      flex: 1,
      letterSpacing: '-0.005em',
      textWrap: 'pretty',
    }}>
      {data.quote}
    </blockquote>

    <figcaption style={{
      paddingTop: 16,
      borderTop: '1px solid var(--border)',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 999,
        background: 'var(--bg-muted)',
        border: '1px solid var(--border)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-mono)',
        fontSize: 12,
        color: 'var(--ink-muted)',
        flexShrink: 0,
      }}>
        {data.name.replace(/[^A-Za-z\u00C0-\u017F]/g, '').slice(0, 2).toUpperCase() || '-'}
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-primary)' }}>
          {data.name}
        </div>
        <div className="mono" style={{ fontSize: 13, color: 'var(--ink-muted)', marginTop: 2 }}>
          {data.role} · {data.company}
        </div>
      </div>
    </figcaption>
  </figure>
);

window.Cases = Cases;
window.Testimonials = Testimonials;
window.FeaturedCase = FeaturedCase;
window.CaseCard = CaseCard;