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

import Link from "next/link";
import { ArrowRight, Sparkles } from "lucide-react";
import { Header } from "@/features/layout/components/header";
import { AUTH_ROUTES } from "@/features/auth/constants";
import { Button } from "@/components/ui/button";
import ShaderBackground from "@/components/ui/shader-background";
import { createClient } from "@/utils/supabase/server";
import { AnimatedBrandTone } from "@/components/ui/animated-brand-tone";

interface StartStep {
  step: string;
  title: string;
  description: string;
}

const START_STEPS: StartStep[] = [
  {
    step: "01",
    title: "앱키 연결, 1분이면 끝",
    description:
      "복잡한 절차 없이, 지금 쓰는 계좌로 바로 시작할 수 있어요.",
  },
  {
    step: "02",
    title: "투자금/손실선만 입력하세요",
    description:
      "어렵게 계산할 필요 없이, 내가 감당 가능한 금액만 정하면 돼요.",
  },
  {
    step: "03",
    title: "신호 확인 후 자동 실행",
    description:
      "차트 감시는 JOORIN-E가 맡고, 당신은 중요한 순간만 확인하면 됩니다.",
  },
];

/**
 * 홈 메인 랜딩 페이지
 * @returns 랜딩 UI
 */
export default async function HomePage() {
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();

  const primaryCtaHref = user ? AUTH_ROUTES.DASHBOARD : AUTH_ROUTES.SIGNUP;
  const primaryCtaLabel = user ? "내 전략 시작하기" : "무료로 시작하기";

  return (
    <div className="flex min-h-screen flex-col overflow-x-hidden bg-black text-white selection:bg-brand-500/30">
      <Header user={user} showDashboardLink={true} blendWithBackground={true} />

      <main className="relative isolate flex-1">
        {/* ========== BACKGROUND ========== */}
        <ShaderBackground opacity={0.6} className="-z-20" />
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 -z-10 bg-black/60"
        />

        {/* ========== HERO SECTION ========== */}
        <section className="container mx-auto max-w-5xl px-4 pt-32 md:pt-48">
          <div className="flex flex-col items-center text-center">
            <span className="inline-flex animate-in fade-in-0 slide-in-from-top-2 items-center gap-2 rounded-full border border-brand-400/30 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-brand-200 backdrop-blur-md duration-1000">
              <Sparkles className="h-3.5 w-3.5" />
              처음 하는 자동매매도 쉽게, JOORIN-E
            </span>

            <h1 className="mt-8 animate-in slide-in-from-bottom-4 text-5xl font-black tracking-tight text-white duration-1000 md:text-8xl">
              복잡한 차트 대신
              <br />
              <span className="bg-linear-to-b from-brand-300 via-brand-200 to-brand-500 bg-clip-text text-transparent">
                쉬운 자동매매로 시작하세요.
              </span>
            </h1>

            <p className="mt-8 max-w-2xl animate-in slide-in-from-bottom-4 text-sm leading-relaxed text-white/60 duration-1000 md:text-xl">
              감으로 사고파는 불안한 투자, 이제 줄여보세요.
              <br className="hidden md:block" />
              예산과 손실선을 먼저 지키는 방식으로, 주식을 더 편하게 도와드립니다.
            </p>

            <div className="mt-12 flex animate-in slide-in-from-bottom-6 flex-col gap-4 duration-1000 sm:flex-row">
              <Button
                asChild
                size="lg"
                className="group h-14 min-w-[200px] rounded-full bg-brand-500 px-10 text-lg font-bold text-white transition-all hover:scale-105 hover:bg-brand-400 active:scale-95"
              >
                <Link href={primaryCtaHref}>
                  {primaryCtaLabel}
                  <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
                </Link>
              </Button>
            </div>
          </div>
        </section>

        {/* ========== BRAND TONE SECTION (움직이는 글자) ========== */}
        <section className="container mx-auto max-w-5xl px-4 py-24 md:py-40">
          <AnimatedBrandTone />
        </section>

        {/* ========== SIMPLE STEPS SECTION ========== */}
        <section className="container mx-auto max-w-5xl px-4 py-24">
          <div className="flex flex-col items-center gap-16 md:flex-row md:items-start">
            <div className="flex-1 text-center md:text-left">
              <h2 className="text-3xl font-black md:text-5xl">
                주식이 처음이어도
                <br />
                <span className="text-brand-300">3단계면 준비 끝.</span>
              </h2>
              <p className="mt-6 text-sm leading-relaxed text-white/50 md:text-lg">
                앱키 연결 -&gt; 투자금/손실선 설정 -&gt; 시작 버튼.
                <br />
                어려운 용어 없이, 필요한 것만 빠르게 설정해보세요.
              </p>
            </div>

            <div className="flex-2 grid w-full gap-4 md:grid-cols-1">
              {START_STEPS.map((item) => (
                <div
                  key={item.step}
                  className="group flex items-center gap-6 rounded-2xl border border-white/5 bg-white/5 p-6 transition-all hover:bg-white/10"
                >
                  <span className="text-3xl font-black text-brand-500/50 group-hover:text-brand-500">
                    {item.step}
                  </span>
                  <div>
                    <h3 className="text-lg font-bold text-white">
                      {item.title}
                    </h3>
                    <p className="mt-1 text-sm text-white/50">
                      {item.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 보안 안심 문구 (사용자 요청 반영) */}
          <div className="mt-16 flex flex-col items-center justify-center text-center animate-in slide-in-from-bottom-6 duration-1000 delay-300">
            <div className="flex max-w-2xl flex-col items-center gap-4 rounded-2xl border border-brand-500/20 bg-brand-500/5 p-8 backdrop-blur-sm md:flex-row md:gap-8 md:text-left">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-brand-500/10 text-brand-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-shield-check"
                >
                  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
                  <path d="m9 12 2 2 4-4" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-bold text-brand-100">
                  계좌 키/정보, 어디에 저장되나요?
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-brand-200/70">
                  <strong className="text-brand-200">
                    핵심 정보는 내 브라우저에만 저장됩니다.
                  </strong>
                  <br />
                  JOORIN-E는 계좌 비밀번호를 저장하지 않으며,
                  <br className="hidden md:block" />
                  API 키도 장기 보관하지 않도록 최소 범위로만 사용합니다.
                  <br className="hidden md:block" />
                  매매 요청은 필요한 순간에만 증권사와 통신합니다.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* ========== FINAL CTA SECTION ========== */}
        <section className="container mx-auto max-w-5xl px-4 py-32">
          <div className="relative overflow-hidden rounded-[2.5rem] border border-brand-500/20 bg-linear-to-b from-brand-500/10 to-transparent p-12 text-center md:p-24">
            <h2 className="text-3xl font-black md:text-6xl">
              감으로 매매하던 습관에서
              <br />
              오늘부터 규칙 매매로 바꿔보세요.
            </h2>
            <div className="mt-12 flex justify-center">
              <Button
                asChild
                size="lg"
                className="h-16 rounded-full bg-white px-12 text-xl font-black text-black transition-all hover:scale-110 active:scale-95"
              >
                <Link href={primaryCtaHref}>{primaryCtaLabel}</Link>
              </Button>
            </div>

            <p className="mt-8 text-sm text-white/30">
              © 2026 POPUP STUDIO. All rights reserved.
            </p>
          </div>
        </section>
      </main>
    </div>
  );
}