/* Data engineering visual lab */

/* Data Engineering Lab */
function DataEngineeringPage({ tweaks, onBackHome }) {
  const primary = tweaks.primaryColor;
  const [code, setCode] = React.useState('');
  const [unlocked, setUnlocked] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [conceptId, setConceptId] = React.useState('medallion');
  const [activeStageId, setActiveStageId] = React.useState('bronze');
  const [flowTick, setFlowTick] = React.useState(0);
  const [autoPlay, setAutoPlay] = React.useState(true);

  const concept = DE_CONCEPTS.find(item => item.id === conceptId) || DE_CONCEPTS[0];
  const activeStage = concept.stages.find(stage => stage.id === activeStageId) || concept.stages[0];
  const activeStageIndex = concept.stages.findIndex(stage => stage.id === activeStage.id);

  const unlock = async (candidateCode) => {
    const trimmedCode = candidateCode.trim();
    setLoading(true);
    setError('');
    try {
      await verifyJourneyCode(trimmedCode);
      sessionStorage.setItem(JOURNEY_CODE_STORAGE_KEY, trimmedCode);
      setCode(trimmedCode);
      setUnlocked(true);
    } catch (err) {
      sessionStorage.removeItem(JOURNEY_CODE_STORAGE_KEY);
      setUnlocked(false);
      setError(err.message === 'Invalid code' ? 'Code is not correct.' : err.message);
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => {
    const savedCode = sessionStorage.getItem(JOURNEY_CODE_STORAGE_KEY);
    if (savedCode) unlock(savedCode);
  }, []);

  React.useEffect(() => {
    const nextConcept = DE_CONCEPTS.find(item => item.id === conceptId) || DE_CONCEPTS[0];
    setActiveStageId(nextConcept.stages[Math.min(1, nextConcept.stages.length - 1)].id);
  }, [conceptId]);

  React.useEffect(() => {
    if (!unlocked || !autoPlay) return undefined;
    const timer = window.setInterval(() => {
      setFlowTick(current => current + 1);
    }, 1000);
    return () => window.clearInterval(timer);
  }, [unlocked, autoPlay]);

  if (!unlocked) {
    return (
      <main className="de-page" style={{
        minHeight: '100vh',
        padding: '124px 80px 80px',
        background: 'var(--theme-bg)',
        color: 'var(--theme-text)',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <DoodleChart style={{ position: 'absolute', top: 170, left: 80 }} color={primary}/>
        <DoodleCode style={{ position: 'absolute', top: 220, right: 110 }} color={primary}/>
        <DoodleArrow style={{ position: 'absolute', bottom: 150, right: 120, transform: 'rotate(18deg)' }} color={primary}/>

        <div className="journey-lock" style={{
          maxWidth: 540,
          margin: '8vh auto 0',
          padding: 34,
          borderRadius: 20,
          background: 'rgba(var(--theme-surface-rgb),0.24)',
          border: '1px solid rgba(var(--theme-text-rgb),0.08)',
          boxShadow: '0 24px 60px rgba(0,0,0,0.24)',
          position: 'relative',
          zIndex: 1,
        }}>
          <div style={{
            width: 54, height: 54, borderRadius: 16,
            background: `${primary}18`, color: primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 22,
          }}>
            <svg width="25" height="25" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M7 11V8a5 5 0 0110 0v3M6 11h12a1 1 0 011 1v8a1 1 0 01-1 1H6a1 1 0 01-1-1v-8a1 1 0 011-1z"/>
            </svg>
          </div>
          <div style={{
            fontSize: 12, fontWeight: 700, color: primary,
            letterSpacing: '3px', textTransform: 'uppercase', marginBottom: 10,
          }}>Private data engineering lab</div>
          <h1 style={{
            fontFamily: 'Poppins, sans-serif', fontWeight: 700,
            fontSize: 'clamp(34px, 5vw, 52px)',
            color: 'var(--theme-strong)', lineHeight: 1.05, margin: '0 0 14px',
          }}>DE Visuals</h1>
          <p style={{
            color: 'rgba(var(--theme-text-rgb),0.68)', fontSize: 15,
            lineHeight: 1.7, margin: '0 0 26px',
          }}>
            Uses the same 32-character Journey code to open interactive diagrams for medallion architecture and data engineering patterns.
          </p>

          <form onSubmit={(event) => {
            event.preventDefault();
            unlock(code);
          }} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <input
              value={code}
              onChange={event => setCode(event.target.value)}
              placeholder="32-character secret code"
              autoComplete="off"
              spellCheck="false"
              style={{
                width: '100%',
                padding: '14px 16px',
                borderRadius: 14,
                border: '1px solid rgba(var(--theme-text-rgb),0.1)',
                background: 'rgba(var(--theme-bg-rgb),0.44)',
                color: 'var(--theme-text)',
                fontFamily: 'Poppins, sans-serif',
                fontSize: 16,
                letterSpacing: '1px',
                outline: 'none',
              }}
            />
            {error && (
              <div style={{
                padding: '10px 12px',
                borderRadius: 12,
                background: 'rgba(255,82,82,0.12)',
                color: '#FF8A8A',
                fontSize: 13,
                border: '1px solid rgba(255,82,82,0.22)',
              }}>{error}</div>
            )}
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
              <button type="submit" disabled={loading || code.trim().length !== 32} style={{
                ...deButtonStyle(primary, true),
                opacity: loading || code.trim().length !== 32 ? 0.55 : 1,
              }}>
                {loading ? 'Checking...' : 'Unlock'}
              </button>
              <button type="button" onClick={onBackHome} style={deButtonStyle(primary, false)}>Back home</button>
            </div>
          </form>
        </div>
      </main>
    );
  }

  return (
    <main className="de-page" style={{
      minHeight: '100vh',
      padding: '118px clamp(24px, 3vw, 56px) 80px',
      background: 'var(--theme-bg)',
      color: 'var(--theme-text)',
      position: 'relative',
      overflow: 'hidden',
      animation: 'fadeIn 0.3s ease',
    }}>
      <DoodleChart style={{ position: 'absolute', top: 150, right: 86 }} color={primary}/>
      <DoodleArrow style={{ position: 'absolute', top: 240, left: 52, transform: 'rotate(-16deg)' }} color={primary}/>
      <DoodleCode style={{ position: 'absolute', bottom: 120, right: '7%' }} color={primary}/>

      <div className="de-shell" style={{ width: '100%', maxWidth: 1500, minWidth: 0, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className="de-header" style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          gap: 24,
          marginBottom: 24,
        }}>
          <div style={{ maxWidth: 780 }}>
            <div style={{
              fontSize: 12, fontWeight: 700, color: primary,
              letterSpacing: '3px', textTransform: 'uppercase', marginBottom: 10,
            }}>Data engineering concepts</div>
            <h1 style={{
              fontFamily: 'Poppins, sans-serif',
              fontWeight: 700,
              fontSize: 'clamp(40px, 5vw, 64px)',
              color: 'var(--theme-strong)',
              margin: '0 0 12px',
              lineHeight: 1.05,
            }}>Dynamic DE Visuals</h1>
            <p style={{
              color: 'rgba(var(--theme-text-rgb),0.68)',
              lineHeight: 1.7,
              fontSize: 15,
              margin: 0,
            }}>{concept.summary}</p>
          </div>
          <div className="de-actions" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
            <button type="button" onClick={() => setAutoPlay(value => !value)} style={deButtonStyle(primary, autoPlay)}>
              {autoPlay ? 'Pause flow' : 'Play flow'}
            </button>
            <button type="button" onClick={() => {
              sessionStorage.removeItem(JOURNEY_CODE_STORAGE_KEY);
              setUnlocked(false);
              setCode('');
            }} style={deButtonStyle(primary, false)}>Lock</button>
            <button type="button" onClick={onBackHome} style={deButtonStyle(primary, false)}>Back home</button>
          </div>
        </div>

        <div className="de-concept-tabs" style={{
          display: 'flex',
          gap: 10,
          flexWrap: 'wrap',
          width: '100%',
          minWidth: 0,
          padding: 6,
          borderRadius: 18,
          background: 'rgba(var(--theme-surface-rgb),0.18)',
          border: '1px solid rgba(var(--theme-text-rgb),0.08)',
          marginBottom: 24,
        }}>
          {DE_CONCEPTS.map(item => {
            const active = item.id === concept.id;
            return (
              <button key={item.id} type="button" onClick={() => setConceptId(item.id)} style={{
                minHeight: 42,
                padding: '10px 15px',
                borderRadius: 14,
                border: `1px solid ${active ? primary : 'rgba(var(--theme-text-rgb),0.1)'}`,
                background: active ? primary : 'transparent',
                color: active ? 'var(--theme-on-accent)' : 'var(--theme-text)',
                fontFamily: 'Poppins, sans-serif',
                fontWeight: 700,
                fontSize: 14,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 8,
                cursor: 'pointer',
              }}>
                <DeConceptIcon conceptId={item.id} size={17}/>
                {item.title}
              </button>
            );
          })}
        </div>

        <div className="de-layout" style={{
          display: 'grid',
          gridTemplateColumns: '1fr',
          gap: 18,
          alignItems: 'start',
          width: '100%',
          minWidth: 0,
        }}>
          <section className="de-visual-panel" style={{
            width: '100%',
            maxWidth: '100%',
            minWidth: 0,
            borderRadius: 22,
            background: 'rgba(var(--theme-surface-rgb),0.2)',
            border: '1px solid rgba(var(--theme-text-rgb),0.08)',
            padding: 24,
            boxShadow: '0 18px 50px rgba(0,0,0,0.16)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap', marginBottom: 22 }}>
              <div>
                <div style={{
                  color: primary,
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: '2px',
                  textTransform: 'uppercase',
                  marginBottom: 7,
                }}>{concept.eyebrow}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0, marginBottom: 8 }}>
                  <span style={{
                    width: 42,
                    height: 42,
                    borderRadius: 14,
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: primary,
                    background: `${primary}18`,
                    border: `1px solid ${primary}35`,
                    flex: '0 0 auto',
                  }}>
                    <DeConceptIcon conceptId={concept.id} size={22}/>
                  </span>
                  <h2 style={{
                    color: 'var(--theme-strong)',
                    fontSize: 26,
                    margin: 0,
                    lineHeight: 1.2,
                  }}>{concept.title}</h2>
                </div>
                <div style={{ color: 'rgba(var(--theme-text-rgb),0.58)', fontSize: 14 }}>{concept.question}</div>
              </div>
              <div className="de-metrics" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(120px, 1fr))', gap: 10 }}>
                {concept.metrics.map(([label, value]) => (
                  <div key={label} style={{
                    padding: '10px 12px',
                    borderRadius: 14,
                    background: 'rgba(var(--theme-bg-rgb),0.34)',
                    border: '1px solid rgba(var(--theme-text-rgb),0.07)',
                  }}>
                    <div style={{ color: 'rgba(var(--theme-text-rgb),0.52)', fontSize: 11, fontWeight: 700, textTransform: 'uppercase' }}>{label}</div>
                    <div style={{ color: 'var(--theme-strong)', fontWeight: 800, fontSize: 17, marginTop: 4 }}>{value}</div>
                  </div>
                ))}
              </div>
            </div>

            <DataFlowVisual
              concept={concept}
              activeStageId={activeStage.id}
              activeStageIndex={activeStageIndex}
              flowTick={flowTick}
              color={primary}
              onStageSelect={setActiveStageId}
            />
          </section>

          <aside className="de-detail-panel" style={{
            width: '100%',
            maxWidth: '100%',
            minWidth: 0,
            borderRadius: 22,
            background: 'rgba(var(--theme-surface-rgb),0.22)',
            border: '1px solid rgba(var(--theme-text-rgb),0.08)',
            padding: 22,
            position: 'static',
            boxShadow: '0 18px 50px rgba(0,0,0,0.14)',
          }}>
            <div className="de-stage-detail-grid" style={{
              display: 'grid',
              gridTemplateColumns: 'minmax(0, 1.15fr) repeat(2, minmax(220px, 0.6fr))',
              gap: 18,
              alignItems: 'start',
            }}>
              <div>
                <div style={{
                  color: activeStage.tone,
                  fontSize: 11,
                  fontWeight: 800,
                  letterSpacing: '2px',
                  textTransform: 'uppercase',
                  marginBottom: 8,
                }}>Selected stage</div>
                <h2 style={{ color: 'var(--theme-strong)', margin: '0 0 8px', fontSize: 28 }}>{activeStage.label}</h2>
                <div style={{ color: 'rgba(var(--theme-text-rgb),0.58)', fontSize: 14, marginBottom: 14 }}>{activeStage.subtitle}</div>
                <p style={{ color: 'rgba(var(--theme-text-rgb),0.72)', lineHeight: 1.75, margin: 0, fontSize: 15 }}>
                  {activeStage.detail}
                </p>
              </div>

              <DeDetailList title="Typical fields" items={activeStage.records} color={activeStage.tone}/>
              <DeDetailList title="Control checks" items={activeStage.checks} color={primary}/>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}

function DataFlowVisual({ concept, activeStageId, activeStageIndex, flowTick, color, onStageSelect }) {
  const isMedallion = concept.id === 'medallion';

  if (concept.id === 'databricks_platform') {
    return (
      <DatabricksPlatformVisual
        concept={concept}
        activeStageId={activeStageId}
        activeStageIndex={activeStageIndex}
        flowTick={flowTick}
        color={color}
        onStageSelect={onStageSelect}
      />
    );
  }

  if (concept.id === 'managed_spark') {
    return (
      <ManagedSparkProjectsVisual
        concept={concept}
        activeStageId={activeStageId}
        activeStageIndex={activeStageIndex}
        flowTick={flowTick}
        color={color}
        onStageSelect={onStageSelect}
      />
    );
  }

  if (concept.id === 'sql_lakehouse') {
    return (
      <SqlLakehouseVisual
        concept={concept}
        activeStageId={activeStageId}
        activeStageIndex={activeStageIndex}
        flowTick={flowTick}
        color={color}
        onStageSelect={onStageSelect}
      />
    );
  }

  if (isMedallion) {
    const flowStages = concept.stages.filter(stage => stage.id !== 'serving');
    const servingStage = concept.stages.find(stage => stage.id === 'serving');
    const servingActive = activeStageId === 'serving';
    const servingPassed = activeStageIndex >= concept.stages.findIndex(stage => stage.id === 'serving');

    return (
      <MedallionWhiteboardPlatform
        concept={concept}
        flowStages={flowStages}
        servingStage={servingStage}
        activeStageId={activeStageId}
        activeStageIndex={activeStageIndex}
        flowTick={flowTick}
        color={color}
        onStageSelect={onStageSelect}
      />
    );

    return (
      <div style={{
        position: 'relative',
        width: '100%',
        maxWidth: '100%',
        minWidth: 0,
        minHeight: 'clamp(430px, 54vh, 560px)',
        borderRadius: 20,
        background: 'linear-gradient(135deg, rgba(var(--theme-bg-rgb),0.58), rgba(var(--theme-surface-rgb),0.16))',
        border: '1px solid rgba(var(--theme-text-rgb),0.08)',
        overflowX: 'auto',
        overflowY: 'hidden',
        padding: 'clamp(18px, 2vw, 26px)',
      }}>
        <div style={{
          width: '100%',
          maxWidth: 1120,
          minWidth: 0,
          minHeight: 'clamp(388px, 48vh, 500px)',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}>
          <div className="de-medallion-row" style={{
            position: 'relative',
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            gap: 'clamp(8px, 1.2vw, 16px)',
            marginTop: 'clamp(42px, 6vh, 64px)',
            padding: '0 clamp(6px, 2vw, 28px)',
            minWidth: 0,
          }}>
            <MedallionTransformLane
              flowStages={flowStages}
              flowTick={flowTick}
              color={color}
            />

            {flowStages.map((stage, index) => {
              const stageIndex = concept.stages.findIndex(item => item.id === stage.id);
              const active = stage.id === activeStageId;
              const passed = stageIndex <= activeStageIndex;
              return (
                <React.Fragment key={stage.id}>
                  <MedallionLayerCard
                    stage={stage}
                    index={stageIndex}
                    active={active}
                    passed={passed}
                    onClick={() => onStageSelect(stage.id)}
                  />
                  {index < flowStages.length - 1 && (
                    <div className="de-layer-arrow" style={{
                      flex: '0 1 clamp(30px, 5vw, 58px)',
                      height: 44,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color,
                      zIndex: 3,
                    }}>
                      <svg width="58" height="28" viewBox="0 0 58 28" fill="none">
                        <path d="M5 14h42" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round"/>
                        <path d="M38 5l13 9-13 9" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </div>
                  )}
                </React.Fragment>
              );
            })}
          </div>

          {servingStage && (
            <>
              <div style={{
                width: 2,
                height: 'clamp(26px, 4vh, 46px)',
                marginTop: 4,
                background: `linear-gradient(180deg, ${color}, ${servingStage.tone})`,
                opacity: 0.75,
              }}/>
              <svg width="34" height="28" viewBox="0 0 34 28" fill="none" style={{ color: servingStage.tone, marginTop: -6 }}>
                <path d="M17 3v18" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round"/>
                <path d="M8 13l9 9 9-9" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <button className="de-serving-card" type="button" onClick={() => onStageSelect(servingStage.id)} style={{
                width: 'min(520px, 92vw)',
                maxWidth: '100%',
                minHeight: servingActive ? 'clamp(122px, 14vh, 150px)' : 'clamp(112px, 13vh, 136px)',
                marginTop: 6,
                padding: 18,
                borderRadius: 18,
                border: `1px solid ${servingActive ? servingStage.tone : 'rgba(var(--theme-text-rgb),0.1)'}`,
                background: servingActive
                  ? `linear-gradient(180deg, ${servingStage.tone}24, rgba(var(--theme-bg-rgb),0.58))`
                  : 'rgba(var(--theme-bg-rgb),0.46)',
                color: 'var(--theme-text)',
                cursor: 'pointer',
                textAlign: 'left',
                boxShadow: servingActive ? `0 24px 44px ${servingStage.tone}24` : 'none',
                transition: 'all 0.28s ease',
              }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                  <div style={{
                    width: 46,
                    height: 46,
                    borderRadius: 15,
                    background: `${servingStage.tone}20`,
                    color: servingStage.tone,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontWeight: 900,
                    border: `1px solid ${servingStage.tone}35`,
                    flex: '0 0 auto',
                  }}>
                    <DeStageIcon stageId={servingStage.id} size={21}/>
                  </div>
                  <div>
                    <h3 style={{ color: 'var(--theme-strong)', fontSize: 20, margin: '0 0 5px' }}>{servingStage.label}</h3>
                    <p style={{ color: 'rgba(var(--theme-text-rgb),0.62)', fontSize: 13, lineHeight: 1.55, margin: '0 0 12px' }}>{servingStage.subtitle}</p>
                    <div style={{
                      height: 7,
                      borderRadius: 999,
                      background: 'rgba(var(--theme-text-rgb),0.08)',
                      overflow: 'hidden',
                    }}>
                      <div style={{
                        width: servingPassed ? '100%' : '0%',
                        height: '100%',
                        borderRadius: 999,
                        background: servingStage.tone,
                        transition: 'width 0.3s ease',
                      }}/>
                    </div>
                  </div>
                </div>
              </button>
            </>
          )}
        </div>
      </div>
    );
  }

  return (
    <div style={{
      position: 'relative',
      minHeight: 460,
      borderRadius: 20,
      background: 'linear-gradient(135deg, rgba(var(--theme-bg-rgb),0.58), rgba(var(--theme-surface-rgb),0.16))',
      border: '1px solid rgba(var(--theme-text-rgb),0.08)',
      overflowX: 'hidden',
      overflowY: 'hidden',
      padding: 22,
    }}>
      <div style={{
        position: 'absolute',
        left: 42,
        right: 42,
        top: '46%',
        height: 2,
        background: `linear-gradient(90deg, ${color}20, ${color}, ${color}20)`,
        opacity: 0.75,
      }}/>

      {Array.from({ length: 8 }).map((_, index) => {
        const left = (flowTick * 7 + index * 14) % 100;
        const top = 40 + ((index % 3) - 1) * 7;
        return (
          <span key={index} style={{
            position: 'absolute',
            left: `${left}%`,
            top: `${top}%`,
            width: index % 3 === 0 ? 12 : 9,
            height: index % 3 === 0 ? 12 : 9,
            borderRadius: '50%',
            background: concept.stages[Math.min(concept.stages.length - 1, Math.floor(left / (100 / concept.stages.length)))].tone,
            boxShadow: `0 0 18px ${color}70`,
            transition: 'left 0.9s linear',
            opacity: 0.85,
          }}/>
        );
      })}

      <div className="de-stage-grid" style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: `repeat(${concept.stages.length}, minmax(120px, 1fr))`,
        gap: 14,
        minHeight: 320,
        alignItems: 'center',
      }}>
        {concept.stages.map((stage, index) => {
          const active = stage.id === activeStageId;
          const passed = index <= activeStageIndex;
          return (
            <button key={stage.id} type="button" onClick={() => onStageSelect(stage.id)} style={{
              minHeight: active ? 218 : 188,
              padding: 16,
              borderRadius: 18,
              border: `1px solid ${active ? stage.tone : 'rgba(var(--theme-text-rgb),0.1)'}`,
              background: active
                ? `linear-gradient(180deg, ${stage.tone}24, rgba(var(--theme-bg-rgb),0.58))`
                : 'rgba(var(--theme-bg-rgb),0.46)',
              color: 'var(--theme-text)',
              cursor: 'pointer',
              textAlign: 'left',
              transform: active ? 'translateY(-12px)' : 'translateY(0)',
              boxShadow: active ? `0 24px 44px ${stage.tone}24` : 'none',
              transition: 'all 0.28s ease',
              position: 'relative',
              zIndex: 3,
            }}>
              <div style={{
                width: 42,
                height: 42,
                borderRadius: 14,
                background: `${stage.tone}20`,
                color: stage.tone,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontWeight: 900,
                marginBottom: 14,
                border: `1px solid ${stage.tone}35`,
              }}>
                <DeStageIcon stageId={stage.id} size={20}/>
              </div>
              <h3 style={{ color: 'var(--theme-strong)', fontSize: 18, margin: '0 0 6px' }}>{stage.label}</h3>
              <p style={{ color: 'rgba(var(--theme-text-rgb),0.58)', fontSize: 13, lineHeight: 1.5, margin: 0 }}>{stage.subtitle}</p>
              <div style={{
                marginTop: 14,
                height: 7,
                borderRadius: 999,
                background: 'rgba(var(--theme-text-rgb),0.08)',
                overflow: 'hidden',
              }}>
                <div style={{
                  width: passed ? '100%' : '0%',
                  height: '100%',
                  borderRadius: 999,
                  background: stage.tone,
                  transition: 'width 0.3s ease',
                }}/>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function getDeStage(concept, id) {
  return concept.stages.find(stage => stage.id === id) || concept.stages[0];
}

function WhiteboardStageCard({ stage, active, passed, onClick, children, style = {} }) {
  return (
    <button type="button" onClick={onClick} style={{
      minWidth: 0,
      padding: '12px',
      borderRadius: 16,
      border: `2px solid ${active ? stage.tone : 'rgba(15,23,42,0.1)'}`,
      background: active ? `${stage.tone}18` : 'rgba(255,255,255,0.82)',
      color: '#172033',
      cursor: 'pointer',
      textAlign: 'left',
      boxShadow: active ? `0 18px 34px ${stage.tone}22` : '0 8px 18px rgba(15,23,42,0.05)',
      transform: active ? 'translateY(-4px)' : 'translateY(0)',
      transition: 'all 0.25s ease',
      ...style,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <span style={{
          width: 34,
          height: 34,
          borderRadius: 12,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: `${stage.tone}1f`,
          color: stage.tone,
          border: `1px solid ${stage.tone}44`,
          flex: '0 0 auto',
        }}>
          <DeStageIcon stageId={stage.id} size={17}/>
        </span>
        <span style={{ minWidth: 0, flex: 1 }}>
          <span style={{ display: 'block', color: '#111827', fontWeight: 900, fontSize: 15, lineHeight: 1.1 }}>{stage.label}</span>
          <span style={{ display: 'block', color: '#64748B', fontSize: 11, fontWeight: 700, marginTop: 3 }}>{stage.subtitle}</span>
        </span>
      </div>
      {children}
      <div style={{ marginTop: 10, height: 6, borderRadius: 999, background: 'rgba(15,23,42,0.08)', overflow: 'hidden' }}>
        <div style={{
          width: passed ? '100%' : active ? '68%' : '0%',
          height: '100%',
          borderRadius: 999,
          background: stage.tone,
          transition: 'width 0.3s ease',
        }}/>
      </div>
    </button>
  );
}

function WhiteboardArrow({ color, style = {}, flip = false }) {
  return (
    <svg width="104" height="40" viewBox="0 0 104 40" fill="none" aria-hidden="true" style={{ color, ...style }}>
      <path d={flip ? 'M96 12C70 34 38 34 12 18' : 'M8 12c26 22 58 22 84 6'} stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeDasharray="9 10"/>
      <path d={flip ? 'M22 10 10 18l13 7' : 'M80 10l14 8-13 8'} stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function DatabricksPlatformVisual({ concept, activeStageId, activeStageIndex, flowTick, color, onStageSelect }) {
  const workspace = getDeStage(concept, 'dbx_workspace');
  const workloads = getDeStage(concept, 'dbx_workloads');
  const catalog = getDeStage(concept, 'unity_catalog');
  const lakehouse = getDeStage(concept, 'delta_lakehouse');
  const compute = getDeStage(concept, 'managed_compute');
  const stageIndex = (id) => concept.stages.findIndex(stage => stage.id === id);

  return (
    <div className="de-whiteboard-visual de-dbx-platform" style={{
      position: 'relative',
      width: '100%',
      minHeight: 'clamp(650px, 70vh, 780px)',
      borderRadius: 20,
      background: 'linear-gradient(180deg, #fffdf7, #f9fbff)',
      border: '1px solid rgba(var(--theme-text-rgb),0.08)',
      color: '#172033',
      overflow: 'hidden',
      padding: 'clamp(16px, 2vw, 26px)',
      boxShadow: 'inset 0 0 0 1px rgba(17,24,39,0.05)',
    }}>
      <svg aria-hidden="true" viewBox="0 0 1000 600" preserveAspectRatio="none" style={{
        position: 'absolute',
        inset: 0,
        width: '100%',
        height: '100%',
        opacity: 0.34,
        pointerEvents: 'none',
      }}>
        <path d="M92 94c108-32 187-28 298 9M634 70c132-22 221-9 312 38M70 522c160 34 360 22 484-8M650 528c118 18 204 8 294-18" fill="none" stroke="#F59E0B" strokeWidth="4" strokeLinecap="round" strokeDasharray="11 15"/>
        <path d="M206 168c62 50 123 74 196 88M782 170c-52 44-96 66-154 86M842 390c-56-16-111-5-160 33" fill="none" stroke="#F59E0B" strokeWidth="5" strokeLinecap="round" strokeDasharray="12 12"/>
      </svg>

      <div className="de-whiteboard-personas" style={{
        position: 'relative',
        zIndex: 1,
        display: 'grid',
        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
        gap: 12,
        marginBottom: 14,
      }}>
        <WhiteboardPerson title="Data Scientist" subtitle="PySpark + ML" tone="#F59E0B" icon="science"/>
        <WhiteboardPerson title="BI Developer" subtitle="SQL models" tone="#38BDF8" icon="chart"/>
        <WhiteboardPerson title="Data Analyst" subtitle="dashboards" tone="#22C55E" icon="chart"/>
        <WhiteboardPerson title="AI Engineer" subtitle="agents + apps" tone="#EC4899" icon="bot"/>
      </div>

      <div className="de-dbx-layout" style={{
        position: 'relative',
        zIndex: 1,
        display: 'grid',
        gridTemplateColumns: 'minmax(150px, 0.68fr) minmax(0, 2.6fr) minmax(150px, 0.72fr)',
        gap: 14,
        alignItems: 'stretch',
      }}>
        <aside className="de-platform-brand" style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          gap: 14,
          padding: '18px 14px',
          borderRadius: 18,
          background: 'rgba(255,255,255,0.68)',
          border: '2px dashed rgba(239,68,68,0.28)',
        }}>
          <SketchStackLogo color="#EF4444"/>
          <div>
            <div style={{ fontSize: 30, fontWeight: 900, lineHeight: 1, color: '#111827' }}>databricks</div>
            <div style={{ fontSize: 24, fontWeight: 900, marginTop: 12, color: '#111827' }}>Data + AI</div>
            <div style={{ fontSize: 15, fontWeight: 800, marginTop: 5, color: '#334155' }}>Platform</div>
          </div>
          <WhiteboardStageCard
            stage={workspace}
            active={activeStageId === workspace.id}
            passed={stageIndex(workspace.id) <= activeStageIndex}
            onClick={() => onStageSelect(workspace.id)}
            style={{ padding: 11 }}
          />
        </aside>

        <section style={{
          minWidth: 0,
          padding: 14,
          borderRadius: 20,
          background: 'rgba(255,238,238,0.68)',
          border: '2px dashed rgba(248,113,113,0.26)',
          display: 'flex',
          flexDirection: 'column',
          gap: 12,
        }}>
          <div className="de-platform-workloads" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }}>
            <WhiteboardStageCard stage={workloads} active={activeStageId === workloads.id} passed={stageIndex(workloads.id) <= activeStageIndex} onClick={() => onStageSelect(workloads.id)}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 5, marginTop: 11 }}>
                {['SQL', 'AI/BI', 'Mosaic'].map(label => (
                  <span key={label} style={{ padding: '5px 4px', borderRadius: 9, background: `${workloads.tone}14`, color: '#334155', fontSize: 10, fontWeight: 900, textAlign: 'center' }}>{label}</span>
                ))}
              </div>
            </WhiteboardStageCard>
            <WhiteboardCapability title="SQL Warehouse" subtitle="serve BI + marts" tone="#EF4444" icon="warehouse"/>
            <WhiteboardCapability title="Mosaic AI" subtitle="models + agents" tone="#EC4899" icon="brain"/>
          </div>

          <WhiteboardStageCard
            stage={catalog}
            active={activeStageId === catalog.id}
            passed={stageIndex(catalog.id) <= activeStageIndex}
            onClick={() => onStageSelect(catalog.id)}
            style={{ display: 'grid', gridTemplateColumns: 'minmax(150px, 0.8fr) minmax(0, 1.4fr)', gap: 12, alignItems: 'center' }}
          >
            <div className="de-catalog-pills" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 7, marginTop: 0 }}>
              {['Catalog', 'Schema', 'Lineage', 'Permissions'].map(item => (
                <span key={item} style={{ padding: '8px 7px', borderRadius: 12, background: 'rgba(15,23,42,0.04)', border: '1px solid rgba(15,23,42,0.08)', color: '#334155', fontSize: 11, fontWeight: 900, textAlign: 'center' }}>{item}</span>
              ))}
            </div>
          </WhiteboardStageCard>

          <WhiteboardStageCard
            stage={lakehouse}
            active={activeStageId === lakehouse.id}
            passed={stageIndex(lakehouse.id) <= activeStageIndex}
            onClick={() => onStageSelect(lakehouse.id)}
            style={{ minHeight: 190 }}
          >
            <div style={{ position: 'relative', minHeight: 112, marginTop: 14, borderRadius: 16, background: 'linear-gradient(180deg, rgba(219,234,254,0.58), rgba(255,255,255,0.55))', border: '1px solid rgba(56,189,248,0.22)', overflow: 'hidden' }}>
              <svg viewBox="0 0 520 120" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                <path d="M20 78c48-34 80 26 126-8s77-27 122 2 84 18 116-6 74-23 116 2v52H20z" fill="#BAE6FD" opacity="0.65"/>
              </svg>
              <div className="de-whiteboard-stage-row" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10, padding: 16 }}>
                {['Bronze', 'Silver', 'Gold'].map((label, index) => (
                  <div key={label} style={{ minHeight: 76, borderRadius: 15, background: index === 0 ? '#FEE2E2' : index === 1 ? '#E5E7EB' : '#FEF3C7', border: '2px solid rgba(15,23,42,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#111827', fontWeight: 900 }}>
                    {label}
                  </div>
                ))}
              </div>
            </div>
          </WhiteboardStageCard>
        </section>

        <aside className="de-platform-role-rail" style={{ display: 'flex', flexDirection: 'column', gap: 10, justifyContent: 'space-between' }}>
          <WhiteboardRole title="Auditor" action="review access" tone="#F59E0B"/>
          <WhiteboardRole title="Security" action="set policy" tone="#A855F7"/>
          <WhiteboardStageCard
            stage={compute}
            active={activeStageId === compute.id}
            passed={stageIndex(compute.id) <= activeStageIndex}
            onClick={() => onStageSelect(compute.id)}
            style={{ padding: 11 }}
          >
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 7, marginTop: 10 }}>
              {[0, 1, 2, 3].map(index => <MiniServer key={index} tone={index % 2 ? '#F59E0B' : '#38BDF8'}/>)}
            </div>
          </WhiteboardStageCard>
        </aside>
      </div>

      {Array.from({ length: 7 }).map((_, index) => {
        const left = 12 + ((flowTick * 5 + index * 13) % 76);
        const top = 24 + ((index * 17 + flowTick * 3) % 55);
        return (
          <span key={index} style={{
            position: 'absolute',
            left: `${left}%`,
            top: `${top}%`,
            width: 7,
            height: 7,
            borderRadius: '50%',
            background: index % 3 === 0 ? '#EF4444' : color,
            boxShadow: `0 0 16px ${color}88`,
            opacity: 0.55,
            transition: 'left 0.9s linear, top 0.9s linear',
          }}/>
        );
      })}
    </div>
  );
}

