// 이 파일이 하는 일: "브라우저는 내 코드를 어떻게 읽을까" 코스 — 주소창에 엔터를 치는
// 순간부터 화면이 그려지기까지를 7개 섹션으로 안내하는 정적 학습 페이지. 대상은 코딩을
// 한 번도 안 해 본 사람(중·고등학생 눈높이). 프레이밍은 "웹의 뒷면 구경" — 개발자 도구(F12)를
// 열어 요청↔응답, HTML·CSS·JS의 역할 분담, 그려지는 순서를 눈으로 직접 확인시킨다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_CONVERSATION = `나(브라우저)                              서버(멀리 있는 컴퓨터)
     │                                          │
     │   "www.naver.com 첫 화면 주세요!"        │
     │ ──────────── 요청(Request) ────────────▶ │
     │                                          │
     │   "네, 여기 HTML 문서요."                │
     │ ◀─────────── 응답(Response) ──────────── │
     │                                          │
받아 온 HTML을 읽고 화면에 그림을 그린다
= 이것이 브라우저의 일 (렌더링, rendering)

핵심: 웹은 '요청하고 → 응답받는' 대화예요.
주소창에 엔터를 치는 순간, 이 대화가 시작됩니다.`;

const CODE_THREE_LANGS = `브라우저가 알아듣는 세 가지 언어 — 역할이 딱 나뉘어 있어요

HTML        →  뼈대(구조)    "여기가 제목, 저기가 문단, 그 아래는 버튼"
CSS         →  옷(모양)      "제목은 크게, 버튼은 파란색, 배경은 어둡게"
JavaScript  →  움직임(동작)  "버튼을 누르면 인사말을 띄워라"

사람으로 치면:
HTML = 골격,  CSS = 옷차림,  JavaScript = 근육(움직임)
셋 중 하나만 있어도 페이지는 뜨지만, 셋이 모여야 '살아 있는' 웹이 됩니다.`;

const CODE_ELEMENTS = `<!-- F12 → Elements 탭에서 보게 될 모습(예시) -->
<html>
  <head> ...제목·CSS 연결 같은 준비물... </head>
  <body>
    <h1>오늘의 뉴스</h1>   ← 이 글자를 더블클릭하면 바꿀 수 있어요!
    <p>기사 내용이 여기에...</p>
    <button>더 보기</button>
  </body>
</html>

<!-- 태그 왼쪽의 ▶ 를 누르면 접힌 구조가 펼쳐져요.
     지금 보고 있는 모든 사이트가 결국 이런 태그의 나무(tree)입니다. -->`;

const CODE_CONSOLE = `// Console 탭에 직접 입력해 보세요 (> 뒤가 내가 치는 것)

> 2 + 3
5                          // 브라우저가 즉시 계산해서 대답!

> "안녕" + "하세요"
'안녕하세요'               // 글자도 붙일 수 있어요

> 우와아아
Uncaught ReferenceError: 우와아아 is not defined
// ↑ "우와아아가 뭔지 모르겠어요"라는 브라우저의 대답.
//   빨간 글씨 = 에러. 무섭지 않아요. '어디가 왜 안 되는지'를
//   알려 주는 친절한 쪽지이고, 앞으로 여기서 자주 만나게 됩니다.`;

const CODE_ORDER = `<body>
  <h1>첫 번째 제목</h1>        <!-- ① 브라우저가 먼저 읽고 그림 -->
  <p>두 번째 문단</p>          <!-- ② 그다음 이 줄 -->

  <script>
    // ③ 여기 도착해서야 실행됨 — 위의 h1은 이미 화면에 있다!
    document.querySelector('h1').textContent = '자바스크립트가 바꿨어요';
  </script>
</body>

<!-- 만약 script를 h1보다 '위'에 두면?
     아직 h1이 안 그려진 시점이라 찾을 수 없어요(null).
     그래서 script는 보통 body의 맨 아래에 둡니다. -->`;

const CODE_FILE_VS_HTTPS = `file:///C:/Users/me/my-page.html    https://awesomedev.dev
──────────────────────────────    ──────────────────────────────
내 컴퓨터의 파일을 '직접' 연 것     멀리 있는 서버가 '보내 준' 것
이 컴퓨터 앞에 앉은 나만 본다       주소만 알면 전 세계 누구나 본다
인터넷이 없어도 열린다              인터넷이 있어야 한다
저장 → 새로고침이면 바로 반영       서버에 올리는 '배포'가 필요

둘 다 똑같은 브라우저, 똑같은 HTML.
다른 건 딱 하나 — 문서가 '어디에서 왔는가'입니다.`;

