import Link from 'next/link';
import type { ReactNode } from 'react';

import style from '@/styles/web.module.scss';

export function SiteLayout({ children }: { children: ReactNode }) {
  return (
    <div className={style.main}>
      <div className={style.header}>
        <div className={style.background} />
        <div className={style.buynow}>
          <a
            href="https://www.atlus.co.jp/news/13264/"
            rel="noopener noreferrer"
            target="_blank"
          >
            &nbsp;
          </a>
        </div>
        <div className={style.logoHeader} />
        <div className={style.logoSwitch} />
        <div className={style.waveContainer}>
          <svg
            className={style.waves}
            viewBox="0 24 150 28"
            preserveAspectRatio="none"
            shapeRendering="auto"
          >
            <defs>
              <path
                id="gentle-wave"
                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
              />
            </defs>
            <g>
              <use
                className={style.firstWave}
                x={48}
                y={7}
                href="#gentle-wave"
                fill="rgba(255,45,124,0.7)"
              />
              <use
                className={style.secondWave}
                x={48}
                y={0}
                href="#gentle-wave"
                fill="#ff2d7c"
              />
            </g>
          </svg>
        </div>
      </div>
      <nav className={style.navigation}>
        <ul>
          <li>
            <Link href="/">Home</Link>
          </li>
          <li>
            <Link href="/players">Players</Link>
          </li>
          <li>
            <Link href="/guide">Guide</Link>
          </li>
          <li>
            <Link href="/archive">Archive</Link>
          </li>
          <li>
            <Link href="/about">About</Link>
          </li>
          <li>
            <Link href="/contact">Q&A</Link>
          </li>
        </ul>
      </nav>
      <div className={style.contents}>{children}</div>
      <div className={style.footer}>
        <div className={style.footerText}>
          <p>
            <a href="https://www.atlus.co.jp/copyright/" rel="noopener noreferrer" target="_blank">
              ©ATLUS
            </a>{' '}
            ©SEGA All Rights Reserved.
          </p>
          <p>本ページは、株式会社ATLUS様のページとは異なるユーザーサイトです。</p>
          <p>問い合わせなどをATLUS様に出されないよう、ご注意ください。</p>
        </div>
        <div className={style.twitter}>
          <a href="https://twitter.com/catherine_f_c" rel="noopener noreferrer" target="_blank">
            &nbsp;
          </a>
        </div>
        <div className={style.twitch}>
          <a
            href="https://www.twitch.tv/catherine_faito_crab"
            rel="noopener noreferrer"
            target="_blank"
          >
            &nbsp;
          </a>
        </div>
        <div className={style.youtube}>
          <a
            href="https://www.youtube.com/channel/UC5cvyvCdOMbxwZqCT09cGNA/"
            rel="noopener noreferrer"
            target="_blank"
          >
            &nbsp;
          </a>
        </div>
      </div>
    </div>
  );
}
