<template>
  <div class="min-h-screen bg-slate-950 text-slate-100">
    <section class="relative overflow-hidden bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950">
      <div class="pointer-events-none absolute -left-28 top-[-130px] h-72 w-72 rounded-full bg-cyan-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute right-[-100px] bottom-[-120px] h-80 w-80 rounded-full bg-indigo-400/15 blur-3xl"></div>

      <div class="mx-auto flex min-h-screen max-w-6xl flex-col justify-between px-6 py-10 md:px-10">
        <header class="flex items-center justify-between">
          <p class="text-xs font-bold tracking-[0.2em] text-slate-300">LANDING MANAGER</p>
          <NuxtLink
            to="/admin"
            class="rounded-md border border-slate-700 px-4 py-2 text-sm text-slate-200 transition hover:bg-slate-800"
          >
            관리자 바로가기
          </NuxtLink>
        </header>

        <main class="grid gap-10 py-16 md:py-24 lg:grid-cols-2 lg:items-center">
          <div class="space-y-6">
            <p class="inline-flex rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-cyan-200">
              광고 랜딩 운영 시작점
            </p>
            <h1 class="text-4xl font-black leading-tight md:text-5xl">
              캠페인 기반 랜딩 페이지를
              <span class="text-cyan-300">빠르게</span> 운영하세요
            </h1>
            <p class="max-w-xl text-lg text-slate-300">
              캠페인, 페이지, 도메인 매핑, 조건 분기까지 한 곳에서 관리하는 어드민 구조를
              페이지 단위로 점진적으로 구성합니다.
            </p>

            <div class="flex flex-wrap gap-3">
              <NuxtLink
                to="/admin"
                class="rounded-md bg-cyan-400 px-4 py-2 font-semibold text-slate-950 transition hover:bg-cyan-300"
              >
                관리자 대시보드 시작
              </NuxtLink>
              <NuxtLink
                to="/"
                class="rounded-md border border-slate-700 px-4 py-2 text-slate-200 transition hover:bg-slate-800"
              >
                가이드 보기
              </NuxtLink>
            </div>
          </div>

          <section class="rounded-2xl border border-slate-700 bg-slate-900/60 p-6 backdrop-blur">
            <h2 class="text-sm font-bold uppercase tracking-[0.15em] text-cyan-300">현재 설계 범위</h2>
            <p class="mt-2 text-slate-200">1단계: 기본 화면 + 관리 기본 페이지를 하나씩 생성</p>
            <ul class="mt-4 space-y-3 text-sm text-slate-300">
              <li class="rounded-md border border-slate-800 p-3">1) 홈(현재 페이지)</li>
              <li class="rounded-md border border-slate-800 p-3">2) 관리자 시작 페이지(다음)</li>
              <li class="rounded-md border border-slate-800 p-3">3) 캠페인 목록</li>
              <li class="rounded-md border border-slate-800 p-3">4) 페이지 상세/빌더</li>
            </ul>
          </section>
        </main>
      </div>
    </section>

    <section class="mx-auto max-w-6xl px-6 pb-16 md:px-10">
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        <article class="rounded-xl border border-slate-700 bg-slate-900 p-5">
          <p class="text-xs uppercase text-slate-400">목표</p>
          <h3 class="mt-1 text-xl font-bold">광고 집행용 랜딩 운영</h3>
          <p class="mt-2 text-sm text-slate-300">
            유입 페이지가 많아져도 관리가 쉬운 구조로 캠페인 단위 관리 흐름을 만든다.
          </p>
        </article>

        <article class="rounded-xl border border-slate-700 bg-slate-900 p-5">
          <p class="text-xs uppercase text-slate-400">기능</p>
          <h3 class="mt-1 text-xl font-bold">도메인 분기 및 조건 분기</h3>
          <p class="mt-2 text-sm text-slate-300">
            호스트/경로 분기 + 요일/시간 조건 분기를 기반으로 보여줄 페이지를 제어한다.
          </p>
        </article>

        <article class="rounded-xl border border-slate-700 bg-slate-900 p-5">
          <p class="text-xs uppercase text-slate-400">철학</p>
          <h3 class="mt-1 text-xl font-bold">페이지는 작게, 운영은 빠르게</h3>
          <p class="mt-2 text-sm text-slate-300">
            한 번에 완성보다, 페이지 하나씩 완성하면서 안정적으로 확장한다.
          </p>
        </article>
      </div>
    </section>
  </div>
</template>
