// 이 파일이 하는 일: "Java 기초" 코스 — JS만 써 본 사람이 Java의 세계관(타입·클래스·컴파일)을
// 이해하고, 우리 백엔드(Spring Boot) 코드를 읽을 수 있게 되는 것을 목표로 하는 정적 학습 페이지.
// (JS와의 차이 → 변수와 타입 → 클래스와 객체 → 메서드·생성자 → 접근제어자 → 컬렉션 → 예외 → 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// Java 코드 예제는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 코드 예제 · 비교표 상수들 ──

const CODE_JS_VS_JAVA = `같은 일을 하는 코드, 두 언어의 말투 차이

JavaScript (우리 프론트)          Java (우리 백엔드)
──────────────────────────    ─────────────────────────────
let age = 17;                 int age = 17;
let name = "지수";             String name = "지수";
age = "열일곱";  // 허용됨!     age = "열일곱";  // 컴파일 에러!

→ JS는 변수에 아무거나 담을 수 있지만,
  Java는 "이 변수엔 정수만!" 하고 미리 선언하고, 어기면 실행 전에 막습니다.`;

const CODE_COMPILE = `두 언어가 실행되는 방식

JS:   코드 작성 → 브라우저가 읽으면서 바로 실행 (통역사가 옆에서 실시간 통역)
Java: 코드 작성 → 컴파일(.java → .class 번역) → 실행 (책을 통째로 번역 출판)

컴파일의 좋은 점:
- 오타·타입 실수를 "실행하기 전에" 전부 잡아줌
- 미리 번역해 두니 실행 속도가 빠름

그래서 Java 백엔드는 "돌려보니 터지네?"가 아니라
"애초에 빌드가 안 되네?"로 실수를 먼저 만납니다. 서버엔 이게 축복이에요.`;

const CODE_TYPES = `자주 쓰는 타입 3총사 (+ 친구들)

타입       담는 것          예시
────────────────────────────────────────────
int       정수             int stock = 30;
String    문자열           String title = "Java 기초";
boolean   참/거짓          boolean isDone = false;

double    소수             double price = 1500.5;
long      아주 큰 정수      long userId = 9000000001L;

// 선언 = "타입 + 이름 + 값"
int score = 95;          // 만들면서 값 넣기
String mentor;           // 일단 선언만
mentor = "선배님";        // 나중에 값 넣기
mentor = 100;            // ❌ String 자리에 숫자 → 컴파일 에러`;

const CODE_CLASS = `클래스 = 붕어빵 틀, 객체 = 붕어빵

// User.java — "회원"이라는 붕어빵 틀
public class User {
    private String username;   // 틀에 파인 홈: 아이디 자리
    private String nickname;   //               닉네임 자리
    private boolean active;    //               활성화 여부 자리
}

// 틀(클래스)은 하나, 붕어빵(객체)은 원하는 만큼:
User kim = new User();   // 붕어빵 1호
User lee = new User();   // 붕어빵 2호 — 틀은 같지만 서로 다른 붕어빵!

→ new 키워드가 "틀에 반죽 부어서 하나 굽기"입니다.`;

const CODE_METHOD = `메서드 = 객체가 할 수 있는 행동

public class User {
    private boolean active;

    //  ①        ②      ③
    public boolean isActive() {
        return active;          // ④
    }

    public void deactivate() {  // void = 돌려주는 값 없음
        this.active = false;    // this = "지금 이 붕어빵 자신"
    }
}

① 공개 범위  ② 반환 타입(무엇을 돌려주나)  ③ 이름과 괄호(재료 받는 곳)  ④ 결과 반환

// JS의 function과 비슷하지만, "무엇을 받아서 무엇을 돌려주는지"
// 타입을 전부 약속해 두는 게 다릅니다. 읽는 사람이 문서 없이도 알 수 있죠.`;

const CODE_CONSTRUCTOR = `생성자 = 붕어빵 구울 때 반드시 넣을 재료 목록

public class User {
    private String username;
    private String nickname;

    // 클래스와 이름이 같고, 반환 타입이 없으면 → 생성자!
    public User(String username, String nickname) {
        this.username = username;   // this.username = 붕어빵의 홈
        this.nickname = nickname;   // username      = 방금 받은 재료
    }
}

User kim = new User("kim01", "김붕어");  // 재료를 줘야 구워짐
User bad = new User();                   // ❌ 재료 없이는 못 구움 (컴파일 에러)

→ "아이디 없는 회원"이 아예 만들어질 수 없게 막는 안전장치예요.`;

