// 이 파일이 하는 일: "첫 프로젝트: 숫자 맞히기 게임 만들기" 코스 — 초급(코딩 첫걸음) 과정의
// 졸업 프로젝트. 지금까지 따로따로 배운 변수·조건문·반복·함수·HTML을 한 판에 모아,
// 1~100 사이 숫자를 맞히는 웹 게임을 '설계 → 뼈대 → 로직 → 화면 → 테스트 → 다듬기'
// 순서로 처음부터 끝까지 완성한다. 대상은 코딩을 처음 해 보는 중·고등학생.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 예제 코드 상수들 ──

const CODE_PREVIEW = `┌──────────────────────────────────┐
│        숫자 맞히기 게임           │
│                                  │
│  1부터 100 사이의 숫자를 하나     │
│  생각해 뒀어요. 맞혀 보세요!      │
│                                  │
│  [ 입력창: 50  ]  [ 도전! ]       │
│                                  │
│  → "업! 더 큰 수예요." (3번째 시도)│
└──────────────────────────────────┘

플레이 흐름:
50 입력 → "업!"  → 75 입력 → "다운!" → 62 입력 →
"정답! 3번 만에 맞혔어요 🎉"

이 화면 하나에 우리가 배운 게 전부 들어가요.
입력창·버튼 = HTML, 정답 기억 = 변수,
업/다운 판단 = 조건문, 도전 반복 = 사용자가 만드는 반복,
"도전!"을 누를 때 실행되는 묶음 = 함수.`;

const CODE_PLAN = `[종이 코딩 — 코드보다 먼저 쓰는 계획표]

화면에 필요한 것 (HTML 재료):
  - 제목 글자          → "숫자 맞히기 게임"
  - 숫자 입력창        → 플레이어가 추측을 적는 곳
  - "도전!" 버튼       → 누르면 채점
  - 결과 문구 영역     → "업!" / "다운!" / "정답!"

기억해야 하는 것 (변수 재료):
  - answer  : 컴퓨터가 뽑아 둔 정답 숫자 (1~100)
  - tries   : 지금까지 도전한 횟수

해야 하는 일 (함수 재료):
  - check() : 입력값을 읽어서 정답과 비교하고 결과를 보여 준다

게임 흐름 (순서도):
  시작 → 정답 숫자를 몰래 뽑는다
      → [플레이어가 숫자 입력 후 버튼 클릭]
      → 시도 횟수 +1
      → 입력 < 정답 ? → "업!"  표시 → 다시 입력으로
      → 입력 > 정답 ? → "다운!" 표시 → 다시 입력으로
      → 입력 = 정답 ? → "정답! N번 만에 성공" → 끝`;

const CODE_HTML = `<!-- game.html — 게임의 뼈대. 아직 두뇌(스크립트)는 없다 -->
<h1>숫자 맞히기 게임</h1>
<p>1부터 100 사이의 숫자를 하나 생각해 뒀어요. 맞혀 보세요!</p>

<!-- id는 요소에 붙이는 '이름표' — 나중에 자바스크립트가 이 이름으로 찾아온다 -->
<input id="guess" type="number" placeholder="예: 50" />
<button>도전!</button>

<p id="result">아직 시도 전이에요.</p>

<!-- 지금 브라우저로 열면? 입력도 되고 버튼도 눌리지만
     아무 일도 일어나지 않아요. 몸은 완성, 두뇌는 다음 섹션에서. -->`;

const CODE_RANDOM = `// 정답 숫자 뽑기 — 게임의 심장
// Math.random()        → 0 이상 1 미만의 소수 (예: 0.7231…)
// Math.random() * 100  → 0 이상 100 미만     (예: 72.31…)
// Math.floor(…)        → 소수점을 잘라 정수로  (예: 72)   ← 0~99
// … + 1                → 한 칸 밀어서 1~100

var answer = Math.floor(Math.random() * 100) + 1;
var tries = 0;   // 시도 횟수는 0에서 시작

// answer는 게임이 시작될 때 딱 한 번 뽑혀서
// 게임이 끝날 때까지 변수 안에 '기억'되어 있어요.
// 새로고침(F5)하면 다시 뽑히니, 매판 정답이 달라집니다.`;

