// 이 파일이 하는 일: "조건문: 컴퓨터가 판단하게 하기" 코스 — 코딩을 처음 접하는 수습을 위해,
// '비가 오면 우산을 챙긴다'라는 일상 문장에서 출발해 if → else → else if → 비교·논리 연산자 →
// 매표소/놀이기구 실습 → 흔한 함정까지 7개 섹션으로 안내하는 정적 학습 페이지.
// 프레이밍은 "프로그램에 갈림길 만들기" — 지금까지 위에서 아래로만 흐르던 코드가,
// 조건문을 만나 스스로 길을 고르는 순간을 눈으로 확인시킨다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_DAILY = `일상의 문장                          프로그램의 문장
────────────────────────────────────────────────────
"비가 오면, 우산을 챙긴다"     →    if (비가 온다) 우산을 챙긴다
"배가 고프면, 밥을 먹는다"     →    if (배가 고프다) 밥을 먹는다
"신호가 초록불이면, 건넌다"    →    if (신호 === 초록불) 건넌다

공통 구조:  [조건]이 맞으면 → [행동]을 한다

핵심: 우리는 하루에도 수십 번 이 판단을 해요.
조건문은 그 판단을 컴퓨터에게 맡기는 문법입니다.
순서도에서 마름모(판단)를 그리던 바로 그 자리가, 코드에선 if가 됩니다.`;

const CODE_IF_SHAPE = `// if 문의 생김새 — 딱 세 부분만 기억하세요
if (조건) {
  // 조건이 true(참)일 때만 실행되는 코드
}

// ① if        : "만약"이라는 신호탄
// ② (조건)    : 괄호 안에서 true/false를 판정
// ③ { ... }   : 중괄호로 묶인 '블록' — 조건이 참일 때 실행할 묶음`;

const CODE_IF_BASIC = `let temperature = 33;

if (temperature >= 30) {
  console.log("폭염이에요. 물을 챙기세요!");
}

console.log("오늘도 좋은 하루!");

// temperature가 33이니 30 이상 → 조건이 true → 블록 안이 실행됩니다.
// 출력:
//   폭염이에요. 물을 챙기세요!
//   오늘도 좋은 하루!
//
// 만약 temperature가 25였다면? 조건이 false → 블록을 '건너뛰고'
// 마지막 줄만 실행돼요. if는 지우는 게 아니라 건너뛰는 문법입니다.`;

const CODE_ELSE = `let number = 7;

if (number % 2 === 0) {
  console.log("짝수입니다.");
} else {
  console.log("홀수입니다.");
}

// % 는 '나머지 연산자' — 7 % 2 는 7을 2로 나눈 나머지, 즉 1이에요.
// 나머지가 0이면 짝수, 아니면 홀수. 조건이 false라서 else 쪽이 실행됩니다.
// 출력: 홀수입니다.
//
// 중요: if 블록과 else 블록은 '둘 중 반드시 하나만' 실행돼요.
// 둘 다 실행되거나, 둘 다 건너뛰는 일은 없습니다.`;

const CODE_ELSEIF = `let score = 85;

if (score >= 90) {
  console.log("A 등급");
} else if (score >= 80) {
  console.log("B 등급");
} else if (score >= 70) {
  console.log("C 등급");
} else {
  console.log("재도전!");
}

// 위에서부터 차례로 검사합니다.
// 85 >= 90 ? false → 다음으로
// 85 >= 80 ? true  → "B 등급" 출력, 나머지는 쳐다보지도 않고 끝!
//
// 하나가 걸리는 순간 전체 사다리를 빠져나온다 — 이게 else if의 규칙이에요.`;

const CODE_ELSEIF_ORDER = `// 순서를 뒤집으면 어떻게 될까요? (일부러 틀린 코드)
let score = 95;

if (score >= 70) {          // 95 >= 70 ? true → 여기서 걸림!
  console.log("C 등급");    // 95점인데 C 등급이 나와 버립니다
} else if (score >= 80) {   // 영원히 도달 못 함
  console.log("B 등급");
} else if (score >= 90) {   // 영원히 도달 못 함
  console.log("A 등급");
}

// 95점도 "70 이상"이긴 하니까, 제일 먼저 만난 조건에 걸려 버려요.
// 교훈: 겹치는 조건들은 '좁은(빡빡한) 조건부터' 위에 두세요.
// 조건의 순서가 결과를 바꿉니다.`;

