// 이 파일이 하는 일: "자바스크립트 기초" 코스 — 브라우저 F12 콘솔을 실습장 삼아
// JS 언어 문법을 실전 위주로 8개 섹션으로 안내하는 정적 학습 페이지.
// (콘솔 → 변수/타입 → 함수 → 배열/객체 → 조건/반복 → DOM/이벤트 → 비동기/fetch → React로 가는 다리)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 코드 예제는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.
// (예제 코드 안에 백틱이 필요하면 \`처럼 이스케이프한다.)

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

// ── 코드 예제 상수들 (전부 "콘솔에 붙여넣어 확인" 용) ──

const CODE_CONSOLE_START = `// F12 → Console 탭에 한 줄씩 붙여넣고 Enter!

console.log("안녕, 자바스크립트!");   // 콘솔에 글자 찍기

1 + 2 * 3        // 7  — 수학 시간과 똑같이 곱셈 먼저
10 % 3           // 1  — 나머지 연산 (짝수/홀수 판별의 단골)
"어썸" + "데브"    // "어썸데브" — 문자열은 +로 이어 붙어요

// 콘솔은 "계산기 + 대화창"이에요. 입력하면 바로 결과를 돌려줍니다.
// 이 코스의 모든 예제는 이렇게 콘솔에 붙여넣으면 그 자리에서 확인돼요.`;

const CODE_CONSOLE_TRAP = `// 콘솔의 재미있는 함정 하나 — 붙여넣어 보세요:
"1" + 1          // "11" ?!  숫자가 아니라 문자열 이어붙이기가 됐어요
"1" - 1          // 0   ?!  빼기는 문자열에 없어서 숫자로 바꿔 계산

// 교훈: JS는 타입을 자동으로 바꿔치기해요(형변환).
// 그래서 "지금 이 값의 타입이 뭐지?"를 늘 의식해야 합니다. → 다음 섹션!`;

const CODE_VARIABLES = `// const = 바꿀 수 없는 이름표, let = 바꿀 수 있는 이름표
const school = "미림마이스터고";
let level = 1;

level = 2;        // OK — let은 재할당 가능
// school = "다른학교";  // 에러! const는 재할당 불가

// 기본 규칙: 일단 전부 const로 쓰고, 정말 바뀌어야 할 때만 let.
// var는? 옛날 문법이에요. 선언 전에 써도 에러가 안 나는 등
// 버그를 숨기는 성질이 있어서 현대 코드에서는 쓰지 않습니다.`;

const CODE_TYPES = `// 콘솔에서 typeof로 타입을 직접 물어보세요:
typeof "어썸데브"     // "string"  — 문자열
typeof 90            // "number"  — 숫자 (정수/실수 구분 없음!)
typeof true          // "boolean" — 참/거짓
typeof undefined     // "undefined" — "값을 아직 안 넣음"
typeof null          // "object"  — null인데 object?! (유명한 역사적 버그)

// undefined = 아직 아무것도 안 넣은 빈 사물함
// null      = "여긴 비워 뒀음"이라고 일부러 붙여 둔 팻말
// 둘 다 "없음"이지만, null은 사람이 의도적으로 넣은 없음이에요.`;

const CODE_TEMPLATE = `// 템플릿 문자열 — 따옴표 대신 백틱(\`)을 쓰면 문자열 안에 값을 끼워 넣어요
const name = "김미림";
const score = 95;

// 옛날 방식: + 로 이어 붙이기 (띄어쓰기 실수 단골)
console.log(name + "님의 점수는 " + score + "점");

// 요즘 방식: \${ } 자리에 값이 쏙
console.log(\`\${name}님의 점수는 \${score}점\`);

// React 코드에서도 클래스명 조합 등에 정말 자주 나와요.`;

const CODE_FUNCTIONS = `// 함수 = 코드에 이름을 붙인 자판기. 넣으면(매개변수) 나온다(반환값).

// 1) 함수 선언식 — 교과서 스타일
function add(a, b) {
  return a + b;
}
add(3, 4);   // 7

// 2) 화살표 함수 — 요즘 스타일. "(입력) => 출력"
const addArrow = (a, b) => {
  return a + b;
};

// 3) 한 줄이면 return과 중괄호도 생략 가능!
const addShort = (a, b) => a + b;
addShort(3, 4);   // 7`;