const CODE_CHECK = `// check() — "도전!" 버튼이 눌릴 때마다 실행될 채점 함수
function check() {
  // ① 입력창에서 값을 읽는다. 입력창의 값은 늘 '글자'라서
  //    Number()로 숫자로 바꿔 줘야 정답과 비교할 수 있어요.
  var guess = Number(document.getElementById('guess').value);

  // ② 시도 횟수를 하나 올린다
  tries = tries + 1;

  // ③ 조건문 삼거리: 셋 중 정확히 하나의 길로만 간다
  if (guess === answer) {
    console.log('정답! ' + tries + '번 만에 맞혔어요');
  } else if (guess < answer) {
    console.log('업! 더 큰 수예요.');
  } else {
    console.log('다운! 더 작은 수예요.');
  }
}

// 지금은 결과가 console.log로만 나와요(F12 콘솔에서 확인).
// 화면에 보여 주는 건 다음 섹션의 몫 — 한 번에 한 걸음씩!`;

const CODE_UI = `<!-- ① 버튼과 함수 잇기: onclick="check()" 한 줄이 전선이다 -->
<button onclick="check()">도전!</button>

<script>
  var answer = Math.floor(Math.random() * 100) + 1;
  var tries = 0;

  function check() {
    var guess = Number(document.getElementById('guess').value);
    tries = tries + 1;

    // ② 결과 영역을 이름표(id)로 찾아 둔다
    var result = document.getElementById('result');

    // ③ innerText = 그 요소의 '글자'를 통째로 갈아 끼우기
    if (guess === answer) {
      result.innerText = '🎉 정답! ' + tries + '번 만에 맞혔어요!';
    } else if (guess < answer) {
      result.innerText = '업! ' + guess + '보다 큰 수예요. (' + tries + '번째 시도)';
    } else {
      result.innerText = '다운! ' + guess + '보다 작은 수예요. (' + tries + '번째 시도)';
    }
  }
</script>

<!-- 이제 브라우저에서 열고 눌러 보세요. 화면이 '반응'합니다.
     여러분이 만든 첫 인터랙티브 웹 게임이에요. -->`;

const CODE_TEST = `[버그 사냥 체크리스트 — 직접 플레이하며 하나씩 확인]

정상 플레이:
  ☐ 작은 수(예: 1)를 넣으면 "업!"이 나오는가?
  ☐ 큰 수(예: 100)를 넣으면 "다운!"이 나오는가?
  ☐ 업/다운을 따라가면 결국 "정답!"에 도착하는가?
  ☐ 시도 횟수가 1, 2, 3… 제대로 올라가는가?

이상한 입력 (일부러 괴롭혀 보기):
  ☐ 아무것도 안 쓰고 "도전!" → 무슨 일이?
  ☐ 음수(-5)나 999를 넣으면?
  ☐ 글자를 넣으면? → Number('abc')는 NaN(Not a Number)이 돼요

글자 입력 방어하기 — check() 맨 앞에 문지기 한 줄:
  if (isNaN(guess)) {
    result.innerText = '숫자를 입력해 주세요!';
    return;   // 여기서 함수를 끝낸다 → 아래 채점은 실행 안 됨
  }

에러가 나면? 빨간 글씨는 혼내는 게 아니라 '단서'예요.
  Uncaught ReferenceError: chek is not defined
  → "chek라는 이름은 없는데?" = 오타! check로 고치면 끝.`;

const CODE_STYLE = `<!-- style 속성 — 요소에 옷 입히기 (색·크기·여백) -->
<h1 style="color: royalblue;">숫자 맞히기 게임</h1>

<input id="guess" type="number"
       style="font-size: 20px; padding: 8px; width: 120px;" />

<button onclick="check()"
        style="font-size: 20px; padding: 8px 16px;
               background: gold; border-radius: 8px;">
  도전!
</button>

<p id="result" style="font-size: 24px; font-weight: bold;">
  아직 시도 전이에요.
</p>

<!-- 친구에게 자랑하는 법: game.html 파일 하나가 게임의 전부라서,
     그 파일을 메신저로 보내기만 하면 친구도 더블클릭으로 플레이! -->`;

