import SEOHead from '@/libs/site/SeoHead';
import { colors, fontSize } from '@/libs/themes';
import { NextRouter, useRouter } from 'next/router';

//
export default function Error() {
  const router: NextRouter = useRouter();

  return (
    <>
      <SEOHead title='페이지를 찾을 수 없습니다' />
      <section
        css={{
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          flex: 1,
        }}
      >
        <div
          css={{
            width: '100%',
            height: '100%',
            minHeight: '100vh',
            padding: '20px 26px 60px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            flex: 1,
          }}
        >
          <div css={{ width: '100%', maxWidth: 500, padding: 20 }}>
            <svg viewBox='0 0 2530 809' fill='none' xmlns='http://www.w3.org/2000/svg'>
              <path
                d='M337.761 363.58H125.271L105.111 379.01H71.1006V489.49H105.111L125.271 504.91H337.761V481.17H356.751V504.91H380.491V465.67V402.82V363.58H356.751V387.32H337.761V363.58Z'
                fill='#FFE1BD'
              />
              <path
                d='M1.97043 440.98C23.6804 480.81 71.1004 484.05 71.1004 484.05V384.44C71.1004 384.44 23.6904 387.68 1.97043 427.51C-0.31957 431.71 -0.31957 436.78 1.97043 440.98Z'
                fill='#FFDEB7'
              />
              <mask id='mask0_102_525' maskUnits='userSpaceOnUse' x='0' y='384' width='72' height='101'>
                <path
                  d='M1.97043 440.98C23.6804 480.81 71.1004 484.05 71.1004 484.05V384.44C71.1004 384.44 23.6904 387.68 1.97043 427.51C-0.31957 431.71 -0.31957 436.78 1.97043 440.98Z'
                  fill='white'
                />
              </mask>
              <g mask='url(#mask0_102_525)'>
                <path
                  opacity='0.5'
                  d='M32.2105 458.03C50.9236 450.071 59.6417 428.449 51.6831 409.736C43.7245 391.023 22.1028 382.305 3.38977 390.264C-15.3233 398.222 -24.0414 419.844 -16.0828 438.557C-8.12415 457.27 13.4975 465.988 32.2105 458.03Z'
                  fill='#EBC498'
                />
              </g>
              <path d='M337.761 387.33V481.17H356.751V387.33H337.761Z' fill='#A1A1A1' />
              <path
                opacity='0.63'
                d='M71.1006 460.97H104.501L125.561 469.72H337.761V496H125.561L104.501 480.64L71.1006 480.32V460.97Z'
                fill='#E8CBA9'
              />
              <path
                opacity='0.6'
                d='M71.1006 414.04H104.501L125.561 405.29H337.761V379.01H125.561L104.501 394.37L71.1006 394.69V414.04Z'
                fill='#DABB97'
              />
              <path opacity='0.5' d='M71.1006 434.25V448.33H337.761V434.25H71.1006Z' fill='#D4B896' />
              <path opacity='0.5' d='M71.1104 379.01V489.49H104.51V379.01H71.1104Z' fill='#A0A0A0' />
              <path
                d='M1138.86 349.5L1073.99 347.1L1086 22.78L848.711 13.99L610.901 329.95L609.141 377.53L1138.63 355.46L1138.85 349.51L1138.86 349.5ZM889.411 219.4C888.341 229.78 887.511 242.9 886.921 258.77L883.911 340.06L798.111 336.88L849.701 264.79C861.841 247.7 871.051 233.86 877.341 223.26C883.621 212.67 889.021 202.11 893.521 191.59C891.841 199.75 890.471 209.02 889.411 219.39V219.4Z'
                fill='#D6D6D6'
              />
              <path
                d='M1410.79 313.42C1408.97 269.37 1411.49 237.33 1418.34 217.31C1425.19 197.29 1437.09 186.93 1454.06 186.23C1470.75 185.54 1483.34 195.03 1491.83 214.69C1500.13 233.92 1505.23 264.56 1507.13 306.59L1716.29 281.39C1709.78 193.32 1684.17 124.51 1639.43 74.97C1591.46 21.86 1527.11 -3.04 1446.39 0.29C1366.21 3.6 1304.21 33.91 1260.39 91.22C1216.56 148.54 1196.65 225.49 1200.63 322.09C1200.93 329.31 1201.37 336.39 1201.91 343.37L1410.99 318.18C1410.91 316.61 1410.84 315.03 1410.78 313.43L1410.79 313.42Z'
                fill='#D6D6D6'
              />
              <path
                d='M2002.2 251.36C2017.04 236.55 2028.44 224.45 2036.42 215.06C2044.39 205.67 2051.48 196.17 2057.68 186.55C2054.66 194.31 2051.75 203.22 2048.96 213.27C2046.16 223.32 2043.14 236.12 2039.9 251.67L2036.53 267.84L2225.79 291.99L2275.75 52.43L2043.3 3.95L1796.42 237.2L1991.38 262.08L2002.19 251.36H2002.2Z'
                fill='#D6D6D6'
              />
              <path
                d='M815.18 628.79L823.34 748.06L1029.08 733.99L1020.92 614.72L1085.68 610.29L1075.35 459.26L551.12 536.87L558.61 646.34L815.18 628.79Z'
                fill='#D6D6D6'
              />
              <path
                d='M1369.69 773.36C1449.62 785.08 1516.23 766.88 1569.51 718.78C1622.79 670.68 1656.49 598.39 1670.63 501.92C1671.58 495.42 1672.41 489.01 1673.13 482.66L1462.93 468.59C1462.8 469.53 1462.66 470.47 1462.52 471.41C1456.17 514.77 1447.75 545.71 1437.29 564.25C1426.82 582.79 1413.32 590.84 1396.8 588.42C1380.27 586 1369.6 574.26 1364.8 553.21C1360.17 532.94 1360.69 502.58 1366.33 462.12L1156.2 448.05C1146.85 533.98 1159.59 605.62 1194.46 662.97C1232.15 724.96 1290.56 761.76 1369.69 773.35V773.36Z'
                fill='#D6D6D6'
              />
              <path
                d='M1739.4 610.85L1992.71 655.25L1972.07 773L2175.2 808.6L2195.84 690.85L2259.77 702.06L2286.94 547.08L2223 535.87L2236.78 457.25L2046.84 439.18L2035.65 503.04L1951.08 488.21L2001.54 434.87L1805.88 416.27L1766.56 455.87L1739.4 610.85Z'
                fill='#D6D6D6'
              />
              <path
                d='M367.731 353.26C365.111 366.38 371.091 380.16 380.661 389.51C372.341 392.32 365.891 400.01 364.561 408.69C363.231 417.37 367.101 426.64 374.191 431.8C365.821 439.19 365.031 453.59 372.541 461.85C354.321 471.43 352.331 499.16 364.791 515.54C377.251 531.92 399.091 538.4 419.661 539.12C429.571 539.47 439.801 538.64 448.701 534.27C468.131 524.72 476.061 497.3 464.741 478.85C473.551 470.38 476.571 456.41 472.041 445.05C467.511 433.69 455.701 425.64 443.481 425.57C452.651 408.54 439.181 384.11 419.881 382.77C434.601 377.74 441.251 357.81 433.651 344.24C428.231 334.55 417.031 329.26 406.171 329.29C395.881 329.32 385.591 329.87 377.401 336.96C372.561 341.16 369.001 346.96 367.751 353.26H367.731Z'
                fill='#E5E7F1'
              />
              <mask id='mask1_102_525' maskUnits='userSpaceOnUse' x='356' y='329' width='119' height='211'>
                <path
                  d='M367.731 353.26C365.111 366.38 371.091 380.16 380.661 389.51C372.341 392.32 365.891 400.01 364.561 408.69C363.231 417.37 367.101 426.64 374.191 431.8C365.821 439.19 365.031 453.59 372.541 461.85C354.321 471.43 352.331 499.16 364.791 515.54C377.251 531.92 399.091 538.4 419.661 539.12C429.571 539.47 439.801 538.64 448.701 534.27C468.131 524.72 476.061 497.3 464.741 478.85C473.551 470.38 476.571 456.41 472.041 445.05C467.511 433.69 455.701 425.64 443.481 425.57C452.651 408.54 439.181 384.11 419.881 382.77C434.601 377.74 441.251 357.81 433.651 344.24C428.231 334.55 417.031 329.26 406.171 329.29C395.881 329.32 385.591 329.87 377.401 336.96C372.561 341.16 369.001 346.96 367.751 353.26H367.731Z'
                  fill='white'
                />
              </mask>
              <g mask='url(#mask1_102_525)'>
                <path
                  d='M359.201 510.3C370.501 513.3 382.211 515.2 393.881 514.49C405.551 513.78 417.231 510.36 426.701 503.49C430.451 500.77 433.861 497.47 436.111 493.42C440.881 484.82 439.761 474.29 438.341 464.56C443.471 459.82 445.751 452.34 444.751 445.44C443.741 438.53 439.161 432.25 432.891 429.17C435.591 422.47 436.991 415.35 436.951 408.13C436.931 405.29 436.691 402.4 435.631 399.77C433.841 395.32 429.861 392.04 425.501 390.06C421.141 388.08 416.351 387.24 411.631 386.42C416.261 378.28 417.821 368.47 417.421 359.12C417.021 349.77 414.821 340.59 412.491 331.53C411.551 327.89 410.561 324.17 408.391 321.09C428.311 324.96 445.851 335.93 460.741 349.71C494.461 380.91 516.541 424.4 521.831 470.03C523.771 486.77 523.521 503.86 520.031 520.35C517.821 530.79 514.161 541.26 507.061 549.22C500.291 556.82 490.911 561.57 481.401 565.22C464.541 571.69 446.561 575.2 428.511 575.56C407.821 575.97 384.821 570.85 373.131 553.78C364.491 541.17 362.881 525.14 359.201 510.3Z'
                  fill='#F2F5FF'
                />
              </g>
              <path d='M2345.95 381.23H1915.63V386.23H2345.95V381.23Z' fill='#CFCFCF' />
              <path d='M1787 381.23H1327.11V386.23H1787V381.23Z' fill='#CFCFCF' />
              <path d='M1272.05 381.23H957.39V386.23H1272.05V381.23Z' fill='#CFCFCF' />
              <path d='M793.13 381.23H522.64V386.23H793.13V381.23Z' fill='#CFCFCF' />
              <path d='M2412.53 420.45H1558.33V425.45H2412.53V420.45Z' fill='#CFCFCF' />
              <path d='M1458.21 420.45H707.92V425.45H1458.21V420.45Z' fill='#CFCFCF' />
              <path d='M680.75 417.95H488.25V422.95H680.75V417.95Z' fill='#CFCFCF' />
              <path d='M2529.27 459.66H498.94V464.66H2529.27V459.66Z' fill='#CFCFCF' />
              <path d='M2345.94 498.88H2097.05V503.88H2345.94V498.88Z' fill='#CFCFCF' />
              <path d='M1796.42 498.88H1261.99V503.88H1796.42V498.88Z' fill='#CFCFCF' />
              <path d='M1205.48 498.88H715.69V503.88H1205.48V498.88Z' fill='#CFCFCF' />
              <path d='M609.15 498.88H522.64V503.88H609.15V498.88Z' fill='#CFCFCF' />
            </svg>
          </div>

          <div css={{ height: 10 }} />

          <h1 css={{ fontSize: fontSize.s24 }}>페이지를 찾을 수 없습니다</h1>

          <div css={{ height: 14 }} />

          <p css={{ color: '#89898a', fontSize: fontSize.s15 }}>아래 버튼을 통해 이전페이지로 이동하세요</p>

          <div css={{ height: 25 }} />

          <button
            css={{
              backgroundColor: colors.keyColor,
              color: colors.white,
              fontSize: fontSize.s15,
              fontWeight: 500,
              borderRadius: 100,
              padding: '14px 26px',
              cursor: 'pointer',
              transition: 'opacity 0.2s ease-in-out',

              '&:hover': {
                opacity: 0.9,
              },
            }}
            onClick={() => {
              if (router.asPath !== router.route) router.back();
              else router.push('/');
            }}
          >
            뒤로가기
          </button>
        </div>
      </section>
    </>
  );
}
