// 이 파일이 하는 일: "컴퓨터의 구성" 코스 — 본체 안 부품(CPU·RAM·저장장치·메인보드·파워·GPU)이
// 각각 무슨 일을 하는지, 스펙표를 어떻게 읽는지 배우는 정적 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단에 문자열 상수로 먼저 만들어 둔다.

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

// ── 텍스트 다이어그램·표 상수들 ──
const DIAGRAM_FIVE_JOBS = `컴퓨터가 하는 5가지 일과 담당 부품

  [입력]          [기억]           [계산]          [저장]          [출력]
 키보드·마우스 →  RAM(메모리)  ↔  CPU(두뇌)   ↔  SSD/HDD     →  모니터·스피커
 "명령을 받고"    "펼쳐 놓고"     "생각하고"      "보관하고"      "결과를 보여준다"

 이 모든 부품이 꽂히는 판 = 메인보드,  전기를 나눠 주는 것 = 파워(PSU)`;

const CODE_CPU_SPEC = `CPU 스펙표 읽기 예시

  인텔 코어 i5-14400F
  ├─ i5        : 등급 (i3 < i5 < i7 < i9 — 숫자가 클수록 상급)
  ├─ 14        : 세대 (14세대 — 앞자리가 클수록 최신)
  ├─ 400       : 같은 세대 안에서의 세부 모델
  └─ F         : 내장그래픽 없음 (외장 그래픽카드 필수!)

  AMD 라이젠 5 7600
  ├─ 라이젠 5  : 등급 (3 < 5 < 7 < 9 — 인텔 i3/i5/i7/i9와 짝이 맞아요)
  └─ 7600      : 7000번대 = 세대, 뒤 숫자 = 세부 모델

  공통으로 보는 숫자
  ├─ 코어 10개 / 스레드 16개  : 요리사 수 / 동시에 잡을 수 있는 주문 수
  └─ 최대 4.7GHz              : 요리사 한 명의 손 빠르기 (1초에 47억 번!)`;

const CODE_RAM_SWAP = `RAM이 부족하면 왜 느려질까? — "스왑(swap)"

  RAM(책상)이 꽉 참
    → 컴퓨터가 덜 쓰는 자료를 SSD/HDD(책장)로 잠시 치워 둠
    → 다시 필요하면 책장에서 꺼내 옴
    → 책상 위에서 바로 집는 것보다 수백~수천 배 느림!

  크롬 탭 30개 + 게임 + 디스코드 켰을 때 뚝뚝 끊기는 이유가 이거예요.

  용량 감각
  ├─  8GB : 문서·인터넷은 OK, 개발 도구 여러 개는 빠듯
  ├─ 16GB : 개발 입문 표준 — IntelliJ + 브라우저 + Docker 무난
  └─ 32GB : 가상머신·영상편집·대형 프로젝트까지 여유`;

const CODE_STORAGE = `HDD vs SSD — 자료 찾는 속도 비교

  HDD (하드디스크)     : 사서가 사다리 타고 올라가 책을 '손으로' 찾음
                         물리적으로 도는 원판 + 움직이는 바늘 → 느림, 대신 저렴
  SSD (SATA)           : 전자 도서관 — 검색하면 바로 나옴 (HDD의 4~5배)
  SSD (NVMe, M.2 슬롯) : 전자 도서관 + 전용 고속도로 (SATA의 5~10배 이상)

  부팅 시간 체감: HDD 1~2분 → NVMe SSD 10~20초

  용량 단위
  1TB = 1,000GB  /  요즘 표준: NVMe SSD 500GB~1TB (+ 자료용 HDD 선택)`;

const CODE_ESTIMATE = `── PC 견적서 예시 (실제 견적 사이트 스타일) ──

  CPU        AMD 라이젠 5 7600 (6코어 12스레드, 최대 5.1GHz)
  메인보드   ASUS B650M (AM5 소켓, DDR5, M-ATX)
  메모리     DDR5 16GB (8GB x 2)
  저장장치   NVMe SSD 1TB (M.2)
  그래픽     CPU 내장그래픽 사용 (Radeon Graphics)
  파워       650W 80PLUS 브론즈
  케이스     미들타워 M-ATX

  ── 한 줄씩 해석 ──
  CPU      : 라이젠 중급(5), 7000번대 세대. 요리사 6명이 주문 12개를 돌림
  메인보드 : AM5 소켓 = 라이젠 7000번대가 꽂히는 자리. DDR5 지원 확인!
  메모리   : 16GB인데 8GB 두 개 — 두 줄로 꽂으면 더 빠름(듀얼 채널)
  저장장치 : NVMe라 부팅·프로그램 실행이 쾌속. 1TB면 개발용으로 넉넉
  그래픽   : 외장 카드 없이 CPU 내장으로 해결 → 개발용이면 충분, 비용 절약
  파워     : 650W = 전체 부품이 쓰는 전기(약 300~400W)보다 여유 있게
  케이스   : 메인보드 규격(M-ATX)과 케이스 크기가 맞아야 들어가요`;

