// 이 파일이 하는 일: "함수: 나만의 명령어 만들기" 코스 — 코딩을 처음 배우는 사람에게
// '코드 묶음에 이름을 붙여 재사용한다'는 함수의 핵심을 7개 섹션으로 안내하는 정적 학습 페이지.
// 정의와 호출의 구분 → 매개변수 → return → 작은 함수의 조합 → 스코프 맛보기 순서로 올라가,
// 마지막 실습(미니 계산기 함수 4종)에서 지금까지의 개념을 전부 한 번에 조립하게 한다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_REPEAT = `// 함수가 없다면 — 같은 인사를 세 번 하려면 세 번 다 써야 해요
console.log('안녕하세요!');
console.log('오늘도 코딩하러 오셨군요.');

console.log('안녕하세요!');
console.log('오늘도 코딩하러 오셨군요.');

console.log('안녕하세요!');
console.log('오늘도 코딩하러 오셨군요.');

// 문장을 바꾸고 싶으면? 세 군데를 전부 고쳐야 합니다.
// 한 군데라도 빼먹으면 인사가 서로 달라져 버려요.`;

const CODE_REPEAT_FN = `// 함수가 있다면 — 코드 묶음에 '이름'을 붙여 두고, 이름만 부르면 끝
function greet() {
  console.log('안녕하세요!');
  console.log('오늘도 코딩하러 오셨군요.');
}

greet();   // 첫 번째 인사
greet();   // 두 번째 인사
greet();   // 세 번째 인사

// 문장을 바꾸고 싶으면? 함수 안 딱 한 군데만 고치면
// 세 번의 인사가 전부 한꺼번에 바뀝니다.`;

const CODE_DEFINE_CALL = `// ① 정의 — "이런 일을 하는 명령어를 greet라고 부르겠다"고 등록만 한 상태
function greet() {
  console.log('안녕하세요!');
}
// 여기까지 실행해도 화면엔 아무것도 안 나와요. 아직 '부르지' 않았으니까요.

// ② 호출 — 이름 뒤에 괄호를 붙여야 비로소 실행됩니다
greet();     // → 안녕하세요!
greet();     // → 안녕하세요! (몇 번이든 다시 부를 수 있어요)

// 괄호가 핵심이에요.
greet;       // 이름만 적으면? 실행되지 않아요. 리모컨을 들고만 있는 것.
greet();     // 괄호를 붙여야 실행. 리모컨의 버튼을 '누른' 것.`;

const CODE_PARAMS = `// 매개변수 — 함수에 뚫어 둔 '입력 구멍'
function greet(name) {          // name이 매개변수(재료를 받는 자리)
  console.log(name + '님, 안녕하세요!');
}

greet('지민');   // → 지민님, 안녕하세요!
greet('하늘');   // → 하늘님, 안녕하세요!
greet('선생님'); // → 선생님님... 아, 이건 좀 어색하네요 :)

// 호출할 때 괄호 안에 넣는 실제 값('지민')을 '인자'라고 불러요.
// 매개변수 = 구멍의 이름, 인자 = 구멍에 실제로 넣는 재료.`;

const CODE_PARAMS_MANY = `// 매개변수는 쉼표로 여러 개 받을 수 있어요 — 순서가 곧 약속입니다
function introduce(name, age) {
  console.log('저는 ' + name + '이고, ' + age + '살입니다.');
}

introduce('지민', 17);   // → 저는 지민이고, 17살입니다.
introduce(17, '지민');   // → 저는 17이고, 지민살입니다. (순서를 바꾸면 엉망!)

// 첫 번째 인자는 첫 번째 매개변수로, 두 번째는 두 번째로.
// 함수는 순서만 보고 재료를 나눠 갖기 때문에, 순서가 어긋나면
// 에러 없이 '이상한 결과'가 나와요. 이런 버그가 제일 찾기 어렵습니다.`;

const CODE_RETURN = `// console.log는 '화면에 보여 주기', return은 '값을 돌려주기' — 완전히 달라요
function addAndShow(a, b) {
  console.log(a + b);   // 화면에 출력만 하고, 아무것도 돌려주지 않음
}

function add(a, b) {
  return a + b;         // 계산 결과를 '부른 쪽'에 돌려줌
}

const shown = addAndShow(3, 4);  // 화면엔 7이 찍히지만...
console.log(shown);              // → undefined (돌려받은 게 없어요)

const result = add(3, 4);        // 화면엔 아무것도 안 찍히지만...
console.log(result);             // → 7 (값을 돌려받아 변수에 담았어요)
console.log(result * 10);        // → 70 (돌려받은 값은 이어서 쓸 수 있죠!)`;