function ManagedSparkProjectsVisual({ concept, activeStageId, activeStageIndex, flowTick, color, onStageSelect }) {
  const stageIndex = (id) => concept.stages.findIndex(stage => stage.id === id);
  const builders = getDeStage(concept, 'builders');
  const projects = getDeStage(concept, 'dbx_projects');
  const runtime = getDeStage(concept, 'spark_runtime');
  const managed = getDeStage(concept, 'managed_cloud');
  const operations = getDeStage(concept, 'operations');

  return (
    <div className="de-whiteboard-visual de-managed-spark" style={{
      position: 'relative',
      minHeight: 'clamp(620px, 68vh, 760px)',
      borderRadius: 20,
      background: 'linear-gradient(180deg, #fffdf7, #f9fbff)',
      border: '1px solid rgba(var(--theme-text-rgb),0.08)',
      color: '#172033',
      overflow: 'hidden',
      padding: 'clamp(16px, 2vw, 26px)',
      boxShadow: 'inset 0 0 0 1px rgba(17,24,39,0.05)',
    }}>
      <div className="de-builder-grid" style={{ display: 'grid', gridTemplateColumns: '1fr minmax(260px, 1.1fr) 1fr', gap: 16, alignItems: 'center', position: 'relative', zIndex: 1 }}>
        <WhiteboardStageCard stage={builders} active={activeStageId === builders.id} passed={stageIndex(builders.id) <= activeStageIndex} onClick={() => onStageSelect(builders.id)}>
          <WhiteboardPerson title="Data Scientist" subtitle="PySpark notebooks" tone="#F59E0B" icon="science"/>
        </WhiteboardStageCard>
        <WhiteboardStageCard stage={projects} active={activeStageId === projects.id} passed={stageIndex(projects.id) <= activeStageIndex} onClick={() => onStageSelect(projects.id)} style={{ minHeight: 164 }}>
          <div style={{ marginTop: 12, borderRadius: 14, background: '#F8FAFC', border: '2px solid rgba(15,23,42,0.12)', overflow: 'hidden' }}>
            <div style={{ height: 22, background: '#FCA5A5', borderBottom: '2px solid rgba(15,23,42,0.12)', display: 'flex', alignItems: 'center', gap: 5, paddingLeft: 9 }}>
              {[0, 1, 2].map(i => <span key={i} style={{ width: 6, height: 6, borderRadius: '50%', background: i === 0 ? '#EF4444' : '#FDE68A' }}/>)}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr', minHeight: 86 }}>
              <div style={{ padding: 9, background: 'rgba(226,232,240,0.7)' }}><SketchStackLogo color="#EF4444"/></div>
              <div style={{ padding: 10, display: 'grid', gap: 7 }}>
                {['notebook.py', 'pipeline job', 'feature build'].map(item => (
                  <span key={item} style={{ display: 'block', height: 10, width: `${64 + item.length * 2}%`, maxWidth: '92%', borderRadius: 999, background: `${color}24` }}/>
                ))}
              </div>
            </div>
          </div>
        </WhiteboardStageCard>
        <WhiteboardStageCard stage={builders} active={activeStageId === builders.id} passed={stageIndex(builders.id) <= activeStageIndex} onClick={() => onStageSelect(builders.id)}>
          <WhiteboardPerson title="Data Engineer" subtitle="jobs + pipelines" tone="#38BDF8" icon="pipeline"/>
        </WhiteboardStageCard>
      </div>

      <div style={{ position: 'relative', zIndex: 1, margin: '22px 0', height: 18, borderTop: '4px solid rgba(15,23,42,0.72)', borderBottom: '1px solid rgba(15,23,42,0.16)', background: 'repeating-linear-gradient(110deg, rgba(15,23,42,0.16) 0 2px, transparent 2px 14px)' }}/>

      <div className="de-managed-grid" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: 'minmax(0, 2fr) minmax(180px, 0.72fr)', gap: 16, alignItems: 'stretch' }}>
        <section style={{ padding: 16, borderRadius: 20, background: 'rgba(255,255,255,0.72)', border: '2px solid rgba(15,23,42,0.08)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
            <SketchStackLogo color="#EF4444"/>
            <div>
              <div style={{ fontSize: 29, fontWeight: 900, color: '#111827', lineHeight: 1 }}>databricks</div>
              <div style={{ color: '#64748B', fontSize: 12, fontWeight: 800, marginTop: 4 }}>We manage it</div>
            </div>
          </div>
          <div className="de-compute-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 10 }}>
            {[0, 1, 2, 3].map(index => (
              <WhiteboardStageCard key={index} stage={runtime} active={activeStageId === runtime.id} passed={stageIndex(runtime.id) <= activeStageIndex} onClick={() => onStageSelect(runtime.id)} style={{ padding: 10 }}>
                <div style={{ display: 'grid', gap: 8, marginTop: 10, justifyItems: 'center' }}>
                  <MiniServer tone={index % 2 ? '#F59E0B' : '#38BDF8'}/>
                  <span style={{ color: '#64748B', fontSize: 10, fontWeight: 900 }}>worker {index + 1}</span>
                </div>
              </WhiteboardStageCard>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
            <WhiteboardStageCard stage={managed} active={activeStageId === managed.id} passed={stageIndex(managed.id) <= activeStageIndex} onClick={() => onStageSelect(managed.id)}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 10, color: '#334155', fontWeight: 900, fontSize: 12 }}>
                <DeStageIcon stageId="managed_cloud" size={18}/> cloud security + autoscale
              </div>
            </WhiteboardStageCard>
            <WhiteboardStageCard stage={operations} active={activeStageId === operations.id} passed={stageIndex(operations.id) <= activeStageIndex} onClick={() => onStageSelect(operations.id)}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 10, color: '#334155', fontWeight: 900, fontSize: 12 }}>
                <DeStageIcon stageId="operations" size={18}/> schedules + alerts
              </div>
            </WhiteboardStageCard>
          </div>
        </section>
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center' }}>
          <WhiteboardRole title="Databricks" action="manage Spark" tone="#EF4444"/>
          <div style={{ padding: 16, borderRadius: 18, background: 'rgba(255,255,255,0.74)', border: '2px dashed rgba(239,68,68,0.28)', color: '#111827', fontSize: 32, fontWeight: 900, lineHeight: 1.05 }}>
            We manage it
          </div>
        </aside>
      </div>

      <WhiteboardArrow color="#F59E0B" style={{ position: 'absolute', left: '34%', top: '34%', transform: `translateY(${Math.sin(flowTick / 2) * 4}px)` }}/>
      <WhiteboardArrow color="#F59E0B" flip style={{ position: 'absolute', right: '28%', top: '34%', transform: `translateY(${Math.cos(flowTick / 2) * 4}px)` }}/>
    </div>
  );
}