const CODE_ACCESS = `접근제어자 = 문의 종류

public   누구나 열 수 있는 정문
private  그 클래스 안에서만 여는 내 방 문

public class User {
    private String password;              // 밖에서 직접 손대기 금지!

    public boolean checkPassword(String input) {
        return this.password.equals(input);   // 확인은 창구를 통해서만
    }
}

user.password = "1234";           // ❌ private — 컴파일 에러
user.checkPassword("1234");       // ⭕ 공개 창구(메서드)로만 접근

→ 데이터는 private으로 숨기고, 공개 메서드로만 만지게 하는 습관.
  은행 금고를 아무나 열게 두지 않고 창구 직원을 거치게 하는 것과 같아요.`;

const CODE_COLLECTIONS = `List = 번호표 있는 줄서기, Map = 이름표 달린 사물함

// List — 순서가 있는 목록 (JS의 배열과 비슷)
List<String> mentors = new ArrayList<>();
mentors.add("김선배");            // [김선배]
mentors.add("이선배");            // [김선배, 이선배]
mentors.get(0);                  // "김선배" (0번부터!)
mentors.size();                  // 2

// Map — 키(이름표)로 값을 찾는 사물함 (JS의 객체/Map과 비슷)
Map<String, Integer> scores = new HashMap<>();
scores.put("네트워크", 90);       // "네트워크" 칸에 90 넣기
scores.put("Java", 85);
scores.get("Java");              // 85

// <String> <String, Integer> — 꺾쇠 안은 "이 통엔 이 타입만 담아요" 약속.
// 여기서도 Java의 성격이 보이죠: 통에도 타입 라벨을 붙입니다.`;

const CODE_EXCEPTION = `예외 처리 = 사고가 나도 서버는 멈추지 않게

try {
    int stock = Integer.parseInt(input);   // "30" → 30. 그런데 "삼십"이 오면?
    System.out.println(stock * 2);
} catch (NumberFormatException e) {
    // 숫자로 못 바꾸는 값이 왔을 때 여기로 점프!
    System.out.println("숫자만 입력해 주세요: " + e.getMessage());
}

try   = "일단 해 볼게, 사고 나면 알려줘"
catch = "사고 나면 이렇게 수습할게"

→ 예외 처리가 없으면 이용자 한 명의 이상한 입력에 프로그램 전체가 죽어요.
  자동차 에어백처럼, 안 터지는 게 최선이지만 반드시 달아 두는 장치입니다.`;

const CODE_HELLO = `// 1) IntelliJ에서 New Project → Java 선택 → 프로젝트 생성
// 2) src 폴더 우클릭 → New → Java Class → 이름 "Hello"
// 3) 아래처럼 입력:

public class Hello {
    public static void main(String[] args) {
        String name = "미림";
        int year = 3;
        System.out.println("안녕하세요, " + name + " " + year + "학년!");
    }
}

// 4) main 옆의 ▶ 초록 화살표 클릭 → 아래 콘솔에 출력 확인!
// main 메서드는 Java 프로그램의 "정문" — 실행하면 여기부터 시작합니다.

// 도전: name을 int로 바꿔 보세요. 실행 버튼을 누르기도 전에
// IntelliJ가 빨간 줄로 화를 내는 걸 볼 수 있어요. 그게 컴파일 검사입니다.`;