const CODE_ARROW_WHY = `// 우리 React 코드가 화살표 함수 천지인 이유:
// "그 자리에서 만들어 바로 넘기는 작은 함수"가 정말 많기 때문이에요.

const scores = [70, 85, 95];

// 배열의 각 요소를 변환할 때 — 함수를 '재료'로 넘깁니다
scores.map((s) => s + 5);     // [75, 90, 100]

// React 버튼에서도 (지금은 모양만 눈에 익혀 두세요):
// <button onClick={() => setOpen(true)}>열기</button>
// "클릭되면 실행할 함수"를 즉석에서 만들어 붙이는 거예요.`;

const CODE_ARRAY = `// 배열 = 순서 있는 목록. 대괄호 [ ]
const courses = ["네트워크", "코딩 기초", "자바스크립트"];

courses[0];            // "네트워크" — 번호는 0부터!
courses.length;        // 3
courses.push("HTML/CSS");   // 끝에 추가 → 이제 4개

// 3대장 메서드 — 콘솔에서 하나씩 실행해 보세요:
courses.map((c) => c + " 코스");   // 전원 변환 → 새 배열
courses.filter((c) => c.length >= 4);  // 조건 통과만 골라내기
courses.find((c) => c === "코딩 기초"); // 첫 번째 한 개만 찾기

// 우리 학습 플랫폼의 코스 카드 목록도 정확히 이 패턴이에요:
// courses.map((c) => <Card ... />)  ← 배열이 화면이 되는 마법`;

const CODE_OBJECT = `// 객체 = 이름표 붙은 서랍장. 중괄호 { }
const student = {
  name: "김미림",
  grade: 3,
  major: "소프트웨어",
};

student.name;        // "김미림" — 점으로 서랍 열기
student["major"];    // "소프트웨어" — 대괄호로도 가능

// 구조분해 한 입 — 서랍에서 꺼내면서 바로 변수로!
const { name, grade } = student;
console.log(name, grade);   // "김미림" 3

// 서버가 주는 데이터(JSON)도, React의 props도 전부 객체예요.
// 구조분해는 React 코드 첫 줄마다 나오니 눈에 꼭 익혀 두세요.`;

const CODE_IF = `// if — 조건에 따라 갈림길
const score = 85;

if (score >= 90) {
  console.log("최고예요!");
} else if (score >= 70) {
  console.log("잘하고 있어요");
} else {
  console.log("같이 복습해 봐요");
}

// 삼항 연산자 — "조건 ? 참일 때 : 거짓일 때" 한 줄 버전
const message = score >= 70 ? "통과" : "재도전";
// React의 JSX 안에서는 if문을 못 써서 삼항이 특히 자주 등장해요:
// {isLogin ? <MyPage /> : <LoginButton />}`;

const CODE_LOOP = `// for — 고전 반복문. 횟수를 직접 셀 때
for (let i = 1; i <= 3; i++) {
  console.log(\`\${i}번째 바퀴\`);
}

// for...of — 배열을 하나씩 꺼낼 때 (요즘은 이쪽이 편해요)
const courses = ["네트워크", "코딩 기초", "자바스크립트"];
for (const c of courses) {
  console.log(c);
}

// 그럼 언제 map, 언제 for?
// map : 배열을 → "새 배열"로 변환할 때 (화면 그리기, 데이터 가공)
// for : 변환 결과가 필요 없고 그냥 "각각에 대해 뭔가 할" 때,
//       또는 중간에 break로 멈추고 싶을 때
// React 화면 그리기는 "배열 → JSX 배열" 변환이라 거의 map입니다.`;

const CODE_DOM = `// DOM = 브라우저가 HTML을 읽어 만든 "조작 가능한 문서 모형"
// JS는 이 모형을 통해 화면을 실시간으로 바꿀 수 있어요.

// 지금 이 페이지에서 콘솔에 붙여넣어 보세요:
const hero = document.querySelector(".hero");   // CSS 선택자로 요소 찾기
hero.style.background = "hotpink";              // 히어로가 핑크로!

// 상단 제목 글자 바꿔치기:
document.querySelector("h1").textContent = "내가 접수한 페이지";

// 이벤트 = "~하면 ~해라" 예약 걸기
document.querySelector(".hero").addEventListener("click", () => {
  alert("히어로를 클릭했어요!");
});   // 이제 히어로 영역을 클릭해 보세요`;

