// 이 파일이 하는 일: "나의 첫 JavaScript" 코스 — 코딩을 한 번도 안 해 본 사람이
// 브라우저 콘솔에서 첫 코드를 실행하고, HTML에 스크립트를 연결하고, alert/prompt로
// 페이지와 '대화'하고, 버튼 클릭에 반응시키기까지 7개 섹션으로 안내하는 정적 학습 페이지.
// 프레이밍은 "멈춰 있던 페이지가 말을 걸기 시작한다" — HTML/CSS로 그려 둔 화면에
// 처음으로 '움직임'을 불어넣는 짜릿함을 몸으로 겪게 하는 것이 목표다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 예제 코드 상수들 ──
// 학습 포인트: 초심자 예제라 템플릿 리터럴 대신 + 로 문자열을 잇는다(따옴표 규칙에 집중시키기 위해).

const CODE_TRIO = `HTML ──────────── CSS ──────────── JavaScript
(뼈대)              (꾸밈)              (움직임)

글·버튼·사진을        색·크기·배치를        클릭에 반응하고
화면에 '놓는다'       '입힌다'             팝업을 띄우고
                                        계산을 '한다'

핵심: HTML과 CSS만으로 만든 페이지는 예쁜 '포스터'예요.
움직이지도, 대답하지도 않죠. 거기에 JavaScript가 들어가는 순간
페이지가 여러분의 클릭을 알아채고, 말을 걸고, 계산까지 해 줍니다.`;

const CODE_FIRST_LOG = `// 콘솔에 아래 한 줄을 입력하고 Enter를 눌러 보세요.
console.log("안녕!");

// 결과: 콘솔에  안녕!  이 출력됩니다.
// 방금 여러분은 컴퓨터에게 처음으로 '명령'을 내렸어요.
// console.log( ... ) 는 "괄호 안의 내용을 콘솔에 적어 줘"라는 뜻입니다.`;

const CODE_QUOTES = `console.log("안녕!");     // O — 글자는 따옴표로 감싼다
console.log('안녕!');     // O — 작은따옴표도 똑같이 동작한다
console.log(안녕!);       // X — 따옴표가 없으면 에러!

// 따옴표로 감싼 글자를 '문자열(string)'이라고 불러요.
// 따옴표가 없으면 컴퓨터는 "안녕이라는 이름의 무언가를 찾아라"로
// 오해하고, 그런 건 없으니 빨간 에러를 냅니다.

console.log("안녕!")      // 세미콜론(;)이 없어도 대부분 동작하지만,
console.log("안녕!");     // "이 문장 여기서 끝!"이라는 마침표로 붙이는 습관을 들여요.`;

const CODE_SCRIPT_IN_HTML = `<!DOCTYPE html>
<html>
  <head>
    <title>나의 첫 JavaScript</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>

    <!-- script 태그 안이 JavaScript의 자리예요 -->
    <script>
      console.log("HTML 안에서 실행됐어요!");
    </script>
  </body>
</html>`;

const CODE_SCRIPT_SRC = `<!-- 코드가 길어지면 별도 .js 파일로 분리해요 -->
<body>
  <h1>안녕하세요!</h1>

  <!-- src 속성으로 파일을 불러옵니다. CSS를 link로 거는 것과 같은 발상! -->
  <script src="app.js"></script>
</body>

<!-- app.js (같은 폴더에 저장) -->
console.log("별도 파일에서 실행됐어요!");`;

const CODE_ALERT = `// alert — 화면 한가운데에 팝업 창을 띄웁니다.
alert("반가워요!");

// prompt — 질문을 던지고, 사용자가 입력한 답을 '돌려받아요'.
prompt("이름이 뭐예요?");

// 돌려받은 답은 이름을 붙여 잠깐 보관할 수 있어요.
let name = prompt("이름이 뭐예요?");
alert(name + "님 환영합니다!");   // + 는 글자를 이어 붙입니다`;