function SqlLakehouseVisual({ concept, activeStageId, activeStageIndex, flowTick, color, onStageSelect }) {
  const stageIndex = (id) => concept.stages.findIndex(stage => stage.id === id);
  const roles = getDeStage(concept, 'roles_to_tools');
  const warehouse = getDeStage(concept, 'sql_warehouse');
  const delta = getDeStage(concept, 'delta_lake');
  const pipeline = getDeStage(concept, 'pipeline_build');
  const ops = getDeStage(concept, 'managed_spark_ops');

  return (
    <div className="de-whiteboard-visual de-sql-lakehouse" style={{
      position: 'relative',
      minHeight: 'clamp(620px, 68vh, 760px)',
      borderRadius: 20,
      background: 'linear-gradient(180deg, #fffdf7, #f9fbff)',
      border: '1px solid rgba(var(--theme-text-rgb),0.08)',
      color: '#172033',
      overflow: 'hidden',
      padding: 'clamp(16px, 2vw, 26px)',
      boxShadow: 'inset 0 0 0 1px rgba(17,24,39,0.05)',
    }}>
      <div className="de-whiteboard-personas" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12, position: 'relative', zIndex: 1, marginBottom: 16 }}>
        <WhiteboardPerson title="Data Scientist" subtitle="PySpark + experiments" tone="#F59E0B" icon="science"/>
        <WhiteboardPerson title="BI Developer" subtitle="SQL semantic layer" tone="#38BDF8" icon="chart"/>
        <WhiteboardPerson title="Data Analyst" subtitle="SQL + dashboards" tone="#22C55E" icon="chart"/>
      </div>

      <div className="de-sql-layout" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: 'minmax(150px, 0.75fr) minmax(0, 2.2fr) minmax(160px, 0.75fr)', gap: 14 }}>
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center' }}>
          <SketchStackLogo color="#EF4444"/>
          <WhiteboardStageCard stage={roles} active={activeStageId === roles.id} passed={stageIndex(roles.id) <= activeStageIndex} onClick={() => onStageSelect(roles.id)}>
            <div style={{ display: 'grid', gap: 6, marginTop: 10 }}>
              {['PySpark', 'SQL', 'BI'].map(item => <span key={item} style={{ padding: '6px 8px', borderRadius: 999, background: `${roles.tone}14`, color: '#334155', fontSize: 11, fontWeight: 900 }}>{item}</span>)}
            </div>
          </WhiteboardStageCard>
        </aside>

        <section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <WhiteboardStageCard stage={warehouse} active={activeStageId === warehouse.id} passed={stageIndex(warehouse.id) <= activeStageIndex} onClick={() => onStageSelect(warehouse.id)} style={{ minHeight: 150 }}>
            <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 64px', gap: 10, alignItems: 'center' }}>
              <div style={{ fontSize: 36, color: '#111827', fontWeight: 900, lineHeight: 1 }}>SQL</div>
              <div style={{ width: 58, height: 58, borderRadius: 16, background: '#FEE2E2', border: '2px solid rgba(239,68,68,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#EF4444' }}>
                <DeStageIcon stageId="sql_warehouse" size={30}/>
              </div>
            </div>
          </WhiteboardStageCard>

          <WhiteboardStageCard stage={delta} active={activeStageId === delta.id} passed={stageIndex(delta.id) <= activeStageIndex} onClick={() => onStageSelect(delta.id)} style={{ minHeight: 250 }}>
            <div style={{ position: 'relative', minHeight: 150, marginTop: 14, borderRadius: 18, background: 'linear-gradient(180deg, rgba(219,234,254,0.65), rgba(255,255,255,0.64))', border: '1px solid rgba(56,189,248,0.25)', overflow: 'hidden' }}>
              <svg viewBox="0 0 520 160" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                <path d="M15 106c55-34 88 28 142-9 52-35 91-19 137 6 49 27 85 13 123-13 36-25 67-21 91 1v72H15z" fill="#BAE6FD" opacity="0.68"/>
              </svg>
              <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12, padding: 20 }}>
                {['Bronze', 'Silver', 'Gold'].map((label, index) => (
                  <div key={label} style={{ minHeight: 98, borderRadius: 18, background: index === 0 ? '#FEE2E2' : index === 1 ? '#E5E7EB' : '#FEF3C7', border: '2px solid rgba(15,23,42,0.14)', display: 'grid', placeItems: 'center', color: '#111827', fontWeight: 900 }}>
                    {label}
                  </div>
                ))}
              </div>
            </div>
          </WhiteboardStageCard>
        </section>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center' }}>
          <WhiteboardRole title="Data Engineer" action="build pipeline" tone="#38BDF8"/>
          <WhiteboardStageCard stage={pipeline} active={activeStageId === pipeline.id} passed={stageIndex(pipeline.id) <= activeStageIndex} onClick={() => onStageSelect(pipeline.id)}>
            <div style={{ marginTop: 10, padding: '8px 10px', borderRadius: 999, background: '#FEE2E2', border: '1px solid rgba(239,68,68,0.25)', color: '#111827', fontWeight: 900 }}>PySpark pipeline</div>
          </WhiteboardStageCard>
          <WhiteboardStageCard stage={ops} active={activeStageId === ops.id} passed={stageIndex(ops.id) <= activeStageIndex} onClick={() => onStageSelect(ops.id)}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 7, marginTop: 10 }}>
              {[0, 1, 2, 3].map(index => <MiniServer key={index} tone={index % 2 ? '#F59E0B' : '#38BDF8'}/>)}
            </div>
          </WhiteboardStageCard>
        </aside>
      </div>

      {[0, 1, 2, 3].map(index => {
        const top = 38 + ((flowTick * 5 + index * 17) % 32);
        return <WhiteboardArrow key={index} color={index % 2 ? '#EF4444' : '#F59E0B'} style={{ position: 'absolute', left: `${25 + index * 14}%`, top: `${top}%`, opacity: 0.75, transform: 'rotate(12deg)' }}/>;
      })}
    </div>
  );
}