const CODE_READING = `우리 백엔드 코드 읽기 체크리스트 — 도메인 클래스 하나를 골라서:

□ public class 클래스이름  → 이 붕어빵 틀의 이름은? (섹션 3)
□ private 타입 필드이름;    → 홈(필드)이 몇 개? 각각 무슨 타입? (섹션 2·6)
□ 클래스이름과 같은 메서드    → 생성자가 재료를 몇 개 요구하나? (섹션 5)
□ public ... 메서드( ) { }  → 이 객체가 할 수 있는 행동은? (섹션 4)
□ List<...> / Map<...>     → 다른 객체를 여러 개 품고 있나? (섹션 7)

→ 다섯 칸이 다 채워지면, 그 클래스가 "무엇을 알고(필드)
  무엇을 할 수 있는지(메서드)" 한 문장으로 말해 보세요.
  그게 되면 Java 코드를 '읽을 줄 아는' 겁니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '클래스와 객체' },
  { n: 4, label: '메서드' },
  { n: 5, label: '생성자' },
  { n: 6, label: '접근제어자' },
  { n: 7, label: 'List와 Map' },
  { n: 8, label: '예외와 실습' },
];

export default function JavaBasicsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 왜 필요하고 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 소프트웨어</div>
        <h1>Java 기초<br />— 우리 백엔드의 모국어 배우기</h1>
        <p>
          어썸데브의 백엔드(Spring Boot)는 전부 Java로 쓰여 있어요. 이 코스는 JS만 써 본
          사람이 Java의 세계관 — <strong>타입을 미리 약속하고, 실행 전에 검사한다</strong> —
          을 이해하고, 우리 서버 코드를 직접 읽어낼 수 있게 되는 것이 목표입니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 90분</span>
          <span className="chip">실습 2개 (IntelliJ + 코드 읽기)</span>
          <span className="chip">준비물: IntelliJ IDEA</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="JS와 뭐가 다를까" sub="타입을 미리 선언하고, 실행 전에 번역(컴파일)한다">
        <p>
          여러분이 프론트에서 쓰는 JavaScript는 <strong>자유로운 언어</strong>예요. 변수에
          숫자를 넣었다가 문자열을 넣어도 군말이 없죠. Java는 반대로 <strong>깐깐한
          언어</strong>입니다 — 변수를 만들 때 "여기엔 정수만 담을 거야" 하고
          <strong> 타입을 미리 선언</strong>하고, 약속을 어기면 실행조차 못 하게 막아요.
        </p>
        <Code>{CODE_JS_VS_JAVA}</Code>
        <p>
          두 번째 차이는 <strong>컴파일</strong>이에요. JS는 브라우저가 코드를 읽으면서 바로
          실행하는 <strong>실시간 통역</strong> 방식이고, Java는 실행 전에 코드를 통째로
          기계가 이해하는 말로 <strong>번역 출판</strong>하는 방식입니다.
        </p>
        <Code>{CODE_COMPILE}</Code>
        <svg className="diagram" viewBox="0 0 640 250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="JS는 코드를 바로 실행하고, Java는 컴파일 단계에서 실수를 걸러낸 뒤 실행하는 과정 비교 도해">
          <text x="20" y="42" fontSize="13" fontWeight="600" fill="var(--ink)">JavaScript — 실시간 통역</text>
          <rect x="20" y="55" width="130" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="85" y="76" textAnchor="middle" fontSize="13" fill="var(--ink)">코드 작성</text>
          <text x="85" y="94" textAnchor="middle" fontSize="12" fill="var(--muted)">.js</text>
          <line x1="150" y1="79" x2="446" y2="79" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M446,73 L458,79 L446,85 Z" fill="var(--muted)" />
          <text x="299" y="70" textAnchor="middle" fontSize="12" fill="var(--muted)">읽으면서 바로 실행</text>
          <rect x="460" y="55" width="160" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="540" y="76" textAnchor="middle" fontSize="13" fill="var(--ink)">실행</text>
          <text x="540" y="94" textAnchor="middle" fontSize="12" fill="var(--rose)">실수는 이때 터짐</text>
          <text x="20" y="152" fontSize="13" fontWeight="600" fill="var(--ink)">Java — 번역 출판(컴파일)</text>
          <rect x="20" y="165" width="130" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="85" y="186" textAnchor="middle" fontSize="13" fill="var(--ink)">코드 작성</text>
          <text x="85" y="204" textAnchor="middle" fontSize="12" fill="var(--muted)">.java</text>
          <line x1="150" y1="189" x2="216" y2="189" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M216,183 L228,189 L216,195 Z" fill="var(--muted)" />
          <rect x="230" y="165" width="160" height="48" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="310" y="186" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--primary)">컴파일(번역)</text>
          <text x="310" y="204" textAnchor="middle" fontSize="12" fill="var(--muted)">타입·오타 전부 검사</text>
          <line x1="390" y1="189" x2="446" y2="189" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M446,183 L458,189 L446,195 Z" fill="var(--muted)" />
          <rect x="460" y="165" width="160" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="540" y="186" textAnchor="middle" fontSize="13" fill="var(--ink)">실행</text>
          <text x="540" y="204" textAnchor="middle" fontSize="12" fill="var(--teal)">이미 검증된 코드</text>
          <text x="310" y="236" textAnchor="middle" fontSize="12" fill="var(--rose)">실수가 있으면 실행까지 가지 못하고 컴파일에서 차단</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: JS는 바로 실행, Java는 컴파일 검사를 통과해야 실행</p>
        <div className="tip">
          <b>왜 백엔드는 깐깐한 언어를 쓸까?</b> 프론트에서 버그가 나면 그 사람 화면 하나가
          이상해지지만, 서버에서 버그가 나면 <strong>모든 이용자</strong>가 동시에 피해를 봐요.
          그래서 실수를 실행 전에 잡아 주는 깐깐함이 서버 쪽에선 큰 장점이 됩니다.
        </div>
      </Section>

      <Section n={2} title="변수와 타입" sub="int, String, boolean — 라벨 붙은 서랍">
        <p>
          Java의 변수는 <strong>라벨이 붙은 서랍</strong>이에요. <span className="icode">int</span> 라벨이
          붙은 서랍엔 정수만, <span className="icode">String</span> 서랍엔 문자열만 들어갑니다.
          라벨과 다른 물건을 넣으려 하면 넣는 순간(컴파일 때) 거부당해요.
        </p>
        <Code>{CODE_TYPES}</Code>
        <div className="warn">
          <b>대소문자 함정</b> — <span className="icode">int</span>·<span className="icode">boolean</span>은
          소문자로 시작하고, <span className="icode">String</span>은 대문자로 시작해요.
          <span className="icode">string</span>이라고 쓰면 에러! (String은 기본형이 아니라 클래스라서
          그래요 — 클래스 이름은 대문자로 시작한다는 규칙, 다음 섹션에서 만납니다.)
        </div>
      </Section>

      <Section n={3} title="클래스와 객체" sub="붕어빵 틀과 붕어빵">
        <p>
          Java 세계의 주인공입니다. <strong>클래스</strong>는 붕어빵 <strong>틀</strong>,
          <strong> 객체</strong>는 그 틀로 구운 <strong>붕어빵</strong>이에요. 틀에는
          "머리·꼬리·팥 넣는 자리"처럼 모양(필드)이 파여 있고, 같은 틀로 구워도
          팥붕·슈붕처럼 <strong>내용물(값)은 붕어빵마다 다를 수 있죠</strong>.
        </p>
        <Code>{CODE_CLASS}</Code>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="클래스라는 붕어빵 틀 하나에서 new User()로 kim, lee 두 객체가 만들어지는 인스턴스화 도해">
          <rect x="20" y="70" width="225" height="200" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="132" y="100" textAnchor="middle" fontSize="15" fontWeight="600" fill="var(--ink)">User 클래스</text>
          <text x="132" y="120" textAnchor="middle" fontSize="12" fill="var(--muted)">붕어빵 틀 — 설계도는 1개</text>
          <rect x="40" y="135" width="185" height="30" rx="6" fill="none" stroke="var(--line)" strokeDasharray="5 4" />
          <text x="132" y="155" textAnchor="middle" fontSize="12" fill="var(--muted)">username : String (자리)</text>
          <rect x="40" y="175" width="185" height="30" rx="6" fill="none" stroke="var(--line)" strokeDasharray="5 4" />
          <text x="132" y="195" textAnchor="middle" fontSize="12" fill="var(--muted)">nickname : String (자리)</text>
          <rect x="40" y="215" width="185" height="30" rx="6" fill="none" stroke="var(--line)" strokeDasharray="5 4" />
          <text x="132" y="235" textAnchor="middle" fontSize="12" fill="var(--muted)">active : boolean (자리)</text>
          <polyline points="250,150 300,150 300,95 385,95" fill="none" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M385,89 L398,95 L385,101 Z" fill="var(--muted)" />
          <polyline points="250,190 300,190 300,235 385,235" fill="none" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M385,229 L398,235 L385,241 Z" fill="var(--muted)" />
          <text x="346" y="158" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--primary)">new User()</text>
          <text x="346" y="176" textAnchor="middle" fontSize="12" fill="var(--muted)">틀에 반죽 붓기</text>
          <rect x="400" y="40" width="220" height="110" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="510" y="65" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--teal)">kim 객체 — 붕어빵 1호</text>
          <text x="510" y="90" textAnchor="middle" fontSize="13" fill="var(--ink)">username = "kim01"</text>
          <text x="510" y="111" textAnchor="middle" fontSize="13" fill="var(--ink)">nickname = "김붕어"</text>
          <text x="510" y="132" textAnchor="middle" fontSize="13" fill="var(--ink)">active = true</text>
          <rect x="400" y="180" width="220" height="110" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="510" y="205" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--amber)">lee 객체 — 붕어빵 2호</text>
          <text x="510" y="230" textAnchor="middle" fontSize="13" fill="var(--ink)">username = "lee02"</text>
          <text x="510" y="251" textAnchor="middle" fontSize="13" fill="var(--ink)">nickname = "이붕어"</text>
          <text x="510" y="272" textAnchor="middle" fontSize="13" fill="var(--ink)">active = false</text>
          <text x="320" y="325" textAnchor="middle" fontSize="12" fill="var(--muted)">틀은 하나, 붕어빵은 원하는 만큼 — 담긴 값은 붕어빵마다 다르다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 클래스(틀) 하나로 값이 서로 다른 객체(붕어빵)를 여러 개 굽는다</p>
        <p>
          멀리 있는 얘기가 아니에요 — 우리 플랫폼의 백엔드에도 <strong>User.java</strong>라는
          클래스가 실제로 있습니다. 여러분이 이 페이지에 로그인한 순간, 서버 어딘가에서
          <span className="icode">User</span> 틀로 구워진 "여러분 붕어빵" 객체가
          만들어져 돌아다니고 있어요. 지금 배우는 문법이 곧 우리 서비스의 실물입니다.
        </p>
        <div className="tip">
          <b>이름 규칙</b> — 클래스 이름은 <span className="icode">User</span>,
          <span className="icode">CourseProgress</span>처럼 <strong>대문자로 시작</strong>하고,
          변수·메서드 이름은 <span className="icode">userName</span>처럼 <strong>소문자로
          시작</strong>해요(camelCase). 코드만 보고 "아, 이건 클래스구나"를 구분하는 약속입니다.
        </div>
      </Section>

      <Section n={4} title="메서드" sub="객체가 할 수 있는 '행동'">
        <p>
          필드가 객체가 <strong>아는 것</strong>(데이터)이라면, 메서드는 객체가
          <strong> 할 수 있는 것</strong>(행동)이에요. JS의 함수와 비슷하지만 결정적 차이가
          하나 있습니다 — <strong>무엇을 받아서(매개변수 타입) 무엇을 돌려주는지(반환 타입)</strong>를
          전부 코드에 약속해 둔다는 것.
        </p>
        <Code>{CODE_METHOD}</Code>
        <p>
          이 약속 덕분에 남이 만든 메서드도 <strong>선언부 한 줄만 읽으면</strong> 쓸 수 있어요.
          "<span className="icode">public boolean isActive()</span> — 아무것도 안 받고,
          참/거짓을 돌려주는구나" — 자판기 버튼에 가격과 상품이 적혀 있어서 내부 기계를
          몰라도 쓸 수 있는 것과 같습니다.
        </p>
      </Section>

      <Section n={5} title="생성자" sub="붕어빵 구울 때 반드시 넣어야 하는 재료">
        <p>
          <span className="icode">new User()</span>로 붕어빵을 구울 때, "이 재료는 꼭 받고
          시작할게"를 정하는 특별한 메서드가 <strong>생성자</strong>예요. 클래스와
          <strong> 이름이 똑같고 반환 타입이 없으면</strong> 생성자입니다.
        </p>
        <Code>{CODE_CONSTRUCTOR}</Code>
        <p>
          생성자의 진짜 역할은 <strong>불량품 방지</strong>예요. 아이디 없는 회원, 제목 없는
          게시글 같은 "반쯤 만들어진 객체"가 세상에 나오는 것을 태어나는 순간부터 막아 줍니다.
          급식실에서 식판 없이는 배식 줄에 못 서게 하는 것과 같아요.
        </p>
      </Section>

      <Section n={6} title="접근제어자" sub="private이 기본인 이유 — 금고와 창구">
        <p>
          앞의 예제들에서 필드는 전부 <span className="icode">private</span>, 메서드는 대부분
          <span className="icode"> public</span>이었죠. 우연이 아니라 <strong>Java 세계의
          기본 예절</strong>이에요. 데이터(필드)는 금고에 넣어 잠그고, 꼭 필요한
          창구(메서드)만 열어 둡니다.
        </p>
        <Code>{CODE_ACCESS}</Code>
        <p>
          왜 이렇게까지 할까요? 필드를 <span className="icode">public</span>으로 열어 두면
          프로젝트의 <strong>아무 데서나</strong> 값을 바꿀 수 있어서, 버그가 났을 때 "누가
          언제 바꿨는지"를 추적할 수 없게 돼요. <span className="icode">private</span> + 공개
          메서드 구조면 값이 바뀌는 통로가 한 곳뿐이라, 검사·로그·검증을 그 창구 하나에만
          달면 됩니다. 이 습관을 <strong>캡슐화</strong>라고 불러요.
        </p>
      </Section>

      <Section n={7} title="List와 Map" sub="여러 개를 담는 두 가지 통">
        <p>
          회원 한 명은 <span className="icode">User</span> 객체 하나지만, 서비스엔 회원이
          수백 명이죠. 여러 개를 담는 통이 <strong>컬렉션</strong>이고, 실무에서 제일 많이
          쓰는 둘이 <strong>List</strong>(번호표 있는 줄서기)와 <strong>Map</strong>(이름표
          달린 사물함)입니다.
        </p>
        <Code>{CODE_COLLECTIONS}</Code>
        <p>
          고르는 기준은 간단해요 — <strong>"몇 번째"로 찾고 싶으면 List</strong>,
          <strong> "이름으로" 찾고 싶으면 Map</strong>. 출석부는 번호 순서가 중요하니 List,
          신발장은 이름표로 바로 찾아야 하니 Map인 거죠.
        </p>
        <div className="warn">
          <b>0번부터!</b> — List의 첫 번째 칸은 <span className="icode">get(0)</span>이에요.
          JS 배열과 똑같지만, "3명이 든 리스트의 마지막"이 <span className="icode">get(3)</span>이
          아니라 <span className="icode">get(2)</span>라는 건 몇 번을 배워도 헷갈리는 함정입니다.
        </div>
      </Section>

      <Section n={8} title="예외 처리, 그리고 실습" sub="try-catch — 그리고 손으로 굳히기">
        <p>
          아무리 타입 검사가 깐깐해도, <strong>실행 중에만 알 수 있는 사고</strong>가 있어요.
          이용자가 숫자 칸에 "삼십"을 입력하는 것까지 컴파일러가 미리 알 수는 없으니까요.
          이런 사고에 대비하는 안전벨트가 <strong>try-catch</strong>입니다.
        </p>
        <Code>{CODE_EXCEPTION}</Code>
        <p>이제 손으로 굳힐 시간이에요. 실습 두 개를 꼭 해 보세요.</p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> IntelliJ에서 내 첫 Java 클래스를 만들어 실행해 보세요.
          아래 순서대로 하면 5분이면 됩니다. 마지막의 "도전"까지 꼭 —
          컴파일 에러를 <strong>일부러 내 보는 것</strong>이 오늘 배운 것의 핵심 체험이에요.
        </div>
        <Code>{CODE_HELLO}</Code>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 우리 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)에서
          백엔드 저장소를 열고, <span className="icode">domain</span> 폴더의 클래스 아무거나
          하나(예: <span className="icode">User.java</span>)를 골라 아래 체크리스트를 채워 보세요.
          읽기만 하는 실습이니 마음껏 열어 봐도 됩니다.
        </div>
        <Code>{CODE_READING}</Code>
        <ol className="olist">
          <li>체크리스트를 채우다 모르는 문법이 나오면 해당 섹션 번호로 돌아가 복습해요.</li>
          <li>다 채웠으면 그 클래스를 <strong>한 문장으로 요약</strong>해서 멘토에게 말해 보세요.</li>
          <li>멘토가 "왜 이 필드는 private일까?" 같은 꼬리 질문을 던질 거예요 — 그게 진짜 시험!</li>
        </ol>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>☕ 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 <strong>타입과 컴파일</strong>이라는 Java의 세계관, <strong>클래스 →
            객체 → 메서드 → 생성자</strong>로 이어지는 뼈대, 데이터를 지키는
            <strong> private</strong>의 이유, <strong>List/Map/try-catch</strong>라는 실무
            도구까지 손에 넣었어요. 우리 백엔드 코드의 "단어"는 다 배운 셈입니다. 다음은
            그 단어들로 쓰인 "문장" — <Link to="/learn/spring-intro"><strong>Spring Boot
            입문</strong></Link> 코스에서 이 클래스들이 어떻게 API가 되는지 이어서 배워 보세요.
            실습 ②의 한 문장 요약은 멘토 확인 과제로 제출!
          </p>
        </div>
      </div>
    </div>
  );
}
