// 이 파일이 하는 일: "Kotlin 입문" 코스 — 안드로이드의 현대 언어 Kotlin을,
// 이미 React/JS를 배운 웹 개발자의 눈으로 이해시키는 정적 학습 페이지.
// 왜 Kotlin인가 → 변수(val/var)·타입추론 → null 안정성 → 함수·람다 →
// 클래스·data class → 컬렉션·when → "JS/Java 아는 사람용 한 장 요약" 7개 섹션.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.
// 프레이밍: "2개월에 네이티브 전문가"가 아니라 "지형을 읽고 내 실력으로 앱까지 가는 길을 아는" 수준.

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

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

const CODE_WHY = `같은 일, 다른 분량 — Java 대비 Kotlin이 왜 '간결·안전'인가

// Java: 사람 한 명을 담는 클래스 (장황함)
public class Person {
    private final String name;
    private int age;
    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }
    public String getName() { return name; }
    public int getAge()     { return age; }
    public void setAge(int age) { this.age = age; }
    // equals(), hashCode(), toString() ... 아직 수십 줄 더 남음
}

// Kotlin: 정확히 같은 것 — 딱 한 줄
data class Person(val name: String, var age: Int)

Kotlin이 내세우는 세 글자:
· 간결  — 반복 코드(보일러플레이트)를 언어가 대신 써 준다
· 안전  — null을 '컴파일 단계'에서 잡아 앱 크래시를 예방한다
· 호환  — Java와 같은 JVM에서 돌고, 서로 100% 섞어 쓸 수 있다`;

const CODE_VAL_VAR = `변수는 두 가지 — 여러분이 아는 JS와의 지도

Kotlin                      JavaScript (이미 아는 것)
──────────────────────      ──────────────────────
val name = "미림"           const name = "미림"   // 다시 대입 X
var age  = 18               let   age  = 18       // 다시 대입 O

val = value(값 고정). 한 번 담으면 다른 값으로 못 바꾼다   (const의 친척)
var = variable(변함).  얼마든지 다시 대입할 수 있다         (let의 친척)

// 타입 추론: 타입을 굳이 안 써도 컴파일러가 알아서 판단
val name = "미림"     // String 이라고 스스로 알아냄
val age  = 18         // Int
val pi   = 3.14       // Double

// 원하면 타입을 못 박을 수도 있다 (JS엔 없는, 정적 타입의 안전벨트)
val name: String = "미림"
var age:  Int    = 18

age  = 19        // ✅ var라서 OK
name = "다른값"  // ❌ val이라서 컴파일 에러 — '실행 전에' 잡힌다!`;

const CODE_NULL = `null 안정성 — 안드로이드 앱 크래시 1위 'NPE'를 언어가 막는다

// 타입 뒤 물음표(?)가 "여긴 null이 들어올 수 있음" 이라는 표시
var name:  String  = "미림"   // 절대 null 불가 — null 넣으면 컴파일 에러
var maybe: String? = null     // ?를 붙여야 null을 허용

// ① ?.  안전 호출(safe call): 앞이 null이면 통째로 null을 돌려줌 (크래시 X)
val len = maybe?.length       // maybe가 null이면 → len도 그냥 null

// ② ?:  엘비스 연산자: 왼쪽이 null이면 오른쪽 기본값으로 대체
val shown = maybe ?: "손님"   // maybe가 null이면 → "손님"

// ③ !!  단언(not-null assertion): "절대 null 아냐"라고 장담 — 틀리면 즉시 크래시
val forced = maybe!!.length   // maybe가 null이면 바로 NullPointerException

정리:  ?. 와 ?: 는 '안전',  !! 는 '위험한 탈출구'.
       정말 확신할 때만 !!, 평소엔 ?. / ?: 로 조용히 흘려보낸다.`;

const CODE_FUN = `함수와 람다 — React에서 쓰던 화살표 함수, 여기서도 통한다

// fun 키워드로 함수 정의 (타입은 이름 뒤에 콜론으로)
fun add(a: Int, b: Int): Int {
    return a + b
}

// 몸통이 식 하나뿐이면 = 로 줄인다 (단일 표현식 함수)
fun add(a: Int, b: Int) = a + b        // 반환 타입까지 추론

// 기본값 인자 — 안 넘기면 이 값을 사용
fun greet(name: String = "손님") = "안녕, $name"   // $변수 = 문자열 안에 값 삽입
greet()          // "안녕, 손님"
greet("미림")    // "안녕, 미림"

// 람다 = 이름 없는 일회용 함수.  { 매개변수 -> 몸통 } 모양
val square = { x: Int -> x * x }
square(4)        // 16

// JS와 나란히 보면:
//   JS : const square = (x)     => x * x;
//   Kt : val   square = { x: Int -> x * x }`;