const CODE_TASKMGR = `직접 확인해 보기 — 내 PC 스펙 조사서

  1) Ctrl + Shift + Esc  →  작업 관리자 열기
  2) 왼쪽(또는 위쪽) [성능] 탭 클릭

  ┌ 적어 보세요 ─────────────────────────────┐
  │ CPU   : 이름? 코어 수? 논리 프로세서(스레드) 수? │
  │ 메모리 : 몇 GB? 지금 몇 % 사용 중?              │
  │ 디스크 : SSD인가 HDD인가? (이름 옆에 표시돼요)   │
  │ GPU   : 내장(Intel/Radeon Graphics)? 외장(RTX 등)? │
  └──────────────────────────────────────────┘`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props(n, title...)만 바꿔 재사용.
function Sec({ 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: 'CPU' },
  { n: 3, label: 'RAM' },
  { n: 4, label: '저장장치' },
  { n: 5, label: '메인보드·파워' },
  { n: 6, label: '그래픽카드' },
  { n: 7, label: '스펙표 실전' },
];

export default function HardwarePage() {
  return (
    <div>
      {/* 히어로: 이 코스가 뭘 다루는지 한눈에 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>컴퓨터의 구성 —<br />본체 안에는 무엇이 있나</h1>
        <p>
          매일 쓰는 PC, 본체 뚜껑을 열면 뭐가 나올까요? 부품 하나하나가{' '}
          <strong>무슨 일을 하는지</strong> 알고 나면, 견적서도 읽을 수 있고
          "내 컴퓨터가 왜 느리지?"의 답도 스스로 찾을 수 있어요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분</span>
          <span className="chip">준비물: 내 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>

      <Sec n={1} title="큰 그림 — 컴퓨터는 5가지 일을 한다" sub="입력 → 기억 → 계산 → 저장 → 출력">
        <p>
          복잡해 보여도 컴퓨터가 하는 일은 딱 다섯 가지예요. <strong>받고(입력), 펼쳐 놓고(기억),
          생각하고(계산), 보관하고(저장), 보여준다(출력)</strong>. 부품마다 담당이 정해져 있죠.
        </p>
        <Code>{DIAGRAM_FIVE_JOBS}</Code>
        <div className="tip">
          <b>비유 하나로 끝까지 갑니다.</b> 이 코스에서는 컴퓨터를 <strong>식당 주방</strong>에
          비유할 거예요. CPU는 요리사, RAM은 조리대(작업 책상), 저장장치는 냉장고 겸 책장,
          메인보드는 주방 바닥, 파워는 가스·전기 배관이에요.
        </div>
        <p>
          <strong>직접 확인해 보기</strong> — 지금 이 페이지를 보는 데도 5가지가 다 쓰이고 있어요.
          마우스 스크롤(입력) → RAM에 페이지 로드(기억) → CPU가 렌더링(계산) → 캐시 저장(저장) →
          모니터 표시(출력). 스크롤 한 번 하면서 머릿속으로 따라가 보세요.
        </p>
      </Sec>

      <Sec n={2} title="CPU — 컴퓨터의 두뇌" sub="코어 · 스레드 · 클럭(GHz) 읽는 법">
        <p>
          CPU는 모든 계산을 하는 <strong>두뇌</strong>이자, 주방으로 치면 <strong>요리사</strong>예요.
          스펙표에 나오는 세 가지 숫자만 알면 됩니다.
        </p>
        <ol className="olist">
          <li><strong>코어(Core)</strong> = 요리사 수. 6코어면 요리사 6명이 각자 다른 요리를 동시에 해요.</li>
          <li><strong>스레드(Thread)</strong> = 동시에 잡을 수 있는 주문 수. 요리사 한 명이 양손으로 주문 2개를 번갈아 처리하면 6코어 12스레드.</li>
          <li><strong>클럭(GHz)</strong> = 요리사 한 명의 손 빠르기. 4GHz면 1초에 약 40억 번의 기본 동작을 해요.</li>
        </ol>
        <Code>{CODE_CPU_SPEC}</Code>
        <div className="warn">
          <b>숫자가 크다고 무조건 좋은 건 아니에요.</b> 12세대 i7이 14세대 i3보다 빠를 수 있어요.
          <strong>등급보다 세대, 세대보다 실제 벤치마크</strong> 순으로 확인하는 습관을 들이세요.
        </div>
        <p>
          <strong>직접 확인해 보기</strong> — <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span>로
          작업 관리자를 열고 <span className="kbd">성능</span> 탭 → <span className="kbd">CPU</span>를 클릭해 보세요.
          내 CPU의 이름·코어 수·기본 속도(GHz)가 다 나와요. 이름을 검색해서 몇 세대인지도 찾아보세요.
        </p>
      </Sec>

      <Sec n={3} title="RAM(메모리) — 작업 책상" sub="용량이 좌우하는 것, 부족하면 느려지는 이유">
        <p>
          RAM은 <strong>지금 하는 일을 펼쳐 놓는 작업 책상</strong>이에요. 책상이 넓으면(용량이 크면)
          교과서·노트·태블릿을 한꺼번에 펼쳐 놓고 일할 수 있죠. 프로그램을 켤 때마다
          책상 위 공간을 조금씩 차지한다고 생각하면 돼요.
        </p>
        <p>
          중요한 특징: <strong>전원을 끄면 싹 비워져요.</strong> 책상은 퇴근할 때 치우는 곳이지
          보관하는 곳이 아니거든요. 보관은 다음 섹션의 저장장치 담당입니다.
        </p>
        <Code>{CODE_RAM_SWAP}</Code>
        <div className="tip">
          <b>DDR4 vs DDR5 한 줄 정리</b> — RAM의 세대예요. DDR5가 더 빠른 신형이지만,
          <strong>메인보드가 지원하는 쪽으로만 꽂을 수 있어요</strong> (모양 자체가 달라서 호환 불가).
        </div>
        <p>
          <strong>직접 확인해 보기</strong> — 작업 관리자 <span className="kbd">성능</span> →{' '}
          <span className="kbd">메모리</span>에서 내 RAM 용량과 지금 사용률(%)을 확인하세요.
          크롬 탭을 10개쯤 더 열고 사용률이 얼마나 올라가는지 지켜보면 "탭이 메모리를 먹는다"는 말이 실감 나요.
        </p>
      </Sec>

      <Sec n={4} title="저장장치 — 책장 겸 냉장고" sub="HDD vs SSD, SATA vs NVMe">
        <p>
          저장장치는 <strong>전원을 꺼도 남는 보관 창고</strong>예요. 윈도우, 프로그램, 과제 파일,
          사진이 전부 여기 살아요. 책상(RAM)과 달리 넓지만, 꺼내는 데 시간이 걸리죠.
          그리고 그 "꺼내는 속도"가 종류에 따라 하늘과 땅 차이예요.
        </p>
        <Code>{CODE_STORAGE}</Code>
        <div className="tip">
          <b>가성비 조합의 정석</b> — 윈도우와 프로그램은 <strong>빠른 NVMe SSD</strong>에,
          영상·사진 같은 큰 자료는 <strong>싸고 넉넉한 HDD</strong>에. 도서관도 자주 보는 책은
          앞쪽 서가에, 창고 자료는 뒤쪽에 두잖아요.
        </div>
        <p>
          <strong>직접 확인해 보기</strong> — 작업 관리자 <span className="kbd">성능</span> 탭에서
          디스크 항목을 보면 이름 옆에 <span className="icode">SSD</span>인지 <span className="icode">HDD</span>인지
          표시돼요. 내 PC 부팅에 몇 초 걸리는지 스톱워치로 재 보고, 위 표와 비교해 보세요.
        </p>
      </Sec>

      <Sec n={5} title="메인보드 & 파워 — 판과 전기" sub="모든 부품이 만나는 곳, 규격이 맞아야 하는 이유">
        <p>
          <strong>메인보드</strong>는 모든 부품이 꽂히는 <strong>큰 판</strong>이에요. CPU 자리(소켓),
          RAM 자리(슬롯), SSD 자리(M.2), 그래픽카드 자리(PCIe)가 다 여기 있고, 부품들끼리
          대화하는 길(회로)도 이 판 위에 그려져 있어요.
        </p>
        <ol className="olist">
          <li><strong>소켓이 맞아야 CPU가 꽂혀요.</strong> 인텔용(LGA1700)과 AMD용(AM5)은 핀 배치가 달라서 물리적으로 안 들어가요 — 콘센트에 110V 플러그가 안 꽂히는 것과 같아요.</li>
          <li><strong>RAM 규격(DDR4/DDR5)도 보드가 정해요.</strong> 견적 짤 때 "CPU ↔ 보드 소켓 ↔ RAM 세대" 세 개가 한 세트로 맞아야 합니다.</li>
          <li><strong>보드 크기(ATX / M-ATX / ITX)</strong>는 케이스와 맞아야 하고요.</li>
        </ol>
        <p>
          <strong>파워(PSU)</strong>는 콘센트의 전기를 부품들이 먹을 수 있는 형태로 바꿔 나눠 주는{' '}
          <strong>배전반</strong>이에요. <span className="icode">650W</span> 같은 숫자는{' '}
          <strong>정격 출력</strong> — "안정적으로 계속 낼 수 있는 최대 전력"이라는 뜻이에요.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="본체 내부 부품 배치도: 메인보드 위에 CPU, RAM 슬롯, M.2 SSD, PCIe 그래픽카드가 꽂히고, 파워가 전기를 공급하며 그래픽카드가 모니터로 화면을 출력한다">
          <rect x="32" y="36" width="380" height="300" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <text x="44" y="62" fontSize="13" fontWeight="600" fill="var(--ink)">메인보드 — 모든 부품이 꽂히는 판</text>

          <rect x="60" y="80" width="120" height="90" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="120" y="118" textAnchor="middle" fontSize="15" fontWeight="600" fill="var(--primary)">CPU</text>
          <text x="120" y="138" textAnchor="middle" fontSize="12" fill="var(--muted)">두뇌 · 요리사</text>

          <rect x="232" y="76" width="20" height="100" rx="4" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <rect x="262" y="76" width="20" height="100" rx="4" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="257" y="196" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--teal)">RAM 슬롯</text>
          <text x="257" y="212" textAnchor="middle" fontSize="12" fill="var(--muted)">작업 책상(메모리)</text>

          <line x1="192" y1="126" x2="220" y2="126" stroke="var(--muted)" strokeWidth="2" />
          <path d="M194 121 L185 126 L194 131 Z" fill="var(--muted)" />
          <path d="M218 121 L227 126 L218 131 Z" fill="var(--muted)" />
          <text x="206" y="112" textAnchor="middle" fontSize="11" fill="var(--muted)">데이터</text>

          <line x1="120" y1="182" x2="120" y2="210" stroke="var(--muted)" strokeWidth="2" />
          <path d="M115 184 L120 175 L125 184 Z" fill="var(--muted)" />
          <path d="M115 208 L120 217 L125 208 Z" fill="var(--muted)" />
          <text x="112" y="200" textAnchor="end" fontSize="11" fill="var(--muted)">저장·불러오기</text>

          <rect x="60" y="222" width="150" height="22" rx="6" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="135" y="262" textAnchor="middle" fontSize="12" fill="var(--muted)">M.2 슬롯 — SSD(저장장치)</text>

          <rect x="60" y="278" width="260" height="26" rx="6" fill="var(--card)" stroke="var(--rose)" strokeWidth="2" />
          <text x="190" y="295" textAnchor="middle" fontSize="12" fill="var(--ink)">PCIe 슬롯 — 그래픽카드(GPU)</text>

          <polyline points="326,291 440,291 440,110 460,110" fill="none" stroke="var(--rose)" strokeWidth="2" />
          <path d="M460 104 L470 110 L460 116 Z" fill="var(--rose)" />
          <text x="448" y="205" fontSize="11" fill="var(--muted)">화면 신호</text>

          <rect x="470" y="70" width="140" height="80" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <text x="540" y="105" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">모니터</text>
          <text x="540" y="125" textAnchor="middle" fontSize="12" fill="var(--muted)">출력 · 결과 표시</text>
          <line x1="540" y1="150" x2="540" y2="160" stroke="var(--line)" strokeWidth="2" />
          <line x1="512" y1="162" x2="568" y2="162" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />

          <rect x="470" y="240" width="140" height="80" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="540" y="272" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">파워(PSU)</text>
          <text x="540" y="292" textAnchor="middle" fontSize="12" fill="var(--muted)">전기 변환 · 분배</text>

          <line x1="468" y1="300" x2="426" y2="300" stroke="var(--amber)" strokeWidth="2" />
          <path d="M426 294 L414 300 L426 306 Z" fill="var(--amber)" />
          <text x="445" y="316" textAnchor="middle" fontSize="11" fill="var(--amber)">전기 공급</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 본체 내부 부품 배치도 — 메인보드에 꽂히는 자리들과 데이터·전기의 흐름</p>
        <div className="warn">
          <b>파워는 아끼는 부품이 아니에요.</b> 전체 부품 소비 전력보다 <strong>1.5배쯤 여유 있게</strong> 잡고,
          <span className="icode">80PLUS</span> 인증(효율 보증)이 있는 제품을 골라요. 싸구려 파워가 죽으면
          다른 부품까지 데리고 가는 경우가 있거든요.
        </div>
        <p>
          <strong>직접 확인해 보기</strong> — <span className="kbd">⊞ 시작</span>에서{' '}
          <span className="icode">msinfo32</span>를 검색해 실행하면 "베이스보드 제조업체/제품" 항목에서
          내 메인보드 모델을 볼 수 있어요. 모델명을 검색해 소켓과 지원 RAM 세대를 찾아보세요.
        </p>
      </Sec>

      <Sec n={6} title="그래픽카드(GPU) — 화면 그리기 전담" sub="내장 vs 외장, 개발자에겐 언제 필요한가">
        <p>
          GPU는 <strong>화면에 보이는 모든 것을 그리는 전담 화가</strong>예요. CPU가 "생각"을 잘한다면,
          GPU는 <strong>단순한 그리기 작업을 수천 명이 동시에</strong> 하는 데 특화돼 있어요.
          요리사 6명(CPU) 대 김밥 마는 알바 수천 명(GPU)의 차이랄까요.
        </p>
        <ol className="olist">
          <li><strong>내장 그래픽</strong> — CPU 안에 같이 들어 있는 작은 GPU. 문서, 웹, 유튜브, 코딩까지 전부 문제없어요.</li>
          <li><strong>외장 그래픽카드</strong> — 따로 꽂는 큰 카드(RTX 4060 같은 것). 비싸고 전기도 많이 먹지만 그리기 성능이 압도적이에요.</li>
        </ol>
        <div className="tip">
          <b>개발자는 언제 외장이 필요할까?</b> 웹·앱·백엔드 개발은 <strong>대부분 내장으로 충분</strong>해요
          (우리가 하는 Spring·React 개발이 딱 그래요). 외장이 필요해지는 건 <strong>게임 개발,
          영상 편집, AI 모델 학습</strong>처럼 그리기·병렬 계산이 폭발하는 분야예요.
        </div>
        <p>
          <strong>직접 확인해 보기</strong> — 작업 관리자 <span className="kbd">성능</span> →{' '}
          <span className="kbd">GPU</span>에서 내 GPU 이름을 확인하세요. 이름에{' '}
          <span className="icode">Intel UHD/Iris</span>나 <span className="icode">Radeon Graphics</span>가 있으면 내장,{' '}
          <span className="icode">RTX/GTX</span>·<span className="icode">RX</span>가 있으면 외장이에요.
          유튜브 영상을 틀고 GPU 사용률이 올라가는 것도 구경해 보세요.
        </p>
      </Sec>

      <Sec n={7} title="스펙표 읽기 실전 — 견적서를 해석해 보자" sub="지금까지 배운 걸 한 장에">
        <p>
          견적 사이트에서 흔히 보는 형식이에요. 이제 한 줄 한 줄이 <strong>전부 읽히는지</strong> 확인해 보세요.
        </p>
        <Code>{CODE_ESTIMATE}</Code>
        <p>
          마지막 미션! 이번엔 남의 견적이 아니라 <strong>내 PC</strong>를 조사할 차례예요.
        </p>
        <Code>{CODE_TASKMGR}</Code>
        <div className="tip">
          <b>적은 내용은 버리지 마세요.</b> 다음 코스(조립)에서 "내 PC와 비교하며" 진행하면
          훨씬 잘 붙어요. 멘토에게 조사서를 보여주고 "내 PC의 병목이 어디일까?"를 물어보는 것도 좋은 질문이에요.
        </div>
      </Sec>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎉 여기까지 됐다면</h3>
          <p className="muted">
            이제 본체 안 부품들의 역할과 스펙표 읽는 법을 알게 됐어요. 아침 수업{' '}
            <strong>CS 커리큘럼 1주차(컴퓨터 구조)</strong>에서 이 부품들이 <em>어떻게 서로 대화하는지</em>를
            더 깊게 배우니, 오늘 적어 둔 내 PC 조사서를 꼭 들고 가세요. 준비됐다면 다음 코스{' '}
            <Link to="/learn/assembly"><strong>데스크탑 조립하기</strong></Link>에서 이 부품들을
            직접 손으로 꽂아 봅니다!
          </p>
        </div>
      </div>
    </div>
  );
}
