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

import {useCallback, useEffect, useRef, useState} from 'react';
import {ChevronLeft, ChevronRight, Phone} from 'lucide-react';
import {useSite} from '@site/lib/site-context';
import {bookingActionLabel, bookingLinks, heroFacts, lowestPrice} from '@site/lib/derive';

/**
 * 첫 화면 — 국내 펜션 사이트의 정석(`hero.slideshow`).
 *
 * ★ 기본 히어로와 다른 건 색이 아니라 **골격**이다.
 *   기본형은 사진 한 장 위에 이름이 왼쪽 아래 붙는다. 국내 펜션은 예외 없이
 *   **화면을 꽉 채운 사진이 저절로 넘어가고**, 이름이 한가운데 서고, 그 아래 띠에서
 *   값과 예약 창구가 한 번에 읽힌다. 첫 화면에서 "어떤 집인가 · 얼마인가 · 어디로 예약하나"
 *   셋이 끝나야 한다.
 *
 * ★ 가로 스크롤 상자로 만들지 않는다 (실측)
 *   처음엔 scroll-snap 트랙으로 짰는데, 첫 화면의 8할을 차지하는 그 상자 위에서
 *   **휠을 굴려도 페이지가 안 내려갔다.** 가로 스크롤 컨테이너가 휠을 먹는다.
 *   첫 화면에서 스크롤이 막히는 건 사이트가 고장 난 것과 같다.
 *   그래서 슬라이드를 겹쳐 두고 불투명도로 바꾼다 — 휠을 가로채는 요소가 아예 없다.
 *
 * ★ 자동으로 넘기되 손을 대면 멈춘다. 읽는 중에 사진이 바뀌면 그건 방해다.
 * ★ 다섯 장이 **전부 HTML 에 있다.** 한 장씩 갈아 끼우면 나머지 alt 문장이 문서에서
 *   사라진다 — 이미지 검색이 그 문장을 읽는다.
 */

/** 자동 전환 간격. 3초는 글을 읽기 전에 바뀌고, 10초는 넘어가는 걸 아무도 못 본다. */
const ROTATE_MS = 6000;
/** 다섯 장이면 충분하다. 열 장을 자동으로 돌리면 마지막 장은 아무도 못 본다. */
const MAX_SLIDES = 5;