function MedallionWhiteboardPlatform({ concept, flowStages, servingStage, activeStageId, activeStageIndex, flowTick, color, onStageSelect }) {
  const dataSamples = [
    {
      system: 'ERP',
      source: 'ERP order #A17',
      bronze: 'raw_erp_orders',
      silver: 'clean_orders',
      gold: 'daily_revenue',
    },
    {
      system: 'CRM',
      source: 'CRM contact',
      bronze: 'raw_crm_contacts',
      silver: 'dim_customer',
      gold: 'customer_360',
    },
    {
      system: 'Web',
      source: 'web event',
      bronze: 'raw_clickstream',
      silver: 'session_events',
      gold: 'conversion_funnel',
    },
    {
      system: 'API',
      source: 'inventory API',
      bronze: 'raw_inventory',
      silver: 'stock_snapshot',
      gold: 'sku_availability',
    },
    {
      system: 'Finance',
      source: 'GL csv',
      bronze: 'raw_gl_entries',
      silver: 'clean_gl',
      gold: 'margin_kpi',
    },
  ];
  const progress = (flowTick * 7) % 100;
  const stageSize = 100 / flowStages.length;
  const currentStageIndex = Math.min(flowStages.length - 1, Math.floor(progress / stageSize));
  const currentStage = flowStages[currentStageIndex];
  const packetPosition = 7 + progress * 0.86;
  const packetIndex = Math.floor(flowTick / 2) % dataSamples.length;
  const currentPacket = dataSamples[packetIndex];
  const visibleSamples = [0, 1, 2, 3].map(offset => dataSamples[(packetIndex + offset) % dataSamples.length]);
  const packetLabel = currentStage.id === 'sources'
    ? currentPacket.source
    : currentPacket[currentStage.id];
  const servingActive = activeStageId === 'serving';
  const servingPassed = activeStageIndex >= concept.stages.findIndex(stage => stage.id === 'serving');

  return (
    <div className="de-whiteboard-visual" style={{
      position: 'relative',
      width: '100%',
      maxWidth: '100%',
      minWidth: 0,
      minHeight: 'clamp(620px, 68vh, 760px)',
      borderRadius: 20,
      background: 'linear-gradient(180deg, #fffdf7, #f8fbff)',
      border: '1px solid rgba(var(--theme-text-rgb),0.08)',
      color: '#172033',
      overflow: 'hidden',
      padding: 'clamp(16px, 2vw, 26px)',
      boxShadow: 'inset 0 0 0 1px rgba(17,24,39,0.05)',
    }}>
      <svg aria-hidden="true" viewBox="0 0 1000 560" preserveAspectRatio="none" style={{
        position: 'absolute',
        inset: 0,
        width: '100%',
        height: '100%',
        opacity: 0.34,
        pointerEvents: 'none',
      }}>
        <path d="M54 76c70-28 132-23 205 0M722 98c72-18 126-12 196 15M120 492c146 24 262 15 390-8M640 500c103 20 178 8 286-18" fill="none" stroke="#F5B96B" strokeWidth="3" strokeLinecap="round" strokeDasharray="10 15"/>
        <path d="M58 260c58-18 105-17 164 0M762 296c52-20 107-20 162 2" fill="none" stroke="#93C5FD" strokeWidth="8" strokeLinecap="round" opacity="0.42"/>
      </svg>

      <div className="de-whiteboard-personas" style={{
        position: 'relative',
        zIndex: 1,
        display: 'grid',
        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
        gap: 12,
        marginBottom: 16,
      }}>
        <WhiteboardPerson title="Data Scientist" subtitle="experiments + features" tone="#F59E0B" icon="science"/>
        <WhiteboardPerson title="Data Analyst" subtitle="dashboards + SQL" tone="#22C55E" icon="chart"/>
        <WhiteboardPerson title="Data Engineer" subtitle="pipelines + reliability" tone="#38BDF8" icon="pipeline"/>
      </div>

      <div className="de-whiteboard-map" style={{
        position: 'relative',
        zIndex: 1,
        display: 'grid',
        gridTemplateColumns: 'minmax(150px, 0.7fr) minmax(0, 2.8fr) minmax(140px, 0.72fr)',
        gap: 14,
        alignItems: 'stretch',
        minWidth: 0,
      }}>
        <aside className="de-platform-brand" style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          gap: 14,
          padding: '18px 14px',
          borderRadius: 18,
          background: 'rgba(255,255,255,0.62)',
          border: '2px dashed rgba(239,68,68,0.28)',
          minWidth: 0,
        }}>
          <SketchStackLogo color="#EF4444"/>
          <div>
            <div style={{
              fontSize: 26,
              fontWeight: 900,
              lineHeight: 1,
              letterSpacing: '-0.2px',
              color: '#111827',
            }}>Data + AI</div>
            <div style={{ fontSize: 15, fontWeight: 800, marginTop: 6, color: '#334155' }}>Platform</div>
          </div>
          <div style={{
            fontSize: 11,
            lineHeight: 1.45,
            color: '#64748B',
            fontWeight: 700,
          }}>One place to build, govern, and serve data products.</div>
        </aside>

        <section className="de-platform-core" style={{
          minWidth: 0,
          padding: '14px',
          borderRadius: 20,
          background: 'rgba(255,238,238,0.68)',
          border: '2px dashed rgba(248,113,113,0.26)',
          display: 'flex',
          flexDirection: 'column',
          gap: 12,
        }}>
          <div className="de-platform-workloads" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: 10,
          }}>
            <WhiteboardCapability title="SQL Warehouse" subtitle="serve marts" tone="#EF4444" icon="warehouse"/>
            <WhiteboardCapability title="AI / BI" subtitle="semantic answers" tone="#7C3AED" icon="bot"/>
            <WhiteboardCapability title="Mosaic AI" subtitle="models + agents" tone="#EC4899" icon="brain"/>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(120px, 0.75fr) minmax(0, 1fr)',
            gap: 10,
            alignItems: 'center',
            padding: '12px 14px',
            borderRadius: 16,
            background: 'rgba(255,255,255,0.74)',
            border: '2px solid rgba(148,163,184,0.24)',
          }}>
            <div style={{ color: '#111827', fontSize: 22, fontWeight: 900, lineHeight: 1.05 }}>Unity Catalog</div>
            <div className="de-catalog-pills" style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
              gap: 8,
            }}>
              {['Schema', 'Catalog', 'Permissions'].map((item, index) => (
                <div key={item} style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 7,
                  minWidth: 0,
                  padding: '8px 9px',
                  borderRadius: 12,
                  background: index === 2 ? 'rgba(245,158,11,0.14)' : 'rgba(15,23,42,0.04)',
                  color: '#334155',
                  fontSize: 12,
                  fontWeight: 800,
                  border: '1px solid rgba(15,23,42,0.08)',
                }}>
                  <DeStageIcon stageId={index === 2 ? 'validate' : 'silver'} size={15}/>
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{item}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="de-lakehouse-board" style={{
            position: 'relative',
            minWidth: 0,
            padding: '14px',
            borderRadius: 18,
            background: 'rgba(255,255,255,0.8)',
            border: '2px solid rgba(148,163,184,0.22)',
          }}>
            <div className="de-lakehouse-heading" style={{
              display: 'flex',
              justifyContent: 'space-between',
              gap: 12,
              alignItems: 'flex-start',
              marginBottom: 10,
            }}>
              <div>
                <div style={{ color: color, fontSize: 10, fontWeight: 900, letterSpacing: '1.8px', textTransform: 'uppercase' }}>Data Lakehouse</div>
                <div style={{ color: '#111827', fontSize: 24, fontWeight: 900, lineHeight: 1.05, marginTop: 4 }}>Medallion flow</div>
              </div>
              <div className="de-sample-strip" style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: 420 }}>
                {visibleSamples.map((sample, index) => (
                  <span key={`${sample.system}-${index}`} style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 5,
                    maxWidth: 112,
                    padding: '5px 8px',
                    borderRadius: 999,
                    border: '1px solid rgba(15,23,42,0.08)',
                    background: index === 0 ? `${color}20` : 'rgba(15,23,42,0.04)',
                    color: '#334155',
                    fontSize: 10,
                    fontWeight: 800,
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: index === 0 ? color : '#94A3B8', flex: '0 0 auto' }}/>
                    {sample.source}
                  </span>
                ))}
              </div>
            </div>

            <div className="de-whiteboard-stage-wrap" style={{
              position: 'relative',
              paddingTop: 42,
              minWidth: 0,
            }}>
              <div style={{
                position: 'absolute',
                left: 'clamp(28px, 7%, 54px)',
                right: 'clamp(28px, 7%, 54px)',
                top: 22,
                height: 3,
                borderRadius: 999,
                background: `linear-gradient(90deg, ${flowStages.map(stage => stage.tone).join(', ')})`,
              }}/>
              {flowStages.map((stage, index) => (
                <span key={stage.id} style={{
                  position: 'absolute',
                  left: `${7 + index * (86 / (flowStages.length - 1))}%`,
                  top: 15,
                  width: 16,
                  height: 16,
                  borderRadius: '50%',
                  border: `2px solid ${stage.tone}`,
                  background: '#fffdf7',
                  transform: 'translateX(-50%)',
                  boxShadow: `0 0 0 5px ${stage.tone}18`,
                }}/>
              ))}
              <div style={{
                position: 'absolute',
                left: `clamp(74px, ${packetPosition}%, calc(100% - 74px))`,
                top: 0,
                transform: 'translateX(-50%)',
                width: 148,
                minHeight: 38,
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                padding: '7px 10px',
                borderRadius: 999,
                color: '#111827',
                background: '#ffffff',
                border: `2px solid ${currentStage.tone}66`,
                boxShadow: `0 12px 24px ${currentStage.tone}18`,
                transition: 'left 0.9s linear, border-color 0.25s ease',
                zIndex: 3,
              }}>
                <span style={{ color: currentStage.tone, flex: '0 0 auto' }}><DeStageIcon stageId={currentStage.id} size={16}/></span>
                <span style={{ minWidth: 0, lineHeight: 1.05 }}>
                  <span style={{ display: 'block', fontSize: 11, fontWeight: 900, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{packetLabel}</span>
                  <span style={{ display: 'block', fontSize: 9, color: '#64748B', fontWeight: 800, marginTop: 2 }}>{currentPacket.system} -> {currentStage.label}</span>
                </span>
              </div>

              <div className="de-whiteboard-stage-row" style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
                gap: 10,
                minWidth: 0,
              }}>
                {flowStages.map(stage => {
                  const stageIndex = concept.stages.findIndex(item => item.id === stage.id);
                  const active = stage.id === activeStageId;
                  const passed = stageIndex <= activeStageIndex;
                  return (
                    <button key={stage.id} type="button" onClick={() => onStageSelect(stage.id)} className="de-whiteboard-stage-card" style={{
                      minWidth: 0,
                      minHeight: active ? 126 : 116,
                      padding: '12px 10px',
                      borderRadius: 16,
                      border: `2px solid ${active ? stage.tone : 'rgba(15,23,42,0.1)'}`,
                      background: active ? `${stage.tone}18` : 'rgba(255,255,255,0.84)',
                      color: '#172033',
                      cursor: 'pointer',
                      textAlign: 'left',
                      boxShadow: active ? `0 18px 34px ${stage.tone}22` : '0 8px 20px rgba(15,23,42,0.05)',
                      transform: active ? 'translateY(-6px)' : 'translateY(0)',
                      transition: 'all 0.25s ease',
                    }}>
                      <div style={{
                        width: 34,
                        height: 34,
                        borderRadius: 12,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        background: `${stage.tone}1f`,
                        color: stage.tone,
                        border: `1px solid ${stage.tone}44`,
                        marginBottom: 9,
                      }}>
                        <DeStageIcon stageId={stage.id} size={18}/>
                      </div>
                      <h3 style={{ margin: '0 0 5px', color: '#111827', fontSize: 16, lineHeight: 1.1 }}>{stage.label}</h3>
                      <p style={{ margin: 0, color: '#64748B', fontSize: 11, lineHeight: 1.4 }}>{stage.subtitle}</p>
                      <div style={{
                        marginTop: 10,
                        height: 6,
                        borderRadius: 999,
                        background: 'rgba(15,23,42,0.08)',
                        overflow: 'hidden',
                      }}>
                        <div style={{
                          width: passed ? '100%' : '0%',
                          height: '100%',
                          borderRadius: 999,
                          background: stage.tone,
                          transition: 'width 0.3s ease',
                        }}/>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>

            {servingStage && (
              <button type="button" onClick={() => onStageSelect(servingStage.id)} className="de-whiteboard-serving" style={{
                marginTop: 12,
                width: '100%',
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                padding: '12px 14px',
                borderRadius: 16,
                border: `2px solid ${servingActive ? servingStage.tone : 'rgba(15,23,42,0.1)'}`,
                background: servingActive ? `${servingStage.tone}18` : 'rgba(15,23,42,0.03)',
                color: '#172033',
                cursor: 'pointer',
                textAlign: 'left',
              }}>
                <span style={{
                  width: 38,
                  height: 38,
                  borderRadius: 13,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: servingStage.tone,
                  background: `${servingStage.tone}1f`,
                  border: `1px solid ${servingStage.tone}44`,
                  flex: '0 0 auto',
                }}><DeStageIcon stageId={servingStage.id} size={19}/></span>
                <span style={{ minWidth: 0, flex: 1 }}>
                  <span style={{ display: 'block', color: '#111827', fontWeight: 900, fontSize: 17 }}>{servingStage.label}</span>
                  <span style={{ display: 'block', color: '#64748B', fontWeight: 700, fontSize: 12, marginTop: 2 }}>{servingStage.subtitle}</span>
                  <span style={{ display: 'block', marginTop: 8, height: 6, borderRadius: 999, background: 'rgba(15,23,42,0.08)', overflow: 'hidden' }}>
                    <span style={{ display: 'block', width: servingPassed ? '100%' : '0%', height: '100%', background: servingStage.tone, borderRadius: 999, transition: 'width 0.3s ease' }}/>
                  </span>
                </span>
              </button>
            )}
          </div>

          <div className="de-compute-row" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
            gap: 8,
          }}>
            {['ERP', 'CRM', 'API', 'Files'].map((item, index) => (
              <div key={item} style={{
                minWidth: 0,
                padding: '9px',
                borderRadius: 14,
                background: 'rgba(255,255,255,0.7)',
                border: '1px solid rgba(15,23,42,0.08)',
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                color: '#334155',
                fontSize: 11,
                fontWeight: 800,
              }}>
                <MiniServer tone={index % 2 === 0 ? '#38BDF8' : '#F59E0B'}/>
                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{item}</span>
              </div>
            ))}
          </div>
        </section>

        <aside className="de-platform-role-rail" style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-around',
          gap: 10,
          minWidth: 0,
        }}>
          <WhiteboardRole title="AI Engineer" action="build agents" tone="#EC4899"/>
          <WhiteboardRole title="Auditor" action="review access" tone="#F59E0B"/>
          <WhiteboardRole title="Data Engineer" action="build pipelines" tone="#38BDF8"/>
        </aside>
      </div>
    </div>
  );
}