const CODE_MAP = `[여기까지 배운 개념 지도 — 게임 속 어디에 살고 있나]

HTML        →  제목·입력창·버튼·결과 영역 (게임의 몸)
id          →  요소의 이름표 (guess, result)
변수        →  answer(정답 기억), tries(횟수 세기)
Math.random →  매판 다른 정답 (게임의 심장)
함수        →  check() — 채점 절차를 하나로 묶은 상자
조건문      →  업 / 다운 / 정답 삼거리
반복        →  플레이어가 맞힐 때까지 '도전!'을 반복
onclick     →  버튼과 함수를 잇는 전선
innerText   →  화면의 글자를 바꾸는 손
isNaN       →  이상한 입력을 막는 문지기
에러 읽기   →  빨간 글씨 = 단서, 오타 사냥

다음 정거장:
  CSS   → style 속성을 파일로 분리해 제대로 꾸미기
  배열  → 지난 추측들을 목록으로 기억하기 [50, 75, 62]
  DOM   → innerText 너머, 화면을 자유자재로 주무르기`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'HTML 뼈대' },
  { n: 4, label: '게임 로직' },
  { n: 5, label: '화면 반응' },
  { n: 6, label: '테스트' },
  { n: 7, label: '다듬기' },
  { n: 8, label: '다음 여정' },
];