const CODE_RETURN_STOP = `// return을 만나면 함수는 그 자리에서 '즉시' 끝납니다
function checkAge(age) {
  if (age < 0) {
    return '나이는 음수가 될 수 없어요';   // 여기서 함수 끝!
  }
  return age + '살이시군요';               // 위에서 안 끝났을 때만 도착
}

console.log(checkAge(-5));   // → 나이는 음수가 될 수 없어요
console.log(checkAge(17));   // → 17살이시군요

function afterReturn() {
  return '여기까지만 실행돼요';
  console.log('이 줄은 영원히 실행되지 않습니다');   // 죽은 코드
}`;

const CODE_COMPOSE = `// 큰 함수 하나보다, 작은 함수 여러 개 — 함수가 함수를 부를 수 있어요
function toKorean(score) {
  if (score >= 90) { return '수'; }
  if (score >= 80) { return '우'; }
  return '미';
}

function makeReport(name, score) {
  const grade = toKorean(score);       // 함수 안에서 다른 함수를 호출!
  return name + ': ' + score + '점 (' + grade + ')';
}

console.log(makeReport('지민', 95));   // → 지민: 95점 (수)
console.log(makeReport('하늘', 82));   // → 하늘: 82점 (우)

// makeReport는 '등급 계산법'을 몰라도 돼요. toKorean에게 맡기니까.
// 등급 기준이 바뀌면? toKorean 한 곳만 고치면 됩니다.`;

const CODE_NAMING = `// 이름만 봐도 하는 일이 보이게 — 함수 이름은 보통 '동사'로 시작해요
function getTotal(a, b) { return a + b; }        // 가져온다(get)
function showWelcome(name) { alert(name + '님 환영!'); } // 보여준다(show)
function isAdult(age) { return age >= 20; }      // 맞는지 묻는다(is)

// 나쁜 이름의 예 — 코드를 다 읽어야만 무슨 일을 하는지 알 수 있어요
function a1(x, y) { return x + y; }     // a1이 뭘 하는 함수죠...?
function doStuff(n) { return n >= 20; } // stuff(뭔가)는 이름이 아니에요

// 좋은 이름은 공짜 설명서입니다. 두 달 뒤의 나도, 옆자리 동료도
// 함수 속을 열어 보지 않고 이름만으로 쓸 수 있게 해 주죠.`;

const CODE_SCOPE = `// 함수 안에서 만든 변수는 밖에서 '안 보여요' — 이 담장을 스코프라고 해요
function makeSecret() {
  const secret = '함수 안의 비밀';   // 지역 변수: 이 함수 담장 안에서만 삶
  console.log(secret);              // 담장 안이니까 OK
}

makeSecret();          // → 함수 안의 비밀
console.log(secret);   // → 에러! secret is not defined (담장 밖에선 안 보임)

// 반대 방향은 보여요 — 담장 안에서 밖(전역)은 내다볼 수 있어요
const school = '미림';              // 전역 변수: 어디서든 보임

function whereAmI() {
  console.log(school + '에서 공부 중');   // 밖의 변수를 읽는 건 OK
}
whereAmI();            // → 미림에서 공부 중`;

const CODE_CALC = `// 실습: 미니 계산기 — 지금까지 배운 것이 전부 모이는 순간
// 함수 정의 + 매개변수 + return + 조합 + 조건문, 다 들어 있어요.

// ① 작은 함수 4종 — 하나가 하나의 연산만 책임집니다
function add(a, b)      { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }
function divide(a, b) {
  if (b === 0) { return '0으로는 나눌 수 없어요'; }   // 방어부터!
  return a / b;
}

// ② 지휘자 함수 — 기호를 보고 알맞은 작은 함수를 골라 부릅니다
function calculate(a, b, op) {
  if (op === '+') { return add(a, b); }
  if (op === '-') { return subtract(a, b); }
  if (op === '*') { return multiply(a, b); }
  if (op === '/') { return divide(a, b); }
  return '모르는 기호예요: ' + op;
}

// ③ 사용자에게 재료 받기 — prompt는 항상 '문자열'을 주는 걸 잊지 마세요
const a = Number(prompt('첫 번째 숫자는?'));
const b = Number(prompt('두 번째 숫자는?'));
const op = prompt('연산 기호는? (+, -, *, /)');

const result = calculate(a, b, op);
alert(a + ' ' + op + ' ' + b + ' = ' + result);`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'return' },
  { n: 5, label: '함수 조합' },
  { n: 6, label: '스코프 맛보기' },
  { n: 7, label: '실습: 계산기' },
];

