import type { Metadata } from 'next';
import Link from 'next/link';
import { RiotSearchForm } from '@/components/RiotSearchForm';
import './globals.css';

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? 'http://127.0.0.1:3000'),
  title: {
    default: 'GGTI.GG',
    template: '%s | GGTI.GG',
  },
  description: '리그 오브 레전드 전적 기반 플레이 성향 분석과 경기 흐름 해설을 제공하는 서비스입니다.',
  openGraph: {
    title: 'GGTI.GG',
    description: '리그 오브 레전드 전적 기반 플레이 성향 분석과 경기 흐름 해설을 제공하는 서비스입니다.',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
  },
};

const topNavItems = ['전적', '챔피언', '리더보드', '프로 관전', '멀티 검색', 'e스포츠'];
const serviceNavItems = [
  '홈',
  '챔피언',
  '게임 모드',
  '스킨 리더보드',
  '리더보드',
  '프로 관전',
  '전적',
  '마이페이지',
];

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header className="site-header">
          <div className="topbar">
            <div className="header-shell">
              <div className="flex items-center gap-7">
                <Link href="/" className="brand-lockup" aria-label="GGTI 홈">
                  <span className="brand-mark-wrap">
                    <img src="/branding/ggti-mark.svg" alt="" className="brand-mark-icon" />
                  </span>
                  <span className="brand-copy">
                    <span className="brand-mark">GGTI.GG</span>
                    <span className="brand-kicker">전적 기반 플레이 성향 분석</span>
                  </span>
                </Link>
                <nav className="hidden items-center gap-5 text-[14px] font-semibold text-[#aeb4c9] xl:flex">
                  {topNavItems.map((item) => (
                    <Link key={item} href="/" className="top-nav-link">
                      {item}
                    </Link>
                  ))}
                </nav>
              </div>

              <div className="hidden items-center gap-3 lg:flex">
                <span className="header-region-pill">KR</span>
                <button type="button" className="header-login-button">
                  로그인
                </button>
              </div>
            </div>
          </div>

          <div className="summonerbar">
            <div className="summoner-shell">
              <div className="search-head">
                <div className="search-context">
                  <span className="search-badge">리그 오브 레전드</span>
                  <div className="search-heading-row">
                    <h2 className="search-title">전적 검색과 GGTI 분석</h2>
                    <span className="search-chip">실시간 갱신</span>
                  </div>
                  <p className="search-caption">
                    소환사 전적을 빠르게 찾고, 경기 흐름과 플레이 성향까지 한 번에 확인하세요.
                  </p>
                </div>

                <div className="search-status-panel">
                  <div className="status-rail">
                    <span className="status-rail-label">분석 포인트</span>
                    <strong className="status-rail-value">전적 · 성향 · GGTI</strong>
                  </div>
                  <div className="status-rail is-subtle">
                    <span className="status-rail-label">서비스 방향</span>
                    <strong className="status-rail-value">OP.GG형 전적 탐색 + 재미 요소</strong>
                  </div>
                </div>
              </div>

              <div className="search-form-row">
                <RiotSearchForm variant="compact" />
              </div>

              <nav className="service-nav">
                {serviceNavItems.map((item) => (
                  <Link key={item} href="/" className="service-nav-link">
                    {item}
                  </Link>
                ))}
              </nav>
            </div>
          </div>
        </header>

        {children}

        <footer className="mx-auto max-w-[1320px] px-4 py-10 text-xs text-[#6f768d]">
          GGTI는 Riot Games의 공식 서비스가 아니며 Riot Games의 입장이나 의견을 대변하지 않습니다.
        </footer>
      </body>
    </html>
  );
}