const CODE_PRACTICE = `<!DOCTYPE html>
<html>
  <head>
    <title>환영 인사 페이지</title>
  </head>
  <body>
    <h1>환영 인사 페이지</h1>

    <script>
      // ① 이름을 물어본다
      let name = prompt("이름이 뭐예요?");

      // ② 받은 이름으로 인사한다
      alert(name + "님 환영합니다!");
    </script>
  </body>
</html>

<!-- 이 내용을 welcome.html로 저장하고 더블클릭해서 열어 보세요.
     페이지가 여러분의 이름을 '물어보고', 이름을 넣어 '대답'합니다.
     방금 여러분은 사용자와 대화하는 프로그램을 만든 거예요. -->`;

const CODE_MATH = `// 콘솔은 훌륭한 계산기이기도 해요. 그대로 입력해 보세요.
3 + 5        // 8   (더하기)
10 - 4       // 6   (빼기)
6 * 7        // 42  (곱하기 — x가 아니라 별표 *)
10 / 4       // 2.5 (나누기 — ÷가 아니라 빗금 /)

// 계산 순서는 수학 시간과 같아요. 곱하기·나누기 먼저, 괄호가 최우선.
2 + 3 * 4    // 14  (3*4가 먼저)
(2 + 3) * 4  // 20  (괄호가 먼저)`;

const CODE_STRING_TRAP = `// 함정 하나 맛보기 — 아래 둘의 결과가 다릅니다!
1 + 1        // 2    — 숫자 + 숫자 = 계산
"1" + 1      // "11" — 문자열 + 숫자 = 이어 붙이기!

// 따옴표로 감싼 "1"은 숫자가 아니라 '글자 1'이에요.
// + 는 한쪽이라도 글자면 계산 대신 이어 붙이기를 선택합니다.
// prompt()로 받은 답도 항상 '글자'라서, 숫자 계산 전엔 변환이 필요해요.
// (변환하는 법은 다음 강좌에서 제대로 배웁니다 — 지금은 함정의 존재만 기억!)`;

const CODE_ONCLICK = `<body>
  <h1>클릭해 보세요</h1>

  <!-- onclick 속성: "클릭되면 이 코드를 실행해 줘" -->
  <button onclick="alert('버튼을 눌렀네요!')">인사 버튼</button>

  <!-- prompt와 조합하면 클릭할 때마다 대화가 시작돼요 -->
  <button onclick="alert(prompt('이름은?') + '님 안녕!')">이름 묻는 버튼</button>
</body>

<!-- 포인트: HTML(버튼)과 JavaScript(alert)가 onclick에서 처음 '악수'합니다.
     바깥 따옴표(")와 안쪽 따옴표(')를 다르게 쓴 것도 눈여겨보세요. -->`;