const CODE_COMPARE = `// = 와 === 는 이름만 비슷할 뿐, 하는 일이 완전히 달라요.
let age = 15;      // =   : 넣기(대입). "age라는 상자에 15를 넣어라"
age === 15;        // === : 비교하기. "age가 15와 같은가?" → true/false

// 자주 쓰는 비교 연산자들
age === 15   // 같다              → true
age !== 20   // 다르다            → true
age > 10     // 크다(초과)        → true
age >= 15    // 크거나 같다(이상)  → true
age < 20     // 작다(미만)        → true
age <= 14    // 작거나 같다(이하)  → false

// 비교의 결과는 언제나 true 아니면 false, 딱 두 가지뿐이에요.
// if의 괄호는 바로 이 true/false를 받아서 갈림길을 정합니다.`;

const CODE_LOGICAL = `// 조건 여러 개를 묶는 접착제 — 논리 연산자
let height = 145;
let age = 13;

height >= 120 && age >= 8    // && (그리고): 둘 다 true여야 true
height >= 160 || age >= 8    // || (또는)  : 하나만 true여도 true
!(height >= 160)             // !  (부정)  : true/false를 뒤집는다

// 위 값들을 계산해 보면?
// 145 >= 120 && 13 >= 8  →  true && true   →  true
// 145 >= 160 || 13 >= 8  →  false || true  →  true
// !(145 >= 160)          →  !false         →  true
//
// 말로 옮기면 외우기 쉬워요.
// && = "키도 되고 '그리고' 나이도 되면"
// || = "회원이거나 '또는' 초대장이 있으면"
// !  = "미성년자가 '아니면'"`;

const CODE_TICKET = `// 매표소 프로그램 — prompt로 나이를 받아 요금을 안내한다
let input = prompt("나이를 입력하세요:");
let age = Number(input);          // prompt는 글자("15")를 주니 숫자로 변환

if (age < 8) {
  alert("무료입니다. 즐겁게 관람하세요!");
} else if (age < 20) {
  alert("청소년 요금 5,000원입니다.");
} else {
  alert("성인 요금 9,000원입니다.");
}

// 읽는 법: 8살 미만 → 무료 / (8살 이상이면서) 20살 미만 → 청소년 / 그 외 → 성인.
// else if에 "age >= 8" 을 또 쓰지 않아도 되는 이유 —
// 첫 조건(age < 8)에서 이미 걸러졌기 때문에, 여기 도착했다는 것 자체가
// '8살 이상'이라는 뜻이거든요. 위에서부터 차례로 검사하는 성질 덕분입니다.`;

const CODE_RIDE = `// 놀이기구 탑승 판별기 — 조건을 '말'로 먼저 쓰고, 코드로 옮긴다
// 말: "키가 120cm 이상 '그리고' 나이가 8살 이상이면 탈 수 있다"

let height = Number(prompt("키(cm)를 입력하세요:"));
let age = Number(prompt("나이를 입력하세요:"));

if (height >= 120 && age >= 8) {
  alert("탑승 가능합니다! 안전바를 꼭 잡으세요.");
} else {
  alert("아쉽지만 탑승할 수 없어요. 다음에 만나요!");
}

// 경계값을 직접 시험해 보세요.
// 키 딱 120, 나이 8  → 120 >= 120 은 true → 탑승 가능 (>= 는 '이상')
// 키 119.9, 나이 8   → false && true → 탑승 불가
// 키 150, 나이 7     → true && false → 탑승 불가 (&&는 둘 다 통과해야!)
//
// 만약 조건을 height > 120 으로 썼다면? 딱 120cm인 친구는 못 타요.
// '이상(>=)'과 '초과(>)'의 한 글자 차이가 현실의 한 사람을 가릅니다.`;

const CODE_PITFALL_ASSIGN = `// 함정 ①: = 를 하나만 쓴 비교 (일부러 틀린 코드)
let level = 1;

if (level = 5) {              // 비교가 아니라 '대입'이 되어 버림!
  console.log("최고 레벨!");   // 항상 실행됩니다
}

// level = 5 는 "level에 5를 넣어라"라는 뜻이고, 그 결과값 5는
// true 취급을 받아서 조건이 '항상 참'이 돼요. 게다가 level 값까지
// 5로 바뀌어 버리죠. 비교할 땐 반드시 === 세 개!
if (level === 5) { console.log("이게 진짜 비교"); }`;

