o2o-site-AEO/solution/site/src/sections/FestivalSection.tsx

/**
 * 계절별 축제.
 *
 * ★ 왜 계절로 묶나 — 지역 축제는 날짜보다 '언제쯤'이 먼저다. 손님은 "가을에 뭐 있나"를 묻지
 *   "10월 3일에 뭐 있나"를 묻지 않는다. 그리고 정적 페이지는 몇 달 산다 — 날짜로 줄 세우면
 *   구운 다음 날부터 지난 목록이 된다.
 * ★ **전 계절을 HTML 에 굽고 화면에서만 접는다.** 접힌 계절이 HTML 에 없으면 검색·AI 가
 *   나머지를 못 읽는다(items 규칙과 같다).
 * ★ 링크는 검색으로 보낸다 — 축제 공식 페이지 주소를 우리가 지어내지 않는다.
 */
import {useState} from 'react';
import {ArrowUpRight, MapPin} from 'lucide-react';
import {useSite} from '@/lib/site-context';
import {sectionName} from '@/lib/derive';

const SEASONS = ['봄', '여름', '가을', '겨울'] as const;
type Season = (typeof SEASONS)[number] | '전체';

/** '3월' → 봄. 월을 못 읽으면 어느 계절로도 넣지 않는다(지어내지 않는다). */
function seasonOf(month?: string): (typeof SEASONS)[number] | null {
  const n = Number((month ?? '').replace(/[^0-9]/g, ''));
  if (!Number.isFinite(n) || n < 1 || n > 12) return null;
  if (n >= 3 && n <= 5) return '봄';
  if (n >= 6 && n <= 8) return '여름';
  if (n >= 9 && n <= 11) return '가을';
  return '겨울';
}

export function FestivalSection() {
  const payload = useSite();
  const festivals = payload.local.festivals ?? [];
  const [active, setActive] = useState<Season>('전체');
  const region = payload.place.addressLocality ?? payload.place.addressRegion ?? '';

  if (festivals.length === 0) return null;

  const grouped = SEASONS.map((season) => ({
    season,
    items: festivals.filter((f) => seasonOf(f.month) === season),
  })).filter((group) => group.items.length > 0);
  const unknown = festivals.filter((f) => seasonOf(f.month) === null);

  return (
    <section
      id="festival"
      aria-labelledby="festival-heading"
      className="border-line paper w-full border-b"
      style={{backgroundColor: 'var(--tpl-surface, #ffffff)', paddingBlock: 'var(--section-space)'}}
    >
      <div className="shell">
        <header className="mb-6 sm:mb-8">
          <h2 id="festival-heading" className="h2 flex items-center gap-2.5">
            <i aria-hidden="true" className="h-[1em] w-[3px] shrink-0 bg-current opacity-25" />
            <span className="min-w-0">{sectionName(payload, 'festival', '계절별 축제')}</span>
          </h2>
          <p className="text-muted measure mt-2 pl-[calc(3px+0.625rem)] text-[length:var(--fs-sm)]">
            {region}의 축제와 행사를 계절로 묶었습니다.
          </p>
        </header>

        <div className="mb-6 flex flex-wrap gap-1.5" role="tablist" aria-label="계절">
          {[...grouped.map((g) => g.season), '전체' as const].map((season) => (
            <button
              key={season}
              type="button"
              role="tab"
              aria-selected={season === active}
              onClick={() => setActive(season)}
              className="border-line rounded-full border px-4 py-1.5 text-[length:var(--fs-sm)] font-bold transition-opacity hover:opacity-80"
              style={
                season === active
                  ? {
                      backgroundColor: 'var(--tpl-text, #09090b)',
                      color: 'var(--tpl-bg, #ffffff)',
                      borderColor: 'var(--tpl-text, #09090b)',
                    }
                  : undefined
              }
            >
              {season}
            </button>
          ))}
        </div>

        <div className="space-y-8">
          {[...grouped, ...(unknown.length > 0 ? [{season: '그 밖에' as const, items: unknown}] : [])].map(
            (group) => (
              <div key={group.season} hidden={active !== '전체' && active !== group.season}>
                <h3 className="border-line mb-4 border-b pb-2 text-[length:var(--fs-sm)] font-bold">
                  {group.season}
                </h3>
                <ul className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 lg:gap-4">
                  {group.items.map((festival) => (
                    <li key={festival.name}>
                      <a
                        href={`https://search.naver.com/search.naver?query=${encodeURIComponent(festival.searchQuery)}`}
                        target="_blank"
                        rel="noopener noreferrer nofollow"
                        className="panel group flex h-full overflow-hidden transition-opacity hover:opacity-85 sm:flex-col"
                      >
                        {festival.imageUrl && (
                          <span className="relative block aspect-square w-28 shrink-0 overflow-hidden sm:aspect-4/3 sm:w-auto">
                            <img
                              src={festival.imageUrl}
                              alt={`${festival.name} 사진`}
                              loading="lazy"
                              decoding="async"
                              className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
                            />
                            <span
                              className="absolute bottom-2 left-2 rounded-md px-2 py-0.5 text-[length:var(--fs-xs)] font-bold"
                              style={{
                                backgroundColor:
                                  'color-mix(in srgb, var(--tpl-inverse, #1c1917) 78%, transparent)',
                                color: 'var(--tpl-bg, #fff)',
                              }}
                            >
                              {festival.month}
                            </span>
                          </span>
                        )}
                        <span className="flex min-w-0 flex-1 flex-col gap-1 p-3 sm:p-3.5">
                          <span className="text-[length:var(--fs-sm)] font-bold">{festival.name}</span>
                          {/* ★ 기간은 있을 때만. 지난 날짜를 걸어두면 그것도 틀린 안내다. */}
                          {festival.period && (
                            <span className="text-[length:var(--fs-xs)] font-medium opacity-80">
                              {festival.period}
                            </span>
                          )}
                          {!festival.imageUrl && (
                            <span className="text-[length:var(--fs-xs)] font-bold opacity-60">
                              {festival.month}
                            </span>
                          )}
                          {festival.location && (
                            <span className="text-muted flex items-start gap-1 text-[length:var(--fs-xs)]">
                              <MapPin className="mt-0.5 size-3 shrink-0" aria-hidden="true" />
                              <span>{festival.location}</span>
                            </span>
                          )}
                          {festival.description && (
                            <span className="text-muted line-clamp-2 pt-0.5 text-[length:var(--fs-xs)] leading-relaxed sm:line-clamp-3">
                              {festival.description}
                            </span>
                          )}
                          <span className="text-muted mt-auto hidden items-center gap-0.5 pt-1.5 text-[length:var(--fs-xs)] opacity-70 transition-opacity group-hover:opacity-100 sm:flex">
                            <span>검색으로 열기</span>
                            <ArrowUpRight className="size-3" aria-hidden="true" />
                          </span>
                        </span>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ),
          )}
        </div>
      </div>
    </section>
  );
}