// 이 파일이 하는 일: "VS Code 200% 활용" 코스 — 매일 쓰는 에디터를 진짜 '도구'로
// 만드는 법을 8개 섹션으로 안내하는 정적 학습 페이지.
// (필수 단축키 15 → 확장 추천 → 통합 터미널 → Git 패널 → 설정 동기화 → 검색의 기술 → Emmet → 종합 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 단축키 표·예시 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 텍스트 표 · 예시 상수들 ──

const CODE_SHORTCUTS = `필수 단축키 15 — 이것만 손에 붙으면 마우스가 심심해집니다

분류        단축키                     하는 일
──────────────────────────────────────────────────────────────
만능       Ctrl+Shift+P              명령 팔레트 (VS Code의 모든 기능 검색)
이동       Ctrl+P                    파일 이름으로 바로 열기
           Ctrl+Tab                  최근 연 파일 사이 전환
편집       Alt+↑ / Alt+↓             현재 줄을 위/아래로 통째로 이동
           Shift+Alt+↑ / ↓           현재 줄 복제
           Ctrl+Shift+K              현재 줄 삭제 (드래그 필요 없음!)
           Ctrl+/                    주석 토글 (여러 줄 선택해도 OK)
멀티커서   Ctrl+D                    같은 단어를 하나씩 추가 선택
           Ctrl+Shift+L              같은 단어 전부 한 번에 선택
           Alt+클릭                  원하는 곳마다 커서 추가
선택       Ctrl+L                    현재 줄 전체 선택
검색       Ctrl+F / Ctrl+Shift+F     현재 파일 검색 / 프로젝트 전체 검색
화면       Ctrl+B                    사이드바 접기/펴기
           Ctrl+\`                    통합 터미널 열기/닫기 (\`는 1 왼쪽 키)
정리       Shift+Alt+F               문서 자동 정렬(포맷)

→ 한 번에 다 외우려 하지 마세요. 오늘은 위에서 5개만!`;

const CODE_EXTENSIONS = `추천 확장 4종 — 왼쪽 사이드바의 '확장(Extensions)' 아이콘에서 검색

이름                          하는 일
──────────────────────────────────────────────────────────
Korean Language Pack          메뉴 전체를 한국어로 (초반 진입장벽 제거)
Prettier                      저장할 때 코드를 자동으로 예쁘게 정렬
ES7+ React Snippets           "rafce" 치고 Tab → 컴포넌트 뼈대 자동 완성
GitLens                       코드 한 줄 한 줄 "누가 언제 왜 고쳤는지" 표시

설치 팁: 확장은 많다고 좋은 게 아니에요.
안 쓰는 확장은 에디터를 느리게 만드는 짐 — 필요할 때 하나씩!`;

const CODE_PRETTIER_SETTING = `Prettier를 '저장하면 자동 정렬'로 만들기:

1) Ctrl+Shift+P → "settings" 입력 → "기본 설정: 설정 열기(UI)" 선택
2) 검색창에 format on save 입력 → 체크박스 켜기
3) 검색창에 default formatter 입력 → Prettier 선택

이제부터 Ctrl+S를 누를 때마다 들쭉날쭉한 코드가 착착 정렬됩니다.
"코드 정렬로 리뷰에서 지적받을 일"이 영원히 사라져요.`;

const CODE_SNIPPET = `ES7 스니펫 맛보기 — 새 파일에서 "rafce" 네 글자 치고 Tab:

const 파일이름 = () => {
  return (
    <div>파일이름</div>
  );
};

export default 파일이름;

→ 우리 프로젝트의 컴포넌트 뼈대가 4글자 만에 완성!
  (rafce = React Arrow Function Component with Export)`;

const CODE_TERMINAL = `통합 터미널 — 에디터 안에 사는 터미널

열기: Ctrl+\` (백틱, 숫자 1 왼쪽 키)

왜 좋은가?
- 지금 열려 있는 폴더에서 바로 시작됨 (cd 할 필요 없음)
- 코드 보면서 아래쪽에서 npm run dev 실행 → 에러 나면 바로 위에서 수정
- + 버튼으로 터미널 여러 개: 하나는 서버 돌리고, 하나는 git 명령용

우리 frontend 폴더에서의 하루:
  Ctrl+\`           터미널 열고
  npm run dev      개발 서버 켜고
  + 버튼           새 터미널 하나 더 열어서
  git status       작업 상태 확인 — 전부 에디터 안에서!`;