function WhiteboardPerson({ title, subtitle, tone, icon }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: 10,
      minWidth: 0,
      padding: '10px 12px',
      borderRadius: 16,
      background: 'rgba(255,255,255,0.72)',
      border: '2px solid rgba(15,23,42,0.08)',
      boxShadow: '0 8px 18px rgba(15,23,42,0.05)',
    }}>
      <span style={{ flex: '0 0 auto' }}>
        <SketchAvatar tone={tone} icon={icon}/>
      </span>
      <span style={{ minWidth: 0 }}>
        <span style={{ display: 'block', color: '#111827', fontWeight: 900, fontSize: 15, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</span>
        <span style={{ display: 'block', color: '#64748B', fontSize: 11, fontWeight: 700, marginTop: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{subtitle}</span>
      </span>
    </div>
  );
}

function WhiteboardCapability({ title, subtitle, tone, icon }) {
  const iconPath = {
    warehouse: 'M5 19V8l7-4 7 4v11M8 19v-7h8v7M9 9h.01M12 9h.01M15 9h.01',
    bot: 'M8 11a4 4 0 018 0v4a4 4 0 01-8 0v-4zM9 7V4M15 7V4M6 13H4M20 13h-2M10 14h.01M14 14h.01',
    brain: 'M9 5a3 3 0 00-3 3v1a3 3 0 000 6v1a3 3 0 003 3M15 5a3 3 0 013 3v1a3 3 0 010 6v1a3 3 0 01-3 3M9 5v14M15 5v14M9 11h6M9 15h6',
  }[icon];

  return (
    <div style={{
      minWidth: 0,
      minHeight: 118,
      padding: '13px 12px',
      borderRadius: 16,
      background: 'rgba(255,255,255,0.82)',
      border: '2px solid rgba(15,23,42,0.08)',
      boxShadow: '0 10px 24px rgba(15,23,42,0.05)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <span style={{
          width: 36,
          height: 36,
          borderRadius: 13,
          background: `${tone}18`,
          color: tone,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          border: `1px solid ${tone}38`,
          flex: '0 0 auto',
        }}>
          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d={iconPath}/>
          </svg>
        </span>
        <span style={{ minWidth: 0 }}>
          <span style={{ display: 'block', color: '#111827', fontWeight: 900, fontSize: 17, lineHeight: 1.05 }}>{title}</span>
          <span style={{ display: 'block', color: '#64748B', fontWeight: 700, fontSize: 11, marginTop: 3 }}>{subtitle}</span>
        </span>
      </div>
      <div style={{ height: 5, borderRadius: 999, background: `${tone}24` }}>
        <div style={{ width: '68%', height: '100%', borderRadius: 999, background: tone }}/>
      </div>
    </div>
  );
}

function WhiteboardRole({ title, action, tone }) {
  return (
    <div style={{
      padding: '12px 10px',
      borderRadius: 16,
      background: 'rgba(255,255,255,0.72)',
      border: '2px dashed rgba(15,23,42,0.12)',
      color: '#172033',
      minWidth: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <SketchAvatar tone={tone} small/>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 900, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</div>
          <div style={{ color: tone, fontSize: 11, fontWeight: 900, marginTop: 4 }}>{action}</div>
        </div>
      </div>
      <svg width="82" height="24" viewBox="0 0 82 24" fill="none" style={{ marginTop: 8, color: tone }}>
        <path d="M5 14c20-16 42-12 66-3" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeDasharray="5 7"/>
        <path d="M65 5l10 6-10 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function SketchAvatar({ tone, small = false }) {
  const size = small ? 34 : 42;
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <circle cx="24" cy="21" r="10" fill={`${tone}20`} stroke="#172033" strokeWidth="2"/>
      <path d="M14 40c2-8 18-8 20 0" stroke="#172033" strokeWidth="2.2" strokeLinecap="round"/>
      <path d="M17 16c4-8 16-8 20 0" stroke={tone} strokeWidth="4" strokeLinecap="round"/>
      <path d="M20 22h.01M28 22h.01M21 28c2 1.5 4 1.5 6 0" stroke="#172033" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
}

function SketchStackLogo({ color }) {
  return (
    <svg width="66" height="62" viewBox="0 0 66 62" fill="none" aria-hidden="true">
      <path d="M9 18L33 6l24 12-24 12L9 18z" stroke={color} strokeWidth="4" strokeLinejoin="round"/>
      <path d="M9 30l24 12 24-12M9 42l24 12 24-12" stroke={color} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function MiniServer({ tone }) {
  return (
    <svg width="31" height="24" viewBox="0 0 31 24" fill="none" aria-hidden="true" style={{ flex: '0 0 auto' }}>
      <rect x="2" y="3" width="24" height="7" rx="2" fill={`${tone}24`} stroke={tone} strokeWidth="1.8"/>
      <rect x="5" y="14" width="24" height="7" rx="2" fill="rgba(255,255,255,0.7)" stroke={tone} strokeWidth="1.8"/>
      <circle cx="21" cy="6.5" r="1.3" fill={tone}/>
      <circle cx="24" cy="17.5" r="1.3" fill={tone}/>
    </svg>
  );
}

function MedallionTransformLane({ flowStages, flowTick, color }) {
  const dataSamples = [
    {
      system: 'ERP',
      source: 'ERP order #A17',
      bronze: 'raw_erp_orders',
      silver: 'clean_orders',
      gold: 'daily_revenue',
    },
    {
      system: 'CRM',
      source: 'CRM contact',
      bronze: 'raw_crm_contacts',
      silver: 'dim_customer',
      gold: 'customer_360',
    },
    {
      system: 'Web',
      source: 'web event',
      bronze: 'raw_clickstream',
      silver: 'session_events',
      gold: 'conversion_funnel',
    },
    {
      system: 'API',
      source: 'inventory API',
      bronze: 'raw_inventory',
      silver: 'stock_snapshot',
      gold: 'sku_availability',
    },
    {
      system: 'Finance',
      source: 'GL csv',
      bronze: 'raw_gl_entries',
      silver: 'clean_gl',
      gold: 'margin_kpi',
    },
  ];
  const progress = (flowTick * 8) % 100;
  const packetPosition = 6 + progress * 0.88;
  const stageSize = 100 / flowStages.length;
  const currentStageIndex = Math.min(flowStages.length - 1, Math.floor(progress / stageSize));
  const currentStage = flowStages[currentStageIndex];
  const packetIndex = Math.floor(flowTick / 2) % dataSamples.length;
  const currentPacket = dataSamples[packetIndex];
  const visibleSamples = [0, 1, 2].map(offset => dataSamples[(packetIndex + offset) % dataSamples.length]);
  const packetLabel = currentPacket[currentStage.id] || currentPacket.source;

  return (
    <div className="de-transform-lane" style={{
      position: 'absolute',
      left: '50%',
      top: -58,
      width: 'min(900px, calc(100% - 28px))',
      minWidth: 0,
      height: 82,
      transform: 'translateX(-50%)',
      pointerEvents: 'none',
      zIndex: 6,
    }}>
      <div style={{
        position: 'absolute',
        left: 8,
        right: 8,
        top: 0,
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        overflow: 'hidden',
      }}>
        <span style={{
          color,
          fontSize: 10,
          fontWeight: 900,
          letterSpacing: '1.4px',
          textTransform: 'uppercase',
          whiteSpace: 'nowrap',
        }}>Incoming</span>
        {visibleSamples.map((sample, index) => (
          <span key={`${sample.system}-${index}`} style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            maxWidth: 126,
            minWidth: 0,
            padding: '5px 8px',
            borderRadius: 999,
            border: '1px solid rgba(var(--theme-text-rgb),0.1)',
            background: index === 0 ? `${color}18` : 'rgba(var(--theme-bg-rgb),0.58)',
            color: index === 0 ? 'var(--theme-strong)' : 'rgba(var(--theme-text-rgb),0.68)',
            fontSize: 10,
            fontWeight: 800,
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            boxShadow: index === 0 ? `0 8px 20px ${color}12` : 'none',
          }}>
            <span style={{
              width: 6,
              height: 6,
              borderRadius: '50%',
              background: index === 0 ? color : 'rgba(var(--theme-text-rgb),0.34)',
              flex: '0 0 auto',
            }}/>
            {sample.source}
          </span>
        ))}
      </div>

      <div style={{
        position: 'absolute',
        left: 18,
        right: 18,
        top: 52,
        height: 3,
        borderRadius: 999,
        background: `linear-gradient(90deg, ${flowStages.map(stage => stage.tone).join(', ')})`,
        opacity: 0.85,
      }}/>

      {flowStages.map((stage, index) => (
        <span key={stage.id} style={{
          position: 'absolute',
          left: `${6 + index * (88 / (flowStages.length - 1))}%`,
          top: 46,
          width: 13,
          height: 13,
          borderRadius: '50%',
          border: `2px solid ${stage.tone}`,
          background: 'rgba(var(--theme-bg-rgb),0.96)',
          transform: 'translateX(-50%)',
          boxShadow: `0 0 0 5px ${stage.tone}16`,
        }}/>
      ))}

      {[18, 10].map((offset, index) => {
        const dotProgress = (progress - offset + 100) % 100;
        const dotPosition = 6 + dotProgress * 0.88;
        const dotStage = flowStages[Math.min(flowStages.length - 1, Math.floor(dotProgress / stageSize))];
        return (
          <span key={offset} style={{
            position: 'absolute',
            left: `calc(${dotPosition}% - 4px)`,
            top: 49,
            width: index === 0 ? 7 : 9,
            height: index === 0 ? 7 : 9,
            borderRadius: '50%',
            background: dotStage.tone,
            opacity: index === 0 ? 0.35 : 0.55,
            transition: 'left 0.9s linear',
            boxShadow: `0 0 14px ${dotStage.tone}66`,
          }}/>
        );
      })}

      <div style={{
        position: 'absolute',
        left: `clamp(78px, ${packetPosition}%, calc(100% - 78px))`,
        top: 27,
        minWidth: 142,
        maxWidth: 158,
        height: 42,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 9,
        padding: '8px 12px',
        borderRadius: 999,
        border: `1px solid ${currentStage.tone}66`,
        background: `linear-gradient(135deg, ${currentStage.tone}22, rgba(var(--theme-bg-rgb),0.94))`,
        color: 'var(--theme-strong)',
        boxShadow: `0 14px 32px ${currentStage.tone}24`,
        transform: 'translateX(-50%)',
        transition: 'left 0.9s linear, border-color 0.25s ease, background 0.25s ease',
        whiteSpace: 'nowrap',
      }}>
        <span style={{
          width: 26,
          height: 26,
          borderRadius: '50%',
          background: `${currentStage.tone}22`,
          color: currentStage.tone,
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          flex: '0 0 auto',
        }}>
          <DeStageIcon stageId={currentStage.id} size={15}/>
        </span>
        <span style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 1,
          lineHeight: 1.1,
        }}>
          <span style={{
            maxWidth: 104,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            fontSize: 12,
            fontWeight: 900,
          }}>{packetLabel}</span>
          <span style={{
            fontSize: 10,
            color: 'rgba(var(--theme-text-rgb),0.54)',
            fontWeight: 700,
          }}>{currentPacket.system} -> {currentStage.label}</span>
        </span>
      </div>
    </div>
  );
}

function MedallionLayerCard({ stage, index, active, passed, onClick }) {
  return (
    <button className="de-medallion-card" type="button" onClick={onClick} style={{
      width: 'clamp(112px, 15vw, 172px)',
      minHeight: active ? 'clamp(176px, 21vh, 216px)' : 'clamp(158px, 19vh, 194px)',
      padding: 'clamp(12px, 1.4vw, 16px)',
      borderRadius: 18,
      border: `1px solid ${active ? stage.tone : 'rgba(var(--theme-text-rgb),0.1)'}`,
      background: active
        ? `linear-gradient(180deg, ${stage.tone}24, rgba(var(--theme-bg-rgb),0.58))`
        : 'rgba(var(--theme-bg-rgb),0.46)',
      color: 'var(--theme-text)',
      cursor: 'pointer',
      textAlign: 'left',
      transform: active ? 'translateY(-12px)' : 'translateY(0)',
      boxShadow: active ? `0 24px 44px ${stage.tone}24` : 'none',
      transition: 'all 0.28s ease',
      position: 'relative',
      zIndex: 3,
      flex: '1 1 0',
      minWidth: 112,
      maxWidth: 172,
    }}>
      <div style={{
        width: 'clamp(34px, 3.4vw, 42px)',
        height: 'clamp(34px, 3.4vw, 42px)',
        borderRadius: 14,
        background: `${stage.tone}20`,
        color: stage.tone,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontWeight: 900,
        marginBottom: 12,
        border: `1px solid ${stage.tone}35`,
      }}>
        <DeStageIcon stageId={stage.id} size={20}/>
      </div>
      <h3 style={{ color: 'var(--theme-strong)', fontSize: 'clamp(16px, 1.35vw, 18px)', margin: '0 0 6px' }}>{stage.label}</h3>
      <p style={{ color: 'rgba(var(--theme-text-rgb),0.58)', fontSize: 'clamp(12px, 1vw, 13px)', lineHeight: 1.5, margin: 0 }}>{stage.subtitle}</p>
      <div style={{
        marginTop: 14,
        height: 7,
        borderRadius: 999,
        background: 'rgba(var(--theme-text-rgb),0.08)',
        overflow: 'hidden',
      }}>
        <div style={{
          width: passed ? '100%' : '0%',
          height: '100%',
          borderRadius: 999,
          background: stage.tone,
          transition: 'width 0.3s ease',
        }}/>
      </div>
    </button>
  );
}

function DeConceptIcon({ conceptId, size = 19 }) {
  const paths = {
    medallion: [
      'M12 3l8 4-8 4-8-4 8-4z',
      'M4 12l8 4 8-4',
      'M4 17l8 4 8-4',
    ],
    databricks_platform: [
      'M6 8l6-3 6 3-6 3-6-3z',
      'M6 13l6 3 6-3',
      'M6 18l6 3 6-3',
      'M18.5 5.5l2 2-2 2',
    ],
    managed_spark: [
      'M13 2L5 14h6l-1 8 8-12h-6l1-8z',
      'M4 20h6M15 20h5',
    ],
    sql_lakehouse: [
      'M5 19V8l7-4 7 4v11',
      'M8 19v-7h8v7',
      'M5 22c3-2 5 1 8-1s5-1 7 1',
    ],
    powerbi: [
      'M4 19V5',
      'M4 19h16',
      'M8 16v-5M12 16V8M16 16v-7',
    ],
    orchestration: [
      'M5 7h5',
      'M14 7h5',
      'M10 7a2 2 0 104 0',
      'M12 9v6',
      'M7 17h10',
    ],
    quality: [
      'M12 3l8 4v5c0 5-3.4 8-8 9-4.6-1-8-4-8-9V7l8-4z',
      'M8.5 12l2.2 2.2L16 9',
    ],
  };
  const iconPaths = paths[conceptId] || paths.medallion;

  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {iconPaths.map(path => <path key={path} d={path}/>)}
    </svg>
  );
}

function DeStageIcon({ stageId, size = 19 }) {
  const paths = {
    sources: [
      'M4 7h16M4 12h16M4 17h16',
      'M7 4v16M17 4v16',
    ],
    bronze: [
      'M12 3l8 4-8 4-8-4 8-4z',
      'M4 12l8 4 8-4',
      'M4 17l8 4 8-4',
    ],
    silver: [
      'M4 6h16v12H4z',
      'M8 10h8M8 14h5',
    ],
    gold: [
      'M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.7 6.6 20.5l1-6.1-4.4-4.3 6.1-.9L12 3z',
    ],
    serving: [
      'M4 19V5',
      'M4 19h16',
      'M8 16v-5M12 16V8M16 16v-8',
    ],
    extract: [
      'M12 3v12',
      'M7 10l5 5 5-5',
      'M5 21h14',
    ],
    validate: [
      'M12 3l8 4v5c0 5-3.4 8-8 9-4.6-1-8-4-8-9V7l8-4z',
      'M8.5 12l2.2 2.2L16 9',
    ],
    transform: [
      'M4 7h10',
      'M10 3l4 4-4 4',
      'M20 17H10',
      'M14 13l-4 4 4 4',
    ],
    publish: [
      'M12 19V5',
      'M7 10l5-5 5 5',
      'M5 21h14',
    ],
    profile: [
      'M4 19V5M4 19h16',
      'M8 16v-4M12 16V8M16 16v-7',
    ],
    assert: [
      'M5 12l4 4L19 6',
      'M4 20h16',
    ],
    quarantine: [
      'M12 9v4',
      'M12 17h.01',
      'M10.3 4.3L2.8 18a2 2 0 001.7 3h15a2 2 0 001.7-3L13.7 4.3a2 2 0 00-3.4 0z',
    ],
    certify: [
      'M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2 7.5 14 3 9.6l6.2-.9L12 3z',
      'M9.5 12.2l1.7 1.7 3.4-4',
    ],
    dbx_workspace: [
      'M4 6h16v12H4z',
      'M8 10h4M8 14h8',
      'M16 6v12',
    ],
    dbx_workloads: [
      'M5 5h6v6H5z',
      'M13 5h6v6h-6z',
      'M5 13h6v6H5z',
      'M13 13h6v6h-6z',
    ],
    unity_catalog: [
      'M4 6h16v12H4z',
      'M8 6V4h8v2',
      'M8 11h8M8 15h5',
      'M17 14l2 2 3-4',
    ],
    delta_lakehouse: [
      'M5 16c3-4 6 2 9-2s5-3 7 1',
      'M6 9l6-4 6 4-6 4-6-4z',
      'M6 14l6 4 6-4',
    ],
    managed_compute: [
      'M4 8h16v5H4z',
      'M4 16h16v5H4z',
      'M17 10h.01M17 18h.01',
      'M8 3v3M16 3v3',
    ],
    builders: [
      'M8 11a4 4 0 108 0',
      'M4 21a8 8 0 0116 0',
      'M17 4l3 3-3 3',
    ],
    dbx_projects: [
      'M3 7h7l2 2h9v10H3z',
      'M7 13h10M7 16h6',
    ],
    spark_runtime: [
      'M13 2L5 14h6l-1 8 8-12h-6l1-8z',
    ],
    managed_cloud: [
      'M7 18a4 4 0 01.5-8A5 5 0 0117 8a4 4 0 011 8H7z',
      'M9 18h9',
      'M12 13l2 2 4-5',
    ],
    operations: [
      'M12 6v6l4 2',
      'M21 12a9 9 0 11-2.6-6.4',
      'M21 4v6h-6',
    ],
    roles_to_tools: [
      'M8 11a4 4 0 108 0',
      'M4 21a8 8 0 0116 0',
      'M5 5h4M15 5h4',
    ],
    sql_warehouse: [
      'M5 19V8l7-4 7 4v11',
      'M8 19v-7h8v7',
      'M9 9h.01M12 9h.01M15 9h.01',
    ],
    delta_lake: [
      'M5 16c3-4 6 2 9-2s5-3 7 1',
      'M6 9l6-4 6 4-6 4-6-4z',
      'M6 14l6 4 6-4',
    ],
    pipeline_build: [
      'M4 7h5',
      'M15 7h5',
      'M9 7a3 3 0 006 0',
      'M4 17h5',
      'M15 17h5',
      'M9 17a3 3 0 016 0',
    ],
    managed_spark_ops: [
      'M13 2L5 14h6l-1 8 8-12h-6l1-8z',
      'M18 16l2 2 3-4',
    ],
    pbi_sources: [
      'M4 7h16M4 12h16M4 17h16',
      'M8 4v16M16 4v16',
    ],
    power_query: [
      'M5 5h14v5H5z',
      'M7 14h10',
      'M9 18h6',
      'M18 10l3 3-3 3',
    ],
    semantic_model: [
      'M5 5h6v6H5z',
      'M13 13h6v6h-6z',
      'M11 8h4M15 8v5',
    ],
    dax_measures: [
      'M6 5h12',
      'M8 19l8-14',
      'M6 13h12',
      'M6 19h12',
    ],
    report_canvas: [
      'M4 5h16v14H4z',
      'M8 15v-4M12 15V8M16 15v-6',
    ],
    powerbi_service: [
      'M7 18a4 4 0 01.5-8A5 5 0 0117 8a4 4 0 011 8H7z',
      'M9 18h9',
      'M12 14l2 2 4-5',
    ],
  };
  const iconPaths = paths[stageId] || paths.transform;

  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round">
      {iconPaths.map(path => <path key={path} d={path}/>)}
    </svg>
  );
}

function DeDetailList({ title, items, color }) {
  return (
    <div style={{ marginTop: 18 }}>
      <div style={{
        color: 'rgba(var(--theme-text-rgb),0.54)',
        fontSize: 11,
        fontWeight: 800,
        letterSpacing: '1.8px',
        textTransform: 'uppercase',
        marginBottom: 10,
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map(item => (
          <div key={item} style={{
            display: 'flex',
            alignItems: 'center',
            gap: 10,
            padding: '9px 11px',
            borderRadius: 12,
            background: 'rgba(var(--theme-bg-rgb),0.34)',
            border: '1px solid rgba(var(--theme-text-rgb),0.07)',
            color: 'rgba(var(--theme-text-rgb),0.76)',
            fontSize: 13,
          }}>
            <span style={{
              width: 8,
              height: 8,
              borderRadius: '50%',
              background: color,
              boxShadow: `0 0 0 4px ${color}18`,
              flex: '0 0 auto',
            }}/>
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}