const CODE_TYPOS = `// 컴퓨터는 대소문자를 다른 글자로 봅니다.
console.log("안녕");   // O
Console.log("안녕");   // X — Console is not defined (C가 대문자)
console.Log("안녕");   // X — console.Log is not a function (L이 대문자)

// 괄호·따옴표는 반드시 '짝'으로 열고 닫아야 해요.
alert("반가워요!";     // X — 닫는 괄호 ) 가 없다
alert("반가워요!)      // X — 닫는 따옴표 " 가 없다
alert("반가워요!");    // O — 여닫이 완성

// 빨간 에러가 떠도 당황하지 마세요. 메시지를 읽어 보면
// '몇 번째 줄'에서 '무엇이' 이상한지 힌트가 적혀 있습니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'JS가 하는 일' },
  { n: 2, label: '콘솔 첫 실행' },
  { n: 3, label: 'HTML에 연결' },
  { n: 4, label: 'alert · prompt' },
  { n: 5, label: '숫자 계산' },
  { n: 6, label: '버튼 클릭 반응' },
  { n: 7, label: '오타와의 전쟁' },
];

export default function Lv1FirstJavascriptPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>✨ 나의 첫 JavaScript</h1>
        <p>
          지금까지의 웹 페이지는 <strong>멈춰 있는 그림</strong>이었어요. 클릭해도 조용하고,
          물어봐도 대답이 없죠. 오늘 그 페이지가 처음으로 <strong>말을 걸고 반응하기</strong>{' '}
          시작합니다. 설치할 것도 없어요 — 여러분의 브라우저 안에 이미 준비돼 있으니까요.
          첫 코드 한 줄의 짜릿함, 지금 시작합니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">실습: 이름 묻고 인사하는 페이지</span>
          <span className="chip">선수 지식: 없음 (브라우저만 있으면 OK)</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="JavaScript가 하는 일" sub="페이지에 '움직임'을 불어넣는 언어">
        <p>
          웹 페이지는 세 명이 함께 만드는 작품이에요. <strong>HTML</strong>이 글·버튼·사진을
          화면에 놓고(뼈대), <strong>CSS</strong>가 색과 모양을 입히죠(꾸밈). 그런데 이 둘만으로
          만든 페이지는 아무리 예뻐도 <strong>움직이지 않는 포스터</strong>일 뿐이에요. 버튼을
          눌러도 조용하고, 질문해도 대답이 없습니다.
        </p>
        <p>
          세 번째 주인공 <strong>JavaScript(자바스크립트, 줄여서 JS)</strong>가 바로 그
          '움직임' 담당이에요. 버튼이 클릭에 반응하고, 팝업이 뜨고, 계산 결과가 화면에 나타나는
          것 — 여러분이 웹에서 본 <strong>거의 모든 움직임</strong>이 JS의 일입니다.
        </p>
        <Code>{CODE_TRIO}</Code>
        <p>
          좋은 소식 하나. JavaScript는 <strong>설치할 필요가 없어요.</strong> 크롬이든 엣지든,
          여러분이 지금 쓰는 브라우저 안에 JS를 읽고 실행하는 장치가 <strong>이미 들어
          있습니다.</strong> 준비물은 브라우저 하나 — 그게 전부예요.
        </p>
        <div className="tip">
          <b>이름 주의</b> JavaScript와 Java는 <strong>다른 언어</strong>예요. 이름이 비슷한 건
          옛날 마케팅의 흔적일 뿐, '카멜'과 '카멜레온'만큼 다릅니다. 우리가 배우는 건 브라우저
          속에서 웹 페이지를 움직이는 <strong>JavaScript</strong>입니다.
        </div>
      </Section>

      <Section n={2} title="콘솔에서 바로 실행하기" sub="첫 코드 한 줄, 30초면 충분하다">
        <p>
          브라우저 안에는 개발자를 위한 비밀 작업실, <strong>콘솔(Console)</strong>이 숨어 있어요.
          코드를 입력하고 Enter를 누르면 <strong>그 자리에서 즉시 실행</strong>되는 공간이죠.
          파일을 만들 필요도 없으니 첫 실습 장소로 딱입니다. 여는 법: 브라우저에서{' '}
          <strong>F12</strong>를 누르고(맥은 Cmd+Option+I), 위쪽 탭에서{' '}
          <strong>Console</strong>을 클릭하세요.
        </p>
        <Code>{CODE_FIRST_LOG}</Code>
        <p>
          축하해요 — 방금 그 한 줄이 여러분의 <strong>첫 프로그램</strong>입니다! 컴퓨터에게
          "이걸 적어 줘"라고 명령했고, 컴퓨터가 그대로 따랐어요. 이제 규칙 두 가지만 챙겨 봅시다.
        </p>
        <p>
          첫째, <strong>글자는 따옴표로 감싼다.</strong> 따옴표로 감싼 글자 덩어리를{' '}
          <strong>문자열(string)</strong>이라고 부르는데, 따옴표가 없으면 컴퓨터는 그걸 글자가
          아니라 '어떤 이름'으로 오해해서 에러를 냅니다. 둘째, 줄 끝의{' '}
          <span className="icode">;</span>(세미콜론)은 "이 문장은 여기서 끝"이라는{' '}
          <strong>마침표</strong>예요.
        </p>
        <Code>{CODE_QUOTES}</Code>
        <div className="tip">
          <b>세미콜론, 꼭 붙여야 하나요?</b> 사실 JS는 세미콜론을 빼먹어도 대부분 알아서
          이해해 줘요. 하지만 가끔 애매한 상황에서 오해가 생기고, 무엇보다 "문장을 맺는 습관"이
          몸에 배면 나중에 다른 언어를 배울 때도 편합니다. 이 과정에서는 <strong>붙이는
          쪽</strong>으로 통일할게요.
        </div>
      </Section>

      <Section n={3} title="HTML에 스크립트 연결하기" sub="콘솔 밖으로 — 내 페이지 안에 코드 심기">
        <p>
          콘솔의 코드는 브라우저를 닫으면 사라져요. 코드를 <strong>내 페이지의 일부</strong>로
          만들려면 HTML 안에 심어야 합니다. 그 자리가 바로{' '}
          <span className="icode">&lt;script&gt;</span> 태그예요. 이 태그의 여는 문과 닫는 문
          사이에 적힌 것은 전부 JavaScript로 실행됩니다.
        </p>
        <Code>{CODE_SCRIPT_IN_HTML}</Code>
        <p>
          위치가 중요해요. <span className="icode">&lt;script&gt;</span>는 보통{' '}
          <strong><span className="icode">&lt;/body&gt;</span> 바로 앞</strong>, 즉 몸통의 맨
          끝에 둡니다. 브라우저는 HTML을 <strong>위에서 아래로</strong> 읽으면서 화면을 그리는데,
          스크립트를 끝에 두면 <strong>화면이 다 그려진 다음</strong>에 코드가 돌아요. 코드가
          "아직 안 그려진 버튼"을 찾다가 헛손질하는 사고를 막는 배치입니다.
        </p>
        <p>
          코드가 길어지면 HTML 파일이 지저분해지겠죠? 그럴 땐 <strong>별도의{' '}
          <span className="icode">.js</span> 파일</strong>로 분리하고, <span className="icode">src</span>{' '}
          속성으로 불러옵니다. CSS 파일을 따로 두고 링크로 거는 것과 똑같은 발상이에요 —
          역할별로 파일을 나누면 나중에 찾기도, 고치기도 쉬워집니다.
        </p>
        <Code>{CODE_SCRIPT_SRC}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 위 첫 번째 예제를 메모장에 붙여 넣고{' '}
          <span className="icode">first.html</span>로 저장한 뒤 더블클릭해 보세요. 화면엔
          "안녕하세요!"가 보이고, <strong>F12 → Console</strong>을 열면 우리가 심어 둔 메시지가
          찍혀 있을 거예요. 화면과 콘솔, 두 무대를 다 확인하는 습관을 들이면 좋습니다.
        </div>
      </Section>

      <Section n={4} title="alert와 prompt로 대화하기" sub="페이지가 말을 걸고, 대답을 듣는다">
        <p>
          콘솔은 개발자만 보는 무대였죠. 이번엔 <strong>사용자 눈앞</strong>으로 나가 봅시다.{' '}
          <span className="icode">alert("...")</span>는 화면 한가운데에 <strong>팝업 창</strong>을
          띄워 말을 걸고, <span className="icode">prompt("...")</span>는 질문과 함께{' '}
          <strong>입력 칸</strong>을 내밀어 사용자의 대답을 받아 옵니다.
        </p>
        <Code>{CODE_ALERT}</Code>
        <p>
          여기서 마법 같은 일이 벌어져요. <span className="icode">prompt</span>가 받아 온 대답은{' '}
          <span className="icode">let name = ...</span>처럼 <strong>이름을 붙여 보관</strong>해 둘
          수 있고(상자에 담는다고 상상하세요 — 자세한 건 다음 강좌에서!), 그걸{' '}
          <span className="icode">+</span>로 다른 글자와 <strong>이어 붙여</strong> 다시 화면에
          되돌려 줄 수 있습니다. 사용자가 "지민"이라고 답하면{' '}
          <strong>"지민님 환영합니다!"</strong>가 뜨는 거죠.
        </p>
        <p>이제 오늘의 실습입니다. 아래 내용을 통째로 저장해서 열어 보세요.</p>
        <Code>{CODE_PRACTICE}</Code>
        <div className="tip">
          <b>이 순간을 기억하세요</b> 방금 만든 페이지는 <strong>사용자에 따라 다르게
          반응</strong>해요. 누가 열어도 똑같던 '포스터'가, 여는 사람의 이름을 물어 그 사람만을
          위한 인사를 건넵니다. 이 차이 — 입력을 받아 다르게 응답하는 것 — 가 문서와{' '}
          <strong>프로그램</strong>의 갈림길이에요. 여러분은 방금 그 선을 넘었습니다.
        </div>
      </Section>

      <Section n={5} title="숫자 계산시키기" sub="콘솔을 계산기로 — 그리고 첫 함정">
        <p>
          JavaScript는 계산도 잘해요. 콘솔에 수식을 그대로 입력하면 즉시 답을 돌려줍니다.
          기호만 두 개 조심하세요. 곱하기는 <span className="icode">x</span>가 아니라{' '}
          <strong>별표 <span className="icode">*</span></strong>, 나누기는 ÷가 아니라{' '}
          <strong>빗금 <span className="icode">/</span></strong>입니다.
        </p>
        <Code>{CODE_MATH}</Code>
        <p>
          계산 순서는 수학 시간에 배운 그대로예요 — 곱하기·나누기가 더하기·빼기보다 먼저,
          괄호가 있으면 괄호가 최우선. 그리고 앞으로 "이 계산 맞나?" 싶을 때마다{' '}
          <strong>콘솔에 먼저 쳐 보는 습관</strong>을 들이세요. 콘솔은 언제나 켜져 있는, 거짓말
          안 하는 계산기입니다.
        </p>
        <p>
          그런데 여기, 초보자 열에 아홉이 밟는 <strong>함정</strong>이 하나 있어요.
        </p>
        <Code>{CODE_STRING_TRAP}</Code>
        <p>
          <span className="icode">"1" + 1</span>이 2가 아니라 <strong>"11"</strong>이 되는 이유 —
          따옴표를 두른 <span className="icode">"1"</span>은 숫자가 아니라 <strong>글자</strong>이기
          때문이에요. <span className="icode">+</span>는 한쪽이라도 글자면 계산을 포기하고{' '}
          <strong>이어 붙이기</strong>를 선택합니다. 섹션 2에서 배운 "따옴표 = 문자열" 규칙이
          이렇게 실전에서 발목을 잡죠.
        </p>
        <div className="tip">
          <b>미리 보는 다음 강좌</b> <span className="icode">prompt()</span>로 받은 대답도 항상{' '}
          <strong>글자</strong>예요. 그래서 나이를 물어 1을 더하는 프로그램을 만들면 "15" + 1 =
          "151"이 되는 사고가 납니다. 글자를 숫자로 바꾸는 법은 다음 강좌에서 제대로 배워요 —
          오늘은 <strong>함정이 있다는 사실</strong>만 챙기면 충분합니다.
        </div>
      </Section>

      <Section n={6} title="버튼 클릭에 반응하기" sub="'내가 만든 것이 반응한다'는 첫 경험">
        <p>
          지금까지 코드는 페이지가 열리는 순간 <strong>한 번</strong> 실행되고 끝났어요. 진짜
          재미는 지금부터입니다 — <strong>사용자가 클릭하는 순간</strong>에 코드가 실행되게
          만들어 볼 거예요. 버튼 태그에 <span className="icode">onclick</span> 속성을 붙이면
          됩니다. 뜻 그대로 "클릭되면(on click) 이 코드를 실행해 줘"라는 예약이에요.
        </p>
        <Code>{CODE_ONCLICK}</Code>
        <p>
          직접 저장해서 눌러 보세요. 페이지를 열 때는 조용하다가, <strong>여러분이 누르는
          순간</strong> 팝업이 튀어나옵니다. 열 번 누르면 열 번 반응해요. HTML로 그려 둔
          버튼(뼈대)과 JavaScript(움직임)가 <span className="icode">onclick</span>에서 처음으로
          손을 잡은 순간입니다.
        </p>
        <p>
          사소해 보여도 이 경험은 큽니다. 남이 만든 앱을 <strong>쓰기만 하던</strong> 사람에서,{' '}
          <strong>반응하는 것을 만드는</strong> 사람으로 자리가 바뀌었으니까요. 앞으로 배울
          모든 것 — 게임, 웹앱, 인공지능 서비스 — 도 결국 이 구조의 확장이에요. "어떤 일이
          일어나면(클릭·입력·시간), 어떤 코드를 실행한다."
        </p>
        <div className="tip">
          <b>따옴표 겹치기 요령</b> <span className="icode">onclick="..."</span>의 바깥은 이미
          큰따옴표가 차지하고 있죠? 그래서 안쪽 JS의 문자열은 <strong>작은따옴표</strong>로
          씁니다: <span className="icode">onclick="alert('안녕!')"</span>. 같은 종류의 따옴표를
          겹쳐 쓰면 컴퓨터가 어디서 닫혔는지 헷갈려 에러가 나요 — 겉과 속을 다르게, 기억!
        </div>
      </Section>

      <Section n={7} title="오타와의 첫 전쟁" sub="빨간 글씨는 벌점이 아니라 힌트다">
        <p>
          여기까지 따라오며 이미 한 번쯤 <strong>빨간 에러</strong>를 만났을 거예요. 축하합니다,
          정상적으로 배우고 있다는 증거예요. 컴퓨터는 사람과 달리 "대충 알아듣기"를 전혀
          못해서, 딱 세 가지에서 늘 사고가 납니다.
        </p>
        <p>
          첫째, <strong>대소문자</strong>. 컴퓨터에게 <span className="icode">console</span>과{' '}
          <span className="icode">Console</span>은 완전히 다른 단어예요. 둘째,{' '}
          <strong>괄호와 따옴표의 짝</strong>. 연 것은 반드시 닫아야 합니다 — 여는 것만 있고
          닫는 게 없으면 컴퓨터는 문장이 끝나길 하염없이 기다리다 에러를 내요.
        </p>
        <Code>{CODE_TYPOS}</Code>
        <p>
          셋째가 가장 중요합니다. <strong>에러 메시지를 읽는 태도</strong>예요. 콘솔의 빨간
          글씨는 선생님의 빨간 펜이 아니라, <strong>"여기 몇 번째 줄, 이게 이상해요"라고
          알려 주는 힌트</strong>입니다. 예를 들어{' '}
          <span className="icode">Console is not defined</span>는 "Console이란 건 모르는데?"라는
          뜻이니, 대문자 C를 소문자로 고치면 끝이죠. 에러를 두려워하는 사람은 늘지 않고,
          에러를 <strong>읽는</strong> 사람은 빠르게 늡니다.
        </p>
        <div className="tip">
          <b>프로도 매일 겪어요</b> 경력 10년 차 개발자도 하루에 몇 번씩 오타 에러를 만나요.
          차이는 단 하나 — 당황하지 않고 <strong>메시지를 읽고, 그 줄을 확인하는</strong>{' '}
          루틴이 몸에 배어 있다는 것. 오늘부터 에러가 뜨면 ① 빨간 글씨를 읽고 ② 줄 번호를
          찾고 ③ 대소문자·괄호·따옴표 짝을 살피세요. 이 세 걸음이면 오늘 만날 에러의 대부분이
          풀립니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>✨ 여기까지 왔다면</h3>
          <p className="muted">
            멈춰 있던 페이지가 오늘 처음으로 여러분에게 <strong>말을 걸고, 이름을 묻고,
            대답</strong>했어요. 콘솔에서 첫 코드를 실행했고, HTML에 스크립트를 심었고,
            alert·prompt로 대화했고, 버튼을 클릭에 반응시켰고, 빨간 에러를 읽는 법까지
            익혔습니다. 그런데 실습에서 슬쩍 지나간 게 하나 있죠 —{' '}
            <span className="icode">let name = ...</span>, 대답을 담아 두던 그 '이름 붙인 상자'요.
            저 상자의 정체가 바로 프로그래밍의 심장, <strong>변수</strong>입니다. 다음{' '}
            <Link to="/learn/lv1-variables-and-types"><strong>변수와 자료형: 이름 붙인 상자</strong></Link>{' '}
            강좌에서 상자를 마음껏 만들고, "1"+1이 11이 되던 오늘의 함정도 말끔히 풀어 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