export function HeroPension() {
  const payload = useSite();
  const {place, narrative} = payload;
  const facts = heroFacts(payload);
  const price = lowestPrice(payload);
  const links = bookingLinks(payload);
  const locality = place.addressLocality ?? place.addressRegion;

  // 대표 사진이 먼저 온다 — og:image 와 첫 장이 다르면 공유 카드와 화면이 어긋난다.
  const slides = [...payload.media]
    .filter((image) => image.alt?.trim())
    .sort((a, b) => Number(b.isPrimary) - Number(a.isPrimary))
    .slice(0, MAX_SLIDES);

  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);
  const touchX = useRef<number | null>(null);

  const step = useCallback(
    (delta: number) => setIndex((now) => (now + delta + slides.length) % slides.length),
    [slides.length],
  );

  useEffect(() => {
    if (paused || slides.length < 2) return;
    const timer = setInterval(() => step(1), ROTATE_MS);
    return () => clearInterval(timer);
  }, [paused, step, slides.length]);

  return (
    <section id="top" className="w-full">
      <div
        className="relative w-full overflow-hidden"
        style={{
          backgroundColor: 'var(--tpl-inverse, #1c1917)',
          color: 'var(--tpl-bg, #ffffff)',
          // 모바일 주소창이 접혔다 펴질 때 100vh 는 출렁여 글자가 뛴다 — 상·하한을 둔다.
          height: 'clamp(24rem, 76vh, 42rem)',
        }}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        onFocusCapture={() => setPaused(true)}
        onBlurCapture={() => setPaused(false)}
        onTouchStart={(event) => {
          touchX.current = event.touches[0].clientX;
        }}
        onTouchEnd={(event) => {
          const from = touchX.current;
          touchX.current = null;
          if (from === null) return;
          const moved = event.changedTouches[0].clientX - from;
          // 40px 아래는 세로로 넘기다 손가락이 살짝 흐른 것이다.
          if (Math.abs(moved) > 40) step(moved < 0 ? 1 : -1);
        }}
      >
        {slides.map((image, i) => (
          <img
            key={image.mediaId}
            src={image.url}
            alt={image.alt}
            // 첫 장은 LCP 다 — 지연 로딩하면 첫 화면이 그만큼 늦게 뜬다.
            fetchPriority={i === 0 ? 'high' : 'low'}
            loading={i === 0 ? undefined : 'lazy'}
            decoding="async"
            className="absolute inset-0 size-full object-cover object-center transition-opacity duration-700"
            style={{opacity: i === index ? 1 : 0}}
          />
        ))}

        {/*
          ★ 사진을 고르게 덮지 않는다 — 통째로 덮으면 팔려는 물건이 탁해진다.
            가운데 글자가 놓이는 만큼만 옅게, 아래는 짙게.
        */}
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              'linear-gradient(to bottom, color-mix(in srgb, var(--tpl-inverse, #1c1917) 34%, transparent) 0%, color-mix(in srgb, var(--tpl-inverse, #1c1917) 16%, transparent) 45%, color-mix(in srgb, var(--tpl-inverse, #1c1917) 60%, transparent) 100%)',
          }}
        />

        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-6 text-center">
          {locality && <p className="label opacity-85">{locality}</p>}
          {/* h1 은 페이지에 하나. 가게 이름이 들어가야 "○○ 홈페이지" 질의에 잡힌다. */}
          <h1
            className="serif mt-2"
            style={{
              fontSize: 'var(--fs-display)',
              fontWeight: 'var(--tpl-heading-weight, 700)',
              lineHeight: 1.15,
            }}
          >
            {place.name}
          </h1>
          {(narrative.tagline ?? narrative.heroSubline) && (
            <p className="measure mt-3 text-[length:var(--fs-lead)] leading-relaxed opacity-90">
              {narrative.tagline ?? narrative.heroSubline}
            </p>
          )}
        </div>

        {slides.length > 1 && (
          <>
            <Arrow dir="prev" onClick={() => step(-1)} />
            <Arrow dir="next" onClick={() => step(1)} />
            <ul className="absolute inset-x-0 bottom-5 flex items-center justify-center gap-2">
              {slides.map((image, i) => (
                <li key={image.mediaId}>
                  <button
                    type="button"
                    onClick={() => setIndex(i)}
                    aria-label={`${i + 1}번째 사진`}
                    aria-current={i === index}
                    className={`h-1.5 rounded-full bg-current transition-all ${
                      i === index ? 'w-7 opacity-90' : 'w-1.5 opacity-45 hover:opacity-70'
                    }`}
                  />
                </li>
              ))}
            </ul>
          </>
        )}
      </div>

      {/*
        사진 아래 띠 — 국내 펜션 사이트가 첫 화면에서 반드시 답하는 것.
        ★ 사진 위에 얹지 않는다. 밝은 사진에서는 글도 사진도 죽는다.
      */}
      {(price || facts.length > 0 || links.length > 0 || place.phone) && (
        <div
          className="border-line paper w-full border-b"
          style={{backgroundColor: 'var(--tpl-surface-alt, #f5f5f4)'}}
        >
          <div className="shell flex flex-col items-center gap-4 py-4 lg:flex-row lg:justify-between lg:gap-8">
            <dl className="divide-line flex flex-wrap justify-center gap-y-2 sm:divide-x">
              {price && (
                <div className="px-5 text-center sm:first:pl-0">
                  <dt className="label">1박 최저가</dt>
                  <dd className="text-[length:var(--fs-lead)] font-bold tabular-nums">{price}</dd>
                </div>
              )}
              {facts.map((row) => (
                <div key={row.label} className="px-5 text-center">
                  <dt className="label">{row.label}</dt>
                  <dd className="text-[length:var(--fs-lead)] font-bold">{row.value}</dd>
                </div>
              ))}
            </dl>

            <div className="flex shrink-0 gap-2">
              {place.phone && (
                <a
                  href={`tel:${place.phone}`}
                  className="tap border-line tpl-border inline-flex items-center gap-1.5 rounded-lg border px-4 text-[length:var(--fs-sm)] font-semibold"
                >
                  <Phone className="size-4" />
                  <span>{place.phone}</span>
                </a>
              )}
              {/* 확정된 예약 채널만 — 확정 전 URL 은 동명 업소의 예약 페이지일 수 있다. */}
              {links.length > 0 && (
                <a
                  href={links[0].url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="tap inline-flex items-center justify-center rounded-lg px-6 text-[length:var(--fs-sm)] font-bold transition-opacity hover:opacity-90"
                  style={{backgroundColor: 'var(--color-brand)', color: 'var(--tpl-bg, #fff)'}}
                >
                  {bookingActionLabel(links[0])}
                </a>
              )}
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function Arrow({dir, onClick}: {dir: 'prev' | 'next'; onClick: () => void}) {
  const Icon = dir === 'prev' ? ChevronLeft : ChevronRight;
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={dir === 'prev' ? '이전 사진' : '다음 사진'}
      className={`tap absolute top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full bg-current/15 px-3 backdrop-blur-sm transition-colors hover:bg-current/25 sm:inline-flex ${
        dir === 'prev' ? 'left-4' : 'right-4'
      }`}
    >
      <Icon className="size-5" />
    </button>
  );
}