// 이 파일이 하는 일: "크롬 개발자도구" 코스 — F12 한 번으로 열리는 브라우저 속 정비소를
// 8개 섹션으로 투어하는 정적 학습 페이지.
// (전체 투어 → Elements → Console → Network → 반응형 모드 → Lighthouse → Sources → 종합 실습 미션)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

import { Link } from 'react-router-dom';

// ── 텍스트 다이어그램 · 표 상수들 ──

const CODE_TAB_TOUR = `F12를 누르면 열리는 탭들 — 자동차 정비소에 비유하면:

탭           하는 일                          정비소로 치면
──────────────────────────────────────────────────────────
Elements     화면의 HTML/CSS를 실시간으로 봄     보닛 열고 엔진 구경
Console      JS 실행·에러 메시지 확인            계기판 경고등 판독기
Network      서버와 주고받은 요청 전부 기록       블랙박스 영상
Sources      실제 JS 코드 + 브레이크포인트       정비 매뉴얼 + 일시정지 버튼
Lighthouse   성능·접근성 자동 채점               정기 검사소
반응형 모드    모바일 화면 시뮬레이션              시승 코스 (좁은 골목 버전)

→ 전부 외울 필요 없어요. 이 코스에서 하나씩 직접 열어 볼 거예요.`;

const CODE_OPEN_WAYS = `개발자도구 여는 법 3가지 (Windows 기준):

1) F12                          ← 제일 빠름, 이것만 외워도 OK
2) Ctrl + Shift + I             ← F12와 같음
3) 화면 아무 데나 우클릭 → "검사"   ← 클릭한 그 요소로 바로 점프!

닫는 것도 F12. 열림/닫힘 토글이에요.

도킹 위치 바꾸기: 개발자도구 우상단 ⋮ 메뉴 →
아래·오른쪽·별도 창 중 선택. 좁은 노트북이면 별도 창 추천!`;

const CODE_ELEMENTS_EDIT = `Elements 탭에서 할 수 있는 실시간 수정:

① 텍스트 바꾸기
   HTML 트리에서 글자를 더블클릭 → 바로 타이핑 → Enter

② CSS 바꾸기
   요소 선택 → 오른쪽 Styles 패널에서 값 클릭 →
   color: red, font-size: 40px ... 마음대로!

③ 요소 지우기
   요소 선택 → Delete 키 → 화면에서 사라짐

중요한 사실: 이 모든 수정은 "내 브라우저의 복사본"에만 적용돼요.
서버의 진짜 파일은 1도 안 바뀝니다.
→ 새로고침(F5) 한 번이면 전부 원상복구!`;

const CODE_CONSOLE_BASIC = `Console 탭 = 브라우저 안에서 바로 실행되는 JS 계산기

> 1 + 1
2
> "어썸" + "데브"
'어썸데브'
> document.title
'AWESOMEDEV 학습 플랫폼'          ← 지금 보는 페이지의 제목!
> document.querySelectorAll('a').length
37                                ← 이 페이지의 링크 개수

우리가 코드에 심어 둔 console.log(...)의 출력도 전부 여기로 나와요.
React 개발할 때 "값이 지금 뭐지?" 싶으면 제일 먼저 여는 탭입니다.`;

const CODE_ERROR_READ = `에러 메시지 읽는 법 — 빨간 글씨는 무섭지 않아요, 친절한 제보예요.

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at UserCard (UserCard.jsx:12)
─┬──────────────  ─┬─────────────────────────────────────  ─┬─────────
 │                 │                                        │
 에러 종류          무슨 일이 있었나                          어디서 (파일:줄번호!)
 (TypeError)       "undefined에서 name을 읽으려 했다"        UserCard.jsx 12번째 줄

해석: "user가 아직 없는데(undefined) user.name을 꺼내려 했구나"
→ 오른쪽 파일명:줄번호를 클릭하면 그 코드로 바로 이동합니다.
→ 에러는 범인이 아니라 목격자 진술이에요. 끝까지 읽는 사람이 이깁니다.`;

