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

/**
 * @file app/(home)/page.tsx
 * @description 서비스 메인 랜딩 페이지(Server Component)
 */

import Link from "next/link";
import { ArrowRight, BarChart3, ShieldCheck, Sparkles, Zap } from "lucide-react";
import { Header } from "@/features/layout/components/header";
import { AUTH_ROUTES } from "@/features/auth/constants";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import ShaderBackground from "@/components/ui/shader-background";
import { createClient } from "@/utils/supabase/server";

/**
 * 홈 메인 랜딩 페이지
 * @returns 랜딩 UI
 * @see features/layout/components/header.tsx blendWithBackground 모드 헤더를 함께 사용
 */
export default async function HomePage() {
  // [로그인 상태 조회] 사용자 유무에 따라 CTA 링크를 분기합니다.
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();

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

      <main className="relative isolate flex-1 pt-16">
        {/* ========== SHADER BACKGROUND SECTION ========== */}
        <ShaderBackground opacity={1} className="-z-20" />

        {/* ========== HERO SECTION ========== */}
        <section className="container mx-auto max-w-7xl px-4 pb-10 pt-16 md:pt-24">
          <div className="p-2 md:p-6">
            <div className="mx-auto max-w-4xl text-center">
              <span className="inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-semibold text-brand-200 [text-shadow:0_2px_24px_rgba(0,0,0,0.65)]">
                <Sparkles className="h-3.5 w-3.5" />
                Shader Background Landing
              </span>

              <h1 className="mt-5 text-4xl font-black tracking-tight text-white [text-shadow:0_4px_30px_rgba(0,0,0,0.6)] md:text-6xl">
                데이터로 판단하고
                <br />
                <span className="bg-linear-to-r from-brand-300 via-brand-400 to-brand-500 bg-clip-text text-transparent">
                  자동으로 실행합니다
                </span>
              </h1>

              <p className="mx-auto mt-5 max-w-2xl text-sm leading-relaxed text-white/80 [text-shadow:0_2px_16px_rgba(0,0,0,0.5)] md:text-lg">
                실시간 시세 확인, 전략 점검, 주문 연결까지 한 화면에서 이어지는 자동매매 환경을
                제공합니다. 복잡한 설정은 줄이고 실행 속도는 높였습니다.
              </p>

              <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
                {/* [분기 렌더] 로그인 사용자는 대시보드, 비로그인 사용자는 가입/로그인 동선을 노출합니다. */}
                {user ? (
                  <Button asChild size="lg" className="h-12 rounded-full bg-primary px-8 text-base hover:bg-primary/90">
                    <Link href={AUTH_ROUTES.DASHBOARD}>
                      대시보드 바로가기
                      <ArrowRight className="ml-1.5 h-4 w-4" />
                    </Link>
                  </Button>
                ) : (
                  <>
                    <Button asChild size="lg" className="h-12 rounded-full bg-primary px-8 text-base hover:bg-primary/90">
                      <Link href={AUTH_ROUTES.SIGNUP}>
                        무료로 시작하기
                        <ArrowRight className="ml-1.5 h-4 w-4" />
                      </Link>
                    </Button>
                    <Button
                      asChild
                      variant="outline"
                      size="lg"
                      className="h-12 rounded-full border-white/40 bg-transparent px-8 text-base text-white hover:bg-white/10 hover:text-white"
                    >
                      <Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
                    </Button>
                  </>
                )}
              </div>
            </div>

            <div className="mt-8 grid gap-3 sm:grid-cols-3">
              <div className="rounded-2xl p-4 text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.35)]">
                <p className="text-xs text-white/70">지연 시간 기준</p>
                <p className="mt-1 text-lg font-bold">Low Latency</p>
              </div>
              <div className="rounded-2xl p-4 text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.35)]">
                <p className="text-xs text-white/70">모니터링</p>
                <p className="mt-1 text-lg font-bold">실시간 시세 반영</p>
              </div>
              <div className="rounded-2xl p-4 text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.35)]">
                <p className="text-xs text-white/70">실행 환경</p>
                <p className="mt-1 text-lg font-bold">웹 기반 자동매매</p>
              </div>
            </div>
          </div>
        </section>

        {/* ========== FEATURE SECTION ========== */}
        <section className="container mx-auto max-w-7xl px-4 pb-16 md:pb-24">
          <div className="grid gap-4 md:grid-cols-3">
            <Card className="border-0 bg-transparent text-white shadow-none">
              <CardHeader>
                <div className="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-400/20 text-brand-200">
                  <BarChart3 className="h-5 w-5" />
                </div>
                <CardTitle className="text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.4)]">실시간 데이터 가시화</CardTitle>
              </CardHeader>
              <CardContent className="text-sm leading-relaxed text-white/75">
                시세 변화와 거래 흐름을 빠르게 확인할 수 있게 핵심 정보만 선별해 보여줍니다.
              </CardContent>
            </Card>

            <Card className="border-0 bg-transparent text-white shadow-none">
              <CardHeader>
                <div className="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-400/20 text-brand-200">
                  <Zap className="h-5 w-5" />
                </div>
                <CardTitle className="text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.4)]">전략 실행 속도 최적화</CardTitle>
              </CardHeader>
              <CardContent className="text-sm leading-relaxed text-white/75">
                필요한 단계만 남긴 단순한 흐름으로 전략 테스트와 실행 전환 시간을 줄였습니다.
              </CardContent>
            </Card>

            <Card className="border-0 bg-transparent text-white shadow-none">
              <CardHeader>
                <div className="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-400/20 text-brand-200">
                  <ShieldCheck className="h-5 w-5" />
                </div>
                <CardTitle className="text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.4)]">명확한 리스크 관리</CardTitle>
              </CardHeader>
              <CardContent className="text-sm leading-relaxed text-white/75">
                자동매매에서 중요한 손실 한도와 조건을 먼저 정의하고 일관되게 적용할 수 있습니다.
              </CardContent>
            </Card>
          </div>
        </section>

        {/* ========== CTA SECTION ========== */}
        <section className="container mx-auto max-w-7xl px-4 pb-20">
          <div className="p-2 md:p-4">
            <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
              <div>
                <p className="text-sm font-semibold text-brand-200 [text-shadow:0_2px_18px_rgba(0,0,0,0.45)]">준비되면 바로 시작하세요</p>
                <h2 className="mt-1 text-2xl font-bold tracking-tight text-white [text-shadow:0_2px_18px_rgba(0,0,0,0.45)] md:text-3xl">
                  AutoTrade에서 전략을 실행해 보세요
                </h2>
              </div>
              <Button asChild className="h-11 rounded-full bg-primary px-7 hover:bg-primary/90">
                <Link href={user ? AUTH_ROUTES.DASHBOARD : AUTH_ROUTES.SIGNUP}>
                  {user ? "대시보드 열기" : "회원가입 시작"}
                  <ArrowRight className="ml-1.5 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}