const CODE_DOM_RESET = `// 실컷 어질러 놨다면 → F5(새로고침)!
// 모든 게 원래대로 돌아옵니다. 왜일까요?

// 콘솔에서 바꾼 건 "브라우저가 들고 있는 모형(DOM)"이지
// 서버에 있는 원본 코드가 아니기 때문이에요.
// 새로고침 = 서버에서 원본을 다시 받아 모형을 처음부터 다시 만들기.
// (그러니 마음껏 실험해도 안전합니다 — 부술 수 있는 건 내 화면뿐!)`;

const CODE_PROMISE = `// 서버 응답은 "즉시"가 아니에요 — 택배처럼 기다려야 합니다.
// Promise = 택배 운장장. "지금은 물건이 없지만, 도착하면 알려줄게"라는 약속.

// 주문(요청)하면 운송장(Promise)이 먼저 나오고,
// .then()에 "도착하면 할 일"을 적어 둡니다:
fetch("/api/auth/me")
  .then((res) => res.json())
  .then((data) => console.log(data));

// async/await — 같은 일을 "기다렸다가 받기"처럼 읽히게 쓰는 문법
// (콘솔은 최상위 await를 허용해서 이렇게 바로 실행돼요)
const res = await fetch("/api/auth/me");
const me = await res.json();
console.log(me);   // 내 계정 정보가 객체로!`;

const CODE_FETCH_REAL = `// 진짜로 해 보세요 — 지금 이 플랫폼에 로그인돼 있으니 가능합니다!
// F12 콘솔에 붙여넣기:

const res = await fetch("/api/auth/me");
console.log(res.status);        // 200 이면 성공 (네트워크 코스에서 본 그 200 OK!)
const me = await res.json();
console.log(me.name);           // 내 이름이 나오나요?

// 방금 일어난 일:
// 브라우저(JS) → 우리 Spring Boot 서버 → PostgreSQL에서 내 정보 조회 → JSON 응답
// 여러분이 매일 쓰는 이 플랫폼의 모든 화면이 정확히 이 과정으로 그려집니다.`;