export default function Lv1FunctionsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>함수 🧰<br />— 나만의 명령어 만들기</h1>
        <p>
          지금까지는 코드를 위에서 아래로 한 줄씩 써 왔어요. 그런데 같은 일을 세 번 하려면
          같은 코드를 세 번 써야 할까요? <strong>함수</strong>는 자주 쓰는 코드 묶음에{' '}
          <strong>이름을 붙여 두고 언제든 다시 부르는</strong> 방법이에요. 이걸 익히는 순간,
          코드를 '쓰는' 사람에서 코드를 <strong>'조립하는'</strong> 사람으로 한 단계 올라섭니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 70분</span>
          <span className="chip">실습: 미니 계산기 함수 만들기</span>
          <span className="chip">선수 지식: 변수·조건문</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>
          함수를 한 문장으로 말하면 이래요. <strong>"여러 줄의 코드를 하나로 묶고, 그 묶음에
          이름을 붙인 것."</strong> 전자레인지의 <strong>'데우기' 버튼</strong>을 떠올려 보세요.
          버튼 하나를 누르면 안에서는 마그네트론을 켜고, 접시를 돌리고, 시간을 재는 복잡한
          일들이 벌어지죠. 하지만 우리는 그 과정을 몰라도 됩니다. <strong>버튼(이름)만 누르면</strong>{' '}
          약속된 일이 통째로 일어나니까요.
        </p>
        <p>먼저, 함수가 없는 세상이 얼마나 고단한지부터 볼게요.</p>
        <Code>{CODE_REPEAT}</Code>
        <p>
          복사-붙여넣기로 버틸 수는 있어요. 하지만 인사말을 바꾸는 순간 지옥이 시작됩니다.
          세 군데, 열 군데, 백 군데를 <strong>전부 똑같이</strong> 고쳐야 하니까요. 함수는 이
          반복을 한 방에 해결합니다.
        </p>
        <Code>{CODE_REPEAT_FN}</Code>
        <p>
          <strong>한 번 만들면 몇 번이든 재사용</strong> — 이게 함수의 첫 번째 선물이에요.
          그리고 놀라운 사실 하나. 여러분이 지금까지 써 온{' '}
          <span className="icode">console.log()</span>와 <span className="icode">alert()</span>,{' '}
          <span className="icode">prompt()</span>도 <strong>전부 함수였습니다.</strong> 자바스크립트를
          만든 사람들이 "화면에 글자 찍기" 같은 자주 쓰는 일을 미리 함수로 만들어 둔 거예요.
          이름 뒤에 괄호가 붙어 있었던 게 바로 그 증거죠.
        </p>
        <div className="tip">
          <b>관점의 전환</b> 오늘부터 여러분은 남이 만든 명령어를 <strong>쓰기만 하는</strong>{' '}
          사람이 아니라, 나만의 명령어를 <strong>만드는</strong> 사람이 됩니다.{' '}
          <span className="icode">console.log</span>를 만든 사람들과 같은 도구를 손에 쥐는 거예요.
        </div>
      </Section>

      <Section n={2} title="함수 만들고 부르기" sub="정의만 하면 실행되지 않는다 — 호출이 필요">
        <p>
          함수를 만드는 문법은 딱 네 조각이에요. <span className="icode">function</span> 키워드,{' '}
          <strong>이름</strong>, <strong>괄호 ( )</strong>, 그리고 코드를 담는{' '}
          <strong>중괄호</strong>. 이렇게 함수를 만드는 걸 <strong>정의(definition)</strong>라고
          부릅니다.
        </p>
        <Code>{CODE_DEFINE_CALL}</Code>
        <p>
          여기서 초보 때 <strong>가장 많이 헷갈리는 지점</strong>이 나와요. 함수를{' '}
          <strong>정의만 해서는 아무 일도 일어나지 않습니다.</strong> 정의는 "이런 명령어를
          등록해 둘게"라는 <strong>예약</strong>일 뿐이에요. 실제로 실행하려면 이름 뒤에 괄호를
          붙여 <strong>호출(call)</strong>해야 합니다. 요리로 비유하면 정의는{' '}
          <strong>레시피를 적어 두는 것</strong>이고, 호출은 그 레시피대로{' '}
          <strong>실제로 요리하는 것</strong>이에요. 레시피를 백 장 적어도 요리하지 않으면
          아무도 못 먹죠.
        </p>
        <div className="tip">
          <b>정의와 호출을 구분하는 눈</b> 코드를 읽다가 <span className="icode">function</span>{' '}
          키워드가 보이면 "아, 여긴 <strong>레시피를 적는 곳</strong>이구나(아직 실행 아님)",
          이름 뒤에 <span className="icode">()</span>가 붙어 있으면 "여기서{' '}
          <strong>실제로 실행되는구나</strong>" — 이 두 가지를 즉시 구분할 수 있으면 이 섹션은
          합격입니다. "코드를 썼는데 왜 아무 일도 안 일어나죠?"라는 질문의 답은 십중팔구
          "호출을 안 하셨어요"거든요.
        </div>
      </Section>

      <Section n={3} title="재료 넣기: 매개변수" sub="함수에 뚫어 둔 입력 구멍">
        <p>
          섹션 2의 <span className="icode">greet()</span>는 항상 <strong>똑같은 인사</strong>만
          해요. 그런데 사람마다 이름을 불러 주며 인사하고 싶다면? 사람 수만큼 함수를 만들 수는
          없잖아요. 그래서 함수에는 <strong>재료를 받는 입력 구멍</strong>을 뚫을 수 있는데,
          이 구멍을 <strong>매개변수(parameter)</strong>라고 부릅니다.
        </p>
        <Code>{CODE_PARAMS}</Code>
        <p>
          자판기를 떠올려 보세요. 자판기(함수)에는 동전 넣는 구멍(매개변수)이 있고, 우리가
          실제로 넣는 500원짜리 동전이 <strong>인자(argument)</strong>예요. 같은 자판기라도
          어떤 동전과 버튼이냐에 따라 다른 음료가 나오듯, 같은 함수라도{' '}
          <strong>어떤 인자를 넣느냐에 따라 다른 결과</strong>가 나옵니다.
        </p>
        <p>구멍은 쉼표로 구분해서 여러 개 뚫을 수도 있어요. 단, <strong>순서</strong>가 중요합니다.</p>
        <Code>{CODE_PARAMS_MANY}</Code>
        <div className="tip">
          <b>용어 정리</b> <strong>매개변수</strong>는 함수를 정의할 때 괄호 안에 적는{' '}
          <strong>변수 이름</strong>(<span className="icode">name</span>,{' '}
          <span className="icode">age</span>), <strong>인자</strong>는 호출할 때 실제로 넣는{' '}
          <strong>값</strong>(<span className="icode">'지민'</span>,{' '}
          <span className="icode">17</span>)이에요. 처음엔 섞어 불러도 괜찮지만, "구멍과 재료는
          다르다"는 감각만은 가져가세요.
        </div>
      </Section>

      <Section n={4} title="결과 돌려받기: return" sub="화면에 보여 주기와 값을 돌려주기는 다르다">
        <p>
          지금까지의 함수는 결과를 <span className="icode">console.log</span>로{' '}
          <strong>화면에 찍기만</strong> 했어요. 그런데 계산 결과를 <strong>받아서 이어서
          쓰고 싶다면</strong> 어떡할까요? 예를 들어 더한 값에 다시 10을 곱하고 싶다면요.
          이때 필요한 것이 <strong><span className="icode">return</span>(반환)</strong>입니다.
        </p>
        <Code>{CODE_RETURN}</Code>
        <p>
          이 차이를 심부름으로 비유하면 이래요. <span className="icode">console.log</span>만 하는
          함수는 심부름꾼이 결과를 <strong>소리 내어 외치고 그냥 가 버리는 것</strong> — 듣긴
          했지만 손에 쥔 건 없어요. <span className="icode">return</span>하는 함수는 결과를{' '}
          <strong>내 손에 건네주고 가는 것</strong> — 받은 값을 변수에 담아 두고두고 쓸 수
          있습니다. 그래서 돌려받은 게 없는 함수의 결과를 변수에 담으면{' '}
          <span className="icode">undefined</span>(정해진 값 없음)가 나오는 거예요.
        </p>
        <p>
          <span className="icode">return</span>에는 성질이 하나 더 있어요.{' '}
          <strong>return을 만나는 순간 함수는 즉시 끝납니다.</strong> 그 아래 줄이 몇 줄이든
          전부 무시돼요.
        </p>
        <Code>{CODE_RETURN_STOP}</Code>
        <div className="tip">
          <b>즉시 종료를 역이용하기</b> 위 <span className="icode">checkAge</span>처럼 "이상한
          입력이면 <strong>먼저 return으로 내보내고</strong>, 정상 입력만 아래로 통과시키는"
          패턴을 실무에서 정말 많이 써요. 조건문을 깊게 겹치지 않아도 되니 코드가 계단이 아니라
          평지처럼 읽히거든요. 섹션 7의 <span className="icode">divide</span> 함수에서 다시
          만나게 됩니다.
        </div>
      </Section>

      <Section n={5} title="작은 함수를 조합하기" sub="함수가 함수를 부를 수 있다">
        <p>
          함수를 배우면 이런 욕심이 생겨요. "그럼 프로그램 전체를 <strong>거대한 함수
          하나</strong>에 다 넣으면 되겠네?" — 돌아가긴 합니다. 하지만 좋은 개발자는 반대로
          갑니다. <strong>큰 함수 하나보다, 한 가지 일만 잘하는 작은 함수 여러 개.</strong>{' '}
          레고 성을 통짜 플라스틱으로 찍지 않고 작은 블록으로 쌓는 것과 같은 이유예요 —
          블록이 작아야 고치기도, 다시 쓰기도 쉬우니까요.
        </p>
        <p>그리고 함수 안에서는 <strong>다른 함수를 부를 수 있습니다.</strong> 이게 조립의 핵심이에요.</p>
        <Code>{CODE_COMPOSE}</Code>
        <p>
          <span className="icode">makeReport</span>는 등급을 <strong>어떻게</strong> 매기는지
          몰라요. 그 일은 <span className="icode">toKorean</span>에게 맡기고, 자기는 문장을
          만드는 일만 하죠. 이렇게 <strong>일을 나누면 고칠 곳도 하나로 모입니다.</strong> 등급
          기준이 바뀌어도 <span className="icode">toKorean</span> 한 곳만 고치면, 그 함수를 쓰는
          모든 곳이 함께 바뀌어요.
        </p>
        <p>
          조립이 잘 되려면 조건이 하나 있어요. <strong>이름만 봐도 하는 일을 알 수 있어야</strong>{' '}
          합니다. 부품 상자에서 이름표 없는 부품을 뒤지는 건 고문이니까요.
        </p>
        <Code>{CODE_NAMING}</Code>
        <div className="tip">
          <b>이름 짓기 요령</b> 함수는 '일'을 하니까 이름이 보통 <strong>동사로 시작</strong>해요.
          값을 돌려주면 <span className="icode">get~</span>, 화면에 보여 주면{' '}
          <span className="icode">show~</span>, 참/거짓을 돌려주면{' '}
          <span className="icode">is~</span>. 이 세 가지 접두어만 익혀도 여러분의 코드는 남이
          읽을 수 있는 코드가 됩니다.
        </div>
      </Section>

      <Section n={6} title="변수가 사는 곳: 스코프 맛보기" sub="함수 안의 변수는 밖에서 안 보인다">
        <p>
          함수를 쓰다 보면 곧 이런 에러를 만나요. "함수 안에서 만든 변수를 밖에서 썼더니{' '}
          <span className="icode">not defined</span>래요!" — 고장이 아니라 <strong>규칙</strong>입니다.
          변수에게는 <strong>자기가 사는 동네</strong>가 있는데, 이 동네의 경계를{' '}
          <strong>스코프(scope)</strong>라고 불러요.
        </p>
        <Code>{CODE_SCOPE}</Code>
        <p>
          규칙은 두 줄로 요약돼요. <strong>① 함수 안(지역)에서 만든 변수는 그 함수 밖에서
          안 보인다. ② 함수 밖(전역)에서 만든 변수는 함수 안에서도 보인다.</strong> 담장 안의
          사람은 담장 밖 풍경을 내다볼 수 있지만, 밖에서는 담장 안이 안 보이는 것과 같아요.
          그래서 함수 밖 세상을 <strong>전역(global)</strong>, 함수 담장 안을{' '}
          <strong>지역(local)</strong>이라고 부릅니다.
        </p>
        <p>
          "왜 이런 벽을 만들었을까?" 불편해 보이지만 사실은 <strong>보호막</strong>이에요.
          함수마다 담장이 있으니, 내 함수 안의 <span className="icode">result</span>와 남의 함수
          안의 <span className="icode">result</span>가 <strong>이름이 같아도 서로 안 부딪혀요.</strong>{' '}
          담장이 없다면 프로그램 전체에서 변수 이름이 절대 겹치지 않게 관리해야 할 텐데, 함수가
          수백 개쯤 되면 그건 불가능하죠.
        </p>
        <div className="tip">
          <b>오늘은 여기까지만</b> 스코프는 파고들면 꽤 깊은 주제예요(블록 스코프, 클로저...).
          지금은 <strong>"함수 안에서 만든 건 밖에서 안 보인다"</strong> 하나만 몸에 새기면
          충분합니다. 이 감각 하나가 앞으로 만날 수많은{' '}
          <span className="icode">not defined</span> 에러의 절반을 설명해 줘요.
        </div>
      </Section>

      <Section n={7} title="실습: 미니 계산기 함수 4종" sub="지금까지 배운 개념이 전부 모이는 순간">
        <p>
          이제 배운 것을 전부 조립할 시간이에요. 목표는{' '}
          <strong>숫자 2개와 연산 기호를 받아 결과를 돌려주는 계산기</strong>. 더하기·빼기·
          곱하기·나누기라는 <strong>작은 함수 4개</strong>를 먼저 만들고, 조건문으로 알맞은
          함수를 골라 부르는 <strong>지휘자 함수</strong> 하나로 묶습니다.
        </p>
        <Code>{CODE_CALC}</Code>
        <p>
          코드를 뜯어보면 이번 코스의 모든 조각이 보여요. <strong>① 정의와 호출</strong> —
          작은 함수 4개를 정의해 두고 <span className="icode">calculate</span>가 호출하죠.{' '}
          <strong>② 매개변수</strong> — <span className="icode">a, b, op</span> 세 개의 구멍으로
          재료를 받고요. <strong>③ return</strong> — 모든 함수가 결과를 돌려주니 변수에 담아
          이어서 쓸 수 있어요. <strong>④ 조합</strong> — 지휘자가 작은 함수들을 부리고,{' '}
          <strong>⑤ 즉시 종료</strong> — <span className="icode">divide</span>는 0으로 나누는
          이상한 입력을 return으로 먼저 내보냅니다.
        </p>
        <p>
          한 가지 복병이 있어요. <span className="icode">prompt()</span>는 사용자가 무엇을
          입력하든 <strong>문자열</strong>을 돌려줍니다. 그대로 더하면{' '}
          <span className="icode">'3' + '4'</span>는 <span className="icode">'34'</span>가 돼
          버려요. 그래서 <span className="icode">Number()</span>라는 (이것도 함수!) 변환기를
          한 번 거쳐 진짜 숫자로 바꾼 다음 계산에 넣습니다.
        </p>
        <div className="tip">
          <b>직접 해 보기</b> 브라우저에서 <span className="icode">F12</span>를 눌러 콘솔을 열고
          위 코드를 붙여 넣어 보세요. 잘 돌아가면 도전 과제 세 개 — ① 나머지(
          <span className="icode">%</span>) 연산 함수를 추가해 보기, ② 연산 기호를 잘못 넣었을
          때의 안내 문구를 더 친절하게 바꿔 보기, ③ <span className="icode">isNaN()</span>으로
          숫자가 아닌 입력을 걸러내 보기. ③까지 하면 여러분의 계산기는 어지간한 장난에도
          안 무너지는, 꽤 단단한 프로그램이 됩니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🧰 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 <strong>나만의 명령어를 만드는 사람</strong>이에요. 코드 묶음에 이름을
            붙이고(정의), 필요할 때 부르고(호출), 재료를 넣고(매개변수), 결과를 돌려받고(return),
            작은 함수들을 조립해 계산기까지 완성했습니다. <span className="icode">console.log</span>가
            사실 함수였다는 걸 아는 사람과 모르는 사람의 코드는 이제부터 점점 달라져요. 그런데
            계산기를 만들며 빨간 에러 글씨를 몇 번 만나지 않으셨나요? 그 빨간 글씨는 사실 적이
            아니라 <strong>가장 친절한 힌트</strong>입니다. 다음{' '}
            <Link to="/learn/lv1-reading-errors"><strong>에러와 친해지기: 빨간 글씨 해독법</strong></Link>{' '}
            코스에서, 에러 메시지를 읽고 스스로 고치는 법을 이어서 익혀 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
