Devops/index.html at main · GouthamKumar4/Devops · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DevOps / Platform / SRE Study Guide</title>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            ring7: '#60a5fa', ring6: '#f97316', ring5: '#a855f7',
            ring4: '#22c55e', ring3: '#ef4444', center: '#3b82f6',
            ring2: '#eab308', ring1: '#06b6d4', devflow: '#8b5cf6',
          }
        }
      }
    }
  </script>
  <style>
    .topic-card { transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s; }
    .topic-card:hover { transform: translateY(-2px); }
    body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
    pre code { font-size: 0.85rem; }
    @keyframes glowPulse { 0%,100%{box-shadow:0 0 4px rgba(59,130,246,0.2)} 50%{box-shadow:0 0 18px rgba(59,130,246,0.5)} }
    @keyframes flowDown { 0%{opacity:0;transform:translateY(-8px)} 50%{opacity:1} 100%{opacity:0;transform:translateY(8px)} }
    @keyframes flowRight { 0%{opacity:0;transform:translateX(-6px)} 50%{opacity:1} 100%{opacity:0;transform:translateX(6px)} }
    .glow-box { animation: glowPulse 2.5s ease-in-out infinite; }
    .flow-dot-down { animation: flowDown 1.8s ease-in-out infinite; }
    .flow-dot-right { animation: flowRight 1.8s ease-in-out infinite; }
    .section-collapse { transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease; overflow: hidden; }
    .section-collapse.collapsed { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; }
    .section-collapse.expanded { max-height: 5000px; opacity: 1; }
    .chevron { transition: transform 0.25s ease; display: inline-block; }
    .chevron.open { transform: rotate(90deg); }
    .mode-card { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
    .mode-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
    .search-overlay { backdrop-filter: blur(8px); }
    @keyframes fadeIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
    .search-modal { animation: fadeIn 0.15s ease-out; }
    .score-bar { transition: width 0.8s ease-out; }
  </style>
</head>
<body class="bg-gray-950 text-gray-100 min-h-screen">
<div id="root"></div>

<!-- ═══ DATA FILES ═══ -->
<script src="data/topics.js"></script>
<script src="data/scenarios.js"></script>

<script type="text/babel">
// ============================================================
// APP SHELL — Routes & State
// ============================================================

function App() {
  // ── Global state ──
  const [view, setView] = React.useState('landing');
  // views: landing | learn | topic | deepdive | revision-all
  //        project | project-story | project-result
  const [selectedTopic, setSelectedTopic] = React.useState(null);
  const [tourMode, setTourMode] = React.useState(null);
  const [tourIndex, setTourIndex] = React.useState(0);
  const [cloud, setCloud] = React.useState('azure');
  const [searchOpen, setSearchOpen] = React.useState(false);

  // Project mode state (story-driven)
  const [selectedProject, setSelectedProject] = React.useState(null);
  const [selectedRole, setSelectedRole] = React.useState('devops');
  const [storyCloud, setStoryCloud] = React.useState(null);
  const [storyChoices, setStoryChoices] = React.useState([]);

  // ── Keyboard shortcut: Ctrl+K for search ──
  React.useEffect(() => {
    const handler = (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        setSearchOpen(prev => !prev);
      }
      if (e.key === 'Escape') setSearchOpen(false);
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  // ── Navigation helpers ──
  const openTopic = (topicId, mode = 'topic') => {
    const topic = TOPICS.find(t => t.id === topicId);
    if (topic) { setSelectedTopic(topic); setView(mode); window.scrollTo(0, 0); }
  };

  const navigateTopic = (direction) => {
    const idx = orderedTopics.findIndex(t => t.id === selectedTopic?.id);
    const newIdx = idx + direction;
    if (newIdx >= 0 && newIdx < orderedTopics.length) {
      setSelectedTopic(orderedTopics[newIdx]);
      window.scrollTo(0, 0);
    }
  };

  const startTour = (type) => {
    const topics = type === 'devops'
      ? orderedTopics.filter(t => t.ring === 'devflow')
      : orderedTopics.filter(t => t.ring !== 'devflow');
    setTourMode(type);
    setTourIndex(0);
    setSelectedTopic(topics[0]);
    setView('topic');
    window.scrollTo(0, 0);
  };

  const tourTopics = tourMode === 'devops'
    ? orderedTopics.filter(t => t.ring === 'devflow')
    : orderedTopics.filter(t => t.ring !== 'devflow');

  const nextTour = () => {
    if (tourIndex < tourTopics.length - 1) {
      const ni = tourIndex + 1;
      setTourIndex(ni);
      setSelectedTopic(tourTopics[ni]);
      window.scrollTo(0, 0);
    }
  };
  const prevTour = () => {
    if (tourIndex > 0) {
      const ni = tourIndex - 1;
      setTourIndex(ni);
      setSelectedTopic(tourTopics[ni]);
      window.scrollTo(0, 0);
    }
  };

  const goHome = () => { setView('landing'); setTourMode(null); setSelectedTopic(null); };
  const goLearn = () => { setView('learn'); setTourMode(null); };

  // Project mode helpers
  const startProject = (project) => {
    setSelectedProject(project);
    setStoryChoices([]);
    setStoryCloud(null);
    setView('project-story');
    window.scrollTo(0, 0);
  };

  // ── Render ──
  return (
    <>
      {searchOpen && <SearchModal close={() => setSearchOpen(false)} openTopic={openTopic} cloud={cloud}
        goToProject={(p) => { startProject(p); setSearchOpen(false); }} />}

      {view === 'landing' && <LandingPage goLearn={goLearn} goProject={() => setView('project')}
        goRevision={() => { setView('revision-all'); window.scrollTo(0,0); }}
        openSearch={() => setSearchOpen(true)} cloud={cloud} setCloud={setCloud} />}

      {view === 'learn' && <LearnPage openTopic={openTopic} startTour={startTour} goHome={goHome}
        cloud={cloud} setCloud={setCloud} openSearch={() => setSearchOpen(true)} />}

      {view === 'topic' && <TopicPage topic={selectedTopic} goHome={goHome} goLearn={goLearn}
        goDeepDive={() => setView('deepdive')} navigateTopic={navigateTopic}
        tourMode={tourMode} tourIndex={tourIndex} tourTotal={tourTopics.length}
        nextTour={nextTour} prevTour={prevTour} orderedTopics={orderedTopics} />}

      {view === 'deepdive' && <DeepDivePage topic={selectedTopic} goHome={goHome} goLearn={goLearn}
        goBack={() => setView('topic')} navigateTopic={navigateTopic} orderedTopics={orderedTopics} />}

      {view === 'revision-all' && <MasterRevisionPage goHome={goHome} openTopic={openTopic} cloud={cloud} />}

      {view === 'project' && <ProjectLandingPage goHome={goHome} startProject={startProject} />}

      {view === 'project-story' && <ProjectStoryPage project={selectedProject} goHome={goHome}
        goProject={() => setView('project')} openTopic={openTopic}
        role={selectedRole} setRole={setSelectedRole}
        storyCloud={storyCloud} setStoryCloud={setStoryCloud}
        storyChoices={storyChoices} setStoryChoices={setStoryChoices} />}
    </>
  );
}


// ============================================================
// LANDING PAGE — 3 Mode Cards
// ============================================================

function LandingPage({ goLearn, goProject, goRevision, openSearch, cloud, setCloud }) {
  const totalTopics = TOPICS.reduce((a, t) => a + t.subtopics.length, 0);
  const totalChapters = PROJECTS.reduce((a, p) => a + p.chapters.length, 0);
  return (
    <div className="max-w-5xl mx-auto px-4 py-12">
      <header className="text-center mb-12">
        <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent mb-3">
          DevOps · Platform · SRE
        </h1>
        <p className="text-xl text-gray-400">Interactive Study Guide — Learn → Decide → Build</p>
        <p className="text-sm text-gray-500 mt-2">{TOPICS.length} topics · {totalTopics} sub-topics · {PROJECTS.length} companies · {totalChapters} chapters</p>

        {/* Cloud toggle */}
        <div className="flex gap-1 justify-center mt-5 border border-gray-700 rounded-lg p-0.5 bg-gray-900/60 w-fit mx-auto">
          {[
            { id: 'azure', label: 'Azure', icon: '🔵' },
            { id: 'aws',   label: 'AWS',   icon: '🟠' },
            { id: 'gcp',   label: 'GCP',   icon: '🔴' },
          ].map(c => (
            <button key={c.id} onClick={() => setCloud(c.id)}
              className={`px-4 py-2 rounded-md text-sm font-bold tracking-wider transition ${cloud === c.id ? 'text-white' : 'text-gray-500 hover:text-gray-300'}`}
              style={cloud === c.id ? {
                background: c.id === 'azure' ? 'rgba(59,130,246,0.2)' : c.id === 'aws' ? 'rgba(249,115,22,0.2)' : 'rgba(239,68,68,0.2)',
                borderColor: c.id === 'azure' ? 'rgba(59,130,246,0.5)' : c.id === 'aws' ? 'rgba(249,115,22,0.5)' : 'rgba(239,68,68,0.5)',
                color: c.id === 'azure' ? '#93c5fd' : c.id === 'aws' ? '#fdba74' : '#fca5a5'
              } : {}}>
              {c.icon} {c.label}
            </button>
          ))}
        </div>

        {/* Search hint */}
        <button onClick={openSearch}
          className="mt-4 flex items-center gap-2 mx-auto px-4 py-2 rounded-lg border border-gray-700 bg-gray-900/50 text-gray-500 hover:border-gray-500 hover:text-gray-300 transition text-sm">
          🔍 Search topics, projects...
          <kbd className="ml-2 px-1.5 py-0.5 rounded bg-gray-800 text-[10px] font-mono text-gray-400 border border-gray-700">Ctrl+K</kbd>
        </button>
      </header>

      {/* 2 Mode Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 max-w-4xl mx-auto">
        {/* Learn Mode */}
        <button onClick={goLearn}
          className="mode-card text-left border border-blue-500/30 bg-gradient-to-br from-blue-950/40 to-slate-950 rounded-2xl p-6 hover:border-blue-400/60">
          <div className="text-4xl mb-3">📚</div>
          <h2 className="text-xl font-bold text-blue-300 mb-2">Learn Mode</h2>
          <p className="text-sm text-gray-400 mb-4">Interactive architecture diagram. Explore the full N-S + E-W request flow. Click any component to study.</p>
          <div className="flex flex-wrap gap-1">
            {RINGS.map(r => (
              <span key={r.id} className="text-[9px] px-1.5 py-0.5 rounded-full font-semibold" style={{backgroundColor: r.color + '22', color: r.color, border: `1px solid ${r.color}33`}}>
                {r.label}
              </span>
            ))}
          </div>
          <div className="mt-4 text-xs text-blue-400 font-semibold">{TOPICS.length} topics → {totalTopics} sub-topics →</div>
        </button>

        {/* Project Mode */}
        <button onClick={goProject}
          className="mode-card text-left border border-purple-500/30 bg-gradient-to-br from-purple-950/40 to-slate-950 rounded-2xl p-6 hover:border-purple-400/60">
          <div className="text-4xl mb-3">🏗️</div>
          <h2 className="text-xl font-bold text-purple-300 mb-2">Project Mode</h2>
          <p className="text-sm text-gray-400 mb-4">Join a company as DevOps / Platform / SRE / Cloud Engineer. Your manager assigns tasks. Make real architecture decisions. Build systems.</p>
          <div className="flex flex-wrap gap-1">
            {PROJECTS.slice(0, 4).map(p => (
              <span key={p.id} className="text-[9px] px-1.5 py-0.5 rounded-full font-semibold bg-purple-900/30 border border-purple-600/30 text-purple-300">
                {p.icon} {p.company.industry}
              </span>
            ))}
            {PROJECTS.length > 4 && <span className="text-[9px] px-1.5 py-0.5 text-purple-400">+{PROJECTS.length - 4} more</span>}
          </div>
          <div className="mt-3 flex flex-wrap gap-1">
            {ROLES.map(r => (
              <span key={r.id} className="text-[9px] px-1.5 py-0.5 rounded bg-gray-800 text-gray-400 border border-gray-700">
                {r.icon} {r.label}
              </span>
            ))}
          </div>
          <div className="mt-4 text-xs text-purple-400 font-semibold">{PROJECTS.length} companies → {totalChapters} chapters → story + decisions + system design →</div>
        </button>
      </div>

      {/* Quick actions */}
      <div className="flex justify-center gap-4 flex-wrap">
        <button onClick={goRevision}
          className="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium transition text-sm border border-gray-700 hover:border-gray-500">
          📋 Master Revision (All Topics)
        </button>
      </div>
    </div>
  );
}


// ============================================================
// SEARCH MODAL — Ctrl+K
// ============================================================

function SearchModal({ close, openTopic, cloud, goToProject }) {
  const [query, setQuery] = React.useState('');
  const inputRef = React.useRef(null);
  const cl = (label) => cloudLabel(label, cloud);

  React.useEffect(() => { inputRef.current?.focus(); }, []);

  const q = query.toLowerCase().trim();
  const results = React.useMemo(() => {
    if (!q) return { topics: [], projects: [] };

    const topics = TOPICS.filter(t =>
      t.title.toLowerCase().includes(q) ||
      t.subtopics.some(s => s.title.toLowerCase().includes(q) || s.revision.toLowerCase().includes(q))
    ).slice(0, 8);

    const projects = PROJECTS.filter(p =>
      p.company.name.toLowerCase().includes(q) ||
      p.company.industry.toLowerCase().includes(q) ||
      p.company.type.toLowerCase().includes(q) ||
      p.chapters.some(ch => ch.title.toLowerCase().includes(q))
    ).slice(0, 5);

    return { topics, projects };
  }, [q]);

  const hasResults = results.topics.length + results.projects.length > 0;

  return (
    <div className="fixed inset-0 z-50 search-overlay bg-black/60 flex items-start justify-center pt-[15vh]"
      onClick={(e) => { if (e.target === e.currentTarget) close(); }}>
      <div className="search-modal w-full max-w-2xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl overflow-hidden">
        {/* Search input */}
        <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-700">
          <span className="text-gray-500">🔍</span>
          <input ref={inputRef} value={query} onChange={e => setQuery(e.target.value)}
            className="flex-1 bg-transparent text-white text-lg outline-none placeholder-gray-600"
            placeholder="Search topics, companies, chapters..." />
          <kbd className="px-1.5 py-0.5 rounded bg-gray-800 text-[10px] font-mono text-gray-500 border border-gray-700">ESC</kbd>
        </div>

        {/* Results */}
        <div className="max-h-[60vh] overflow-y-auto p-2">
          {!q && (
            <div className="px-4 py-8 text-center text-gray-500 text-sm">
              Type to search across {TOPICS.length} topics and {PROJECTS.length} company projects
            </div>
          )}

          {q && !hasResults && (
            <div className="px-4 py-8 text-center text-gray-500 text-sm">No results for "{query}"</div>
          )}

          {/* Topic results */}
          {results.topics.length > 0 && (
            <div className="mb-2">
              <div className="px-3 py-1.5 text-[10px] font-bold text-gray-500 tracking-wider">📚 LEARN MODE — TOPICS</div>
              {results.topics.map(t => {
                const ring = RINGS.find(r => r.id === t.ring);
                return (
                  <button key={t.id} onClick={() => { openTopic(t.id); close(); }}
                    className="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-800 transition flex items-center gap-3">
                    <span className="text-xl">{t.icon}</span>
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-semibold text-white truncate">{t.title}</div>
                      <div className="text-[10px] text-gray-500">{ring?.label} · {t.subtopics.length} sub-topics</div>
                    </div>
                    <span className="text-[10px] px-1.5 py-0.5 rounded-full" style={{backgroundColor: ring?.color + '22', color: ring?.color}}>
                      {ring?.label?.split(' ')[0]}
                    </span>
                  </button>
                );
              })}
            </div>
          )}

          {/* Project results */}
          {results.projects.length > 0 && (
            <div className="mb-2">
              <div className="px-3 py-1.5 text-[10px] font-bold text-gray-500 tracking-wider">🏗️ PROJECT MODE — COMPANIES</div>
              {results.projects.map(p => (
                <button key={p.id} onClick={() => { goToProject(p); close(); }}
                  className="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-800 transition flex items-center gap-3">
                  <span className="text-xl">{p.icon}</span>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-semibold text-white truncate">{p.company.name}</div>
                    <div className="text-[10px] text-gray-500">{p.company.industry} · {p.chapters.length} chapters</div>
                  </div>
                  <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-purple-900/30 text-purple-300">{p.company.type}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}


// ============================================================
// LEARN PAGE (formerly HomePage) — Diagram + Topics
// ============================================================

function LearnPage({ openTopic, startTour, goHome, cloud, setCloud, openSearch }) {
  const [diagramMode, setDiagramMode] = React.useState('simple');
  return (
    <div className="max-w-7xl mx-auto px-4 py-6">
      <header className="text-center mb-6">
        <div className="flex items-center justify-center gap-3 mb-3">
          <button onClick={goHome} className="text-sm text-gray-400 hover:text-white transition flex items-center gap-1">← Home</button>
          <span className="text-gray-700">|</span>
          <button onClick={openSearch} className="text-sm text-gray-500 hover:text-gray-300 transition flex items-center gap-1">
            🔍 <kbd className="px-1 py-0.5 rounded bg-gray-800 text-[9px] font-mono border border-gray-700">Ctrl+K</kbd>
          </button>
        </div>
        <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
          📚 Learn Mode — Architecture Flow
        </h1>
        <p className="text-gray-400 mt-2 text-lg">Interactive architecture flow — click any box to expand, click any node to study</p>
        <div className="flex gap-3 justify-center mt-4 flex-wrap">
          <button onClick={() => startTour('request')} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition text-sm">🧭 Request Flow Tour</button>
          <button onClick={() => startTour('devops')} className="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition text-sm">🔨 DevOps Flow Tour</button>
        </div>
        {/* Cloud Provider & View Toggles */}
        <div className="flex gap-4 justify-center mt-4 flex-wrap items-center">
          <div className="flex gap-1 border border-gray-700 rounded-lg p-0.5 bg-gray-900/60">
            {[
              { id: 'azure', label: 'Azure', icon: '🔵', color: 'blue' },
              { id: 'aws',   label: 'AWS',   icon: '🟠', color: 'orange' },
              { id: 'gcp',   label: 'GCP',   icon: '🔴', color: 'red' },
            ].map(c => (
              <button key={c.id} onClick={() => setCloud(c.id)}
                className={`px-3 py-1.5 rounded-md text-xs font-bold tracking-wider transition ${cloud === c.id ? 'text-white' : 'text-gray-500 hover:text-gray-300'}`}
                style={cloud === c.id ? {
                  background: c.id === 'azure' ? 'rgba(59,130,246,0.2)' : c.id === 'aws' ? 'rgba(249,115,22,0.2)' : 'rgba(239,68,68,0.2)',
                  borderColor: c.id === 'azure' ? 'rgba(59,130,246,0.5)' : c.id === 'aws' ? 'rgba(249,115,22,0.5)' : 'rgba(239,68,68,0.5)',
                  color: c.id === 'azure' ? '#93c5fd' : c.id === 'aws' ? '#fdba74' : '#fca5a5'
                } : {}}>
                {c.icon} {c.label}
              </button>
            ))}
          </div>
          <span className="text-gray-700">|</span>
          <div className="flex gap-1">
            {['simple','detailed','full'].map(m => (
              <button key={m} onClick={() => setDiagramMode(m)}
                className={`px-4 py-1.5 rounded-lg text-xs font-bold tracking-wider transition border ${diagramMode === m ? 'bg-blue-600 border-blue-500 text-white' : 'bg-gray-800 border-gray-700 text-gray-400 hover:border-gray-500'}`}>
                {m === 'simple' ? '📦 Simple' : m === 'detailed' ? '🔍 Detailed' : '🌐 Full View'}
              </button>
            ))}
          </div>
        </div>
        {cloud !== 'azure' && (
          <div className="mt-2 text-[10px] text-gray-500 italic">
            Showing {cloud === 'aws' ? 'AWS' : 'Google Cloud'} service equivalents — architecture concepts remain the same
          </div>
        )}
        <div className="flex gap-6 justify-center mt-3 text-xs text-gray-500">
          <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-full bg-blue-500 inline-block glow-box"></span> North-South</span>
          <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-full bg-green-500 inline-block"></span> East-West</span>
          <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-full bg-orange-500 inline-block"></span> On-Prem / IoT</span>
        </div>
      </header>

      <div className="flex items-center gap-3 mb-3 max-w-6xl mx-auto">
        <span className="h-px flex-1 bg-blue-500/20"></span>
        <span className="text-xs font-bold text-blue-400/70 tracking-[0.2em]">▼ NORTH → SOUTH REQUEST FLOW ▼</span>
        <span className="h-px flex-1 bg-blue-500/20"></span>
      </div>

      <RingDiagram openTopic={openTopic} mode={diagramMode} cloud={cloud} />
      <DevFlowSection openTopic={openTopic} mode={diagramMode} cloud={cloud} />
    </div>
  );
}


// ============================================================
// RING DIAGRAM — Full Architecture Diagram (unchanged from before)
// ============================================================

function RingDiagram({ openTopic, mode, cloud }) {
  const [expanded, setExpanded] = React.useState({});
  const isSimple = mode === 'simple';
  const isFull = mode === 'full';
  const cl = (label) => cloudLabel(label, cloud);

  const toggle = (key) => setExpanded(prev => ({...prev, [key]: !prev[key]}));
  const isOpen = (key) => isFull ? true : (expanded[key] || false);

  const TopicCard = ({ topic, color, extraCls = '' }) => {
    const badges = TOPIC_BADGES[topic.id] || [];
    return (
      <button onClick={() => openTopic(topic.id)}
        className={`topic-card group flex flex-col items-center gap-1 px-3 py-2.5 bg-gray-900/80 rounded-xl border transition ${extraCls}`}
        style={{borderColor: color + '33'}}
        onMouseEnter={e => { e.currentTarget.style.borderColor = color; e.currentTarget.style.boxShadow = `0 0 16px ${color}22`; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = color + '33'; e.currentTarget.style.boxShadow = 'none'; }}>
        <span className="text-2xl">{topic.icon}</span>
        <span className="text-[11px] font-bold text-center leading-tight" style={{color}}>{topic.title}</span>
        {badges.length > 0 && (
          <div className="flex flex-wrap gap-1 justify-center mt-1 max-w-full" onClick={e => e.stopPropagation()}>
            {badges.map(b => (
              <span key={b.l} onClick={(e) => { e.stopPropagation(); openTopic(topic.id); }}
                className="inline-flex items-center gap-[3px] px-2 py-[3px] rounded-md cursor-pointer text-[9px] font-semibold bg-gray-800/90 border border-gray-700/50 hover:border-gray-400 hover:bg-gray-700/90 transition-colors"
                style={{color: color + 'cc'}} title={`Azure: ${b.l}${CLOUD_MAP[b.l] ? ` | AWS: ${CLOUD_MAP[b.l].aws} | GCP: ${CLOUD_MAP[b.l].gcp}` : ''}`}>
                <span className="text-[11px]">{b.i}</span>{cl(b.l)}
              </span>
            ))}
          </div>
        )}
        <span className="text-[9px] text-gray-500 mt-0.5">{topic.subtopics.length} sub-topics</span>
      </button>
    );
  };

  const SectionHeader = ({ sKey, icon, title, subtitle, color, count, borderCls, bgCls }) => (
    <button onClick={() => toggle(sKey)}
      className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg border ${borderCls} ${bgCls} hover:brightness-125 transition text-left`}>
      <span className={`chevron text-xs ${isOpen(sKey) ? 'open' : ''}`} style={{color}}>▶</span>
      <span className="text-sm">{icon}</span>
      <span className="text-[11px] font-black tracking-wider" style={{color}}>{title}</span>
      {subtitle && <span className="text-[8px] ml-1 opacity-50" style={{color}}>{subtitle}</span>}
      <span className="ml-auto text-[9px] text-gray-500">{count} topics</span>
    </button>
  );

  const CollapseSection = ({ sKey, icon, title, subtitle, color, borderCls, bgCls, topics, children }) => {
    const count = topics ? topics.reduce((a, t) => a + t.subtopics.length, 0) : '...';
    return (
      <div>
        <SectionHeader sKey={sKey} icon={icon} title={title} subtitle={subtitle} color={color}
          count={count} borderCls={borderCls} bgCls={bgCls} />
        <div className={`section-collapse ${isOpen(sKey) ? 'expanded' : 'collapsed'} mt-1`}>
          <div className={`border ${borderCls} ${bgCls} rounded-xl p-3`}>
            {topics && !children && (
              <div className="flex flex-wrap gap-2 justify-center">
                {topics.map(topic => (
                  <TopicCard key={topic.id} topic={topic} color={color} extraCls="min-w-[130px] max-w-[175px]" />
                ))}
              </div>
            )}
            {children}
          </div>
        </div>
      </div>
    );
  };

  const FlowArrow = ({ text, color = '#60a5fa' }) => (
    <div className="flex flex-col items-center py-1">
      <span className="text-blue-400 flow-dot-down text-lg">•</span>
      <span className="text-[9px] font-bold tracking-wider opacity-50" style={{color}}>{text}</span>
    </div>
  );

  const ring7 = TOPICS.filter(t => t.ring === 'ring7');
  const ring6 = TOPICS.filter(t => t.ring === 'ring6');
  const ring5 = TOPICS.filter(t => t.ring === 'ring5');
  const networking = TOPICS.filter(t => t.id === 'vnet-subnets' || t.id === 'network-security' || t.id === 'hybrid-connectivity');
  const security = TOPICS.filter(t => t.id === 'identity-access' || t.id === 'secrets-encryption' || t.id === 'governance');
  const messaging = TOPICS.filter(t => t.id === 'messaging' || t.id === 'data-patterns');
  const compute = TOPICS.filter(t => t.id === 'containers-k8s' || t.id === 'serverless-paas' || t.id === 'vm-compute');
  const eastWest = TOPICS.filter(t => t.id === 'east-west');
  const databases = TOPICS.filter(t => t.id === 'databases');
  const storage = TOPICS.filter(t => t.id === 'storage');
  const monitoring = TOPICS.filter(t => t.id === 'monitoring');
  const cost = TOPICS.filter(t => t.id === 'cost');
  const drha = TOPICS.filter(t => t.id === 'dr-ha');
  const hybridCloud = TOPICS.filter(t => t.id === 'hybrid-cloud');
  const migration = TOPICS.filter(t => t.id === 'migration');

  return (
    <div className="max-w-6xl mx-auto space-y-1">

      {/* ═══ ROW 1: THREE TRAFFIC SOURCES (WHO) ═══ */}
      <div className="flex items-center gap-2 px-1 mb-1">
        <span className="text-[9px] font-black text-gray-500/60 tracking-widest">WHO SENDS TRAFFIC?</span>
        <span className="h-px flex-1 bg-gray-700/30"></span>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-1">
        <div className="border border-violet-500/30 bg-violet-950/12 rounded-xl p-3">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xl">👥</span>
            <span className="text-[10px] font-black text-violet-300/80 tracking-wider">END USERS</span>
          </div>
          <div className="flex flex-wrap gap-1 justify-center text-[9px]">
            {[{i:'🌐',l:'Browser'},{i:'📱',l:'Mobile'},{i:'💻',l:'SPA / API'},{i:'🤖',l:'Partner'},{i:'👨‍💻',l:'Developer'}].map(b => (
              <span key={b.l} className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-800/80 border border-violet-600/30 text-violet-300/80 font-semibold">
                <span className="text-[10px]">{b.i}</span>{b.l}
              </span>
            ))}
          </div>
        </div>
        <div className="border border-orange-500/30 bg-orange-950/12 rounded-xl p-3">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xl">🏢</span>
            <span className="text-[10px] font-black text-orange-300/80 tracking-wider">ON-PREMISES / HYBRID</span>
          </div>
          <div className="flex flex-wrap gap-1 justify-center text-[9px]">
            {[{i:'🖥️',l:'DC Servers'},{i:'🏢',l:'Branch Office'},{i:'🗄️',l:'Legacy Apps'},{i:'👷',l:'Corp Users'}].map(b => (
              <span key={b.l} className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-800/80 border border-orange-600/30 text-orange-300/80 font-semibold">
                <span className="text-[10px]">{b.i}</span>{b.l}
              </span>
            ))}
          </div>
        </div>
        <div className="border border-teal-500/30 bg-teal-950/12 rounded-xl p-3">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xl">🏭</span>
            <span className="text-[10px] font-black text-teal-300/80 tracking-wider">IoT / EDGE / INDUSTRY</span>
          </div>
          <div className="flex flex-wrap gap-1 justify-center text-[8px]">
            {['🏭 Factory','🏥 Medical','🌡️ Sensors','📹 Cameras','🚗 Fleet','🔌 Edge'].map(t => (
              <span key={t} className="px-1.5 py-1 rounded-md bg-gray-800/80 border border-teal-600/30 text-teal-300/80 font-semibold">{t}</span>
            ))}
          </div>
        </div>
      </div>

      <div className="flex items-center justify-center gap-1 py-0.5 text-[8px] text-gray-500/60">
        <span className="text-violet-400/50">👥 ↘</span>
        <span className="mx-2 text-gray-600">|</span>
        <span className="text-orange-400/50">🏢 ↘ ↙</span>
        <span className="mx-2 text-gray-600">|</span>
        <span className="text-teal-400/50">🏭 ↘ ↙</span>
      </div>

      {/* ═══ ROW 2: TWO CONNECTIVITY PATHS (HOW) ═══ */}
      <div className="flex items-center gap-2 px-1 mb-1">
        <span className="text-[9px] font-black text-gray-500/60 tracking-widest">HOW DO THEY CONNECT?</span>
        <span className="h-px flex-1 bg-gray-700/30"></span>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-1">
        {/* Public Internet Path */}
        <div className="border border-blue-500/30 bg-blue-950/12 rounded-xl p-3 cursor-pointer hover:brightness-125 transition"
          onClick={() => toggle('path-public')}>
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xl">🌐</span>
            <span className="text-[10px] font-black text-blue-300/80 tracking-wider">PUBLIC INTERNET PATH</span>
          </div>
          <div className="flex flex-wrap gap-1 justify-center mb-2 text-[8px]">
            <span className="px-2 py-0.5 rounded bg-violet-900/30 border border-violet-600/25 text-violet-300/70 font-semibold">👥 End Users</span>
            <span className="px-2 py-0.5 rounded bg-orange-900/30 border border-orange-600/25 text-orange-300/70 font-semibold">🏢 On-Prem (web apps)</span>
            <span className="px-2 py-0.5 rounded bg-teal-900/30 border border-teal-600/25 text-teal-300/70 font-semibold">🏭 IoT (HTTPS D2C)</span>
          </div>
          {isSimple && !isOpen('path-public') && <div className="text-center"><span className="text-[8px] text-blue-400/40">click to expand</span></div>}
          <div className={`flex flex-col items-center gap-1 text-[9px] ${isSimple && !isOpen('path-public') ? 'hidden' : ''}`}>
            <span className="text-blue-400/60 font-bold">HTTPS / TLS 1.3</span>
            <span className="text-blue-400 flow-dot-down text-lg">•</span>
            <span className="px-2 py-0.5 rounded bg-blue-900/40 border border-blue-600/30 text-blue-300/80 font-semibold">🔗 1. DNS ({cl('Azure DNS')} / {cl('Traffic Mgr')})</span>
            <span className="text-blue-400 flow-dot-down text-sm">•</span>
            <span className="px-2 py-0.5 rounded bg-blue-900/40 border border-blue-600/30 text-blue-300/80 font-semibold">🛡️ 2. {cl('Front Door')} / {cl('Azure CDN')} / {cl('DDoS Std')} (Edge)</span>
            <span className="text-blue-400 flow-dot-down text-sm">•</span>
            <span className="px-2 py-0.5 rounded bg-blue-900/40 border border-blue-600/30 text-blue-300/80 font-semibold">🚪 3. {cl('App GW v2')} / {cl('APIM')} (public endpoint)</span>
            <div className="mt-2 w-full border-t border-blue-500/20 pt-2">
              <div className="text-[8px] text-blue-400/50 text-center mb-1 font-bold tracking-wider">STUDY TOPICS — DNS, CDN & CLIENT-SIDE</div>
              <div className="flex flex-wrap gap-2 justify-center">
                {ring7.map(topic => (
                  <TopicCard key={topic.id} topic={topic} color="#60a5fa" extraCls="min-w-[120px] max-w-[175px]" />
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Private Network Path */}
        <div className="border border-orange-500/30 bg-orange-950/12 rounded-xl p-3 cursor-pointer hover:brightness-125 transition"
          onClick={() => toggle('path-private')}>
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xl">🔒</span>
            <span className="text-[10px] font-black text-orange-300/80 tracking-wider">PRIVATE NETWORK PATH</span>
          </div>
          <div className="flex flex-wrap gap-1 justify-center mb-2 text-[8px]">
            <span className="px-2 py-0.5 rounded bg-orange-900/30 border border-orange-600/25 text-orange-300/70 font-semibold">🏢 On-Prem (primary)</span>
            <span className="px-2 py-0.5 rounded bg-teal-900/30 border border-teal-600/25 text-teal-300/70 font-semibold">🏭 IoT Edge (private)</span>
            <span className="px-2 py-0.5 rounded bg-violet-900/30 border border-violet-600/25 text-violet-300/70 font-semibold">👷 Corp VPN users</span>
          </div>
          {isSimple && !isOpen('path-private') && <div className="text-center"><span className="text-[8px] text-orange-400/40">click to expand</span></div>}
          <div className={`flex flex-col items-center gap-1 text-[9px] ${isSimple && !isOpen('path-private') ? 'hidden' : ''}`}>
            <span className="text-orange-400/60 font-bold">PRIVATE / ENCRYPTED TUNNEL</span>
            <span className="text-orange-400 flow-dot-down text-lg">•</span>
            <div className="flex gap-1">
              <span className="px-2 py-0.5 rounded bg-orange-900/40 border border-orange-600/30 text-orange-300/80 font-semibold">🔗 {cl('VPN GW')} (S2S)</span>
              <span className="px-2 py-0.5 rounded bg-orange-900/40 border border-orange-600/30 text-orange-300/80 font-semibold">⚡ {cl('ExpressRoute')}</span>
              <span className="px-2 py-0.5 rounded bg-orange-900/40 border border-orange-600/30 text-orange-300/80 font-semibold">📡 P2S VPN</span>
            </div>
            <span className="text-orange-400 flow-dot-down text-sm">•</span>
            <span className="px-2 py-0.5 rounded bg-orange-900/40 border border-orange-600/30 text-orange-300/80 font-semibold">🔒 {cl('VNet')} Gateway → Hub {cl('VNet')}</span>
            <span className="text-orange-400 flow-dot-down text-sm">•</span>
            <span className="px-2 py-0.5 rounded bg-orange-900/40 border border-orange-600/30 text-orange-300/80 font-semibold">🔲 → {cl('PrivateEP')} / {cl('L4 LB')}</span>
          </div>
        </div>
      </div>

      {/* Merge arrow */}
      <div className="flex items-center justify-center gap-2 py-1">
        <span className="h-px w-16 bg-gradient-to-r from-transparent to-blue-500/30"></span>
        <span className="text-blue-400 flow-dot-down text-lg">•</span>
        <span className="text-[9px] font-bold tracking-wider text-blue-400/50">↓ BOTH PATHS ENTER {cloud === 'azure' ? 'AZURE' : cloud === 'aws' ? 'AWS' : 'GOOGLE'} CLOUD ↓</span>
        <span className="text-blue-400 flow-dot-down text-lg" style={{animationDelay:'0.5s'}}>•</span>
        <span className="h-px w-16 bg-gradient-to-l from-transparent to-blue-500/30"></span>
      </div>

      {/* ═══ CLOUD BOUNDARY ═══ */}
      <div className="border-2 border-blue-500/25 bg-slate-950/50 rounded-2xl p-3 space-y-2">
        <div className="flex items-center gap-2">
          <span className="text-base glow-box rounded-full p-0.5">☁️</span>
          <span className="text-[12px] font-black text-blue-300/80 tracking-[0.15em]">{cloud === 'azure' ? 'AZURE CLOUD' : cloud === 'aws' ? 'AWS CLOUD' : 'GOOGLE CLOUD'}</span>
          {cloud !== 'azure' && <span className="text-[9px] text-gray-500 ml-1">(showing {cloud.toUpperCase()} equivalents)</span>}
        </div>

        <CollapseSection sKey="global" icon="🌍" title="GLOBAL SERVICES — EDGE & PERIMETER" subtitle="(not region-scoped)"
          color="#f97316" borderCls="border-orange-500/25" bgCls="bg-orange-950/12" topics={ring6} />

        <FlowArrow text={`↓ Through ${cl('WAF')} / ${cl('DDoS Std')} / ${cl('Azure CDN')} ↓`} color="#f97316" />

        {/* Management Group */}
        <div className="border border-indigo-500/20 bg-indigo-950/12 rounded-xl p-2.5 space-y-2">
          <div className="flex items-center gap-2 px-1">
            <span className="text-sm">🏢</span>
            <span className="text-[10px] font-black text-indigo-300/60 tracking-wider">{cloud === 'azure' ? 'MANAGEMENT GROUP' : cloud === 'aws' ? 'AWS ORGANIZATION / OU' : 'GCP ORGANIZATION / FOLDER'}</span>
            <span className="text-[8px] text-indigo-400/35">{cloud === 'azure' ? '(policy & RBAC inheritance)' : cloud === 'aws' ? '(SCPs & IAM inheritance)' : '(org policies & IAM inheritance)'}</span>
          </div>

          {/* Subscription */}
          <div className="border border-sky-500/18 bg-sky-950/10 rounded-xl p-2.5 space-y-2">
            <div className="flex items-center gap-2 px-1">
              <span className="text-sm">🔑</span>
              <span className="text-[10px] font-black text-sky-300/60 tracking-wider">{cloud === 'azure' ? 'SUBSCRIPTION' : cloud === 'aws' ? 'AWS ACCOUNT' : 'GCP PROJECT'}</span>
              <span className="text-[8px] text-sky-400/35">{cloud === 'azure' ? '(billing boundary)' : cloud === 'aws' ? '(billing & resource boundary)' : '(billing & resource boundary)'}</span>
            </div>

            <CollapseSection sKey="security" icon="🔐" title="IDENTITY & SECURITY"
              subtitle={cloud === 'azure' ? '(subscription-scoped)' : cloud === 'aws' ? '(account-scoped)' : '(project-scoped)'} color="#ef4444"
              borderCls="border-red-500/25" bgCls="bg-red-950/10" topics={security} />

            {/* RG: Networking */}
            <div className="border border-green-500/18 bg-green-950/8 rounded-xl p-2.5 space-y-2">
              <div className="flex items-center gap-2 px-1">
                <span className="text-sm">📦</span>
                <span className="text-[10px] font-black text-green-300/60 tracking-wider">{cloud === 'azure' ? 'RG' : cloud === 'aws' ? 'STACK' : 'LABELS'} — NETWORKING</span>
                <span className="text-[8px] text-green-400/35">{cloud === 'azure' ? '(🌍 Region: West Europe)' : cloud === 'aws' ? '(🌍 Region: eu-west-1)' : '(🌍 Region: europe-west1)'}</span>
              </div>
              <CollapseSection sKey="networking" icon="🔲" title="NETWORKING & SEGMENTATION"
                color="#22c55e" borderCls="border-green-500/30" bgCls="bg-green-950/12" topics={networking} />
              <CollapseSection sKey="ingress" icon="🚪" title={`INGRESS & APP ROUTING`}
                subtitle={`(${cl('App GW v2')}, ${cl('APIM')}, ${cl('L4 LB')} — regional)`} color="#a855f7"
                borderCls="border-purple-500/30" bgCls="bg-purple-950/12" topics={null}>
                <div className="flex flex-wrap gap-2 justify-center">
                  {ring5.map(topic => (
                    <TopicCard key={topic.id} topic={topic} color="#a855f7" extraCls="min-w-[140px] max-w-[200px]" />
                  ))}
                </div>
                <div className="mt-2 flex items-center justify-center gap-2">
                  <span className="h-px w-8 bg-purple-500/20"></span>
                  <span className="text-[9px] text-purple-400/60 font-bold">WHO CALLS {cl('APIM')}?</span>
                  <span className="h-px w-8 bg-purple-500/20"></span>
                </div>
                <div className="flex flex-wrap gap-1.5 justify-center mt-1 text-[9px]">
                  {[{i:'🌐',l:'External Apps → APIM'},{i:'👨‍💻',l:'Developers → Dev Portal'},{i:'🏢',l:'Internal Teams → Internal APIM'},{i:'🤝',l:'Partners → Subscription Keys'},{i:'🏭',l:'IoT Telemetry → APIM Ingest'}].map(b => (
                    <span key={b.l} className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-800/80 border border-purple-700/30 text-purple-300/70 font-semibold">
                      <span className="text-[10px]">{b.i}</span>{b.l}
                    </span>
                  ))}
                </div>
              </CollapseSection>
            </div>

            {/* RG: App Workloads */}
            <div className="border border-gray-500/18 bg-gray-900/20 rounded-xl p-2.5 space-y-2">
              <div className="flex items-center gap-2 px-1">
                <span className="text-sm">📦</span>
                <span className="text-[10px] font-black text-gray-300/60 tracking-wider">{cloud === 'azure' ? 'RG' : cloud === 'aws' ? 'STACK' : 'LABELS'} — APPLICATION WORKLOADS</span>
                <span className="text-[8px] text-gray-400/35">{cloud === 'azure' ? '(🌍 Region: West Europe)' : cloud === 'aws' ? '(🌍 Region: eu-west-1)' : '(🌍 Region: europe-west1)'}</span>
              </div>

              <CollapseSection sKey="messaging" icon="📨" title="MESSAGING & EVENTS"
                subtitle={`(${cl('Event Hub')}, ${cl('Service Bus')}, IoT telemetry lands here)`} color="#eab308"
                borderCls="border-yellow-500/30" bgCls="bg-yellow-950/12" topics={messaging} />

              <CollapseSection sKey="compute" icon="🖥️" title="COMPUTE — THE APPLICATION"
                color="#3b82f6" borderCls="border-blue-400/30" bgCls="bg-blue-950/15" topics={null}>
                <div className="flex flex-wrap gap-2 justify-center">
                  {compute.map(topic => (
                    <TopicCard key={topic.id} topic={topic} color="#3b82f6" extraCls="min-w-[130px] max-w-[175px]" />
                  ))}
                </div>
                <div className="mt-3 border border-green-500/25 bg-green-950/12 rounded-lg p-2.5">
                  <div className="flex items-center justify-center gap-2 mb-2">
                    <span className="text-green-400 flow-dot-right">•</span>
                    <span className="text-[10px] font-black text-green-400/70 tracking-wider">↔ EAST-WEST — SERVICE MESH / gRPC / mTLS ↔</span>
                    <span className="text-green-400 flow-dot-right" style={{animationDelay:'0.9s'}}>•</span>
                  </div>
                  <div className="flex flex-wrap gap-2 justify-center">
                    {eastWest.map(topic => (
                      <TopicCard key={topic.id} topic={topic} color="#22c55e" extraCls="min-w-[130px] max-w-[175px]" />
                    ))}
                  </div>
                  <div className="flex flex-wrap gap-1.5 justify-center mt-2 text-[9px]">
                    {[{i:'🍪',l:'Sticky Sessions'},{i:'⚡',l:cl('Redis') + ' Session Cache'},{i:'🔄',l:'Session Affinity'},{i:'📡',l:'Service Discovery'}].map(b => (
                      <span key={b.l} className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-800/80 border border-green-700/30 text-green-300/80 font-semibold">
                        <span className="text-[10px]">{b.i}</span>{b.l}
                      </span>
                    ))}
                  </div>
                </div>
              </CollapseSection>
            </div>

            {/* RG: Data */}
            <div className="border border-yellow-500/18 bg-yellow-950/8 rounded-xl p-2.5 space-y-2">
              <div className="flex items-center gap-2 px-1">
                <span className="text-sm">📦</span>
                <span className="text-[10px] font-black text-yellow-300/60 tracking-wider">{cloud === 'azure' ? 'RG' : cloud === 'aws' ? 'STACK' : 'LABELS'} — DATA</span>
                <span className="text-[8px] text-yellow-400/35">{cloud === 'azure' ? '(🌍 Region: West Europe)' : cloud === 'aws' ? '(🌍 Region: eu-west-1)' : '(🌍 Region: europe-west1)'}</span>
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
                <CollapseSection sKey="databases" icon="🗄️" title="DATABASES"
                  subtitle={`(${cl('Azure SQL')} + NoSQL + ${cl('Redis')})`} color="#eab308"
                  borderCls="border-yellow-500/30" bgCls="bg-yellow-950/12" topics={databases} />
                <CollapseSection sKey="storage" icon="💾" title="STORAGE"
                  subtitle={`(${cl('Blob')}, ${cl('Azure Files')}, ${cl('ADLS Gen2')})`} color="#f59e0b"
                  borderCls="border-amber-500/30" bgCls="bg-amber-950/12" topics={storage} />
              </div>
            </div>

            {/* RG: Operations */}
            <div className="border border-cyan-500/18 bg-cyan-950/8 rounded-xl p-2.5 space-y-2">
              <div className="flex items-center gap-2 px-1">
                <span className="text-sm">📦</span>
                <span className="text-[10px] font-black text-cyan-300/60 tracking-wider">{cloud === 'azure' ? 'RG' : cloud === 'aws' ? 'STACK' : 'LABELS'} — OPERATIONS</span>
                <span className="text-[8px] text-cyan-400/35">{cloud === 'azure' ? '(🌍 Region: West Europe)' : cloud === 'aws' ? '(🌍 Region: eu-west-1)' : '(🌍 Region: europe-west1)'}</span>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                <CollapseSection sKey="monitoring" icon="📊" title="MONITORING & OBSERVABILITY"
                  color="#06b6d4" borderCls="border-cyan-500/30" bgCls="bg-cyan-950/12" topics={monitoring} />
                <CollapseSection sKey="cost" icon="💰" title="COST OPTIMIZATION"
                  color="#06b6d4" borderCls="border-cyan-500/30" bgCls="bg-cyan-950/12" topics={cost} />
                <CollapseSection sKey="drha" icon="🔁" title="DR, BACKUP, HA & RELIABILITY"
                  subtitle={`(incl. ${cl('Chaos Studio')}, ${cl('Load Test')}, AutoScale)`} color="#06b6d4"
                  borderCls="border-cyan-500/30" bgCls="bg-cyan-950/12" topics={drha} />
                <CollapseSection sKey="migration" icon="🚚" title="CLOUD MIGRATION"
                  subtitle={`(6 Rs, ${cl('DMS')})`} color="#06b6d4"
                  borderCls="border-cyan-500/30" bgCls="bg-cyan-950/12" topics={migration} />
              </div>
              <CollapseSection sKey="hybridCloud" icon="🌐" title={cloud === 'azure' ? 'HYBRID CLOUD & AZURE ARC' : cloud === 'aws' ? 'HYBRID CLOUD & AWS OUTPOSTS' : 'HYBRID CLOUD & ANTHOS'}
                subtitle={cloud === 'azure' ? '(on-prem management, Arc K8s, hub-spoke)' : cloud === 'aws' ? '(on-prem management, EKS Anywhere, hub-spoke)' : '(on-prem management, Anthos GKE, hub-spoke)'} color="#f97316"
                borderCls="border-orange-500/30" bgCls="bg-orange-950/12" topics={hybridCloud} />
            </div>
          </div>
        </div>
      </div>

      {/* Telemetry note */}
      {!isSimple && (
        <div className="flex items-center justify-center gap-2 py-1">
          <span className="h-px w-12 bg-cyan-500/20"></span>
          <span className="text-[9px] text-cyan-400/50 font-bold tracking-wider">
            📊 TELEMETRY: {cloud === 'azure' ? 'App Insights SDK → Log Analytics → Azure Monitor → Grafana' : cloud === 'aws' ? 'X-Ray SDK → CloudWatch Logs → CloudWatch → Grafana' : 'OpenTelemetry SDK → Cloud Logging → Cloud Monitoring → Grafana'}
          </span>
          <span className="h-px w-12 bg-cyan-500/20"></span>
        </div>
      )}
    </div>
  );
}


// ============================================================
// DEVELOPER FLOW SECTION
// ============================================================

function DevFlowSection({ openTopic, mode, cloud }) {
  const [open, setOpen] = React.useState(false);
  const isSimple = mode === 'simple';
  const isFull = mode === 'full';
  const show = isFull || open;
  const cl = (label) => cloudLabel(label, cloud);
  const devTopics = TOPICS.filter(t => t.ring === 'devflow');
  return (
    <div className="mb-12 mt-4 max-w-6xl mx-auto">
      <button onClick={() => setOpen(!open)}
        className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-purple-500/30 bg-purple-950/15 hover:brightness-125 transition text-left mb-1">
        <span className={`chevron text-xs text-purple-400 ${show ? 'open' : ''}`}>▶</span>
        <span className="text-sm">🔨</span>
        <span className="text-[11px] font-black text-purple-400 tracking-wider">DEVELOPER & DEVOPS FLOW — CODE TO PRODUCTION</span>
        <span className="text-[8px] text-purple-400/40 ml-1">(Platform Team Provisioning)</span>
        <span className="ml-auto text-[9px] text-gray-500">{devTopics.reduce((a,t) => a + t.subtopics.length, 0)} topics</span>
      </button>
      <div className={`section-collapse ${show ? 'expanded' : 'collapsed'}`}>
        <div className="border border-purple-500/30 bg-purple-950/15 rounded-2xl p-4">
          <div className="flex flex-wrap gap-3 items-stretch justify-center">
            {devTopics.map((topic, i) => {
              const badges = TOPIC_BADGES[topic.id] || [];
              return (
              <React.Fragment key={topic.id}>
                <button onClick={() => openTopic(topic.id)}
                  className="topic-card flex flex-col items-center gap-1 px-3 py-2.5 bg-gray-900/80 border border-purple-800/40 rounded-xl hover:border-purple-400 transition min-w-[135px] max-w-[180px]">
                  <span className="text-2xl">{topic.icon}</span>
                  <span className="text-[11px] font-semibold text-purple-300 text-center leading-tight">{topic.title}</span>
                  {badges.length > 0 && (
                    <div className="flex flex-wrap gap-1 justify-center mt-1 max-w-full" onClick={e => e.stopPropagation()}>
                      {badges.map(b => (
                        <span key={b.l} onClick={(e) => { e.stopPropagation(); openTopic(topic.id); }}
                          className="inline-flex items-center gap-[3px] px-2 py-[3px] rounded-md cursor-pointer text-[9px] font-semibold bg-gray-800/90 border border-gray-700/50 hover:border-gray-400 hover:bg-gray-700/90 transition-colors text-purple-300/80"
                          title={`Azure: ${b.l}${CLOUD_MAP[b.l] ? ` | AWS: ${CLOUD_MAP[b.l].aws} | GCP: ${CLOUD_MAP[b.l].gcp}` : ''}`}>
                          <span className="text-[11px]">{b.i}</span>{cl(b.l)}
                        </span>
                      ))}
                    </div>
                  )}
                  <span className="text-[9px] text-gray-500 mt-0.5">{topic.subtopics.length} sub-topics</span>
                </button>
                {i < devTopics.length - 1 && <span className="text-purple-600 text-lg self-center">→</span>}
              </React.Fragment>
              );
          })}
        </div>
          <div className="mt-3 flex items-center justify-center gap-2">
            <span className="h-px w-8 bg-purple-500/30"></span>
            <span className="text-[10px] font-bold text-purple-400/50 tracking-wider">👷 PLATFORM TEAM → IaC PROVISIONS ALL RESOURCES IN EVERY RING ↑</span>
            <span className="h-px w-8 bg-purple-500/30"></span>
          </div>
        </div>
      </div>
    </div>
  );
}


// ============================================================
// TOPIC PAGE (Revision cards)
// ============================================================

function TopicPage({ topic, goHome, goLearn, goDeepDive, navigateTopic, tourMode, tourIndex, tourTotal, nextTour, prevTour, orderedTopics }) {
  const ring = RINGS.find(r => r.id === topic.ring);
  const idx = orderedTopics.findIndex(t => t.id === topic.id);

  return (
    <div className="max-w-6xl mx-auto px-4 py-6">
      <nav className="flex items-center justify-between mb-6 flex-wrap gap-2">
        <div className="flex items-center gap-3">
          <button onClick={goHome} className="text-sm text-gray-400 hover:text-white transition flex items-center gap-1">← Home</button>
          <span className="text-gray-700">|</span>
          <button onClick={goLearn} className="text-sm text-gray-400 hover:text-white transition flex items-center gap-1">← Diagram</button>
          <span className="text-gray-700">|</span>
          <span className="text-xs px-2 py-1 rounded-full" style={{backgroundColor: ring.color + '22', color: ring.color, border: `1px solid ${ring.color}44`}}>
            {ring.label}
          </span>
        </div>
        <div className="flex items-center gap-2">
          {tourMode ? (
            <>
              <span className="text-xs text-gray-500">{tourIndex + 1} / {tourTotal}</span>
              <button onClick={prevTour} disabled={tourIndex === 0}
                className="px-3 py-1.5 text-sm bg-gray-800 hover:bg-gray-700 rounded-lg disabled:opacity-30 transition">← Prev</button>
              <button onClick={nextTour} disabled={tourIndex >= tourTotal - 1}
                className="px-3 py-1.5 text-sm bg-gray-800 hover:bg-gray-700 rounded-lg disabled:opacity-30 transition">Next →</button>
            </>
          ) : (
            <>
              <button onClick={() => navigateTopic(-1)} disabled={idx <= 0}
                className="px-3 py-1.5 text-sm bg-gray-800 hover:bg-gray-700 rounded-lg disabled:opacity-30 transition">← Prev</button>
              <span className="text-xs text-gray-500">{idx + 1} / {orderedTopics.length}</span>
              <button onClick={() => navigateTopic(1)} disabled={idx >= orderedTopics.length - 1}
                className="px-3 py-1.5 text-sm bg-gray-800 hover:bg-gray-700 rounded-lg disabled:opacity-30 transition">Next →</button>
            </>
          )}
        </div>
      </nav>

      <div className="mb-8">
        <div className="flex items-center gap-4 mb-2">
          <span className="text-5xl">{topic.icon}</span>
          <div>
            <h1 className="text-3xl font-bold text-white">{topic.title}</h1>
            <p className="text-gray-400 text-sm mt-1">{ring.desc} · {topic.subtopics.length} sub-topics</p>
          </div>
        </div>
        <button onClick={goDeepDive}
          className="mt-3 px-5 py-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-lg font-medium transition text-sm">
          🔬 Switch to Deep Dive →
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {topic.subtopics.map((sub, i) => (
          <div key={i} className="topic-card bg-gray-900 border border-gray-800 rounded-xl p-5 hover:border-gray-600">
            <h3 className="font-semibold text-white mb-2 flex items-center gap-2">
              <span className="text-xs font-mono px-1.5 py-0.5 rounded bg-gray-800 text-gray-400">{i + 1}</span>
              {sub.title}
            </h3>
            <p className="text-gray-400 text-sm leading-relaxed">{sub.revision}</p>
          </div>
        ))}
      </div>
    </div>
  );
}


// ============================================================
// DEEP DIVE RENDERER — rich visual rendering
// Supports: ## headers, ~~~ code, • bullets, >>> callouts,
// ??? FAQ, ---flow diagrams---, ||| tables
// ============================================================

function renderDeepDive(text) {
  if (!text) return null;
  const lines = text.split('\n');