export default function Lv1FirstMiniProjectPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>🚀 첫 프로젝트<br />— 숫자 맞히기 게임 만들기</h1>
        <p>
          변수, 조건문, 반복, 함수, HTML — 지금까지 하나씩 배운 조각들을 오늘{' '}
          <strong>전부 한 판에</strong> 모읍니다. 컴퓨터가 몰래 뽑은 1~100 사이의 숫자를
          업/다운 힌트로 맞히는 <strong>웹 게임</strong>을, 설계부터 자랑까지 처음부터 끝까지
          직접 완성해요. 끝나고 나면 확실해집니다 — "나, 코딩 할 수 있네."
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 90분</span>
          <span className="chip">실습: 남은 기회 5번 제한 추가</span>
          <span className="chip">준비물: 지금까지 배운 전부</span>
        </div>
      </div>

      {/* 섹션 바로가기 — 학습 포인트: 배열.map으로 반복되는 링크를 찍어 낸다 */}
      <div className="chip-row">
        {SECTIONS.map((s) => (
          <a key={s.n} className="chip" href={`#sec-${s.n}`}>
            {s.n}. {s.label}
          </a>
        ))}
      </div>

      <Section n={1} title="프로젝트 훑어보기" sub="완성 화면을 먼저 보고 목표를 세운다">
        <p>
          오늘 만들 것은 <strong>숫자 맞히기 게임</strong>이에요. 규칙은 간단합니다. 컴퓨터가
          1부터 100 사이의 숫자를 하나 몰래 뽑아 두면, 플레이어가 숫자를 입력해서 맞히는 거예요.
          틀리면 컴퓨터가 힌트를 줍니다 — 정답이 더 크면 <strong>"업!"</strong>, 더 작으면{' '}
          <strong>"다운!"</strong>. 맞힐 때까지 도전하고, 맞히면 몇 번 만에 성공했는지
          알려 줘요.
        </p>
        <p>
          무언가를 만들 땐 <strong>완성된 모습을 먼저 보는 것</strong>이 중요해요. 목적지를
          알아야 길을 잃지 않으니까요. 우리가 도착할 화면은 이렇게 생겼습니다.
        </p>
        <Code>{CODE_PREVIEW}</Code>
        <p>
          작아 보여도 이 게임 안에는 지금까지 배운 개념이 <strong>전부</strong> 들어가요.
          입력창과 버튼은 <strong>HTML</strong>, 정답을 기억하는 건 <strong>변수</strong>,
          업/다운을 판단하는 건 <strong>조건문</strong>, 버튼을 누를 때마다 실행되는 채점
          절차는 <strong>함수</strong>입니다. 배운 조각이 하나로 맞물리는 순간을 오늘
          직접 경험해요.
        </p>
        <div className="tip">
          <b>프로젝트가 최고의 복습인 이유</b> 강의를 따라 칠 때는 "아는 것 같은" 상태예요.
          그런데 빈 파일 앞에서 처음부터 만들어 보면, 진짜 아는 것과 아는 것 같았던 것이
          갈립니다. 막히는 곳이 바로 여러분의 다음 공부 지점이에요 — 막히는 건 실패가 아니라
          <strong> 지도에 표시되는 보물 위치</strong>입니다.
        </div>
      </Section>

      <Section n={2} title="설계 먼저: 종이 코딩" sub="키보드보다 연필이 먼저다">
        <p>
          프로가 되는 습관 하나를 여기서 배워요. 바로 <strong>코드를 치기 전에 계획부터
          쓰는 것</strong>입니다. 무작정 타자부터 치면 중간에 "어… 다음에 뭐 하지?" 하고
          길을 잃기 쉬워요. 종이(또는 메모장)에 세 가지만 적으면 길이 선명해집니다 —{' '}
          <strong>① 화면에 뭐가 필요한가, ② 뭘 기억해야 하는가, ③ 무슨 일을 해야 하는가.</strong>
        </p>
        <Code>{CODE_PLAN}</Code>
        <p>
          이 계획표가 곧 <strong>이 코스의 지도</strong>예요. "화면에 필요한 것"은 섹션 3의
          HTML이 되고, "기억해야 하는 것"은 섹션 4의 변수가 되고, "해야 하는 일"은 섹션 4~5의
          함수가 됩니다. 순서도의 삼거리(업/다운/정답)는 조건문{' '}
          <span className="icode">if / else if / else</span>와 정확히 같은 모양이고요.
        </p>
        <div className="tip">
          <b>변수 개수 세어 보기</b> 이 게임에 필요한 변수는 딱 둘이에요 —{' '}
          <span className="icode">answer</span>(정답)와 <span className="icode">tries</span>(횟수).
          "기억할 게 뭐지?"라고 스스로 물어보는 습관이 곧 변수를 설계하는 감각입니다.
          나중에 '남은 기회 5번' 기능을 붙일 때, 기억할 게 하나 더 늘어나겠죠? 그게 힌트예요.
        </div>
      </Section>

      <Section n={3} title="뼈대 세우기: HTML" sub="일단 못생겨도 좋다, 동작이 먼저다">
        <p>
          설계도가 나왔으니 <strong>몸부터</strong> 만듭니다. 메모장이나 에디터에서{' '}
          <span className="icode">game.html</span> 파일을 만들고, 계획표의 "화면에 필요한 것"
          네 가지 — 제목, 입력창, 버튼, 결과 영역 — 을 그대로 옮겨 적어요.
        </p>
        <Code>{CODE_HTML}</Code>
        <p>
          여기서 제일 중요한 건 <span className="icode">id</span>예요.{' '}
          <span className="icode">id="guess"</span>, <span className="icode">id="result"</span>는
          요소에 붙이는 <strong>이름표</strong>입니다. 다음 섹션에서 자바스크립트가
          "guess라는 이름표 달린 애, 값 좀 줘 봐"라고 <strong>이름으로 찾아오기</strong> 때문에,
          이름표 없는 요소는 스크립트가 만질 수 없어요.
        </p>
        <div className="tip">
          <b>못생겨도 괜찮은 이유</b> 지금 이 화면, 솔직히 밋밋하죠? 일부러 그래요.
          프로들도 <strong>"일단 동작하게, 그다음 예쁘게"</strong> 순서로 만듭니다. 꾸미기는
          섹션 7에서 몰아서 해요. 처음부터 예쁘게 만들려다 보면 정작 게임이 영영 완성되지
          않는 일이 정말 많거든요.
        </div>
      </Section>

      <Section n={4} title="게임 두뇌 만들기: 로직" sub="정답 뽑기 · 비교하기 · 횟수 세기">
        <p>
          이제 몸에 <strong>두뇌</strong>를 넣을 차례예요.{' '}
          <span className="icode">&lt;script&gt;</span> 태그 안에 자바스크립트를 씁니다.
          첫 임무는 <strong>정답 숫자를 몰래 뽑아 두는 것</strong> — 여기서{' '}
          <span className="icode">Math.random()</span>이 등장합니다.
        </p>
        <Code>{CODE_RANDOM}</Code>
        <p>
          <span className="icode">Math.floor(Math.random() * 100) + 1</span>을 읽는 법:
          안쪽부터 바깥쪽으로, <strong>0~1 소수 → 0~100 미만으로 늘리고 → 소수점을 잘라
          0~99 → 1을 더해 1~100</strong>. 마지막 <span className="icode">+ 1</span>을 빼먹으면
          0이 나올 수 있고 100은 절대 안 나오는, 미묘하게 틀린 게임이 돼요.
        </p>
        <p>
          두 번째 임무는 <strong>채점</strong>입니다. 계획표의 "해야 하는 일"이었던{' '}
          <span className="icode">check()</span> 함수를 만들고, 그 안에 조건문 삼거리를 놓아요.
        </p>
        <Code>{CODE_CHECK}</Code>
        <div className="tip">
          <b>왜 Number()가 필요할까</b> 입력창에서 꺼낸 값은 겉보기에 숫자여도 속은{' '}
          <strong>글자('50')</strong>예요. 글자 '50'과 숫자 50은 다른 존재라서,{' '}
          <span className="icode">Number()</span>로 변신시킨 뒤에 비교해야 정확합니다.
          "입력값은 일단 글자다"라고 기억해 두면 앞으로 수많은 버그를 피해 갈 수 있어요.
        </div>
      </Section>

      <Section n={5} title="화면에 반응 보여주기" sub="onclick으로 잇고, innerText로 바꾼다">
        <p>
          두뇌는 완성됐지만 아직 결과가 <strong>F12 콘솔</strong>에만 나와요. 플레이어는
          콘솔을 열지 않으니, 결과를 <strong>화면에</strong> 보여 줘야 진짜 게임이죠.
          필요한 연결은 딱 두 개입니다.
        </p>
        <p>
          첫째, <strong>버튼과 함수를 잇는 전선</strong> —{' '}
          <span className="icode">onclick="check()"</span>. "이 버튼이 클릭되면(on click)
          check 함수를 실행해 줘"라는 뜻이에요. 둘째, <strong>화면 글자를 바꾸는 손</strong> —{' '}
          <span className="icode">innerText</span>. 이름표로 찾아온 요소의 글자를 통째로
          갈아 끼웁니다.
        </p>
        <Code>{CODE_UI}</Code>
        <p>
          저장하고 브라우저에서 열어 보세요. 숫자를 넣고 "도전!"을 누르면 화면 문구가
          바뀝니다. 업/다운을 따라가다 정답을 맞히면 축하 메시지와 함께 시도 횟수가 공개돼요.
          지금 이 순간, 여러분은 <strong>움직이는 웹 게임을 처음부터 만든 사람</strong>입니다.
        </p>
        <div className="tip">
          <b>반복문은 어디 갔지?</b> "반복도 배웠는데 for가 안 보여요!" — 좋은 관찰이에요.
          이 게임의 반복은 <strong>플레이어가 만들어요.</strong> 맞힐 때까지 버튼을 다시
          누르는 것 자체가 반복이거든요. 버튼이 눌릴 때마다 <span className="icode">check()</span>가
          다시 실행되니, "같은 일을 여러 번"이라는 반복의 본질은 그대로입니다. 도구만
          다를 뿐이에요.
        </div>
      </Section>

      <Section n={6} title="테스트하고 고치기" sub="일부러 괴롭혀 봐야 튼튼해진다">
        <p>
          "다 만들었다!"의 진짜 뜻은 "이제 <strong>테스트</strong>를 시작한다"예요.
          만든 사람은 자기 게임을 곱게 다루지만, 진짜 플레이어는 아무거나 넣거든요.
          그러니 우리가 먼저 <strong>일부러 괴롭혀</strong> 봅니다.
        </p>
        <Code>{CODE_TEST}</Code>
        <p>
          글자를 넣으면 <span className="icode">Number('abc')</span>가{' '}
          <span className="icode">NaN</span>(Not a Number, "숫자 아님")이 되면서 비교가
          전부 이상해져요. 그래서 <span className="icode">isNaN()</span>이라는 문지기를 함수
          맨 앞에 세우고, 이상한 입력이면 <span className="icode">return</span>으로 즉시
          함수를 끝냅니다 — "출입 불가, 채점 안 함"이죠.
        </p>
        <div className="tip">
          <b>에러 읽기 기술, 실전 적용</b> 코드가 안 돌면 <strong>F12 → Console</strong>부터
          여세요. 빨간 에러의 문법은 늘 같습니다 — <strong>무엇이(에러 이름) + 어디서(파일:줄
          번호)</strong>. <span className="icode">check is not defined</span>는 십중팔구 함수
          이름 오타, <span className="icode">Cannot read properties of null</span>은 십중팔구
          id 이름표 오타예요. 에러는 혼내는 게 아니라 범인의 위치를 불러 주는 목격자입니다.
        </div>
      </Section>

      <Section n={7} title="다듬고 자랑하기" sub="이제 예쁘게, 그리고 세상 밖으로">
        <p>
          동작이 확인됐으니 이제 <strong>옷을 입힐</strong> 차례예요. HTML 요소에{' '}
          <span className="icode">style</span> 속성을 붙이면 색·크기·여백을 바꿀 수 있습니다.
          아래는 예시일 뿐 — 색과 크기는 <strong>여러분 취향대로</strong> 바꿔 보세요.
          바꾸고 → 저장하고 → 새로고침하고, 이 삼박자가 웹 개발의 기본 리듬입니다.
        </p>
        <Code>{CODE_STYLE}</Code>
        <p>
          다 꾸몄으면 마지막 단계, <strong>자랑</strong>입니다. 우리 게임은{' '}
          <span className="icode">game.html</span> <strong>파일 하나</strong>가 전부라서,
          그 파일을 메신저나 메일로 보내면 친구도 더블클릭 한 번으로 플레이할 수 있어요.
          설치도 서버도 필요 없습니다 — 이게 웹의 힘이에요.
        </p>
        <div className="tip">
          <b>친구는 최고의 테스터</b> 친구가 플레이하는 걸 <strong>말없이 옆에서 지켜보세요.</strong>{' '}
          여러분이 상상 못 한 입력(빈칸 연타, 소수점, 999…)을 반드시 합니다. 친구가 갸웃하는
          지점이 곧 다음 개선 포인트예요. 만든 사람 눈에는 절대 안 보이는 게 남의 손에서는
          3초 만에 드러나거든요 — 프로 개발팀이 사용자 테스트를 하는 이유와 정확히 같습니다.
        </div>
      </Section>

      <Section n={8} title="다음 여정 지도" sub="여기까지 배운 것, 그리고 다음 정거장">
        <p>
          숨을 고르고 뒤를 돌아봅시다. 오늘 완성한 게임 파일 안에, 초급 과정에서 배운
          개념이 <strong>전부 살아서 일하고 있어요.</strong> 어디에 뭐가 있는지 지도로
          한 장 정리하면 이렇습니다.
        </p>
        <Code>{CODE_MAP}</Code>
        <p>
          그리고 목표 달성 확인. 이 코스의 시작에서 우리는 "처음부터 끝까지 내 손으로 웹 게임
          완성"을 약속했어요. 설계(종이 코딩) → 뼈대(HTML) → 두뇌(로직) → 반응(화면) →
          테스트 → 다듬기 — 전부 여러분 손으로 지나왔습니다.{' '}
          <strong>"나 코딩 할 수 있네"</strong>는 이제 기분이 아니라 증거가 있는 사실이에요.
          증거물: <span className="icode">game.html</span>.
        </p>
        <div className="tip">
          <b>졸업 실습: 남은 기회 5번</b> 마지막 도전 과제예요. 기회를{' '}
          <strong>5번으로 제한</strong>해서 긴장감 있는 게임으로 업그레이드해 보세요. 힌트만
          드릴게요 — ① 기억할 것이 하나 늘어요(남은 기회 변수, 5에서 시작). ② 틀릴 때마다
          1씩 줄이고 결과 문구에 함께 보여 주세요. ③ 조건문으로 "남은 기회가 0이 되면"
          게임 오버 메시지와 함께 정답을 공개하세요. 섹션 2의 계획표에 연필로 먼저 추가해
          보고 시작하면 훨씬 수월합니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🚀 여기까지 왔다면</h3>
          <p className="muted">
            축하해요 — 여러분은 이제 <strong>아이디어를 동작하는 웹 게임으로 바꿔 본
            사람</strong>입니다. 변수로 기억하고, 조건문으로 판단하고, 함수로 묶고, HTML로
            보여 주는 감각이 손에 남았을 거예요. 다음 정거장은 지도에 적힌 대로 CSS(제대로
            꾸미기), 배열(여러 값을 한 줄에 기억하기), DOM(화면을 자유자재로 다루기)입니다.{' '}
            <Link to="/learn"><strong>학습 센터</strong></Link>로 돌아가 다음 강좌를
            골라 보세요. 첫 프로젝트를 끝낸 지금이, 가장 빠르게 성장하는 순간이에요.
          </p>
        </div>
      </div>
    </div>
  );
}