const CODE_CLASS = `클래스와 data class — 반복 코드를 언어에게 떠넘기기

// 주 생성자를 클래스 이름 옆 괄호에 바로 쓴다 (val/var가 곧 필드가 됨)
class Person(val name: String, var age: Int) {
    fun birthday() { age += 1 }        // 메서드
}

val p = Person("미림", 18)             // new 키워드 없음!
println(p.name)   // "미림"   (게터 자동 생성)
p.birthday()      // age → 19
p.name = "X"      // ❌ val 필드라 못 바꿈

// data class: '데이터를 담는 게 목적'인 클래스
data class User(val id: Long, val name: String)

// data를 붙이면 공짜로 따라오는 것들:
val a = User(1, "미림")
val b = User(1, "미림")
a == b            // true  — equals 자동 (값이 같으면 같은 것으로)
println(a)        // User(id=1, name=미림)  — toString 자동
val c = a.copy(name = "미르")   // 하나만 바꿔 '새 객체' 만들기 — copy 자동`;

const CODE_WHEN = `컬렉션과 when — React의 .map()/.filter()가 거의 그대로

// 리스트 만들기 (listOf = 못 바꿈, mutableListOf = 바꿀 수 있음)
val courses = listOf("네트워크", "React", "Kotlin")

// 여러분이 React에서 쓰던 바로 그 함수들!
val loud  = courses.map { it.uppercase() }     // it = 각 원소(인자 하나면 이름 생략)
val short = courses.filter { it.length <= 6 }
courses.forEach { println(it) }
//   JS : courses.map(c => c.toUpperCase())
//   Kt : courses.map { it.uppercase() }        // 괄호 없이 중괄호만

// when = switch의 진화형. '값을 돌려주는 식'으로도 쓴다
fun grade(score: Int): String = when {
    score >= 90 -> "A"
    score >= 80 -> "B"
    score >= 70 -> "C"
    else        -> "재수강"
}

// 값 하나를 여러 경우와 비교 (break 필요 없음, 여러 값 묶기도 가능)
when (day) {
    "토", "일" -> println("주말!")
    else       -> println("평일")
}`;

const CODE_SUMMARY = `JS/Java 아는 사람을 위한 한 장 — Kotlin 번역표

개념           이미 아는 것 (JS)          Kotlin
────────────────────────────────────────────────────────
상수 / 변수    const / let               val / var
타입           동적(런타임에 결정)        정적 + 추론(컴파일 때 결정)
문자열 삽입    \`안녕 \${name}\`             "안녕 $name"
화살표 함수    (x) => x * x              { x -> x * x }
map / filter   arr.map(f)                list.map { it }
null 대비      x?.y  /  x ?? "기본"      x?.y  /  x ?: "기본"
클래스         class + 생성자 코드        data class 한 줄
switch         switch / case / break     when  (break 불필요)

Java 하던 사람에게 한마디:
· 문장 끝 세미콜론(;) 안 붙여도 된다
· new 키워드가 없다 — 그냥 Person("미림", 18)
· 게터/세터·equals·toString을 손으로 안 쓴다 (data class가 해결)
· null이 '타입에 드러난다' — String 과 String? 는 아예 다른 타입`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다 — React 코스에서 배운 그 원리.
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: '왜 Kotlin인가' },
  { n: 2, label: 'val / var · 타입추론' },
  { n: 3, label: 'null 안정성' },
  { n: 4, label: '함수와 람다' },
  { n: 5, label: '클래스 · data class' },
  { n: 6, label: '컬렉션과 when' },
  { n: 7, label: '한 장 요약' },
];