const CODE_GIT_PANEL = `Git 패널로 커밋/푸시 — 명령어를 '눈'으로 확인하며

왼쪽 사이드바의 소스 제어 아이콘(가지 모양) 클릭 = Ctrl+Shift+G

① 변경(Changes) 목록에서 파일 클릭
   → 뭐가 바뀌었는지 좌우 비교 화면(diff)이 뜸. 커밋 전 셀프 리뷰!
② 파일 옆 + 버튼 = 스테이징 (git add와 같음)
③ 위 입력창에 커밋 메시지 쓰고 체크(✓) 버튼 = git commit
④ 아래 "변경 내용 동기화" 버튼 = git push + pull

터미널 명령이 익숙해질 때까지는 패널이 좋은 안전장치예요.
diff 화면에서 "어? 이건 왜 바뀌었지?" 하고 실수를 잡는 게 핵심.`;

const CODE_SETTINGS_SYNC = `설정 동기화(Settings Sync) — 내 에디터를 통째로 백업

왼쪽 아래 사람/톱니 아이콘 → "설정 동기화 켜기(Backup and Sync)"
→ GitHub 계정으로 로그인하면 끝.

동기화되는 것: 설정, 단축키, 확장 목록, 스니펫, UI 상태

언제 빛을 발하나?
- 집 PC ↔ 학교 PC ↔ 회사 PC, 어디서 로그인해도 같은 환경
- PC를 새로 밀어도 로그인 한 번이면 확장까지 전부 복원
→ "에디터 세팅에 반나절" 하는 일이 인생에서 사라집니다.`;

const CODE_SEARCH = `검색의 기술 — Ctrl+P와 Ctrl+Shift+F는 용도가 달라요

Ctrl+P  = 파일 '이름'으로 찾기 (도서관에서 책 제목으로 찾기)
  netpa 만 쳐도 → NetworkPage.jsx 후보로 등장 (부분 일치 OK)

Ctrl+Shift+F = 파일 '내용'으로 프로젝트 전체 검색 (책 속 문장으로 찾기)
  step-card 검색 → 이 클래스를 쓰는 모든 파일과 줄이 주르륵

실전 시나리오:
"이 버튼 문구 어느 파일에 있지?" → 화면에 보이는 문구 그대로
Ctrl+Shift+F에 붙여넣기. 모르는 코드베이스를 탐험하는 1번 도구!

보너스: 검색창의 .* 아이콘을 켜면 정규식 검색,
파일 필터에 *.jsx 를 넣으면 특정 확장자만 검색.`;

const CODE_EMMET = `Emmet 맛보기 — HTML을 수식처럼 쓰기 (VS Code 내장, 설치 불필요)

치고 Tab            결과
─────────────────────────────────────────────
div.card           <div className="card"></div>
ul>li*3            <ul>
                     <li></li>
                     <li></li>
                     <li></li>
                   </ul>
div.row>div.col*2  클래스 붙은 중첩 구조가 한 번에!

문법 요약: . = 클래스, > = 자식, * = 반복
JSX 파일에서도 동작해요(className으로 알아서 변환).
리스트 UI 뼈대 잡을 때 타자 수가 1/10로 줄어듭니다.`;

const CODE_PRACTICE = `종합 실습 — 우리 frontend 폴더에서 단축키 10개 체크리스트

준비: VS Code에서 [파일 → 폴더 열기]로 mirim-app/frontend 열기

□ 1. Ctrl+P → "network" 입력 → NetworkPage.jsx 열기
□ 2. Ctrl+F → "직접 확인" 검색 → 몇 개 나오나요?
□ 3. Ctrl+Shift+F → "step-card" 전체 검색 → 몇 개 파일에서 쓰이나요?
□ 4. 아무 줄에서 Ctrl+L → 줄 전체 선택
□ 5. 그 줄을 Alt+↓ 로 아래로 옮겼다가 Alt+↑ 로 원위치
□ 6. Shift+Alt+↓ 로 줄 복제 → Ctrl+Shift+K 로 복제한 줄 삭제
□ 7. 변수 이름 하나에 커서 두고 Ctrl+D 를 3번 → 하나씩 추가 선택
□ 8. Ctrl+/ 로 주석 만들었다가 다시 Ctrl+/ 로 해제
□ 9. Ctrl+\` 로 터미널 열고 git status 실행
□ 10. Ctrl+Shift+P → "reload" 입력 → 창 다시 로드 실행

⚠ 5~8번으로 파일이 바뀌었다면 Ctrl+Z 로 전부 되돌리고,
  git status 로 "변경 사항 없음"을 확인하며 마무리!`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '필수 단축키 15' },
  { n: 2, label: '확장 추천 4종' },
  { n: 3, label: '통합 터미널' },
  { n: 4, label: 'Git 패널' },
  { n: 5, label: '설정 동기화' },
  { n: 6, label: '검색의 기술' },
  { n: 7, label: 'Emmet 맛보기' },
  { n: 8, label: '종합 실습' },
];

