// Hero, Approach (Audit→Build→Care), Strategy (Map→Identify→Size), Cases.
// v3 brand-owned brief: process-first, strategy-led.

const Hero = ({ lang, showMotion }) => {
  const bookUrl = tr(lang, 'contact.book.url');
  return (
    <section id="top" style={{ paddingTop: 80, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
      {showMotion && <div className="hero-flow-backdrop" style={{ position: 'absolute', inset: 0 }}><HeroFlowBackdrop /></div>}
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: showMotion ? 'minmax(0, 1.05fr) minmax(0, 1fr)' : '1fr',
          gap: 64,
          alignItems: 'center',
        }} className="hero-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: showMotion ? 'none' : 920 }}>
            <span className="eyebrow" style={{ color: 'var(--ink-muted)' }}>
              {tr(lang, 'hero.eyebrow')}
            </span>
            <h1 style={{
              fontSize: showMotion ? 'clamp(2rem, 3.6vw + 0.5rem, 3.5rem)' : 'clamp(2.25rem, 5.5vw + 0.5rem, 4rem)',
              lineHeight: 1.05,
              letterSpacing: '-0.025em',
              textWrap: 'balance',
            }}>
              <span style={{ display: 'block' }}>{tr(lang, 'hero.h1.l1')}</span>
              <span style={{ display: 'block', color: 'var(--ink-secondary)' }}>{tr(lang, 'hero.h1.l2')}</span>
            </h1>
            <p style={{
              fontSize: 'clamp(1.125rem, 1.4vw + 0.25rem, 1.5rem)',
              lineHeight: 1.4,
              color: 'var(--ink-primary)',
              fontWeight: 500,
              letterSpacing: '-0.005em',
              margin: 0,
              maxWidth: 640,
            }}>
              {lang === 'nl' ? (
                <>
                  We bouwen <strong>AI en automatisering</strong> in je <strong>bestaande processen en systemen</strong>.
                  <br />
                  <em style={{
                    fontFamily: 'var(--font-display)',
                    fontStyle: 'italic',
                    color: 'var(--accent)',
                    fontWeight: 400,
                    fontSize: '1.15em',
                    letterSpacing: '0.012em',
                  }}>Niet erbovenop.</em>
                </>
              ) : (
                <>
                  We build <strong>AI and automation</strong> into your <strong>existing processes and systems</strong>.
                  <br />
                  <em style={{
                    fontFamily: 'var(--font-display)',
                    fontStyle: 'italic',
                    color: 'var(--accent)',
                    fontWeight: 400,
                    fontSize: '1.15em',
                    letterSpacing: '0.012em',
                  }}>Not on top of them.</em>
                </>
              )}
            </p>
            <p className="lead" style={{ maxWidth: 580, fontSize: '0.9375rem', lineHeight: 1.55, color: 'var(--ink-secondary)' }}>
              {tr(lang, 'hero.sub')}
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
              <a
                 data-cal-link="modusops/quick-scan"
                 data-cal-config='{"layout":"month_view","theme":"dark"}'
                 className="btn btn-primary" style={{ padding: '14px 22px', fontSize: 16, cursor: 'pointer' }}
                 onClick={(e) => { e.preventDefault(); if (window.Cal) { window.Cal('modal', { calLink: 'modusops/quick-scan', config: { layout: 'month_view', theme: 'dark', language: lang } }); } else { window.open('https://cal.eu/modusops/quick-scan', '_self'); } }}>
                {tr(lang, 'hero.cta.primary')} <span className="price">{tr(lang, 'hero.cta.price')}</span>
              </a>
              <a href="aanpak.html" className="btn btn-secondary" style={{ padding: '14px 22px', fontSize: 16 }}>
                {tr(lang, 'hero.cta.secondary')}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                  <path d="M12 5v14M5 12l7 7 7-7"/>
                </svg>
              </a>
            </div>
            {/* Pricing strip removed from hero - prices live exclusively on
                /prijzen. Trust line moves up with a top border so the hero
                still has a closing rule. */}
            <div style={{
              marginTop: 32,
              paddingTop: 24,
              borderTop: '1px solid var(--border)',
            }}>
              <span className="mono" style={{ color: 'var(--ink-muted)', fontSize: 11, lineHeight: 1.6 }}>
                {tr(lang, 'hero.trust.line')}
              </span>
            </div>
          </div>

          {showMotion && (
            <div className="hero-workflow-slot" style={{ display: 'flex', justifyContent: 'center' }}>
              <HeroWorkflowPanel lang={lang} />
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        /* Mobile: hide the workflow tape + ambient backdrop animation
           - they distract more than they sell on small screens */
        @media (max-width: 768px) {
          .hero-workflow-slot { display: none !important; }
          .hero-flow-backdrop { display: none !important; }
        }
      `}</style>
    </section>
  );
};

const Approach = ({ lang }) => {
  const isNl = lang === 'nl';
  const violetItalic = { fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--accent)' };
  const stepsNl = [
    { num: '01', title: 'LISTEN', body: 'We praten met de mensen in je team die het werk doen en bekijken hoe processen vandaag écht verlopen: mensen, stappen, uitzonderingen en frustraties.' },
    { num: '02', title: 'MAP',    body: 'We maken zichtbaar waar tijd verloren gaat, waar fouten ontstaan en wat eerst moet. We scoren en prioriteren use-cases op impact en haalbaarheid.' },
    { num: '03', title: 'BUILD',  body: 'We bouwen de eerste flow met duidelijke scope, testmomenten en eigenaarschap. Klein genoeg om snel live te gaan, stevig genoeg om in je werking te passen.' },
    { num: '04', title: 'CARE',   body: 'Na go-live blijven we opvolgen. We monitoren, lossen op, verbeteren en bouwen verder op basis van gebruik, feedback en echte data.' },
  ];
  const stepsEn = [
    { num: '01', title: 'LISTEN', body: 'We talk to the people in your team doing the work and look at how processes actually run today: people, steps, exceptions and frustrations.' },
    { num: '02', title: 'MAP',    body: 'We make visible where time is lost, where errors happen and what should come first. We score and prioritise use cases on impact and feasibility.' },
    { num: '03', title: 'BUILD',  body: 'We build the first workflow with clear scope, testing moments and ownership. Small enough to go live fast, solid enough to fit your operations.' },
    { num: '04', title: 'CARE',   body: 'We stay after go-live: monitoring, fixes, improvements and new workflows, based on usage, feedback and real data.' },
  ];
  const steps = isNl ? stepsNl : stepsEn;
  return (
    <section id="aanpak" style={{ background: 'var(--bg-muted)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'approach.eyebrow')}</span>
          <h2>
            {isNl
              ? 'We kijken eerst hoe het werk echt loopt. Dan pas bouwen we.'
              : 'We look at how the work really runs first. Only then do we build.'}
          </h2>
          <p style={{ marginTop: 16, maxWidth: 640, fontSize: '1.0625rem', lineHeight: 1.55, color: 'var(--ink-secondary)' }}>
            {isNl ? (
              <>We helpen bedrijven hun operations opnieuw bekijken, slimmer organiseren en versterken met AI. Niet vanuit de nieuwste tool, maar vanuit hoe het werk vandaag écht gebeurt - in je processen, je systemen, je team, en alle uitzonderingen die nergens in een schema passen.</>
            ) : (
              <>We help companies rethink their operations, organise them more smartly, and strengthen them with AI. Not from the latest tool, but from how the work actually happens today - in your processes, systems, team, and all the exceptions that don’t fit any neat diagram.</>
            )}
          </p>
        </div>

        <p className="aanpak-signature" style={{ fontStyle: 'normal' }}>
          {isNl ? (
            <>
              <span style={{ display: 'block' }}>MODUS is Latijn voor <em style={{ fontStyle: 'italic' }}>manier, maat, werkwijze</em>.</span>
              <span style={{ display: 'block' }}>Denk: <em style={violetItalic}>modus operandi</em>.</span>
              <span style={{ display: 'block' }}>Daar grijpen wij op in.</span>
            </>
          ) : (
            <>
              <span style={{ display: 'block' }}>MODUS is Latin for <em style={{ fontStyle: 'italic' }}>manner, measure, way</em>.</span>
              <span style={{ display: 'block' }}>Think: <em style={violetItalic}>modus operandi</em>.</span>
              <span style={{ display: 'block' }}>That’s exactly where we step in.</span>
            </>
          )}
        </p>

        <div className="aanpak-row">
          <div className="aanpak-steps">
            {steps.map(s => (
              <div key={s.num} className="aanpak-step">
                <span className="aanpak-step__num">{s.num}</span>
                <h3 className="aanpak-step__title">{s.title}</h3>
                <p className="aanpak-step__body">{s.body}</p>
              </div>
            ))}
          </div>

          <p className="aanpak-closer">
            {isNl ? 'Daar beginnen wij.' : 'That’s where we start.'}
          </p>
        </div>
      </div>
    </section>
  );
};

const MFlowApproach = ({ lang }) => {
  const phases = [
    { key: 'scan',    x: 80,  y: 380, anchorX: 'left',   anchorY: 'below', t: 'mflow.scan' },
    { key: 'build',   x: 200, y: 60,  anchorX: 'center', anchorY: 'above', t: 'mflow.build' },
    { key: 'support', x: 500, y: 320, anchorX: 'center', anchorY: 'below', t: 'mflow.support' },
    { key: 'improve', x: 800, y: 60,  anchorX: 'center', anchorY: 'above', t: 'mflow.improve' },
  ];
  const drawDuration = 2400;
  const mPath = 'M 80 380 L 80 60 L 200 60 L 500 320 L 800 60 L 920 60 L 920 380';

  const pathRef = React.useRef(null);
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    const el = pathRef.current;
    const sec = sectionRef.current;
    if (!el || !sec) return;
    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Default state: M fully drawn (strokeDashoffset = 0). This guarantees
    // the M is ALWAYS visible even if the IntersectionObserver fails to
    // fire (Safari edge cases, mid-scroll mount, etc.). The animation
    // resets the offset to `len` and animates back to 0 when the section
    // enters the viewport - so users still get the draw effect when it
    // works, and a visible M when it doesn't.
    let len = el.getTotalLength() || 2400;
    el.style.strokeDasharray = len;
    el.style.strokeDashoffset = 0;
    el.style.transition = 'none';

    if (reduced) return;

    let hasPlayed = false;
    const play = () => {
      // Re-measure - first call may have returned 0 (SVG not yet laid out)
      const measured = el.getTotalLength();
      if (measured && measured !== len) {
        len = measured;
        el.style.strokeDasharray = len;
      }
      // Reset to undrawn state with no transition, then on the NEXT frame
      // apply the transition + draw to 0. Double-rAF is more reliable than
      // forced reflow via getBoundingClientRect across browsers (Safari).
      el.style.transition = 'none';
      el.style.strokeDashoffset = len;
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          el.style.transition = 'stroke-dashoffset ' + drawDuration + 'ms cubic-bezier(.2,.65,.25,1)';
          el.style.strokeDashoffset = 0;
        });
      });
      hasPlayed = true;
    };

    // Check if the section is already in viewport on mount (page loaded
    // scrolled to the M-Flow section, or fast-mounted in a visible area).
    // If yes, play on next frame - don't wait for the IntersectionObserver
    // callback queue which may delay on some browsers.
    const rect = sec.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (rect.top < vh && rect.bottom > 0) {
      requestAnimationFrame(play);
    }

    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !hasPlayed) play();
      });
    }, { threshold: 0.05 });
    io.observe(sec);
    return () => io.disconnect();
  }, []);

  return (
    <section ref={sectionRef} className="mflow-section" style={{ background: 'var(--bg-muted)', padding: '80px 24px' }}>
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', alignItems: 'center', maxWidth: 720, margin: '0 auto' }}>
          <span className="eyebrow">{tr(lang, 'mflow.eyebrow')}</span>
          <h2>{tr(lang, 'mflow.h2')}</h2>
          <p className="lead" style={{ marginTop: 8, whiteSpace: 'pre-line' }}>{tr(lang, 'mflow.lede')}</p>
        </div>

        <div className="m-flow" style={{ position: 'relative', width: '100%', aspectRatio: '1000 / 600', marginTop: 48 }}>
          <svg
            viewBox="-20 -120 1040 700"
            preserveAspectRatio="xMidYMid meet"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}
            aria-hidden="true"
          >
            <defs>
              <linearGradient id="mflow-grad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%"   stopColor="var(--accent)" stopOpacity="1"/>
                <stop offset="55%"  stopColor="var(--accent)" stopOpacity="1"/>
                <stop offset="100%" stopColor="var(--ink-primary)" stopOpacity="0.35"/>
              </linearGradient>
              <filter id="mflow-glow" x="-10%" y="-10%" width="120%" height="120%">
                <feGaussianBlur stdDeviation="3" result="blur"/>
                <feMerge>
                  <feMergeNode in="blur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>

            <path d={mPath} fill="none" stroke="currentColor" strokeWidth="0.8" opacity="0.12" strokeLinecap="round" strokeLinejoin="round"/>
            <path
              ref={pathRef}
              d={mPath}
              fill="none"
              stroke="url(#mflow-grad)"
              strokeWidth="6"
              strokeLinecap="round"
              strokeLinejoin="miter"
              style={{ filter: 'url(#mflow-glow)' }}
            />

            <g opacity="0.35" stroke="currentColor" strokeWidth="1">
              <line x1="60"  y1="380" x2="100" y2="380"/>
              <line x1="900" y1="380" x2="940" y2="380"/>
            </g>

            {phases.map(p => (
              <g key={p.key}>
                <circle cx={p.x} cy={p.y} r="14" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.35">
                  <animate attributeName="r" values="14;18;14" dur="2.4s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.35;0;0.35" dur="2.4s" repeatCount="indefinite"/>
                </circle>
                <circle cx={p.x} cy={p.y} r="9" fill="var(--bg-muted)" stroke="var(--accent)" strokeWidth="2.5"/>
                <circle cx={p.x} cy={p.y} r="3.5" fill="var(--accent)"/>
              </g>
            ))}

            {/* Endpoint marker + label at the bottom of the M's right leg.
                Signals the M loop continues past CARE ('we keep optimising').
                Smaller than the phase circles - it's an outcome marker, not
                a phase. Text is SVG so it scales with the rest. */}
            <g>
              <line x1="920" y1="380" x2="920" y2="408" stroke="var(--accent)" strokeWidth="1.2" strokeDasharray="3 3" opacity="0.7"/>
              <circle cx="920" cy="380" r="5" fill="var(--accent)" opacity="0.9"/>
              <circle cx="920" cy="380" r="9" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.4">
                <animate attributeName="r" values="9;13;9" dur="2.4s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/>
              </circle>
              <text x="920" y="428"
                    textAnchor="middle"
                    style={{
                      fill: 'var(--accent)',
                      fontFamily: 'var(--font-mono)',
                      fontSize: '14px',
                      fontWeight: 500,
                      letterSpacing: '0.14em',
                      textTransform: 'uppercase',
                    }}>
                {tr(lang, 'mflow.endpoint')}
              </text>
            </g>
          </svg>

          {phases.map((p) => {
            const xPct = (p.x / 1000) * 100;
            const yPct = ((p.y + 120) / 700) * 100;
            const tx = p.anchorX === 'left' ? '0%' : p.anchorX === 'right' ? '-100%' : '-50%';
            const ty = p.anchorY === 'above' ? 'calc(-100% - 28px)' : '28px';
            return (
              <div key={p.key} style={{
                position: 'absolute',
                left: xPct + '%',
                top: yPct + '%',
                transform: 'translate(' + tx + ', ' + ty + ')',
                width: 260,
                background: 'var(--bg-raised)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--radius-card, 12px)',
                padding: '14px 16px',
                display: 'flex',
                flexDirection: 'column',
                gap: 8,
                boxShadow: 'var(--shadow-1, 0 1px 2px rgba(0,0,0,0.05))',
              }}>
                <span style={{
                  fontFamily: 'var(--font-mono, ui-monospace, monospace)',
                  color: 'var(--accent)',
                  whiteSpace: 'nowrap',
                  fontSize: 14,
                  fontWeight: 600,
                  letterSpacing: '0.1em',
                }}>{tr(lang, p.t + '.label')}</span>
                <h3 style={{ fontSize: '1.125rem', margin: 0, lineHeight: 1.25, color: 'var(--ink-primary)', fontWeight: 500 }}>
                  {tr(lang, p.t + '.title')}
                </h3>
                <p style={{ fontSize: 14, lineHeight: 1.5, margin: 0, color: 'var(--ink-secondary)' }}>
                  {tr(lang, p.t + '.body')}
                </p>
              </div>
            );
          })}
        </div>

        <div className="m-flow-list" style={{ display: 'none', flexDirection: 'column', gap: 12, marginTop: 32 }}>
          {phases.map(p => (
            <div key={p.key} style={{
              background: 'var(--bg-raised)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--radius-card, 12px)',
              padding: 18,
              display: 'flex',
              flexDirection: 'column',
              gap: 10,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--accent)', fontSize: 14, fontWeight: 600, letterSpacing: '0.1em' }}>
                {tr(lang, p.t + '.label')}
              </span>
              <h3 style={{ fontSize: '1.15rem', margin: 0, fontWeight: 500 }}>{tr(lang, p.t + '.title')}</h3>
              <p style={{ fontSize: 14.5, margin: 0, color: 'var(--ink-secondary)' }}>{tr(lang, p.t + '.body')}</p>
            </div>
          ))}
        </div>

        {/* Outcome strip with primary CTA. Mirrors the bar on /aanpak so the
            homepage M-Flow visualisation has its own natural next-step. */}
        <div className="mflow-outcome" style={{
          marginTop: 48,
          padding: '20px 24px',
          background: 'var(--ink-primary)',
          color: 'var(--bg-base)',
          borderRadius: 'var(--radius-card)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 24,
          flexWrap: 'wrap',
        }}>
          <span className="mono" style={{
            fontSize: 13,
            letterSpacing: '0.08em',
            color: 'var(--bg-base)',
            opacity: 0.92,
          }}>
            {tr(lang, 'strategy.outcome')}
          </span>
          <a
            data-cal-link="modusops/quick-scan"
            data-cal-config='{"layout":"month_view","theme":"dark"}'
            className="btn btn-primary"
            style={{
              padding: '12px 20px',
              fontSize: 13,
              cursor: 'pointer',
              whiteSpace: 'nowrap',
              textTransform: 'uppercase',
              letterSpacing: '0.06em',
              fontWeight: 700,
            }}
            onClick={(e) => { e.preventDefault(); if (window.Cal) { window.Cal('modal', { calLink: 'modusops/quick-scan', config: { layout: 'month_view', theme: 'dark', language: lang } }); } else { window.open('https://cal.eu/modusops/quick-scan', '_self'); } }}>
            {tr(lang, 'strategy.cta')} →
          </a>
        </div>
      </div>

      <style>{`
        /* SVG M-shape needs ~880px to draw the wide path nicely. Below that
           we swap to the card-list fallback. Since the homepage no longer
           duplicates LISTEN/MAP/BUILD/CARE above (Approach moved to
           /aanpak.html), the M-Flow now needs to render on mobile too. */
        @media (max-width: 880px) {
          .mflow-section .m-flow { display: none !important; }
          .mflow-section .m-flow-list { display: flex !important; }
        }
        /* Outcome bar: stack vertically on narrow screens so CTA stays
           tappable. */
        @media (max-width: 640px) {
          .mflow-section .mflow-outcome { flex-direction: column; align-items: stretch; gap: 16px; text-align: center; }
          .mflow-section .mflow-outcome .btn { width: 100%; justify-content: center; }
        }
      `}</style>
    </section>
  );
};

const Principles = ({ lang }) => {
  // Editorial order, not key order. Six principles (07 dropped - it overlapped
  // with 01 "the tool follows the problem"). Display order keeps the strongest
  // positioning principle first.
  const ps = ['01','02','03','04','05','06'];
  return (
    <section style={{ position: 'relative' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'principles.eyebrow')}</span>
          <p style={{
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic',
            fontSize: 'clamp(1.25rem, 1.6vw + 0.25rem, 1.75rem)',
            color: 'var(--ink-secondary)',
            margin: '8px 0 4px',
            maxWidth: 760,
          }}>
            {lang === 'nl' ? 'Onze ' : 'Our '}
            <span style={{ color: 'var(--accent)' }}>modus</span>
            .
          </p>
          <h2>{tr(lang, 'principles.h2')}</h2>
        </div>

        <div className="principles-grid">
          {ps.map((n, idx) => (
            <div key={n} className="principle-card">
              <div className="principle-num">{String(idx + 1).padStart(2, '0')}</div>
              <h3 className="principle-t">
                {tr(lang, `principles.${n}.t`)}
              </h3>
              <p className="principle-d">
                {tr(lang, `principles.${n}.d`)}
              </p>
            </div>
          ))}
        </div>

      </div>

      <style>{`
        .principles-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 20px;
          margin-top: 32px;
        }
        @media (max-width: 820px) { .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        /* Mobile (<=560px): horizontal scroll-snap carousel - more scannable
           than a tall 1-col stack. Each card snaps to start, scrollbar hidden. */
        @media (max-width: 560px) {
          .principles-grid {
            display: flex !important;
            grid-template-columns: none;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 12px;
            margin: 24px calc(-1 * var(--gutter)) 0;
            padding: 4px var(--gutter);
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
          }
          .principles-grid::-webkit-scrollbar { display: none; }
          .principle-card {
            flex: 0 0 78vw;
            max-width: 320px;
            scroll-snap-align: start;
          }
        }
        .principle-card {
          background: var(--bg-raised);
          border: 1px solid var(--border);
          border-radius: 12px;
          padding: 28px 28px 30px;
          display: flex; flex-direction: column; gap: 10px;
        }
        .principle-num {
          font-family: var(--font-mono);
          font-size: 13px; letter-spacing: 0.22em;
          color: var(--accent);
          text-transform: uppercase;
        }
        .principle-t {
          font-family: var(--font-display);
          font-size: clamp(1.375rem, 0.9vw + 1rem, 1.625rem); line-height: 1.2;
          margin: 6px 0 6px; font-weight: 400;
          letter-spacing: -0.005em;
          color: var(--ink-primary);
        }
        .principle-d {
          font-size: 15px; line-height: 1.55;
          color: var(--ink-secondary);
          margin: 0;
        }
        .loop-wrap {
          margin-top: 56px;
          padding: 36px 28px;
          border: 1px solid var(--border);
          border-radius: 16px;
          background: var(--bg-muted);
        }
        .loop-h {
          font-family: var(--font-display);
          font-weight: 400; font-style: italic;
          font-size: clamp(20px, 2vw, 28px);
          margin: 0 0 24px; text-align: center;
          color: var(--ink-primary);
          letter-spacing: -0.01em;
        }
        .loop-vis {
          position: relative;
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 16px;
        }
        @media (max-width: 720px) { .loop-vis { grid-template-columns: 1fr 1fr; } }
        .loop-step {
          background: var(--bg-raised);
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 16px 14px;
          display: flex; flex-direction: column; gap: 6px;
          text-align: center;
        }
        .loop-step-n {
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.22em;
          color: var(--accent);
        }
        .loop-step-t {
          font-family: var(--font-display);
          font-weight: 400; margin: 2px 0 0;
          font-size: 18px;
          color: var(--ink-primary);
        }
        .loop-step-d {
          font-size: 12px; color: var(--ink-muted);
          margin: 0;
        }
        .loop-cycle {
          position: absolute;
          right: -8px; top: -22px;
          font-size: 22px;
          color: var(--accent);
        }
      `}</style>
    </section>
  );
};

// NEW SIGNATURE BLOCK - Strategy: Map → Identify → Size
const Strategy = ({ lang }) => {
  const steps = [
    { label: 'strategy.map.label',      title: 'strategy.map.title',      body: 'strategy.map.body' },
    { label: 'strategy.identify.label', title: 'strategy.identify.title', body: 'strategy.identify.body' },
    { label: 'strategy.size.label',     title: 'strategy.size.title',     body: 'strategy.size.body' },
  ];

  return (
    <section id="strategie">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'strategy.eyebrow')}</span>
          <h2>{tr(lang, 'strategy.h2')}</h2>
          <p style={{ whiteSpace: 'pre-line' }}>{tr(lang, 'strategy.lede')}</p>
        </div>

        <div className="grid-3" style={{ position: 'relative' }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
              padding: '28px 0',
              borderTop: '1px solid var(--ink-primary)',
              position: 'relative',
            }}>
              <span className="mono" style={{ color: 'var(--accent)', whiteSpace: 'nowrap' }}>
                {tr(lang, s.label)}
              </span>
              <h3 style={{ fontSize: 'clamp(1.375rem, 1.5vw + 0.75rem, 1.75rem)' }}>
                {tr(lang, s.title)}
              </h3>
              <p className="secondary" style={{ maxWidth: '38ch' }}>
                {tr(lang, s.body)}
              </p>
            </div>
          ))}
        </div>

        {/* Outcome strip */}
        <div style={{
          marginTop: 48,
          padding: '20px 24px',
          background: 'var(--ink-primary)',
          color: 'var(--bg-base)',
          borderRadius: 'var(--radius-card)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 24,
          flexWrap: 'wrap',
        }}>
          <span className="mono" style={{
            fontSize: 13,
            letterSpacing: '0.08em',
            color: 'var(--bg-base)',
            opacity: 0.92,
          }}>
            {tr(lang, 'strategy.outcome')}
          </span>
          <a
            data-cal-link="modusops/quick-scan"
            data-cal-config='{"layout":"month_view","theme":"dark"}'
            className="btn btn-primary"
            style={{
              padding: '12px 20px',
              fontSize: 13,
              cursor: 'pointer',
              whiteSpace: 'nowrap',
              textTransform: 'uppercase',
              letterSpacing: '0.06em',
              fontWeight: 700,
            }}
            onClick={(e) => { e.preventDefault(); if (window.Cal) { window.Cal('modal', { calLink: 'modusops/quick-scan', config: { layout: 'month_view', theme: 'dark', language: lang } }); } else { window.open('https://cal.eu/modusops/quick-scan', '_self'); } }}>
            {tr(lang, 'strategy.cta')} →
          </a>
        </div>
      </div>
    </section>
  );
};

const _LegacyCases_unused = ({ lang }) => {
  return (
    <section id="cases" style={{ background: 'var(--bg-muted)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'cases.eyebrow')}</span>
          <h2>{tr(lang, 'cases.h2')}</h2>
          <p>{tr(lang, 'cases.lede')}</p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 2fr) minmax(0, 1fr)',
          gap: 20,
        }} className="cases-grid">
          {/* Manufacturing flagship case */}
          <div className="card" style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 20,
            padding: 32,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="mono" style={{ color: 'var(--ink-muted)' }}>
                {tr(lang, 'cases.mfg.sector')}
              </span>
              <span className="mono" style={{ color: 'var(--ink-muted)' }}>
                {tr(lang, 'cases.mfg.client')}
              </span>
            </div>

            <h3 style={{
              fontSize: 'clamp(1.5rem, 2vw + 0.75rem, 2rem)',
              letterSpacing: '-0.02em',
              maxWidth: '20ch',
            }}>
              {tr(lang, 'cases.mfg.outcome')}
            </h3>

            <div style={{
              padding: '12px 14px',
              background: 'var(--bg-muted)',
              borderRadius: 8,
              fontFamily: 'var(--font-mono)',
              fontSize: 13,
              color: 'var(--ink-secondary)',
              lineHeight: 1.55,
            }}>
              {tr(lang, 'cases.mfg.workflow')}
            </div>

            <p className="secondary" style={{ flex: 1 }}>
              {tr(lang, 'cases.mfg.body')}
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, paddingTop: 8 }}>
              {['M365', 'SharePoint', 'Power Automate', 'Exact', 'Claude'].map(p => (
                <StackPill key={p} label={p} />
              ))}
            </div>

            <div style={{ paddingTop: 8 }}>
              <a href="#contact" style={{
                color: 'var(--accent)',
                fontSize: 14,
                fontWeight: 500,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 6,
              }}>
                {tr(lang, 'cases.cta')} →
              </a>
            </div>
          </div>

          {/* Placeholder card - muted */}
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 16,
            padding: 32,
            border: '1px dashed var(--border)',
            borderRadius: 'var(--radius-card)',
            background: 'transparent',
          }}>
            <span className="mono" style={{ color: 'var(--ink-muted)' }}>
              {tr(lang, 'cases.placeholder.eyebrow')}
            </span>
            <p className="secondary" style={{ flex: 1, fontSize: 15, lineHeight: 1.55 }}>
              {tr(lang, 'cases.placeholder.body')}
            </p>
            <a href="#" style={{
              color: 'var(--ink-secondary)',
              fontSize: 14,
              fontWeight: 500,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
            }}>
              {tr(lang, 'cases.placeholder.cta')} ↗
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .cases-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const StackPill = ({ label }) => (
  <span style={{
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.04em',
    padding: '4px 8px',
    borderRadius: 4,
    background: 'var(--bg-muted)',
    color: 'var(--ink-secondary)',
    border: '1px solid var(--border)',
    transition: 'background-color 120ms var(--ease)',
  }}
  onMouseEnter={(e) => e.currentTarget.style.background = 'var(--accent-muted)'}
  onMouseLeave={(e) => e.currentTarget.style.background = 'var(--bg-muted)'}
  >{label}</span>
);

window.Hero = Hero;
window.Approach = Approach;
window.MFlowApproach = MFlowApproach;
window.Principles = Principles;
window.Strategy = Strategy;
window.StackPill = StackPill;