const CODE_NETWORK_ANATOMY = `Network 탭에서 요청 하나를 클릭하면 보이는 것들:

요청 목록 한 줄
┌─────────────┬────────┬──────┬────────┬────────┐
│ Name        │ Status │ Type │ Size   │ Time   │
│ posts       │ 200    │ fetch│ 2.1 kB │ 48 ms  │
└─────────────┴────────┴──────┴────────┴────────┘

클릭하면 열리는 상세 패널:
Headers   어디로(URL)·어떻게(GET/POST)·무슨 신분증(토큰) 들고 갔나
Payload   POST일 때 우리가 서버에 보낸 데이터 (요청 본문)
Response  서버가 돌려준 원본 답장 — React가 받는 진짜 JSON!
Timing    어느 구간에서 시간이 걸렸나 (기다림? 다운로드?)

Status 빠른 판독법:
2xx 성공 / 3xx 다른 곳으로 안내 / 4xx 내(요청) 잘못 / 5xx 서버 잘못
401은 "로그인 안 됨", 404는 "그런 주소 없음" — 단골손님이니 얼굴을 익혀 두세요.`;

const CODE_RESPONSIVE = `반응형 모드 (Device Toolbar) 켜는 법:

개발자도구 열린 상태에서 Ctrl + Shift + M
(또는 좌상단의 📱 모양 아이콘 클릭)

상단 바에서 할 수 있는 것:
- 기기 선택: iPhone, Galaxy ... 프리셋 고르기
- 치수 직접 입력: 375 x 812 처럼 픽셀 지정
- 배율(%) 조절, 회전(가로/세로 전환)

주의: 화면 "크기"만 흉내 내는 거예요.
터치 감도, 실제 성능, 사파리 전용 버그까지는 못 잡아요.
그래도 "모바일에서 버튼이 밀려나요" 같은 레이아웃 문제의
90%는 여기서 미리 발견할 수 있습니다.`;

const CODE_LIGHTHOUSE = `Lighthouse 돌리는 법:

1) 개발자도구 → Lighthouse 탭 (안 보이면 » 눌러 더보기)
2) Mode: Navigation / Device: Desktop 선택
3) "Analyze page load" 클릭 → 30초쯤 기다림

나오는 점수 4가지 (100점 만점):
Performance      빠른가? (로딩 속도)
Accessibility    모두가 쓸 수 있나? (스크린리더, 색 대비...)
Best Practices   기본기를 지켰나? (https, 콘솔 에러...)
SEO              검색엔진이 잘 읽을 수 있나?

점수 아래 "Opportunities"에 개선 방법까지 적어 줘요.
"이미지가 너무 커요, 이만큼 줄이면 몇 초 빨라져요" 같은 식으로요.
무료 컨설턴트가 브라우저에 내장돼 있는 셈!`;

const CODE_BREAKPOINT = `Sources 탭 브레이크포인트 — 코드에 "일시정지 버튼" 달기

1) Sources 탭 → 왼쪽 파일 트리에서 JS 파일 열기
2) 멈추고 싶은 줄의 "줄번호"를 클릭 → 파란 표시 = 브레이크포인트
3) 그 코드가 실행되는 순간 화면이 얼어붙고,
   그 시점의 모든 변수 값이 오른쪽 패널에 나타남!

멈춘 뒤 조작 버튼:
▶  (F8)   다음 브레이크포인트까지 재생
⤵  (F10)  한 줄씩 실행 (다음 줄로)

console.log를 10개 심는 대신 브레이크포인트 1개로
"그 순간"을 통째로 열어 보는 것 — 디버깅의 정석입니다.
(영화를 일시정지하고 배경 소품까지 뜯어보는 느낌!)`;

const CODE_MISSION = `종합 미션: 우리 플랫폼에서 탭당 5분씩, 25분 투어

준비: 우리 학습 플랫폼을 연다 → F12

□ 미션 1 · Elements (5분)
  이 페이지 제목을 우클릭 → 검사 → 더블클릭해서
  내 이름이 들어간 제목으로 바꿔 보기 → F5로 원상복구 확인

□ 미션 2 · Console (5분)
  document.title 출력해 보기 →
  document.querySelectorAll('a').length 로 링크 개수 세기

□ 미션 3 · Network (5분)
  Network 탭 열고 F5 → 요청 하나 클릭 →
  Status 코드, Response의 JSON 내용, 걸린 시간(ms) 3가지 찾기
  (로그인해서 나오는 요청이면 Headers에서 Authorization도 구경!)

□ 미션 4 · 반응형 모드 (5분)
  Ctrl+Shift+M → iPhone 프리셋 →
  우리 플랫폼에서 레이아웃이 깨지거나 어색한 곳 1군데 찾아 메모

□ 미션 5 · Lighthouse (5분)
  이 페이지에서 Analyze 실행 →
  4개 점수 기록 + Opportunities에서 개선 제안 1개 읽어 보기

→ 미션 4에서 찾은 "어색한 곳"과 미션 5의 점수를
  멘토에게 공유하면 이 코스 수료!`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