export default function ToolVscodePage() {
  return (
    <div>
      {/* 히어로: 이 코스가 무엇을 바꿔 주는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>VS Code 200% 활용</h1>
        <p>
          여러분이 어썸데브에서 매일 가장 오래 붙어 있을 프로그램이 바로 VS Code예요.
          요리사가 칼을 갈듯이, 이 코스에서 에디터를 <strong>손에 딱 붙는 도구</strong>로
          만들어 봅니다 — 배운 건 그 자리에서 우리 <span className="icode">frontend</span> 폴더에
          바로 써 볼 거예요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">단축키 15개 + 실습 체크리스트 10개</span>
          <span className="chip">준비물: VS Code가 깔린 내 PC</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="필수 단축키 15" sub="마우스에서 손을 떼는 첫걸음">
        <p>
          단축키는 <strong>속도</strong> 문제이기 전에 <strong>흐름</strong> 문제예요.
          코드를 고치다 마우스로 손이 갈 때마다 생각이 한 번씩 끊기거든요.
          자전거 보조 바퀴를 떼는 것처럼, 처음엔 어색해도 일주일이면 몸이 기억합니다.
        </p>
        <Code>{CODE_SHORTCUTS}</Code>
        <p>
          이 중에 딱 하나만 고르라면 <span className="kbd">Ctrl+Shift+P</span>,
          <strong> 명령 팔레트</strong>예요. VS Code의 모든 기능이 이 검색창 하나에 들어 있어서,
          "그 기능 메뉴 어디 있더라?" 할 때 그냥 이름을 쳐서 실행하면 됩니다.
          단축키를 까먹어도 팔레트만 기억하면 살아남아요.
        </p>

        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="VS Code 화면 구역도: 왼쪽 사이드바, 가운데 에디터, 아래 통합 터미널, 위쪽에서 내려오는 명령 팔레트">
          <rect x="20" y="70" width="600" height="256" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />

          <rect x="20" y="70" width="44" height="256" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <circle cx="42" cy="98" r="6" fill="var(--muted)" />
          <circle cx="42" cy="124" r="6" fill="var(--primary)" />
          <circle cx="42" cy="150" r="6" fill="var(--muted)" />
          <circle cx="42" cy="176" r="6" fill="var(--muted)" />

          <rect x="64" y="70" width="126" height="256" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="76" y="94" fontSize="12" fill="var(--muted)">탐색기 · 확장</text>
          <text x="76" y="116" fontSize="12" fill="var(--muted)">소스 제어</text>
          <line x1="76" y1="132" x2="176" y2="132" stroke="var(--line)" strokeWidth="1" />
          <text x="76" y="152" fontSize="12" fill="var(--ink)">좌측 사이드바</text>
          <text x="76" y="172" fontSize="12" fill="var(--primary)" fontWeight="600">Ctrl+B 접기/펴기</text>

          <rect x="190" y="70" width="430" height="180" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="210" y="100" fontSize="14" fill="var(--ink)" fontWeight="600">중앙 에디터</text>
          <text x="210" y="122" fontSize="12" fill="var(--muted)">코드를 읽고 고치는 곳</text>
          <line x1="210" y1="146" x2="440" y2="146" stroke="var(--line)" strokeWidth="1" />
          <line x1="210" y1="166" x2="520" y2="166" stroke="var(--line)" strokeWidth="1" />
          <line x1="210" y1="186" x2="400" y2="186" stroke="var(--line)" strokeWidth="1" />
          <line x1="210" y1="206" x2="480" y2="206" stroke="var(--line)" strokeWidth="1" />
          <text x="210" y="234" fontSize="12" fill="var(--primary)" fontWeight="600">Ctrl+P 파일 열기 · Ctrl+D 멀티커서</text>

          <rect x="190" y="250" width="430" height="76" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="210" y="276" fontSize="14" fill="var(--ink)" fontWeight="600">하단 통합 터미널</text>
          <text x="210" y="298" fontSize="12" fill="var(--muted)">npm run dev · git status</text>
          <text x="210" y="318" fontSize="12" fill="var(--teal)" fontWeight="600">Ctrl+` 열기/닫기</text>

          <rect x="230" y="18" width="330" height="40" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="246" y="43" fontSize="13" fill="var(--muted)">&gt;</text>
          <text x="264" y="43" fontSize="13" fill="var(--ink)">상단 명령 팔레트 — 모든 기능 검색</text>
          <line x1="395" y1="58" x2="395" y2="70" stroke="var(--amber)" strokeWidth="2" strokeDasharray="4 3" strokeLinecap="round" />
          <text x="576" y="43" fontSize="12" fill="var(--amber)" fontWeight="600" textAnchor="middle">Ctrl+Shift+P</text>

          <text x="320" y="348" fontSize="12" fill="var(--muted)" textAnchor="middle">사이드바 · 에디터 · 터미널 · 팔레트 — 네 구역만 알면 끝</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: VS Code 화면 네 구역과 각 구역을 부르는 단축키</p>

        <div className="tip">
          <b>직접 확인해 보기</b> 지금 VS Code에서 <span className="kbd">Ctrl+Shift+P</span>를
          누르고 <span className="icode">theme</span>이라고 쳐 보세요. "색 테마" 항목을 고르면
          방향키만으로 에디터 색이 실시간으로 바뀌어요 — 팔레트가 어떤 느낌인지 3초 만에 체험!
        </div>
      </Section>

      <Section n={2} title="확장 추천 4종" sub="에디터에 앱 설치하듯 기능 더하기">
        <p>
          확장(Extension)은 스마트폰의 앱 같은 거예요. 기본 VS Code도 훌륭하지만,
          확장을 붙이면 우리 팀 스타일에 딱 맞게 커스텀할 수 있죠.
          어썸데브 수습에게 필요한 건 이 네 개면 충분합니다.
        </p>
        <Code>{CODE_EXTENSIONS}</Code>
        <p>
          이 중 <strong>Prettier</strong>는 설치 후 설정 한 번만 해 주면 진가를 발휘해요.
          들여쓰기·따옴표·줄바꿈을 사람이 아니라 도구가 통일해 주니까,
          코드 리뷰에서 "스타일 얘기"가 사라지고 "로직 얘기"만 남습니다.
        </p>
        <Code>{CODE_PRETTIER_SETTING}</Code>
        <p>
          <strong>ES7+ React Snippets</strong>는 자주 쓰는 코드 뼈대를 몇 글자로 불러오는
          치트키예요. 우리가 React로 페이지를 만들 때마다 쓰게 됩니다.
        </p>
        <Code>{CODE_SNIPPET}</Code>
      </Section>

      <Section n={3} title="통합 터미널" sub="에디터 밖으로 나갈 필요가 없어요">
        <p>
          코드는 에디터에서, 명령어는 따로 띄운 터미널 창에서 — 이렇게 두 창을 오가면
          <span className="kbd">Alt+Tab</span> 곡예를 하게 돼요. VS Code 안에 터미널을 넣으면
          <strong> 코드와 실행 결과를 한 화면에서</strong> 봅니다. 요리하면서 냄비를
          옆방에 두지 않는 것과 같아요.
        </p>
        <Code>{CODE_TERMINAL}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">Ctrl+`</span>로 터미널을 열고
          <span className="icode">npm run dev</span>를 실행한 뒤, 위쪽 에디터에서 아무 페이지의
          문구 하나를 살짝 바꿔 저장해 보세요. 브라우저가 즉시 반영되고, 터미널엔 로그가 흐르는 걸
          한 화면에서 지켜볼 수 있어요. (확인 후 <span className="kbd">Ctrl+Z</span>로 원상복구!)
        </div>
      </Section>

      <Section n={4} title="Git 패널로 커밋/푸시" sub="명령어가 하는 일을 눈으로 보며 배우기">
        <p>
          터미널에서 <span className="icode">git add · commit · push</span>를 치는 것도 좋지만,
          VS Code의 <strong>소스 제어 패널</strong>을 쓰면 각 단계가 <strong>눈에 보여요</strong>.
          특히 커밋 전에 뜨는 <strong>diff(비교) 화면</strong>은 "내가 뭘 바꿨는지"를
          제출 전에 다시 읽는 셀프 검토 시간이 됩니다 — 시험지 제출 전 검산과 같아요.
        </p>
        <Code>{CODE_GIT_PANEL}</Code>
        <div className="warn">
          <b>커밋 전 diff 확인은 습관으로!</b> 실수로 딸려 들어간 <span className="icode">console.log</span>,
          테스트하려고 바꿔 둔 값 같은 것들이 diff 화면에서 다 걸립니다.
          우리 Gitea(edu.awesomedevapp.com:3000)에 올라간 커밋은 팀 전체가 보는 기록이에요 —
          "무엇을 올리는지 모르고 올리는" 일만은 피해 주세요.
        </div>
      </Section>

      <Section n={5} title="설정 동기화" sub="공들인 세팅, 계정에 통째로 백업">
        <p>
          단축키 익히고, 확장 깔고, 설정 맞추고… 여기까지 만든 <strong>나만의 작업 환경</strong>이
          PC를 바꾸는 순간 증발하면 억울하겠죠? 설정 동기화를 켜 두면 이 모든 게
          계정에 저장돼서, 어떤 PC에서든 로그인 한 번으로 <strong>내 에디터</strong>가 됩니다.
          게임의 클라우드 세이브와 똑같아요.
        </p>
        <Code>{CODE_SETTINGS_SYNC}</Code>
        <div className="tip">
          <b>지금 켜 두세요</b> 수습 기간엔 학교 PC·집 PC·회사 PC를 오가게 될 확률이 높아요.
          오늘 5분 투자하면 "새 PC에서 확장이 없어서…" 같은 변명거리가 사라집니다.
        </div>
      </Section>

      <Section n={6} title="검색의 기술" sub="Ctrl+P vs Ctrl+Shift+F — 도서관 사서처럼 찾기">
        <p>
          모르는 코드베이스에서 길을 찾는 능력은 코드를 쓰는 능력만큼 중요해요.
          수습 첫 주에 여러분이 가장 많이 할 일도 "이거 어디서 처리하지?" 하고
          <strong> 찾아 들어가는 일</strong>이거든요. 핵심은 두 검색의 용도 구분입니다.
        </p>
        <Code>{CODE_SEARCH}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 플랫폼 화면에서 아무 버튼의 문구를 하나 골라
          <span className="kbd">Ctrl+Shift+F</span>로 검색해 보세요. 그 문구가 적힌 파일이
          바로 나옵니다 — "화면에서 본 것 → 코드 위치"를 잇는 이 기술이
          앞으로 과제할 때 여러분의 내비게이션이 돼요.
        </div>
      </Section>

      <Section n={7} title="Emmet 맛보기" sub="HTML 태그를 수식 한 줄로">
        <p>
          <span className="icode">&lt;div&gt;</span> 열고 닫고, 클래스 붙이고…
          반복 구조를 손으로 치다 보면 오타가 나기 마련이에요. <strong>Emmet</strong>은
          "만들고 싶은 구조"를 축약식으로 쓰면 태그로 펼쳐 주는 내장 기능입니다.
          문장을 다 쓰는 대신 줄임말을 쓰는 것과 같아요.
        </p>
        <Code>{CODE_EMMET}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 연습용 새 파일(<span className="icode">test.html</span>)을 만들고
          <span className="icode">ul&gt;li*5</span>를 친 다음 <span className="kbd">Tab</span>을
          눌러 보세요. 리스트 5줄이 촤르륵 펼쳐집니다. 다 놀았으면 파일은 저장하지 말고 닫기!
        </div>
      </Section>

      <Section n={8} title="종합 실습 — 단축키 10개 체크리스트" sub="우리 frontend 폴더에서 실전으로">
        <p>
          이제 배운 걸 전부 꺼내 봅니다. 아래 체크리스트를 <strong>순서대로, 마우스 최소한으로</strong>
          해내는 게 목표예요. 1~3번은 검색(섹션 6), 4~8번은 편집 단축키(섹션 1),
          9번은 터미널(섹션 3), 10번은 팔레트(섹션 1) — 이 코스 전체의 총정리입니다.
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <div className="tip">
          <b>공부 팁</b> 10개를 한 번에 통과하려 하지 말고, 내일부터 실제 과제를 할 때
          "마우스로 하려던 걸 단축키로 해 보기"를 하루 3번만 의식적으로 시도해 보세요.
          2주면 이 페이지를 다시 볼 필요가 없어집니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🛠 여기까지 왔다면</h3>
          <p className="muted">
            이제 에디터가 "코드 치는 메모장"에서 <strong>탐색·편집·실행·커밋을 한 번에 하는
            작업대</strong>가 됐어요. 섹션 4에서 맛본 Git을 제대로 배우고 싶다면{' '}
            <Link to="/learn/git-deep"><strong>Git과 협업</strong></Link> 코스로,
            갈아 둔 칼로 바로 요리를 시작하고 싶다면{' '}
            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스의 과제를
            오늘 배운 단축키만으로 해결해 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