const CODE_REACT_BRIDGE = `// 지금까지 배운 JS가 React에서 이렇게 그대로 쓰여요:

// 1) 컴포넌트 = 그냥 "JSX를 반환하는 함수" (섹션 3!)
function Welcome({ name }) {          // ← 매개변수 자리의 구조분해 (섹션 4!)
  return <h1>안녕하세요, {name}님</h1>;
}

// 2) JSX 안의 { } = JS 표현식 자리 (삼항, map... 전부 여기서)
// {courses.map((c) => <Card title={c} />)}   ← 섹션 4의 map!
// {isLogin ? "환영해요" : "로그인하세요"}       ← 섹션 5의 삼항!

// 3) useState가 그냥 변수와 다른 점 한 입:
// let count = 0; count++;  ← 값은 바뀌지만 화면은 그대로예요.
// const [count, setCount] = useState(0);
// setCount(count + 1);     ← "값 바꾸고 화면도 다시 그려줘!"까지가 한 세트.
// React는 setXxx가 불려야만 화면을 갱신합니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '콘솔에서 시작' },
  { n: 2, label: '변수와 타입' },
  { n: 3, label: '함수' },
  { n: 4, label: '배열과 객체' },
  { n: 5, label: '조건과 반복' },
  { n: 6, label: 'DOM과 이벤트' },
  { n: 7, label: '비동기와 fetch' },
  { n: 8, label: 'React로 가는 다리' },
];

export default function JavascriptPage() {
  return (
    <div>
      {/* 히어로: 준비물은 브라우저 하나 — F12 콘솔이 곧 실습장 */}
      <div className="hero">
        <div className="eyebrow">Course · 소프트웨어</div>
        <h1>자바스크립트 기초<br />— 웹을 움직이는 언어</h1>
        <p>
          HTML이 뼈대, CSS가 옷이라면 자바스크립트는 <strong>움직임</strong>이에요.
          설치할 것도 없습니다 — 지금 이 페이지에서 <span className="kbd">F12</span>를 누르고{' '}
          <span className="kbd">Console</span> 탭을 열면 그게 바로 실습장이에요.
          이 코스의 모든 예제는 <strong>콘솔에 붙여넣으면 그 자리에서 실행</strong>됩니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 90분</span>
          <span className="chip">선수 코스: 코딩 기초</span>
          <span className="chip">선수 코스: HTML/CSS</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="콘솔에서 시작" sub="설치 없이, 지금 바로 첫 코드">
        <p>
          <span className="kbd">F12</span>(맥은 <span className="kbd">Cmd+Option+I</span>)를 누르고{' '}
          <span className="kbd">Console</span> 탭을 여세요. 커서가 깜빡이는 곳이 자바스크립트와의
          대화창입니다. 뭐든 입력하고 Enter를 치면 <strong>즉시 답</strong>이 돌아와요 —
          계산기이자, 언어를 배우는 가장 빠른 놀이터예요.
        </p>
        <Code>{CODE_CONSOLE_START}</Code>
        <p>
          <span className="icode">console.log(...)</span>는 "괄호 안의 값을 콘솔에 찍어라"는
          함수예요. 앞으로 개발하면서 <strong>가장 많이 치게 될 코드</strong>입니다 —
          "이 변수에 지금 뭐가 들어 있지?"를 확인하는 손전등이거든요.
        </p>
        <Code>{CODE_CONSOLE_TRAP}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 위 예제를 전부 콘솔에 붙여넣고, 마지막으로
          내 이름으로 <span className="icode">console.log("OO의 첫 JS!")</span>를 찍어 보세요.
          빨간 에러가 나도 겁내지 마세요 — 콘솔에서는 <strong>부서지는 게 없어요</strong>.
        </div>
      </Section>

      <Section n={2} title="변수와 타입" sub="값에 이름표 붙이기 — const가 기본, let은 가끔, var는 안녕">
        <p>
          변수는 값에 붙이는 <strong>이름표</strong>예요. 사물함에 물건을 넣고 이름을 써 붙이는 것과
          같죠. 자바스크립트에는 이름표가 세 종류(<span className="icode">const</span>,{' '}
          <span className="icode">let</span>, <span className="icode">var</span>) 있는데,
          실전에서 쓰는 건 사실상 두 개뿐입니다.
        </p>
        <Code>{CODE_VARIABLES}</Code>
        <p>
          이름표에 붙는 값에는 <strong>타입</strong>(종류)이 있어요. 콘솔에서{' '}
          <span className="icode">typeof</span>로 직접 물어볼 수 있습니다.
        </p>
        <Code>{CODE_TYPES}</Code>
        <p>
          그리고 문자열을 다루는 가장 편한 도구, <strong>템플릿 문자열</strong>.
          따옴표 대신 <strong>백틱(`)</strong>으로 감싸면 문자열 안에{' '}
          <span className="icode">{'${값}'}</span>을 끼워 넣을 수 있어요.
        </p>
        <Code>{CODE_TEMPLATE}</Code>
        <div className="warn">
          <b>왜 var를 안 쓰나요?</b> var는 선언하기 전 줄에서 써도 에러가 안 나고,
          블록(중괄호) 밖으로 새어 나가는 등 <strong>실수를 조용히 삼키는</strong> 옛 문법이에요.
          우리 회사 코드를 포함해 현대 자바스크립트에서는 const/let만 씁니다.
          옛날 코드나 인터넷 예제에서 var를 보면 "아, 오래된 글이구나" 하고 알아채는 용도로만!
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 콘솔에서 <span className="icode">const me = "내이름"</span>을
          선언하고, 템플릿 문자열로 <span className="icode">{'`${me}는 미림 3학년`'}</span>을
          출력해 보세요. 그다음 <span className="icode">me = "다른이름"</span>을 시도해서
          const가 정말 재할당을 막는지 에러 메시지를 직접 읽어 보세요.
        </div>
      </Section>

      <Section n={3} title="함수" sub="코드에 이름을 붙인 자판기 — 그리고 화살표라는 요즘 문법">
        <p>
          함수는 <strong>자판기</strong>예요. 동전(매개변수)을 넣으면 음료(반환값)가 나오죠.
          같은 코드를 복사-붙여넣기하는 대신, 이름을 붙여 두고 필요할 때마다 호출합니다.
        </p>
        <Code>{CODE_FUNCTIONS}</Code>
        <p>
          두 문법은 대부분의 상황에서 같은 일을 해요. 그런데 우리 플랫폼의 React 코드를 열어 보면
          온통 화살표 함수(<span className="icode">{'=>'}</span>)입니다. 왜일까요?
        </p>
        <Code>{CODE_ARROW_WHY}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 콘솔에서 인사 자판기를 만들어 보세요:{' '}
          <span className="icode">{'const greet = (name) => `안녕, ${name}!`'}</span> 를 선언하고{' '}
          <span className="icode">greet("미림")</span>을 호출! 그다음 우리 플랫폼 코드(예:{' '}
          <span className="icode">frontend/src/pages</span> 폴더 아무 파일)를 열어{' '}
          <span className="icode">{'=>'}</span>가 몇 번 나오는지 에디터 검색(
          <span className="kbd">Ctrl+F</span>)으로 세어 보세요 — 정말 천지라는 걸 확인하게 될 거예요.
        </div>
      </Section>

      <Section n={4} title="배열과 객체" sub="순서 있는 목록과 이름표 붙은 서랍장 — 데이터의 두 그릇">
        <p>
          실전 데이터는 두 가지 그릇에 담겨 다녀요. <strong>배열</strong>은 순서 있는 목록
          (코스 목록, 학생 명단), <strong>객체</strong>는 이름표 붙은 서랍장(학생 한 명의 정보)입니다.
        </p>
        <Code>{CODE_ARRAY}</Code>
        <p>
          특히 <span className="icode">map</span>은 꼭 기억하세요. 우리 플랫폼의 코스 대시보드에
          카드가 주르륵 나오는 것, 네트워크 코스의 섹션 바로가기 버튼 8개가 그려지는 것 — 전부
          <strong> "배열.map(항목 → 화면조각)"</strong> 한 줄이에요. 실제로 이 페이지의 소스에도{' '}
          <span className="icode">{'SECTIONS.map((s) => ...)'}</span>가 있습니다.
        </p>
        <Code>{CODE_OBJECT}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 콘솔에서 우리 반 배열을 만들어 보세요:{' '}
          <span className="icode">const crew = ["나", "짝꿍", "멘토님"]</span> →{' '}
          <span className="icode">{'crew.map((c) => c + " 안녕!")'}</span>. 그다음 7섹션 예고편:{' '}
          <span className="icode">await (await fetch("/api/auth/me")).json()</span>을 실행하면
          서버가 주는 진짜 <strong>객체</strong>를 만날 수 있어요 — 점(.)으로 서랍을 열어 보세요!
        </div>
      </Section>

      <Section n={5} title="조건과 반복" sub="갈림길과 되돌이표 — 그리고 '언제 map, 언제 for?'">
        <p>
          프로그램의 흐름은 딱 두 가지 도구로 조종해요. <strong>조건문</strong>은 갈림길
          ("점수가 90 이상이면 이쪽"), <strong>반복문</strong>은 되돌이표("목록 끝까지 반복")입니다.
        </p>
        <Code>{CODE_IF}</Code>
        <Code>{CODE_LOOP}</Code>
        <p>
          정리하면 — <strong>결과물(새 배열)이 필요하면 map, 행동만 필요하면 for</strong>.
          React에서 화면을 그리는 건 "데이터 배열을 JSX 배열로 바꾸는 일"이라 map이 표준이고,
          단순히 로그를 찍거나 중간에 멈추고 싶을 땐 for가 자연스러워요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 콘솔에서 구구단 3단을 for로 출력해 보세요:{' '}
          <span className="icode">{'for (let i = 1; i <= 9; i++) console.log(`3 x ${i} = ${3 * i}`)'}</span>.
          그다음 같은 결과를 map으로:{' '}
          <span className="icode">{'[1,2,3,4,5,6,7,8,9].map((i) => `3 x ${i} = ${3 * i}`)'}</span>.
          for는 한 줄씩 "찍고" 끝나지만, map은 <strong>배열을 돌려준다</strong>는 차이를 눈으로 비교!
        </div>
      </Section>

      <Section n={6} title="DOM과 이벤트" sub="화면을 손에 쥐기 — 지금 이 페이지로 장난쳐 보기">
        <p>
          브라우저는 HTML을 읽어 <strong>DOM</strong>이라는 "조작 가능한 문서 모형"을 만들어요.
          자바스크립트가 이 모형을 만지면 화면이 <strong>실시간으로</strong> 바뀝니다.
          레고 설명서(HTML)와 조립된 레고(DOM)의 관계 — 우리는 조립된 쪽을 만지는 거예요.
        </p>
        <Code>{CODE_DOM}</Code>
        <p>
          <span className="icode">document.querySelector("선택자")</span>는 HTML/CSS 코스에서 배운
          <strong> CSS 선택자 문법 그대로</strong> 요소를 찾아 줘요. 그리고{' '}
          <span className="icode">addEventListener("click", 함수)</span>는 "클릭되면 이 함수를
          실행해 줘"라고 <strong>예약</strong>을 걸어 두는 것 — 섹션 3에서 배운 화살표 함수가
          여기서 재료로 쓰입니다.
        </p>
        <Code>{CODE_DOM_RESET}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 위 예제로 지금 이 페이지의 히어로를 핑크로 만들고, 제목을
          내 마음대로 바꿔 보세요. 실컷 어지른 다음 <span className="kbd">F5</span> —
          전부 원상복구! <strong>학습 포인트:</strong> 콘솔의 변경은 서버의 원본이 아니라
          내 브라우저 속 모형(DOM)만 바꾸기 때문이에요. 새로고침은 원본을 다시 받아 오는 일이고요.
        </div>
      </Section>

      <Section n={7} title="비동기와 fetch" sub="서버 응답은 기다려야 한다 — 우리 API가 곧 실습장">
        <p>
          지금까지의 코드는 전부 <strong>즉시</strong> 결과가 나왔어요. 그런데 서버에 데이터를
          요청하면? 네트워크 코스에서 배웠듯 요청은 랜선과 바다를 건너 다녀옵니다 —
          아무리 빨라도 <strong>기다림</strong>이 생겨요. 이 기다림을 다루는 도구가{' '}
          <strong>Promise</strong>입니다.
        </p>
        <p>
          Promise는 <strong>택배 운송장</strong>이에요. 주문 버튼을 누르면 물건이 아니라 운송장이
          먼저 나오죠. "물건은 아직 없지만, 도착하면 알려줄게"라는 <strong>약속</strong> —
          그 운송장에 "도착하면 할 일"을 미리 적어 두는 게 <span className="icode">.then()</span>이고,
          "도착할 때까지 여기서 기다렸다 받기"처럼 자연스럽게 읽히게 해 주는 문법이{' '}
          <span className="icode">async/await</span>입니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 310" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="fetch 비동기 타임라인: 요청을 보낸 뒤 브라우저는 다른 일을 계속하고, 서버 응답이 도착하면 .then()이 실행된다">
          <text x="20" y="48" fontSize="13" fill="var(--muted)">브라우저 (JS)</text>
          <text x="620" y="48" fontSize="12" fill="var(--muted)" textAnchor="end">시간 →</text>
          <line x1="20" y1="100" x2="614" y2="100" stroke="var(--line)" strokeWidth="2" />
          <polyline points="606,95 616,100 606,105" fill="none" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <text x="20" y="225" fontSize="13" fill="var(--muted)">서버</text>
          <line x1="20" y1="260" x2="614" y2="260" stroke="var(--line)" strokeWidth="2" />
          <polyline points="606,255 616,260 606,265" fill="none" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <line x1="110" y1="122" x2="205" y2="236" stroke="var(--primary)" strokeWidth="1.5" />
          <polyline points="195,231 205,236 202,226" fill="none" stroke="var(--primary)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="145" y="180" fontSize="12" fill="var(--primary)" textAnchor="end">요청</text>
          <line x1="400" y1="236" x2="490" y2="126" stroke="var(--teal)" strokeWidth="1.5" />
          <polyline points="487,136 490,126 481,132" fill="none" stroke="var(--teal)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="452" y="185" fontSize="12" fill="var(--teal)">③ 응답 도착</text>
          <text x="320" y="56" fontSize="13" fill="var(--ink)" textAnchor="middle" fontWeight="700">② 다른 일 계속</text>
          <text x="320" y="72" fontSize="12" fill="var(--muted)" textAnchor="middle">(화면이 멈추지 않아요)</text>
          <rect x="40" y="78" width="130" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="105" y="96" fontSize="13" fill="var(--ink)" textAnchor="middle" fontWeight="700">① fetch() 호출</text>
          <text x="105" y="113" fontSize="12" fill="var(--muted)" textAnchor="middle">요청 보냄</text>
          <rect x="460" y="78" width="140" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="530" y="96" fontSize="13" fill="var(--ink)" textAnchor="middle" fontWeight="700">④ .then() 실행</text>
          <text x="530" y="113" fontSize="12" fill="var(--muted)" textAnchor="middle">받은 데이터 사용</text>
          <rect x="200" y="238" width="200" height="44" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="300" y="256" fontSize="13" fill="var(--ink)" textAnchor="middle" fontWeight="700">서버가 처리 중</text>
          <text x="300" y="273" fontSize="12" fill="var(--muted)" textAnchor="middle">(DB 조회 — 시간이 걸려요)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: fetch 비동기 타임라인 — 요청을 보내 두고(①) 다른 일을 하다가(②), 응답이 도착하면(③) .then()이 실행돼요(④)</p>
        <Code>{CODE_PROMISE}</Code>
        <p>
          이제 진짜를 해 볼 시간이에요. 여러분은 지금 이 플랫폼에 <strong>로그인돼 있으니</strong>,
          내 정보를 주는 우리 API를 콘솔에서 직접 호출할 수 있습니다.
        </p>
        <Code>{CODE_FETCH_REAL}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 위 fetch 예제를 실행하고, <span className="kbd">F12</span>의{' '}
          <span className="kbd">Network</span> 탭에서 방금 나간{' '}
          <span className="icode">/api/auth/me</span> 요청을 찾아 보세요. 네트워크 코스에서 본
          Status 200과, 응답(Response) 탭의 JSON이 콘솔에서 받은 객체와 <strong>같은 것</strong>임을
          확인하면 — 두 코스가 하나로 이어집니다.
        </div>
        <div className="warn">
          <b>주의</b> 콘솔 fetch는 "읽기" 연습까지만! 조회(GET) 말고 데이터를 바꾸는 요청을
          장난으로 보내면 진짜 데이터가 바뀔 수 있어요. 실습은 항상 멘토가 안내한 범위 안에서.
        </div>
      </Section>

      <Section n={8} title="React로 가는 다리" sub="오늘 배운 JS가 그대로 React가 된다">
        <p>
          축하해요 — 사실 여러분은 이미 React를 절반쯤 배웠습니다. React는 새로운 언어가 아니라
          <strong> 오늘 배운 자바스크립트를 화면 만들기에 특화해 쓰는 방법</strong>이거든요.
        </p>
        <Code>{CODE_REACT_BRIDGE}</Code>
        <ol className="olist">
          <li>
            <strong>컴포넌트 = 함수</strong> (섹션 3) — 이 페이지 자체도{' '}
            <span className="icode">JavascriptPage</span>라는 함수 하나예요.
          </li>
          <li>
            <strong>{'JSX의 { } = JS 표현식'}</strong> — 그 안에서 섹션 4의 map, 섹션 5의 삼항이
            매일 일합니다.
          </li>
          <li>
            <strong>useState ≠ 그냥 변수</strong> (섹션 2) — 값만 바꾸면 화면은 모릅니다.
            "바꿨으니 다시 그려!"까지 해 주는 게 setXxx예요.
          </li>
        </ol>
        <div className="tip">
          <b>직접 확인해 보기 (미니 과제)</b> 에디터로{' '}
          <span className="icode">frontend/src/pages/JavascriptPage.jsx</span> — 바로 이 파일! —
          를 열어 보세요. 백틱 문자열 상수(섹션 2), 화살표 함수(섹션 3),{' '}
          <span className="icode">SECTIONS.map</span>(섹션 4), 구조분해{' '}
          <span className="icode">{'{ n, title, sub, children }'}</span>(섹션 4)을 전부 찾아
          형광펜을 쳐 보세요. 찾은 목록은 <span className="icode">STUDY.md</span> 미니 과제에
          기록해서 멘토에게 공유!
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>⚡ 여기까지 왔다면</h3>
          <p className="muted">
            콘솔 한 줄에서 시작해 우리 서버의 API 호출까지 — 웹을 <strong>움직이는</strong> 언어의
            뼈대를 다 만졌어요. 개념이 흔들리면 <Link to="/learn/coding"><strong>코딩 기초</strong></Link>{' '}
            코스로 돌아가 복습하고, 이제 내 PC에 진짜 개발 환경을 갖출 준비가 됐다면{' '}
            <Link to="/setup"><strong>개발 환경 설치 가이드</strong></Link>로 넘어가세요.
            다음 정거장은 React — 오늘 놓은 다리를 건너기만 하면 됩니다.
          </p>
        </div>
      </div>
    </div>
  );
}
