import { HeroBanner } from "@/app/components/HeroBanner";

export default async function Home({ searchParams }: { searchParams: Promise<{ sort?: "recent" | "popular" } | undefined> }) {
  const sp = await searchParams;
  const sort = sp?.sort ?? "recent";
  return (
    <div className="space-y-8">
      {/* 히어로 섹션: 상단 대형 비주얼 영역 */}
      <section>
        <HeroBanner />
      </section>

      {/* 메인 그리드: 좌 대형 카드, 우 2열 카드 등 타깃 사이트 구조를 단순화한 12그리드 */}
      <section className="grid grid-cols-1 md:grid-cols-12 gap-4">
        <div className="md:col-span-8 grid grid-cols-1 gap-4">
          <div className="aspect-[16/9] rounded-xl bg-neutral-100 overflow-hidden" />
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="h-40 rounded-xl bg-neutral-100" />
            <div className="h-40 rounded-xl bg-neutral-100" />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div className="h-28 rounded-lg bg-neutral-100" />
            <div className="h-28 rounded-lg bg-neutral-100" />
            <div className="h-28 rounded-lg bg-neutral-100" />
          </div>
        </div>
        <aside className="md:col-span-4 space-y-4">
          <div className="h-40 rounded-xl bg-neutral-100" />
          <div className="h-40 rounded-xl bg-neutral-100" />
          <div className="h-40 rounded-xl bg-neutral-100" />
        </aside>
      </section>

      {/* 하단 롤링 배너/뉴스 영역 유사 섹션 */}
      <section className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="h-28 rounded-lg bg-neutral-100" />
        <div className="h-28 rounded-lg bg-neutral-100" />
        <div className="h-28 rounded-lg bg-neutral-100" />
      </section>
    </div>
  );
}