const CODE_PITFALL_BRACES = `// 함정 ②: 중괄호를 생략했을 때의 착각 (일부러 헷갈리는 코드)
let isRaining = false;

if (isRaining)
  console.log("우산을 챙기세요.");
  console.log("장화도 신으세요.");   // 이 줄은 if와 무관하게 '항상' 실행!

// 들여쓰기가 같아서 둘 다 if에 묶인 것처럼 '보이지만',
// 중괄호가 없으면 if는 바로 다음 '한 줄'만 책임져요.
// 출력: 장화도 신으세요.  (비가 안 오는데도!)
//
// 해결: 한 줄이어도 무조건 중괄호로 묶는 습관
if (isRaining) {
  console.log("우산을 챙기세요.");
  console.log("장화도 신으세요.");
}`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'if 기본형' },
  { n: 3, label: 'else' },
  { n: 4, label: 'else if' },
  { n: 5, label: '비교·논리 연산자' },
  { n: 6, label: '실습: 탑승 판별기' },
  { n: 7, label: '흔한 함정' },
];

export default function Lv1ConditionalsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>🚦 조건문<br />— 컴퓨터가 판단하게 하기</h1>
        <p>
          지금까지 우리가 쓴 코드는 <strong>위에서 아래로 한 길</strong>만 걸었어요. 이번 시간엔
          그 길에 <strong>갈림길</strong>을 만듭니다. "만약 ~라면" 한마디, 즉{' '}
          <strong>조건문(if)</strong>을 배우면 프로그램이 상황을 보고{' '}
          <strong>스스로 길을 고르기</strong> 시작해요. 나이에 따라 요금을 다르게 알려 주는
          매표소 프로그램까지, 직접 만들어 봅시다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">실습: 매표소·놀이기구 판별기</span>
          <span className="chip">선수 지식: 변수와 자료형</span>
        </div>
      </div>

      {/* 섹션 바로가기 — 학습 포인트: SECTIONS 배열 하나로 목차를 그린다. 항목 추가도 배열 한 줄. */}
      <div className="chip-row">
        {SECTIONS.map((s) => (
          <a key={s.n} className="chip" href={`#sec-${s.n}`}>
            <b>{s.n}</b> {s.label}
          </a>
        ))}
      </div>

      <Section n={1} title="일상은 조건문 투성이" sub="'비가 오면 우산을 챙긴다'의 구조 분석">
        <p>
          코드를 보기 전에, 오늘 아침을 떠올려 보세요. 하늘을 보고 <strong>"비가 오면
          우산을 챙긴다"</strong>, 시계를 보고 "늦었으면 뛴다", 급식 메뉴를 보고 "돈가스면
          두 줄을 선다" — 우리는 하루에도 수십 번씩 <strong>조건을 보고 행동을 고르는 판단</strong>을
          해요. 이 문장들을 가만히 뜯어 보면 전부 같은 뼈대입니다.
        </p>
        <Code>{CODE_DAILY}</Code>
        <p>
          뼈대는 <strong>[조건] → [행동]</strong> 두 칸이에요. 앞 칸엔 "맞다/아니다"로 답할 수
          있는 <strong>질문</strong>이 오고, 뒤 칸엔 그 답이 "맞다"일 때 할 <strong>일</strong>이
          옵니다. 수학 시간에 순서도를 그려 봤다면 <strong>마름모</strong> 기억나죠? 판단을
          맡던 그 마름모가, 코드에서는 <span className="icode">if</span> 한 단어가 됩니다.
        </p>
        <div className="tip">
          <b>연습</b> 코드를 쓰기 전에, 오늘 내가 한 판단을 세 개만 "만약 ~라면, ~한다" 꼴로
          적어 보세요. 예: "만약 폰 배터리가 20% 아래라면, 충전기를 꽂는다." 이 문장을 쓸 수
          있다면 조건문의 절반은 이미 배운 거예요. 나머지 절반은 이걸 컴퓨터의 말투로 옮기는
          것뿐입니다.
        </div>
      </Section>

      <Section n={2} title="if 문 기본형" sub="조건이 true일 때만 실행되는 블록">
        <p>
          이제 컴퓨터의 말투로 옮겨 봅시다. 자바스크립트의 조건문은{' '}
          <span className="icode">if</span>로 시작하고, 생김새는 딱 세 부분이에요.
        </p>
        <Code>{CODE_IF_SHAPE}</Code>
        <p>
          괄호 안의 <strong>조건</strong>은 계산하면 반드시 <span className="icode">true</span>(참)
          아니면 <span className="icode">false</span>(거짓)가 되는 식이에요. 그리고 중괄호{' '}
          <span className="icode">{'{ }'}</span>로 묶인 부분을 <strong>블록(block)</strong>이라고
          부릅니다. "조건이 참이면 <strong>이 묶음을 통째로</strong> 실행해라"라는 단위죠.
          블록 안에는 한 줄이든 열 줄이든 넣을 수 있어요.
        </p>
        <Code>{CODE_IF_BASIC}</Code>
        <p>
          꼭 기억할 점: 조건이 <span className="icode">false</span>면 블록 안의 코드는{' '}
          <strong>실행되지 않고 건너뛰어질 뿐</strong>, 사라지는 게 아니에요. 프로그램은 블록
          다음 줄부터 아무 일 없었다는 듯 계속 갑니다. 위 예제에서 마지막 줄{' '}
          <span className="icode">"오늘도 좋은 하루!"</span>가 온도와 상관없이 항상 출력되는
          이유예요.
        </p>
        <div className="tip">
          <b>비유</b> if 블록은 <strong>지하철의 임산부 배려석 안내방송</strong> 같아요. 조건에
          해당하는 순간에만 "켜지는" 구역이죠. 방송이 안 나온다고 그 좌석이 없어진 게 아니듯,
          조건이 false라고 코드가 지워지는 게 아니라 <strong>이번엔 조용히 지나갈 뿐</strong>입니다.
        </div>
      </Section>

      <Section n={3} title="else: 아니면 이렇게" sub="두 갈래 중 반드시 하나만 실행된다">
        <p>
          "비가 오면 우산을 챙긴다"의 다음 문장은 자연스럽게 이거죠 — "<strong>아니면</strong>{' '}
          선크림을 바른다". 이 '아니면'이 바로 <span className="icode">else</span>입니다.{' '}
          <span className="icode">if</span> 뒤에 붙여서, 조건이 <span className="icode">false</span>일
          때 갈 <strong>두 번째 길</strong>을 만들어요. 변수 시간에 잠깐 만났던 나머지 연산자{' '}
          <span className="icode">%</span>를 다시 불러와서, 짝수/홀수 판별기를 만들어 봅시다.
        </p>
        <Code>{CODE_ELSE}</Code>
        <p>
          <span className="icode">if/else</span>의 성질 중 시험에 꼭 나오는 것 하나 —{' '}
          <strong>두 블록 중 반드시, 정확히 하나만 실행됩니다.</strong> 조건이 true면 if 블록,
          false면 else 블록. 둘 다 실행되는 경우도, 둘 다 건너뛰는 경우도 절대 없어요.
          갈림길에서 몸이 두 개로 나뉘거나 제자리에 멈추는 사람이 없는 것과 같죠.
        </p>
        <div className="tip">
          <b>% 복습</b> <span className="icode">a % b</span>는 a를 b로 나눈 <strong>나머지</strong>예요.{' '}
          <span className="icode">10 % 2</span>는 0, <span className="icode">7 % 2</span>는 1.
          "2로 나눈 나머지가 0이다"는 곧 "짝수다"라는 뜻이라, 짝수 판별의 단골 재료입니다.
          숫자를 바꿔 가며 <span className="icode">number % 3 === 0</span>(3의 배수 판별)도
          직접 시험해 보세요.
        </div>
      </Section>

      <Section n={4} title="else if: 여러 갈래" sub="위에서부터 차례로 검사한다">
        <p>
          갈림길이 항상 두 개인 건 아니에요. 점수로 등급을 나눈다면 A/B/C/재도전, 최소 네 갈래죠.
          이럴 때 <span className="icode">if</span>와 <span className="icode">else</span> 사이에{' '}
          <span className="icode">else if</span>를 끼워 넣어 <strong>사다리</strong>를 만듭니다.
        </p>
        <Code>{CODE_ELSEIF}</Code>
        <p>
          동작 규칙은 하나예요. <strong>위에서부터 차례로 조건을 검사하다가, 처음으로 true가
          나온 블록 하나만 실행하고 사다리 전체를 빠져나온다.</strong> 그래서 85점은{' '}
          <span className="icode">score &gt;= 80</span>에서 걸려 B가 되고, 그 아래{' '}
          <span className="icode">score &gt;= 70</span>은 검사조차 하지 않습니다. 마지막{' '}
          <span className="icode">else</span>는 "위의 어떤 조건에도 안 걸렸을 때"를 받아 주는
          안전망이고요.
        </p>
        <p>
          그런데 이 "위에서부터"라는 규칙 때문에, <strong>조건의 순서가 결과를 바꿀 수</strong>{' '}
          있어요. 사다리를 거꾸로 세우면 무슨 일이 벌어지는지 보세요.
        </p>
        <Code>{CODE_ELSEIF_ORDER}</Code>
        <p>
          이 성질을 잘 쓰면 오히려 코드가 짧아져요. 이 강좌의 목표였던{' '}
          <strong>매표소 프로그램</strong>이 좋은 예입니다. <span className="icode">prompt</span>로
          나이를 물어보고, 사다리로 요금을 나눠 봅시다.
        </p>
        <Code>{CODE_TICKET}</Code>
        <div className="tip">
          <b>직접 실행해 보기</b> 브라우저에서 <strong>F12 → Console</strong> 탭을 열고 위
          매표소 코드를 붙여 넣어 보세요. 입력창이 뜨면 7, 15, 25를 차례로 넣어 보고, 경계인
          8과 20도 꼭 시험해 보세요. 8은 "8 미만"이 아니니 청소년 요금, 20은 "20 미만"이
          아니니 성인 요금 — 예상과 같았나요?
        </div>
      </Section>

      <Section n={5} title="비교와 논리 연산자" sub="=(넣기)와 ===(비교하기)는 완전히 다르다">
        <p>
          조건문 괄호 안에는 결국 <strong>비교하는 식</strong>이 들어가요. 그런데 여기서 초보
          때 가장 크게 데이는 지점이 있습니다. <span className="icode">=</span> 하나는{' '}
          <strong>넣기(대입)</strong>, <span className="icode">===</span> 세 개는{' '}
          <strong>비교하기</strong> — 생김새만 닮은 남남이에요.
        </p>
        <Code>{CODE_COMPARE}</Code>
        <p>
          비교식의 답은 언제나 <span className="icode">true</span> 아니면{' '}
          <span className="icode">false</span>, 두 가지뿐입니다. 그럼 조건이 <strong>여러 개</strong>일
          땐 어떻게 할까요? "키도 되고 <strong>그리고</strong> 나이도 되면" 같은 문장을 위해{' '}
          <strong>논리 연산자</strong>가 있어요.
        </p>
        <Code>{CODE_LOGICAL}</Code>
        <p>
          정리하면 — <span className="icode">&amp;&amp;</span>(그리고)는 <strong>둘 다</strong> true여야
          true, <span className="icode">||</span>(또는)는 <strong>하나라도</strong> true면 true,{' '}
          <span className="icode">!</span>(부정)는 true/false를 <strong>뒤집기</strong>. 우리말
          "그리고 / 또는 / 아니다"에 하나씩 대응하니, 조건을 말로 먼저 써 보면 어떤 연산자를
          쓸지 저절로 보입니다.
        </p>
        <div className="tip">
          <b>기억법</b> <span className="icode">&amp;&amp;</span>는 <strong>깐깐한 심사위원 둘</strong> —
          둘 다 합격을 줘야 통과. <span className="icode">||</span>는 <strong>문이 두 개인 교실</strong> —
          아무 문으로나 들어오면 출석. <span className="icode">!</span>는 <strong>반대로 말하는
          청개구리</strong> — 참을 거짓으로, 거짓을 참으로.
        </div>
      </Section>

      <Section n={6} title="실습: 놀이기구 탑승 판별기" sub="조건을 말로 먼저 쓰고, 코드로 옮기기">
        <p>
          배운 걸 전부 모아 봅시다. 놀이공원의 탑승 기준은 보통 이래요 — "<strong>키 120cm
          이상, 그리고 나이 8살 이상</strong>이면 탑승 가능". 코드부터 치지 말고, 이렇게{' '}
          <strong>조건을 우리말 문장으로 먼저</strong> 써 보세요. '그리고'가 보이면{' '}
          <span className="icode">&amp;&amp;</span>, '또는'이 보이면 <span className="icode">||</span> —
          번역은 그다음입니다.
        </p>
        <Code>{CODE_RIDE}</Code>
        <p>
          실습에서 제일 중요한 건 <strong>경계값 시험</strong>이에요. 키가 넉넉히 크거나 한참
          작은 경우는 누가 짜도 맞아요. 버그는 늘 <strong>딱 120cm, 딱 8살</strong> 같은
          경계에서 태어납니다. <span className="icode">&gt;=</span>(이상)와{' '}
          <span className="icode">&gt;</span>(초과)의 한 글자 차이로 딱 120cm인 친구가 타느냐
          못 타느냐가 갈리니까요. 프로그램을 만들면 반드시 경계값을 넣어 보는 습관 —
          이게 개발자의 기본기입니다.
        </p>
        <div className="tip">
          <b>도전 과제</b> 판별기를 업그레이드해 보세요. ① 키는 되는데 나이만 안 될 때
          "보호자와 함께라면 탑승 가능"이라고 안내하기(<span className="icode">else if</span>{' '}
          사다리 추가). ② "140cm 미만 <strong>또는</strong> 65세 이상이면 안전벨트 보조 좌석
          안내"처럼 <span className="icode">||</span>를 쓰는 조건 하나 더하기. 말로 쓰고 →
          연산자 고르고 → 코드로 옮기고 → 경계값 시험, 네 박자를 지켜 보세요.
        </div>
      </Section>

      <Section n={7} title="흔한 함정 모음" sub="선배들이 다 밟아 본 지뢰 세 개">
        <p>
          마지막으로, 조건문을 배운 사람이라면 <strong>거의 예외 없이 한 번씩 밟는 지뢰</strong>를
          미리 구경해 둡시다. 미리 본 지뢰는 지뢰가 아니에요.
        </p>
        <p>
          <strong>지뢰 ① — 비교한다면서 <span className="icode">=</span>를 하나만 쓴다.</strong>{' '}
          대입이 되어 버려서 조건이 항상 참이 되고, 변수 값까지 바뀝니다. 에러도 안 나서 더
          무서워요.
        </p>
        <Code>{CODE_PITFALL_ASSIGN}</Code>
        <p>
          <strong>지뢰 ② — <span className="icode">==</span>와 <span className="icode">===</span> 사이에서
          헤맨다.</strong> 자바스크립트엔 등호 두 개짜리 비교(<span className="icode">==</span>)도
          있는데, 이 녀석은 비교 전에 값의 형태를 몰래 바꿔서(예: 글자{' '}
          <span className="icode">"5"</span>와 숫자 <span className="icode">5</span>를 같다고 판정)
          예상 밖의 결과를 만들곤 해요. 규칙을 다 외우는 대신, 우리는 간단한 회피법을 씁니다 —{' '}
          <strong>비교는 언제나 <span className="icode">===</span>와{' '}
          <span className="icode">!==</span>로 통일.</strong> 실무 팀들도 대부분 이 규칙을 써요.
        </p>
        <p>
          <strong>지뢰 ③ — 중괄호를 생략했다가 착각에 빠진다.</strong> 중괄호 없는 if는 바로
          다음 <strong>한 줄만</strong> 책임져요. 들여쓰기를 아무리 맞춰도 소용없습니다.
        </p>
        <Code>{CODE_PITFALL_BRACES}</Code>
        <div className="tip">
          <b>한 줄 요약 세 개</b> 비교는 <span className="icode">===</span> 세 개(넣기는{' '}
          <span className="icode">=</span> 하나) · <span className="icode">==</span>는 쓰지 않고{' '}
          <span className="icode">===</span>로 통일 · if 블록은 한 줄이라도{' '}
          <strong>중괄호로 묶는다</strong>. 이 세 습관만 있어도 조건문 버그의 대부분을
          예방할 수 있어요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🚦 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분의 프로그램은 <strong>외길이 아니에요.</strong> "만약 ~라면"으로 갈림길을
            만들고(if), "아니면"으로 두 번째 길을 놓고(else), 사다리로 여러 갈래를 나누고(else
            if), <span className="icode">===</span>·<span className="icode">&amp;&amp;</span>·
            <span className="icode">||</span>로 조건을 정확히 표현하는 법까지 — 컴퓨터에게{' '}
            <strong>판단을 맡기는 도구</strong>를 손에 쥐었습니다. 그런데 매표소 프로그램을
            손님 100명에게 쓰려면 100번 실행해야 할까요? 똑같은 일을{' '}
            <strong>지루해하지 않고 반복하는 것</strong>이야말로 컴퓨터가 제일 잘하는 일이에요.
            다음 <Link to="/learn/lv1-loops"><strong>반복문: 지루한 일은 컴퓨터에게</strong></Link>{' '}
            강좌에서, 갈림길에 이어 <strong>순환로</strong>를 놓아 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
