import {Link} from 'react-router';
import {MarketingShell, Section} from '@/components/layout/MarketingShell';
import {ShowcaseGrid} from '@/features/marketing/ShowcaseGrid';
import {Button} from '@/components/ui/button';

/**
 * 이렇게 나옵니다 — 실제로 발행된 홈페이지 목록.
 *
 * ★ 템플릿 갤러리가 아니다. 고르라고 보여주는 게 아니라 "진짜로 나갔다"는 증거를 거는 자리다.
 *   그래서 예시 데이터로 채우지 않는다(ShowcaseGrid 주석) — 발행본이 없으면 빈 화면이 맞다.
 */
export function ShowcasePage() {
  return (
    <MarketingShell>
      <Section>
        <header className="mb-10 max-w-2xl">
          <h1 className="text-3xl font-bold tracking-tight text-balance sm:text-4xl">이렇게 나옵니다</h1>
          <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
            실제로 발행된 홈페이지입니다. 눌러서 그대로 열어 보세요 — 사장님 가게도 같은 방식으로 만들어집니다.
          </p>
        </header>

        <ShowcaseGrid limit={24} />
      </Section>

      <Section muted className="text-center">
        <h2 className="text-2xl font-bold tracking-tight text-balance">우리 가게도 만들어 볼까요?</h2>
        <p className="mt-3 text-sm text-muted-foreground">가게 이름만 있으면 됩니다.</p>
        <Link to="/builder?new=1" className="mt-7 inline-block">
          <Button variant="primary" size="lg">
            무료로 만들어 보기
          </Button>
        </Link>
      </Section>
    </MarketingShell>
  );
}