'use client';

const imgImage2 = "/imgs/image-2.png";
const imgLine58 = "/imgs/line-58.svg";
const img = "/imgs/asset-base.svg";
const imgArrowsDiagramsArrow = "/imgs/arrows-diagrams-arrow.svg";
const imgIcon = "/imgs/icon.svg";
const imgGroup = "/imgs/group.svg";
const imgEllipse2 = "/imgs/ellipse-2.svg";
const imgMusicAudioPlay = "/imgs/music-audio-play.svg";
const imgIcon1 = "/imgs/icon-1.svg";
const imgIcon2 = "/imgs/icon-2.svg";
const imgIcon3 = "/imgs/icon-3.svg";
const imgIcon4 = "/imgs/icon-4.svg";

export default function FigmaSelectedLessonPage() {
  return (
    <div className="bg-white content-stretch flex flex-col items-center relative size-full">
      <div className="content-stretch flex flex-col items-start max-w-[1440px] relative shrink-0 w-[1440px]">
        <div className="box-border content-stretch flex gap-[10px] h-[100px] items-center px-[32px] py-0 relative shrink-0 w-full">
          <div className="basis-0 content-stretch flex gap-[12px] grow items-center min-h-px min-w-px relative shrink-0">
            <div className="relative shrink-0 size-[32px]">
              <img alt="" className="block max-w-none size-full" src={imgArrowsDiagramsArrow} />
            </div>
            <div className="basis-0 content-stretch flex flex-col grow items-start justify-center leading-[1.5] min-h-px min-w-px not-italic relative shrink-0">
              <p className="font-['Pretendard:SemiBold',sans-serif] relative shrink-0 text-[#6c7682] text-[16px] w-full">
                원자로 운전 및 계통
              </p>
              <p className="font-['Pretendard:Bold',sans-serif] relative shrink-0 text-[#1b2027] text-[24px] w-full">
                6. 원자로 시동, 운전 및 정지 절차
              </p>
            </div>
            <div className="content-stretch flex gap-[20px] h-[81px] items-center justify-center relative shrink-0">
              <div className="relative shrink-0 w-[52px]">
                <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
                  <div className="bg-[#384fbf] relative rounded-[2.23696e+07px] shrink-0 size-[32px]">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                      <p className="font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[14px] text-nowrap text-white whitespace-pre">
                        1
                      </p>
                    </div>
                  </div>
                  <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#384fbf] text-[14px] text-nowrap whitespace-pre">
                    강좌 수강
                  </p>
                </div>
              </div>
              <div className="relative shrink-0 size-[24px]">
                <img alt="" className="block max-w-none size-full" src={imgIcon} />
              </div>
              <div className="relative shrink-0 w-[52px]">
                <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
                  <div className="bg-[#dee1e6] relative rounded-[2.23696e+07px] shrink-0 size-[32px]">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                      <p className="font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
                        2
                      </p>
                    </div>
                  </div>
                  <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
                    XR 실습
                  </p>
                </div>
              </div>
              <div className="relative shrink-0 size-[24px]">
                <img alt="" className="block max-w-none size-full" src={imgIcon} />
              </div>
              <div className="relative shrink-0 w-[52px]">
                <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
                  <div className="bg-[#dee1e6] relative rounded-[2.23696e+07px] shrink-0 size-[32px]">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                      <p className="font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
                        3
                      </p>
                    </div>
                  </div>
                  <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
                    문제 풀기
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="box-border content-stretch flex flex-col gap-[24px] items-center overflow-clip pb-[80px] pt-[24px] px-8 relative rounded-[8px] shrink-0 w-full">
          <div className="aspect-[1920/1080] bg-black overflow-clip relative rounded-[8px] shrink-0 w-full">
            <div className="absolute left-1/2 size-[120px] top-1/2 translate-x-[-50%] translate-y-[-50%]">
              <div className="absolute contents inset-0">
                <img alt="" className="block max-w-none size-full" src={imgGroup} />
              </div>
            </div>
            <div className="absolute bg-gradient-to-t bottom-0 box-border content-stretch flex flex-col from-[rgba(0,0,0,0.8)] gap-[20px] items-center justify-center left-[-0.5px] px-[16px] py-[24px] to-[rgba(0,0,0,0)] w-[1376px]">
              <div className="bg-[#333c47] h-[4px] relative rounded-[3.35544e+07px] shrink-0 w-full">
                <div className="absolute left-0 size-[12px] top-1/2 translate-y-[-50%]">
                  <img alt="" className="block max-w-none size-full" src={imgEllipse2} />
                </div>
              </div>
              <div className="content-stretch flex h-[32px] items-center justify-between relative shrink-0 w-full">
                <div className="relative shrink-0">
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[8px] items-center relative">
                    <div className="content-stretch flex gap-[16px] items-center relative shrink-0">
                      <div className="relative shrink-0 size-[32px]">
                        <img alt="" className="block max-w-none size-full" src={imgMusicAudioPlay} />
                      </div>
                      <div className="content-stretch flex gap-[8px] h-[32px] items-center relative shrink-0 w-[120px]">
                        <div className="relative rounded-[4px] shrink-0 size-[32px]">
                          <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                            <div className="relative shrink-0 size-[18px]">
                              <img alt="" className="block max-w-none size-full" src={imgIcon1} />
                            </div>
                          </div>
                        </div>
                        <div className="basis-0 grow h-[4px] min-h-px min-w-px relative rounded-[3.35544e+07px] shrink-0">
                          <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[4px] w-full" />
                        </div>
                      </div>
                      <p className="font-['Pretendard:Medium',sans-serif] leading-[19.5px] not-italic relative shrink-0 text-[13px] text-nowrap text-white whitespace-pre">
                        0:00 / 12:26
                      </p>
                    </div>
                  </div>
                </div>
                <div className="relative shrink-0">
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[12px] items-center relative">
                    <div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
                      <div className="relative shrink-0 size-[16px]">
                        <img alt="" className="block max-w-none size-full" src={imgIcon2} />
                      </div>
                      <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
                        이전 강의
                      </p>
                    </div>
                    <div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
                      <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
                        다음 강의
                      </p>
                      <div className="flex items-center justify-center relative shrink-0">
                        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
                          <div className="relative size-[16px]">
                            <img alt="" className="block max-w-none size-full" src={imgIcon3} />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="content-stretch flex items-center justify-center relative rounded-[4px] shrink-0 size-[32px]">
                      <div className="relative shrink-0 size-[18px]">
                        <img alt="" className="block max-w-none size-full" src={imgIcon4} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="bg-[#fff9ee] border border-[#ffdd82] border-solid box-border content-stretch flex flex-col h-[55px] items-start pb-px pt-[17px] px-[17px] relative rounded-[8px] shrink-0 w-full">
            <ul className="[white-space-collapse:collapse] block font-['Pretendard:Medium',sans-serif] leading-[0] not-italic relative shrink-0 text-[#333c47] text-[14px] text-nowrap">
              <li className="ms-[21px]">
                <span className="leading-[1.5]">강좌 수강 완료 후 문제를 풀어야 하니 집중해서 강좌 수강해 주세요.</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}