export default function KotlinIntroPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 앱 개발</div>
        <h1>Kotlin 입문<br />— 웹 개발자의 눈으로 보는 안드로이드 언어</h1>
        <p>
          여러분은 이미 React로 <span className="icode">const</span>·<span className="icode">let</span>,
          화살표 함수, <span className="icode">.map()</span>을 써 봤어요. 놀랍게도 안드로이드 앱을
          만드는 언어 <strong>Kotlin</strong>은 그 감각과 소름 돋게 닮았습니다. 목표는 "2개월 만에
          앱 전문가"가 아니라 <strong>이미 아는 웹 지식을 다리 삼아 앱 언어의 지형을 읽는 것</strong> —
          val/var부터 null 안정성, 람다, data class까지 뼈대를 세워 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 70분</span>
          <span className="chip">실습: 코드 읽고 옮겨 보기</span>
          <span className="chip">선수 지식: JS 기초(변수·함수·배열)</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="왜 Kotlin인가" sub="Java의 사투리를 표준어로 다듬은 언어">
        <p>
          안드로이드 앱은 오랫동안 <strong>Java</strong>로 만들었어요. Java는 튼튼하지만
          <strong> 장황</strong>합니다 — 사람 한 명을 담는 클래스 하나에도 게터·세터·생성자로
          수십 줄이 필요하죠. 젯브레인즈(JetBrains)가 만든 <strong>Kotlin</strong>은 "같은 일을
          더 짧고 안전하게"를 목표로 나온 언어이고, 2017년 구글이 안드로이드 공식 언어로
          채택한 뒤 지금은 <strong>안드로이드 개발의 표준</strong>이 됐습니다.
        </p>
        <Code>{CODE_WHY}</Code>
        <p>
          핵심은 Kotlin이 Java와 <strong>같은 JVM</strong> 위에서 돌고, 서로 자유롭게 섞어 쓸 수
          있다는 점이에요. 우리 회사 백엔드가 <strong>Spring Boot</strong>(역시 JVM에서 도는
          Java)로 돼 있는데, Kotlin은 바로 그 세계의 이웃 언어입니다. 여러분이 배우는 React가
          "웹의 현대 표준"이라면, Kotlin은 "안드로이드의 현대 표준"이라고 보면 돼요.
        </p>
        <div className="tip">
          <b>미리 보는 큰 그림</b> 이 코스는 문법 하나하나를 <strong>여러분이 아는 JS와 짝지어</strong>
          갑니다. val↔const, 람다↔화살표 함수, .map()↔.map(). 새 언어를 통째로 외우는 게 아니라,
          이미 있는 지식에 "번역표"를 붙이는 여정이에요.
        </div>
      </Section>

      <Section n={2} title="변수: val과 var, 그리고 타입추론" sub="const/let을 이미 안다면 절반은 끝났다">
        <p>
          Kotlin의 변수는 딱 두 종류예요. <span className="icode">val</span>은 <strong>value</strong>,
          한 번 담으면 다른 값으로 못 바꾸는 상자 — JS의 <span className="icode">const</span>와
          사촌입니다. <span className="icode">var</span>는 <strong>variable</strong>, 얼마든지 다시
          대입할 수 있는 상자 — JS의 <span className="icode">let</span>과 사촌이고요.
        </p>
        <Code>{CODE_VAL_VAR}</Code>
        <p>
          겉보기엔 JS와 똑같지만 결정적 차이가 하나 있어요. JS는 <strong>동적 타입</strong>이라
          변수에 뭐가 들었는지 실행해 봐야 알지만, Kotlin은 <strong>정적 타입</strong>이라
          타입이 애초에 정해져 있습니다. 다만 <strong>타입 추론</strong> 덕분에{' '}
          <span className="icode">val age = 18</span>처럼 짧게 써도 컴파일러가 알아서{' '}
          <span className="icode">Int</span>로 판단해 줘요. "짧게 쓰는 편함 + 타입의 안전함"을
          둘 다 챙기는 거죠.
        </p>
        <div className="tip">
          <b>습관 하나</b> Kotlin에서는 <strong>일단 val로 쓰고, 정말 바꿔야 할 때만 var로</strong>
          바꾸는 게 정석이에요. 안 바뀌는 값이 많을수록 코드가 예측 가능해지고 버그가 줄거든요.
          React에서 <span className="icode">const</span>부터 손이 가는 습관과 똑같습니다.
        </div>
      </Section>

      <Section n={3} title="null 안정성" sub="?. · ?: · !! — 앱을 지키는 세 글자">
        <p>
          안드로이드 앱이 갑자기 죽는(크래시) 원인 1위는 오랫동안{' '}
          <strong>NullPointerException(NPE)</strong>이었어요. "값이 있는 줄 알고 꺼냈는데 비어
          있어서" 터지는 사고죠. null을 만든 토니 호어(Tony Hoare)조차 훗날 그걸{' '}
          <strong>"10억 달러짜리 실수"</strong>라고 불렀을 정도예요. Kotlin은 이 문제를{' '}
          <strong>타입 차원에서</strong> 막습니다.
        </p>
        <p>
          방법은 간단해요. 타입 뒤에 물음표가 <strong>없으면</strong>{' '}
          (<span className="icode">String</span>) null을 절대 못 넣고, <strong>있으면</strong>{' '}
          (<span className="icode">String?</span>) null이 들어올 수 있다는 뜻입니다. 그리고
          null일 수 있는 값을 다룰 땐 세 연산자를 씁니다.
        </p>
        <Code>{CODE_NULL}</Code>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="null일 수 있는 값을 다루는 세 갈래: 물음표 점 연산자는 null이면 null을 안전하게 반환하고, 엘비스 연산자는 기본값으로 대체하고, 느낌표 두 개 단언은 null이면 앱이 크래시된다">
          <rect x="210" y="18" width="220" height="46" rx="10" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="320" y="40" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">val name: String?</text>
          <text x="320" y="57" textAnchor="middle" fontSize="11.5" fill="var(--muted)">null일 수도 있는 값</text>

          <line x1="320" y1="64" x2="110" y2="150" stroke="var(--line)" strokeWidth="2" />
          <line x1="320" y1="64" x2="320" y2="150" stroke="var(--line)" strokeWidth="2" />
          <line x1="320" y1="64" x2="530" y2="150" stroke="var(--line)" strokeWidth="2" />

          <rect x="30" y="150" width="160" height="40" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="110" y="175" textAnchor="middle" fontSize="13" fill="var(--ink)">name?.length</text>
          <rect x="240" y="150" width="160" height="40" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="320" y="175" textAnchor="middle" fontSize="13" fill="var(--ink)">name ?: "손님"</text>
          <rect x="450" y="150" width="160" height="40" rx="8" fill="var(--card)" stroke="var(--rose)" strokeWidth="2" />
          <text x="530" y="175" textAnchor="middle" fontSize="13" fill="var(--ink)">name!!.length</text>

          <line x1="110" y1="190" x2="110" y2="238" stroke="var(--teal)" strokeWidth="2" />
          <path d="M110 246 L104 234 L116 234 Z" fill="var(--teal)" />
          <line x1="320" y1="190" x2="320" y2="238" stroke="var(--primary)" strokeWidth="2" />
          <path d="M320 246 L314 234 L326 234 Z" fill="var(--primary)" />
          <line x1="530" y1="190" x2="530" y2="238" stroke="var(--rose)" strokeWidth="2" />
          <path d="M530 246 L524 234 L536 234 Z" fill="var(--rose)" />

          <rect x="24" y="246" width="172" height="56" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="110" y="268" textAnchor="middle" fontSize="12.5" fill="var(--ink)">null이면 그냥 null</text>
          <text x="110" y="287" textAnchor="middle" fontSize="12" fill="var(--muted)">안전하게 통과</text>
          <rect x="234" y="246" width="172" height="56" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="320" y="268" textAnchor="middle" fontSize="12.5" fill="var(--ink)">null이면 "손님"</text>
          <text x="320" y="287" textAnchor="middle" fontSize="12" fill="var(--muted)">기본값으로 대체</text>
          <rect x="444" y="246" width="172" height="56" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="530" y="268" textAnchor="middle" fontSize="12.5" fill="var(--ink)">null이면 앱 크래시</text>
          <text x="530" y="287" textAnchor="middle" fontSize="12" fill="var(--muted)">NPE 발생</text>

          <text x="110" y="326" textAnchor="middle" fontSize="12" fontWeight="600" fill="var(--teal)">?. 안전 호출</text>
          <text x="320" y="326" textAnchor="middle" fontSize="12" fontWeight="600" fill="var(--primary)">?: 엘비스</text>
          <text x="530" y="326" textAnchor="middle" fontSize="12" fontWeight="600" fill="var(--rose)">!! 단언(위험)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 같은 null 값도 어떤 연산자로 다루느냐에 따라 안전(?., ?:)하거나 위험(!!)하게 갈린다</p>
        <div className="warn">
          <b>!! 는 최후의 수단</b> <span className="icode">!!</span>는 "이건 절대 null 아냐"라는
          장담이에요. 틀리면 바로 그 자리에서 앱이 죽습니다. Kotlin을 쓰는 이유의 절반이 null
          안전인데 <span className="icode">!!</span>를 남발하면 그 안전을 스스로 반납하는 셈이죠.
          평소엔 <span className="icode">?.</span>와 <span className="icode">?:</span>로 흘려보내고,{' '}
          <span className="icode">!!</span>는 정말 확신할 때만 아껴 쓰세요.
        </div>
      </Section>

      <Section n={4} title="함수와 람다" sub="화살표 함수를 안다면, 람다도 안다">
        <p>
          함수는 <span className="icode">fun</span> 키워드로 정의해요. Java와 달리 타입을{' '}
          <strong>이름 뒤에 콜론</strong>으로 붙이는 게 특징입니다
          (<span className="icode">fun add(a: Int, b: Int): Int</span>). 그리고 함수 몸통이
          <strong> 식 하나뿐이면 = 기호로 한 줄로</strong> 줄일 수 있어요 — Kotlin다운 간결함이죠.
        </p>
        <Code>{CODE_FUN}</Code>
        <p>
          <strong>람다</strong>는 <strong>이름 없는 일회용 함수</strong>예요. 포스트잇에 "이거
          한 번만 해 줘"라고 적어 건네는 메모 같은 거죠. React에서 매일 쓰던{' '}
          <span className="icode">{'(x) => x * x'}</span> 화살표 함수, 그게 Kotlin에선{' '}
          <span className="icode">{'{ x -> x * x }'}</span>입니다. 화살표의 방향과 중괄호 위치만
          다를 뿐, "값을 받아서 결과를 돌려주는 작은 상자"라는 개념은 똑같아요.
        </p>
        <div className="tip">
          <b>문자열 템플릿</b> JS의 <span className="icode">{'`안녕 ${name}`'}</span>이
          Kotlin에선 <span className="icode">"안녕 $name"</span>이에요. 백틱 없이 큰따옴표 안에서
          바로 <span className="icode">$변수</span>를 꽂습니다. 계산식이 들어가면{' '}
          <span className="icode">{'"합계 ${a + b}"'}</span>처럼 중괄호를 쓰고요. 거의 같죠?
        </div>
      </Section>

      <Section n={5} title="클래스와 data class" sub="한 줄로 끝나는 데이터 상자">
        <p>
          Kotlin의 클래스는 <strong>생성자를 클래스 이름 옆 괄호에 바로</strong> 씁니다. 게다가
          그 괄호 안에 <span className="icode">val</span>/<span className="icode">var</span>를
          붙이면 그게 곧 필드가 되고, 게터/세터까지 자동으로 생겨요. Java라면 수십 줄이 필요한
          일이 한 줄로 끝납니다. 참고로 객체를 만들 때 <strong>new 키워드도 없어요</strong> —
          그냥 함수 부르듯 <span className="icode">Person("미림", 18)</span>.
        </p>
        <Code>{CODE_CLASS}</Code>
        <p>
          하이라이트는 <span className="icode">data class</span>예요. 클래스 앞에{' '}
          <span className="icode">data</span> 한 단어만 붙이면 <strong>값 비교(equals),
          보기 좋은 출력(toString), 복제(copy)</strong>가 공짜로 따라옵니다. 서버(우리 Spring
          Boot API)에서 받은 JSON을 담을 그릇으로 딱 맞아요 — "데이터만 담는 도시락통"인
          셈이죠. <span className="icode">copy(name = "미르")</span>로 반찬 하나만 바꿔 새 도시락을
          만드는 감각은, React에서 <span className="icode">{'{ ...user, name: "미르" }'}</span>로
          객체를 복제하던 것과 똑같습니다.
        </p>
        <div className="tip">
          <b>왜 값 비교가 공짜가 중요할까</b> 보통 클래스는 <span className="icode">==</span>가
          "같은 메모리 주소냐"를 따져요. 하지만 <span className="icode">data class</span>는
          "안에 든 값이 같냐"로 비교합니다. 그래서 서버에서 온 두 User가 내용이 같은지 한 줄로
          확인할 수 있어요. 목록을 다룰 때(React의 key를 떠올려 보세요) 아주 요긴합니다.
        </div>
      </Section>

      <Section n={6} title="컬렉션과 when 표현식" sub=".map()·.filter()는 그대로, switch는 진화형으로">
        <p>
          목록을 다루는 감각도 웹과 거의 같아요. <span className="icode">listOf(...)</span>로
          리스트를 만들고, 여러분이 React에서 쓰던{' '}
          <span className="icode">.map()</span>·<span className="icode">.filter()</span>·
          <span className="icode">.forEach()</span>를 <strong>그대로</strong> 씁니다. 단, 인자가
          하나일 땐 이름을 안 짓고 <span className="icode">it</span>으로 부르고, 소괄호 없이
          중괄호 람다만 붙이는 게 Kotlin 스타일이에요.
        </p>
        <Code>{CODE_WHEN}</Code>
        <p>
          <span className="icode">when</span>은 JS의 <span className="icode">switch</span>가
          진화한 형태예요. 두 가지가 크게 좋아졌습니다. 첫째, <strong>break가 필요 없어요</strong> —
          맞는 갈래 하나만 실행하고 끝납니다(switch에서 break 빼먹어 생기는 사고가 없죠). 둘째,{' '}
          <strong>값을 돌려주는 '식(expression)'</strong>이라 <span className="icode">val grade =
          when {'{ ... }'}</span>처럼 결과를 바로 변수에 담을 수 있어요. 여러 갈림길을 그리는
          표지판이라고 생각하면 됩니다.
        </p>
        <div className="tip">
          <b>불변이 기본</b> <span className="icode">listOf</span>가 만든 리스트는 원소를
          추가·삭제할 수 없어요(읽기 전용). 바꿔야 하면{' '}
          <span className="icode">mutableListOf</span>를 씁니다. 여기서도 Kotlin은 "일단 못 바꾸게,
          꼭 필요할 때만 바꾸게"라는 val/var의 철학을 그대로 밀고 갑니다.
        </div>
      </Section>

      <Section n={7} title="JS/Java 아는 사람을 위한 한 장 요약" sub="새 언어가 아니라, 번역표를 외운 것">
        <p>
          여기까지 왔다면 눈치챘을 거예요 — Kotlin은 <strong>완전히 새로운 세계가 아니라,
          여러분이 아는 것들의 재배치</strong>라는 걸요. 아래 표 한 장이면 오늘 배운 게 전부
          담깁니다. 막힐 때 이 표만 다시 펴 보세요.
        </p>
        <Code>{CODE_SUMMARY}</Code>
        <p>
          물론 이 코스가 안드로이드 앱 전체를 만드는 법까지 알려 주진 않아요. 화면을 그리는
          Jetpack Compose, 기기 권한, 생명주기(lifecycle) 같은 안드로이드 고유의 세계가 그 다음에
          기다리고 있습니다. 하지만 <strong>언어의 지형을 읽을 수 있게 됐다는 것</strong>이 큰
          출발점이에요. 낯선 Kotlin 코드를 만나도 "아, 이건 val이니까 상수, 이건 ?.니까 null
          안전 호출"이라고 해석되기 시작할 테니까요.
        </p>
        <div className="tip">
          <b>가장 좋은 연습</b> React 코스에서 만들었던 작은 함수(예: 좋아요 개수를 세거나 목록을
          거르는 코드)를 골라, 위 번역표를 보며 <strong>Kotlin으로 옮겨 써 보세요</strong>.{' '}
          <span className="icode">const</span>→<span className="icode">val</span>,{' '}
          화살표 함수→람다로 바꾸는 손맛이 붙으면, 두 언어가 한 가족이라는 게 몸으로 느껴집니다.
          온라인 <span className="icode">Kotlin Playground</span>(play.kotlinlang.org)에 붙여넣어
          바로 돌려볼 수도 있어요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🤖 여기까지 왔다면</h3>
          <p className="muted">
            이제 val/var, null 안정성(?. ?: !!), 람다, data class, when이라는 단어로 Kotlin
            코드를 <strong>읽고 옮길 수</strong> 있게 됐어요. 그리고 무엇보다 — 여러분이 배운
            React/JS 지식이 <strong>앱 언어로 건너가는 다리가 된다</strong>는 걸 확인했습니다.
            안드로이드의 현대 UI 도구 <strong>Jetpack Compose</strong>는 React처럼 선언형이라,
            "화면 = 상태의 함수"라는 감각이 그대로 이어지고요. 다음은 바다 건너 반대편 대륙 —{' '}
            <Link to="/learn/ios-basics"><strong>iOS 기초</strong></Link>에서 애플의 Swift와
            아이폰 앱의 지형을 같은 방식으로 읽어 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