const CODE_PRACTICE = `탐험 실습 체크리스트 — "포털 메인 제목을 내 이름으로"

1. 좋아하는 사이트(포털 메인 등)를 연다
2. F12 를 눌러 개발자 도구를 연다 → Elements 탭
3. 왼쪽 위 화살표 아이콘(또는 Ctrl+Shift+C)을 켜고
   화면에서 바꾸고 싶은 제목 글자를 클릭 → 해당 태그로 점프!
4. 그 태그의 글자 부분을 더블클릭 → 내 이름으로 고쳐 쓴다
5. 스크린샷을 찍는다 (Windows: Win+Shift+S)
6. F5 새로고침 → 원래대로 돌아오는 것까지 확인!
   (왜 돌아오는지 설명할 수 있다면 이 코스는 합격입니다)`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '개발자 도구 F12' },
  { n: 4, label: '콘솔과 첫 만남' },
  { n: 5, label: '그려지는 순서' },
  { n: 6, label: '내 컴퓨터와 인터넷' },
  { n: 7, label: '탐험 실습' },
];

export default function Lv1HowBrowsersWorkPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>브라우저는 내 코드를<br />어떻게 읽을까 🔍</h1>
        <p>
          주소창에 엔터를 치면 무슨 일이 벌어질까요? 우리가 매일 쓰는 브라우저는 사실{' '}
          <strong>코드를 읽어서 그림을 그려 주는 기계</strong>예요. 이 코스에선{' '}
          <strong>개발자 도구(F12)</strong>라는 만능 열쇠를 손에 쥐고, 매일 보던 웹의{' '}
          <strong>뒷면</strong>을 구경합니다. 어렵지 않아요 — 구경이 곧 공부니까요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</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>
          <span className="icode">www.naver.com</span>을 치고 엔터를 누르는 순간, 여러분의
          브라우저는 <strong>멀리 있는 어떤 컴퓨터</strong>에게 말을 겁니다. "네이버 첫 화면
          주세요!" — 이걸 <strong>요청(Request)</strong>이라고 해요. 그러면 그 컴퓨터가
          "네, 여기요" 하고 문서를 보내 주죠. 이게 <strong>응답(Response)</strong>입니다.
        </p>
        <p>
          여기서 그 '멀리 있는 컴퓨터'를 <strong>서버(server)</strong>라고 불러요. 대단한 마법의
          상자가 아니라, <strong>남의 컴퓨터</strong>입니다. 24시간 켜 놓고 "요청이 오면
          응답한다"는 일만 하도록 세팅해 둔 컴퓨터예요. 여러분이 보는 모든 웹페이지는
          어딘가의 서버가 보내 준 것입니다.
        </p>
        <Code>{CODE_CONVERSATION}</Code>
        <p>
          그런데 서버가 보내 주는 건 완성된 '그림'이 아니라 <strong>HTML이라는 글자
          문서</strong>예요. 그 문서를 읽고, 해석하고, 우리 눈에 보이는 화면으로{' '}
          <strong>그려 내는 일</strong> — 그게 바로 브라우저의 직업입니다. 크롬, 엣지, 사파리는
          전부 "HTML을 그림으로 바꿔 주는 기계"인 셈이죠.
        </p>
        <div className="tip">
          <b>비유</b> 배달 앱과 비슷해요. 내가 주문(요청)하면 → 식당(서버)이 음식을 보내고
          (응답) → 나는 포장을 뜯어 상을 차립니다(렌더링). 브라우저는 '주문도 하고 상도
          차려 주는' 성실한 심부름꾼이에요. 이 <strong>요청↔응답</strong> 구조 하나만 기억해도
          웹의 절반을 이해한 겁니다.
        </div>
      </Section>

      <Section n={2} title="브라우저의 세 가지 언어" sub="HTML은 뼈대, CSS는 옷, JavaScript는 움직임">
        <p>
          브라우저가 알아듣는 언어는 크게 <strong>세 가지</strong>예요. 셋이 하는 일이 딱딱
          나뉘어 있어서, 역할만 기억하면 절대 헷갈리지 않습니다.
        </p>
        <Code>{CODE_THREE_LANGS}</Code>
        <p>
          <strong>HTML</strong>은 "여기가 제목이고, 저기가 문단이고, 그 아래가 버튼"이라고{' '}
          <strong>구조</strong>를 정하는 뼈대예요. 우리가 지금까지 배워 온 바로 그 언어죠.
          그런데 뼈대만 있으면 모든 페이지가 흰 바탕에 검은 글씨일 거예요. 그래서{' '}
          <strong>CSS</strong>가 "제목은 크게, 버튼은 파랗게" 하고 <strong>옷</strong>을
          입힙니다. 마지막으로 <strong>JavaScript</strong>가 "버튼을 누르면 이걸 해라" 하고{' '}
          <strong>움직임</strong>을 붙여요.
        </p>
        <p>
          중요한 건 <strong>순서</strong>예요. 옷(CSS)은 뼈대(HTML)가 있어야 입힐 수 있고,
          움직임(JavaScript)도 움직일 대상이 있어야 하죠. 그래서 모든 웹 공부는 HTML에서
          시작합니다 — 여러분은 이미 올바른 순서로 첫 단추를 끼운 거예요.
        </p>
        <div className="tip">
          <b>지금 나는 어디쯤?</b> HTML을 배웠다면 <strong>뼈대 만들기</strong>까지 온 거예요.
          이 코스에서 브라우저가 그 뼈대를 어떻게 읽는지 구경하고, 다음 코스에서 드디어
          움직임(JavaScript)을 배웁니다. 지도에서 내 위치를 아는 것, 그게 길을 안 잃는
          비결이에요.
        </div>
      </Section>

      <Section n={3} title="개발자 도구 열기 (F12)" sub="어느 사이트든 코드를 들여다볼 수 있다">
        <p>
          놀라운 사실 하나. <strong>여러분이 보는 모든 웹사이트의 코드는 공개되어 있어요.</strong>{' '}
          섹션 1에서 봤듯 서버가 HTML 문서를 통째로 보내 주니까, 받은 사람(브라우저)은 당연히
          그 내용을 전부 갖고 있죠. 그걸 들여다보는 창이 바로 <strong>개발자 도구</strong>이고,
          여는 열쇠가 <span className="icode">F12</span>입니다(맥은{' '}
          <span className="icode">Cmd+Option+I</span>).
        </p>
        <p>
          지금 바로 눌러 보세요. 화면 옆이나 아래에 낯선 패널이 열리면 성공이에요. 그중{' '}
          <strong>Elements 탭</strong>이 "지금 이 페이지의 HTML 구조"를 보여 주는 곳입니다.
        </p>
        <Code>{CODE_ELEMENTS}</Code>
        <p>
          Elements 탭에서 태그를 <strong>더블클릭하면 글자를 고칠 수도 있어요.</strong> 뉴스
          제목을 "내가 세계를 정복했다"로 바꾸는 것도 가능하죠. 그런데{' '}
          <span className="icode">F5</span>로 새로고침하면? <strong>전부 원래대로</strong>{' '}
          돌아옵니다.
        </p>
        <p>
          왜일까요? 여러분이 고친 건 <strong>서버의 원본이 아니라, 내 브라우저에 도착한
          복사본</strong>이기 때문이에요. 도서관 책을 복사해 와서 복사본에 낙서한 것과 같아요.
          도서관의 원본은 멀쩡하고, 새로고침은 "복사본 버리고 원본 다시 받아 오기"라서 낙서가
          사라지는 겁니다. 요청↔응답 구조를 이해하면 이 현상이 당연해져요.
        </p>
        <div className="tip">
          <b>안심하세요</b> 개발자 도구로 아무리 만져도 <strong>그 사이트가 망가지지
          않아요.</strong> 바뀌는 건 오직 내 화면의 복사본뿐입니다. 그러니 마음껏 눌러 보고,
          펼쳐 보고, 고쳐 보세요 — 개발자 도구는 세상에서 가장 안전한 놀이터예요.
        </div>
      </Section>

      <Section n={4} title="콘솔과의 첫 만남" sub="브라우저와 나누는 대화창">
        <p>
          개발자 도구에는 Elements 말고도 탭이 여럿 있는데, 그중 앞으로 가장 자주 쓰게 될 곳이{' '}
          <strong>Console(콘솔) 탭</strong>이에요. 콘솔은 한마디로{' '}
          <strong>브라우저와 나누는 채팅창</strong>입니다. 내가 뭔가 입력하면, 브라우저가 그
          자리에서 실행하고 결과를 대답해 줘요.
        </p>
        <Code>{CODE_CONSOLE}</Code>
        <p>
          <span className="icode">2 + 3</span>을 치고 엔터를 눌러 보세요. 브라우저가 즉시{' '}
          <span className="icode">5</span>라고 대답합니다. 방금 여러분은{' '}
          <strong>컴퓨터에게 처음으로 명령을 내린 거예요.</strong> 계산기 앱을 켠 게 아니라,
          브라우저 속 JavaScript 엔진이 여러분의 명령을 읽고 실행한 겁니다.
        </p>
        <p>
          그리고 콘솔은 <strong>에러가 표시되는 곳</strong>이기도 해요. 페이지의 JavaScript가
          어딘가에서 넘어지면, 빨간 글씨로 "몇 번째 줄에서 왜 넘어졌는지"가 여기 찍힙니다.
          나중에 "코드가 왜 안 되지?" 싶을 때 가장 먼저 열어 볼 곳이 바로 콘솔이에요.
        </p>
        <div className="tip">
          <b>에러는 친구예요</b> 빨간 글씨를 보면 "내가 뭘 잘못했나" 하고 움츠러들기 쉬운데,
          거꾸로예요. 에러 메시지는 <strong>"어디가, 왜" 안 되는지 알려 주는 힌트 쪽지</strong>
          입니다. 진짜 무서운 건 에러 없이 조용히 이상하게 도는 코드예요. 에러를 읽는 습관이
          곧 개발 실력입니다.
        </div>
      </Section>

      <Section n={5} title="위에서 아래로: 그려지는 순서" sub="브라우저는 HTML을 한 줄씩 읽으며 그린다">
        <p>
          브라우저가 HTML 문서를 받으면 어떻게 그릴까요? 통째로 한 번에? 아니에요.{' '}
          <strong>맨 위에서부터 한 줄씩 읽으면서, 읽는 족족 그립니다.</strong> 책을 읽듯
          위에서 아래로요. 그래서 HTML에서 <strong>먼저 쓴 것이 먼저 화면에 나타나요.</strong>
        </p>
        <Code>{CODE_ORDER}</Code>
        <p>
          이 '위에서 아래로' 규칙 때문에 <span className="icode">&lt;script&gt;</span>(JavaScript를
          담는 태그)의 <strong>위치</strong>가 중요해집니다. 예제처럼 script를 body의 맨 아래에
          두면, 실행되는 시점엔 위의 요소들이 <strong>이미 다 그려져 있어서</strong> 안심하고
          찾아 쓸 수 있어요. 반대로 맨 위에 두면 "아직 안 그려진 것"을 찾다가 허탕을 칩니다.
        </p>
        <p>
          지금은 "script는 아래에 두는구나" 정도만 챙겨 가면 충분해요. 핵심은 이거예요 —{' '}
          <strong>컴퓨터는 순서대로 일한다.</strong> HTML을 그리는 것도, 나중에 배울 JavaScript
          코드가 실행되는 것도, 전부 <strong>위에서 아래로, 순서대로</strong>입니다. 이 감각
          하나가 앞으로 배울 모든 것의 바탕이 돼요.
        </p>
        <div className="tip">
          <b>눈으로 확인하기</b> 아주 긴 페이지를 느린 인터넷에서 열면, 위쪽부터 차례로
          나타나는 걸 볼 수 있어요. 개발자 도구의 Network 탭에서 속도를 일부러 늦추는
          기능(Slow 4G)으로 실험해 볼 수도 있습니다 — 브라우저가 '읽으면서 그린다'는 게
          실감 날 거예요.
        </div>
      </Section>

      <Section n={6} title="내 컴퓨터와 인터넷" sub="file://로 여는 파일 vs https://로 여는 사이트">
        <p>
          HTML 파일을 만들어 더블클릭으로 열어 봤다면, 주소창이{' '}
          <span className="icode">file:///C:/...</span>처럼 시작하는 걸 봤을 거예요. 반면
          네이버는 <span className="icode">https://</span>로 시작하죠. 이 앞부분은 "문서를{' '}
          <strong>어디에서 가져올까</strong>"를 뜻합니다.
        </p>
        <Code>{CODE_FILE_VS_HTTPS}</Code>
        <p>
          <span className="icode">file://</span>은 <strong>내 컴퓨터 안의 파일</strong>을 직접
          여는 거예요. 서버도, 인터넷도 필요 없죠. 대신 <strong>이 컴퓨터 앞에 앉은 나만</strong>{' '}
          볼 수 있습니다. 친구에게 "내 페이지 봐!"라고 링크를 보내도, 친구 컴퓨터엔 그 파일이
          없으니 열리지 않아요.
        </p>
        <p>
          내가 만든 페이지를 <strong>남에게 보여 주려면</strong>, 섹션 1에서 배운 그 구조가
          필요합니다 — 누군가 요청하면 응답해 줄 <strong>서버</strong>에 내 파일을 올려 두는
          거죠. 이 과정을 <strong>배포(deploy)</strong>라고 불러요. "내 컴퓨터의 습작"이
          "전 세계가 볼 수 있는 사이트"로 바뀌는 순간입니다.
        </p>
        <div className="tip">
          <b>미리 걱정하지 마세요</b> 배포는 나중에 배울 <strong>즐거운 숙제</strong>로
          남겨 둡시다. 지금 단계에선 <span className="icode">file://</span>로 내 파일을 열어
          연습하는 것으로 충분해요. "내 것(file://)과 세상의 것(https://)은 문서의 출발지가
          다르다" — 이 구분만 챙기면 오늘의 목표는 달성입니다.
        </div>
      </Section>

      <Section n={7} title="탐험 실습: 남의 사이트 뜯어 보기" sub="잘 만든 코드 구경이 최고의 공부">
        <p>
          이제 배운 걸 전부 꺼내 쓸 시간이에요. 오늘의 미션:{' '}
          <strong>좋아하는 사이트의 메인 제목을 개발자 도구로 내 이름으로 바꾸고, 스크린샷을
          찍어 오세요.</strong>
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <p>
          다 했다면 스스로에게 물어보세요 — <strong>새로고침하니까 왜 원래대로
          돌아왔지?</strong> "내가 고친 건 서버의 원본이 아니라 내 브라우저의 복사본이고,
          새로고침은 원본을 다시 받아 오는 것"이라고 답할 수 있다면, 오늘 배운 요청↔응답
          구조가 완전히 여러분 것이 된 겁니다.
        </p>
        <p>
          그리고 한 가지 더. 미션이 끝나도 개발자 도구를 닫지 말고, 그 사이트의 HTML을{' '}
          <strong>천천히 구경해 보세요.</strong> 제목엔 어떤 태그를 썼는지, 메뉴는 어떻게
          쌓여 있는지. 잘 만든 사이트의 코드를 구경하는 건, 잘 쓴 글을 필사하는 것과 같은{' '}
          <strong>최고의 공부</strong>예요. 프로 개발자들도 매일 이렇게 남의 코드를 봅니다.
        </p>
        <div className="tip">
          <b>오늘의 진짜 수확</b> 제목을 바꾸는 기술이 아니에요.{' '}
          <strong>"웹은 마법이 아니라 코드구나"</strong>라는 확신입니다. 매일 쓰던 사이트가
          전부 사람이 쓴 HTML·CSS·JS이고, 나도 그걸 열어 볼 수 있고, 언젠가 만들 수도 있다 —
          이 감각을 손에 쥐었다면 여러분은 이미 개발자의 문 앞에 서 있는 거예요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🔍 여기까지 왔다면</h3>
          <p className="muted">
            이제 주소창의 엔터 한 번 뒤에 숨은 <strong>요청↔응답의 대화</strong>를 알고,
            HTML(뼈대)·CSS(옷)·JavaScript(움직임)의 역할을 구분할 수 있고,{' '}
            <strong>F12</strong>라는 열쇠로 어떤 사이트든 뒷면을 열어 볼 수 있게 됐어요.
            콘솔에서 <strong>2 + 3</strong>을 계산시키며 컴퓨터에게 첫 명령도 내려 봤고요.
            그런데 그 콘솔 창, 계산기로만 쓰기엔 아깝지 않나요? 다음{' '}
            <Link to="/learn/lv1-first-javascript"><strong>나의 첫 JavaScript</strong></Link>{' '}
            코스에서, 브라우저에게 본격적으로 말을 거는 법 — 변수, 조건, 반복 — 을 배우며
            '움직임'의 세계로 들어갑니다.
          </p>
        </div>
      </div>
    </div>
  );
}