function Section({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`sec-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

const SECTIONS = [
  { n: 1, label: 'F12의 세계 투어' },
  { n: 2, label: 'Elements' },
  { n: 3, label: 'Console' },
  { n: 4, label: 'Network' },
  { n: 5, label: '반응형 모드' },
  { n: 6, label: 'Lighthouse' },
  { n: 7, label: 'Sources 맛보기' },
  { n: 8, label: '종합 실습 미션' },
];

export default function ToolDevtoolsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>크롬 개발자도구<br />— F12 하나로 열리는 브라우저 정비소</h1>
        <p>
          여러분이 매일 쓰는 크롬 안에는 프로 개발자들이 매일 쓰는 정비소가 통째로
          숨어 있어요. 이 코스에서는 <span className="kbd">F12</span> 한 번으로 그 문을 열고,
          탭 하나하나를 <strong>우리 플랫폼 위에서 직접 눌러 보며</strong> 익힙니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 미션 5개</span>
          <span className="chip">준비물: 크롬 + F12 키</span>
        </div>
      </div>

      {/* 섹션 바로가기 */}
      <nav className="pill-nav">
        {SECTIONS.map((s) => (
          <a key={s.n} href={`#sec-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Section n={1} title="F12의 세계 — 전체 투어" sub="브라우저 속 정비소의 평면도부터">
        <p>
          웹페이지는 <strong>완성된 화면</strong>만 보여 주지만, 개발자도구를 열면 그 화면이
          <strong> 어떻게 만들어졌고, 지금 무슨 일이 벌어지는지</strong>가 전부 보여요.
          자동차로 치면 겉모습만 보다가 처음으로 보닛을 열어 보는 순간입니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="개발자도구 탭 지도: Elements는 HTML과 CSS, Console은 JS 실행과 에러, Network는 서버 요청 기록을 보여 준다">
          <rect x="20" y="16" width="600" height="48" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="40" y="46" fontSize="14" fill="var(--ink)">지금 보는 웹페이지</text>
          <text x="200" y="46" fontSize="13" fill="var(--muted)">F12를 누르면 아래 탭들이 열립니다</text>
          <text x="588" y="47" fontSize="15" fill="var(--primary)" fontWeight="bold" textAnchor="middle">F12</text>

          <line x1="150" y1="64" x2="150" y2="92" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="4 4" />
          <line x1="320" y1="64" x2="320" y2="92" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="4 4" />
          <line x1="490" y1="64" x2="490" y2="92" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="4 4" />

          <rect x="30" y="92" width="180" height="200" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="120" y="120" fontSize="15" fill="var(--primary)" fontWeight="bold" textAnchor="middle">Elements</text>
          <line x1="46" y1="132" x2="194" y2="132" stroke="var(--line)" strokeWidth="1" />
          <text x="120" y="154" fontSize="13" fill="var(--ink)" textAnchor="middle">화면의 HTML / CSS</text>
          <text x="120" y="180" fontSize="12.5" fill="var(--muted)" textAnchor="middle">왼쪽: HTML 트리</text>
          <text x="120" y="200" fontSize="12.5" fill="var(--muted)" textAnchor="middle">오른쪽: Styles 패널</text>
          <text x="120" y="220" fontSize="12.5" fill="var(--muted)" textAnchor="middle">그 자리에서 수정 가능</text>
          <text x="120" y="250" fontSize="12.5" fill="var(--ink)" textAnchor="middle">보닛 열고 엔진 구경</text>
          <text x="120" y="274" fontSize="12" fill="var(--muted)" textAnchor="middle">F5 누르면 원상복구</text>

          <rect x="230" y="92" width="180" height="200" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="320" y="120" fontSize="15" fill="var(--teal)" fontWeight="bold" textAnchor="middle">Console</text>
          <line x1="246" y1="132" x2="394" y2="132" stroke="var(--line)" strokeWidth="1" />
          <text x="320" y="154" fontSize="13" fill="var(--ink)" textAnchor="middle">JS 실행 / 에러</text>
          <text x="320" y="180" fontSize="12.5" fill="var(--muted)" textAnchor="middle">즉석 JS 계산기</text>
          <text x="320" y="200" fontSize="12.5" fill="var(--muted)" textAnchor="middle">console.log 출력</text>
          <text x="320" y="220" fontSize="12.5" fill="var(--rose)" textAnchor="middle">빨간 에러 메시지</text>
          <text x="320" y="250" fontSize="12.5" fill="var(--ink)" textAnchor="middle">계기판 경고등 판독기</text>
          <text x="320" y="274" fontSize="12" fill="var(--muted)" textAnchor="middle">파일:줄번호가 범인 위치</text>

          <rect x="430" y="92" width="180" height="200" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="520" y="120" fontSize="15" fill="var(--amber)" fontWeight="bold" textAnchor="middle">Network</text>
          <line x1="446" y1="132" x2="594" y2="132" stroke="var(--line)" strokeWidth="1" />
          <text x="520" y="154" fontSize="13" fill="var(--ink)" textAnchor="middle">서버와 주고받은 요청</text>
          <text x="520" y="180" fontSize="12.5" fill="var(--muted)" textAnchor="middle">Status · Size · Time</text>
          <text x="520" y="200" fontSize="12.5" fill="var(--muted)" textAnchor="middle">Headers / Payload</text>
          <text x="520" y="220" fontSize="12.5" fill="var(--muted)" textAnchor="middle">Response = 진짜 JSON</text>
          <text x="520" y="250" fontSize="12.5" fill="var(--ink)" textAnchor="middle">블랙박스 영상</text>
          <text x="520" y="274" fontSize="12" fill="var(--muted)" textAnchor="middle">React 탓? 서버 탓?</text>

          <rect x="30" y="308" width="580" height="38" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="320" y="332" fontSize="12.5" fill="var(--muted)" textAnchor="middle">이 셋이 기본 3종 세트 · 반응형 모드 · Lighthouse · Sources는 뒤 섹션에서</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 개발자도구 탭 지도 — Elements는 화면(HTML/CSS), Console은 실행과 에러, Network는 서버와의 대화를 보여 준다</p>
        <Code>{CODE_TAB_TOUR}</Code>
        <p>
          여는 방법부터 손에 익혀 둡시다. 특히 3번(우클릭 → 검사)은 "지금 눈에 보이는
          <strong> 바로 이 버튼</strong>의 코드가 궁금할 때" 그 요소로 직행하는 지름길이에요.
        </p>
        <Code>{CODE_OPEN_WAYS}</Code>
        <div className="tip">
          <b>겁먹지 않아도 되는 이유</b> 개발자도구에서 뭘 누르든 <strong>서버의 진짜 파일은
          절대 바뀌지 않아요</strong>. 전부 내 브라우저 안에서만 벌어지는 일이라, 최악의 경우에도
          <span className="kbd">F5</span> 한 번이면 리셋됩니다. 마음껏 눌러 보세요.
        </div>
      </Section>

      <Section n={2} title="Elements — 화면을 실시간으로 뜯어고치기" sub="HTML·CSS 수정, 단 새로고침하면 원상복구">
        <p>
          Elements 탭은 지금 화면의 <strong>HTML 구조</strong>(왼쪽 트리)와 각 요소에 적용된
          <strong> CSS</strong>(오른쪽 Styles 패널)를 보여 줘요. 그런데 보기만 하는 게 아니라
          <strong> 그 자리에서 바로 고칠 수 있습니다</strong> — 마치 점토로 만든 모형을
          손가락으로 꾹꾹 눌러 보는 것처럼요.
        </p>
        <Code>{CODE_ELEMENTS_EDIT}</Code>
        <p>
          그래서 뉴스 사이트 헤드라인을 "우리 반 급식 최고"로 바꾸는 장난도 가능해요.
          스크린샷을 찍으면 진짜처럼 보이지만, <strong>새로고침하는 순간 마법이 풀립니다</strong>.
          거꾸로 말하면 — 인터넷에 떠도는 "잔고 100억 캡처" 같은 것도 이렇게 10초면
          만들 수 있다는 뜻이에요. 캡처 화면을 덜 믿게 되는 것도 이 탭이 주는 교훈입니다.
        </p>
        <div className="warn">
          <b>장난은 내 화면까지만</b> 조작한 화면을 캡처해서 진짜인 것처럼 남에게 보여 주는 건
          장난이 아니라 <strong>속임수</strong>가 될 수 있어요. 연습은 자유, 유통은 금지!
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 이 페이지의 제목 "크롬 개발자도구"를 우클릭 →
          <strong> 검사</strong> → 해당 텍스트를 더블클릭해서 여러분 이름으로 바꿔 보세요.
          실무에서는 이 방법으로 <strong>CSS 값을 이리저리 바꿔 보고, 마음에 든 값만
          진짜 코드에 옮겨 적는</strong> 식으로 디자인을 실험합니다.
        </div>
      </Section>

      <Section n={3} title="Console — JS 실행기 겸 에러 판독기" sub="빨간 글씨와 친해지는 시간">
        <p>
          Console은 두 가지 얼굴을 가졌어요. 하나는 <strong>JS를 즉석에서 실행하는 계산기</strong>,
          다른 하나는 페이지에서 터진 <strong>에러가 모여드는 신문고</strong>입니다.
        </p>
        <Code>{CODE_CONSOLE_BASIC}</Code>
        <p>
          그리고 진짜 중요한 쪽 — <strong>에러 읽기</strong>. "페이지가 하얗게 나와요",
          "버튼이 안 눌려요" 같은 문제의 답은 십중팔구 Console의 빨간 글씨 안에 이미 적혀 있어요.
          문제는 대부분 무서워서 안 읽는다는 것뿐이죠.
        </p>
        <Code>{CODE_ERROR_READ}</Code>
        <div className="tip">
          <b>수습 개발자의 황금 습관</b> "안 돼요"라고 질문하기 전에 Console을 먼저 열어서
          <strong> 빨간 글씨를 그대로 복사</strong>해 두세요. 멘토에게 "안 돼요" 대신
          "이 에러가 나요"라고 물으면 답이 10배 빨리 옵니다.
        </div>
      </Section>

      <Section n={4} title="Network — 서버와의 대화 도청하기" sub="우리 React가 Spring Boot와 주고받는 말, 전부 기록됨">
        <p>
          우리 플랫폼은 <strong>React</strong>(화면)가 <strong>Spring Boot</strong>(서버)에
          "데이터 주세요" 하고 요청을 보내는 구조예요. Network 탭은 그 <strong>모든 요청과
          응답을 기록하는 블랙박스</strong>입니다. "데이터가 안 나와요"가 화면(React) 문제인지
          서버(Spring Boot) 문제인지, 이 탭을 보면 갈림길이 정확히 보여요.
        </p>
        <Code>{CODE_NETWORK_ANATOMY}</Code>
        <p>
          판별법은 간단합니다. <strong>Response에 데이터가 멀쩡히 있는데 화면에 안 나온다</strong>?
          → React 쪽 문제. <strong>Status가 4xx/5xx다</strong>? → 요청이나 서버 쪽 문제.
          이 한 가지 분기만 익혀도 디버깅 시간이 절반으로 줄어요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 플랫폼에서 Network 탭을 연 채로
          <span className="kbd">F5</span> → 필터에서 <strong>Fetch/XHR</strong>만 남기면
          API 요청만 보여요. 하나 클릭해서 <strong>Response</strong> 탭의 JSON을 열어 보세요 —
          여러분이 화면에서 보던 목록이 <strong>원재료(JSON) 상태</strong>로 그대로 들어 있습니다.
          "네트워크의 이해" 코스에서 배운 IP:포트도 Headers에서 찾아보세요!
        </div>
      </Section>

      <Section n={5} title="반응형 모드 — 내 PC에서 모바일 점검" sub="Ctrl+Shift+M, 폰 없이 폰 화면 보기">
        <p>
          우리 플랫폼을 쓰는 사람 절반은 폰으로 접속해요. 그런데 개발은 넓은 모니터로 하죠.
          그래서 "내 화면에선 예뻤는데 폰에선 버튼이 반쯤 잘려요" 사고가 납니다.
          반응형 모드는 <strong>브라우저 안에 가짜 폰 화면을 띄워서</strong> 이런 사고를
          배포 전에 잡아 주는 시승 코스예요.
        </p>
        <Code>{CODE_RESPONSIVE}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+
          <span className="kbd">M</span>을 누르고 iPhone 프리셋을 골라 우리 플랫폼을 돌아다녀 보세요.
          글자가 삐져나오거나, 버튼이 너무 작거나, 표가 잘리는 곳이 있나요?
          <strong> 찾으면 그게 바로 여러분의 첫 QA 리포트</strong>입니다.
        </div>
      </Section>

      <Section n={6} title="Lighthouse — 성능 점수 한 입" sub="우리 사이트, 몇 점일까?">
        <p>
          Lighthouse(등대)는 구글이 크롬에 넣어 둔 <strong>자동 검사관</strong>이에요.
          버튼 한 번이면 페이지를 구석구석 훑고 <strong>성능·접근성·모범사례·SEO</strong>
          네 과목의 성적표를 줍니다. 건강검진처럼 "지금 어디가 안 좋은지 + 어떻게 고치는지"까지
          알려 주는 게 포인트예요.
        </p>
        <Code>{CODE_LIGHTHOUSE}</Code>
        <div className="warn">
          <b>점수에 목숨 걸지 않기</b> 같은 페이지도 PC 상태·네트워크에 따라 점수가 몇 점씩
          출렁여요. 100점 만들기 게임이 아니라, <strong>"뭘 고치면 좋아지는지" 목록을 얻는
          도구</strong>로 쓰는 게 정답입니다. 특히 개발 서버(npm run dev)는 최적화 전이라
          점수가 낮게 나오는 게 정상이에요.
        </div>
      </Section>

      <Section n={7} title="Sources — 브레이크포인트 맛보기" sub="코드에 일시정지 버튼 달기">
        <p>
          Console에 <span className="icode">console.log</span>를 도배하며 값을 추적하는 것도
          방법이지만, 프로들은 한 단계 위의 무기를 써요 — <strong>브레이크포인트</strong>.
          코드가 실행되다가 내가 찍은 줄에서 <strong>시간이 멈추고</strong>, 그 순간의 변수들을
          전부 들여다볼 수 있습니다.
        </p>
        <Code>{CODE_BREAKPOINT}</Code>
        <p>
          오늘은 "이런 게 있다"까지만 알면 충분해요. 나중에 React 코스에서 상태(state)가
          꼬이는 버그를 만나면, 그때 이 섹션으로 돌아와서 진짜 무기로 꺼내 쓰게 될 거예요.
        </p>
        <div className="tip">
          <b>가벼운 체험</b> Sources 탭을 열고 <span className="kbd">Ctrl</span>+<span className="kbd">P</span>를
          눌러 보세요 — 파일 이름으로 검색해서 여는 창이 떠요. 우리 플랫폼의 JS 파일 하나를
          열어서 <strong>"내가 매일 보는 화면의 실제 코드"</strong>를 구경만 해 봐도 오늘은 성공!
        </div>
      </Section>

      <Section n={8} title="종합 실습 — 탭당 5분 투어 미션" sub="배운 다섯 탭, 우리 플랫폼 위에서 전부 눌러 보기">
        <p>
          도구는 <strong>손에 익어야 도구</strong>예요. 아래 미션을 체크리스트 삼아
          우리 플랫폼 위에서 처음부터 끝까지 돌아 보세요. 총 25분이면 됩니다.
        </p>
        <Code>{CODE_MISSION}</Code>
        <div className="tip">
          <b>공부 팁</b> 미션을 하다 "어?" 싶은 순간(이상한 에러, 느린 요청, 깨진 레이아웃)이
          있으면 <strong>스크린샷 + 어느 탭에서 봤는지</strong>를 메모해 두세요.
          그게 쌓이면 여러분만의 디버깅 노트가 됩니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🔧 여기까지 왔다면</h3>
          <p className="muted">
            이제 <span className="kbd">F12</span>는 여러분에게 "무서운 검은 창"이 아니라
            <strong> 매일 여는 공구함</strong>이에요. 특히 Network 탭에서 본 요청과 응답의 정체가
            궁금하다면 <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서
            그 데이터가 달려온 길 전체를 배울 수 있어요. 그리고 개발자도구는 앞으로 모든 코스의
            <strong> 실습 동반자</strong>입니다 — 어떤 페이지를 만들든 F12를 열어 두는 습관,
            오늘부터 시작!
          </p>
        </div>
      </div>
    </div>
  );
}
