auto-trade/app/(home)/page.tsx

/**
 * @file app/(home)/page.tsx
 * @description 서비스 메인 랜딩 페이지
 * @remarks
 * - [레이어] Pages (Server Component)
 * - [역할] 비로그인 유저 유입, 브랜드 소개, 로그인/대시보드 유도
 * - [구성요소] Header, Hero Section (Spline 3D), Feature Section (Bento Grid)
 * - [데이터 흐름] Server Auth Check -> Client Component Props
 */

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { createClient } from "@/utils/supabase/server";
import { Header } from "@/features/layout/components/header";
import { AUTH_ROUTES } from "@/features/auth/constants";
import { SplineScene } from "@/features/home/components/spline-scene";

/**
 * 메인 페이지 컴포넌트 (비동기 서버 컴포넌트)
 * @returns Landing Page Elements
 * @see layout.tsx - RootLayout 내에서 렌더링
 * @see spline-scene.tsx - 3D 인터랙션
 */
export default async function HomePage() {
  // [Step 1] 서버 사이드 인증 상태 확인
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();

  return (
    <div className="flex min-h-screen flex-col overflow-x-hidden">
      <Header user={user} showDashboardLink={true} />

      <main className="flex-1 bg-background pt-16">
        {/* Background Pattern */}
        <div className="absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />

        <section className="container relative mx-auto max-w-7xl px-4 pt-12 md:pt-24 lg:pt-32">
          <div className="flex flex-col items-center justify-center text-center">
            {/* Badge */}
            <div className="mb-6 inline-flex items-center rounded-full border border-indigo-200/50 bg-indigo-50/50 px-3 py-1 text-sm font-medium text-indigo-600 backdrop-blur-md dark:border-indigo-800/50 dark:bg-indigo-950/50 dark:text-indigo-300">
              <span className="flex h-2 w-2 rounded-full bg-indigo-500 mr-2 animate-pulse"></span>
              The Future of Trading
            </div>

            <h1 className="font-heading text-4xl font-black tracking-tight text-foreground sm:text-6xl md:text-7xl lg:text-8xl">
              투자의 미래를 <br className="hidden sm:block" />
              <span className="text-transparent bg-clip-text bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 animate-gradient-x underline decoration-indigo-500/30 decoration-4 underline-offset-8">
                자동화하세요
              </span>
            </h1>

            <p className="mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl leading-relaxed break-keep">
              AutoTrade는 최첨단 알고리즘을 통해 24시간 암호화폐 시장을
              분석합니다.
              <br className="hidden md:block" />
              감정 없는 데이터 기반 투자로 안정적인 수익을 경험해보세요.
            </p>

            <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row">
              {user ? (
                <Button
                  asChild
                  size="lg"
                  className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-indigo-500/20 transition-all hover:scale-105 hover:shadow-indigo-500/40"
                >
                  <Link href={AUTH_ROUTES.DASHBOARD}>대시보드 바로가기</Link>
                </Button>
              ) : (
                <Button
                  asChild
                  size="lg"
                  className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-indigo-500/20 transition-all hover:scale-105 hover:shadow-indigo-500/40"
                >
                  <Link href={AUTH_ROUTES.LOGIN}>무료로 시작하기</Link>
                </Button>
              )}
              {!user && (
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="h-14 rounded-full border-border bg-background/50 px-10 text-lg hover:bg-accent/50 backdrop-blur-sm"
                >
                  <Link href={AUTH_ROUTES.LOGIN}>데모 체험하기</Link>
                </Button>
              )}
            </div>

            {/* Spline Scene - Centered & Wide */}
            <div className="relative mt-16 w-full max-w-5xl">
              <div className="group relative aspect-video w-full overflow-hidden rounded-3xl border border-white/20 bg-linear-to-b from-white/10 to-transparent shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20">
                {/* Glow Effect */}
                <div className="absolute -inset-1 rounded-3xl bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-20 blur-2xl transition-opacity duration-500 group-hover:opacity-40" />

                <SplineScene
                  sceneUrl="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
                  className="relative z-10 h-full w-full rounded-2xl"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Features Section - Bento Grid */}
        <section className="container mx-auto max-w-7xl px-4 py-24 sm:py-32">
          <div className="mb-16 text-center">
            <h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
              강력한 기능,{" "}
              <span className="text-indigo-500">직관적인 경험</span>
            </h2>
            <p className="mt-4 text-lg text-muted-foreground">
              성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
            {/* Feature 1 */}
            <div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
              <div className="relative z-10 flex flex-col justify-between h-full gap-6">
                <div className="h-14 w-14 flex items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 dark:bg-indigo-900/20 dark:text-indigo-400">
                  <svg
                    className="w-8 h-8"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-2">실시간 모니터링</h3>
                  <p className="text-muted-foreground text-lg leading-relaxed">
                    초당 수천 건의 트랜잭션을 실시간으로 분석합니다.
                    <br />
                    시장 변동성을 놓치지 않고 최적의 진입 시점을 포착하세요.
                  </p>
                </div>
              </div>
              <div className="absolute top-0 right-0 h-64 w-64 translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all duration-500" />
            </div>

            {/* Feature 2 (Tall) */}
            <div className="group relative col-span-1 row-span-2 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50">
              <div className="relative z-10 flex flex-col h-full gap-6">
                <div className="h-14 w-14 flex items-center justify-center rounded-2xl bg-purple-50 text-purple-600 dark:bg-purple-900/20 dark:text-purple-400">
                  <svg
                    className="w-8 h-8"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
                    />
                  </svg>
                </div>
                <h3 className="text-2xl font-bold">알고리즘 트레이딩</h3>
                <p className="text-muted-foreground text-lg">
                  24시간 멈추지 않는 자동 매매 시스템입니다.
                </p>
                <div className="mt-auto space-y-4 pt-4">
                  {[
                    "추세 추종 전략",
                    "변동성 돌파",
                    "AI 예측 모델",
                    "리스크 관리",
                  ].map((item) => (
                    <div
                      key={item}
                      className="flex items-center gap-3 text-sm font-medium text-foreground/80"
                    >
                      <div className="h-2 w-2 rounded-full bg-purple-500" />
                      {item}
                    </div>
                  ))}
                </div>
              </div>
              <div className="absolute bottom-0 left-0 h-64 w-64 -translate-x-1/2 translate-y-1/2 rounded-full bg-purple-500/10 blur-3xl group-hover:bg-purple-500/20 transition-all duration-500" />
            </div>

            {/* Feature 3 */}
            <div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
              <div className="relative z-10 flex flex-col justify-between h-full gap-6">
                <div className="h-14 w-14 flex items-center justify-center rounded-2xl bg-pink-50 text-pink-600 dark:bg-pink-900/20 dark:text-pink-400">
                  <svg
                    className="w-8 h-8"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-2">스마트 포트폴리오</h3>
                  <p className="text-muted-foreground text-lg leading-relaxed">
                    목표 수익률 달성 시 자동으로 이익을 실현하고, MDD를
                    최소화하여
                    <br />
                    시장이 하락할 때도 당신의 자산을 안전하게 지킵니다.
                  </p>
                </div>
              </div>
              <div className="absolute bottom-0 right-0 h-40 w-40 translate-x-1/3 translate-y-1/3 rounded-full bg-pink-500/10 blur-3xl group-hover:bg-pink-500/20 transition-all duration-500" />
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}