function Hero() {
  const { t } = useApp();
  const target = React.useMemo(() => new Date("2026-05-22T09:00:00+07:00"), []);
  const cd = useCountdown(target);

  return (
    <section className="hero" id="top">
      <div className="hero-ring" aria-hidden="true" />
      <div className="container">

        {/* ── 2컬럼: 텍스트 | 로고 ───────────────────────────── */}
        <div className="hero-grid">

          {/* 왼쪽: 텍스트 */}
          <div className="reveal hero-text-col">
            <div className="hero-eyebrow">
              <span className="eyebrow">{t.hero.eyebrow}</span>
            </div>
            <h1 className="h-display">
              {t.hero.title1}<br />
              <span className="navy">{t.hero.title2}</span><br />
              <span className="red">{t.hero.title3}</span>
            </h1>
            <p className="hero-lede">{t.hero.lede}</p>

            {/* meta — pill 배지 스타일 */}
            <div className="hero-meta">
              {t.hero.meta.map((m, i) => (
                <div key={i} className="hero-meta-pill">
                  <span className="hero-meta-key">{m.k}</span>
                  <span className="hero-meta-val">{m.v}</span>
                </div>
              ))}
            </div>
          </div>

          {/* 오른쪽: 로고 */}
          <div className="reveal delay-1 hero-logo-col">
            <div className="hero-logo-wrap">
              <img
                className="hero-logo"
                src={window.EVENT_LOGO_SRC || "./event_logo.png"}
                alt={t.hero.logoAlt}
              />
            </div>
            <p className="hero-logo-meaning">{t.hero.logoMeaning}</p>
          </div>
        </div>

        {/* ── 전체 너비: 카운트다운 바 ──────────────────────── */}
        <div className="hero-countdown-row reveal delay-2">
          <div className="countdown" role="group" aria-label={t.hero.cdLabel}>
            {/* 상단 그라디언트 선은 ::before 로 유지 */}

            <div className="countdown-inner">
              {/* 왼쪽: 이벤트 정보 */}
              <div className="countdown-info">
                <div className="countdown-label">{t.hero.cdLabel}</div>
                <div className="countdown-title">{t.hero.cdTitle}</div>
                <div className="countdown-sub">{t.hero.cdSub}</div>
              </div>

              {/* 중앙: 타이머 or 완료 메시지 */}
              {cd.past ? (
                <div className="countdown-past">{t.hero.cdPast}</div>
              ) : (
                <div className="countdown-grid" aria-hidden="true">
                  {[
                    { k: t.hero.cdUnits.d, v: cd.d },
                    { k: t.hero.cdUnits.h, v: cd.h },
                    { k: t.hero.cdUnits.m, v: cd.m },
                    { k: t.hero.cdUnits.s, v: cd.s },
                  ].map((c, i) => (
                    <div key={i} className="cd-cell">
                      <div className="cd-num">{String(c.v).padStart(2, "0")}</div>
                      <span className="cd-lbl">{c.k}</span>
                    </div>
                  ))}
                </div>
              )}

              {/* 오른쪽: 날짜 배지 + 장소 */}
              <div className="countdown-right">
                <div className="countdown-date-badge" aria-hidden="true">
                  <span className="d">{t.hero.cdDateD}</span>
                  <span className="m">{t.hero.cdDateM}</span>
                </div>
                <div className="countdown-venue">
                  <svg
                    width="15" height="15" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" strokeWidth="1.6"
                    aria-hidden="true"
                  >
                    <path d="M12 22s-7-7-7-13a7 7 0 0 1 14 0c0 6-7 13-7 13z" />
                    <circle cx="12" cy="9" r="2.5" />
                  </svg>
                  <div>
                    <b>{t.hero.cdVenueTitle}</b>
                    {t.hero.cdVenueSub}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

window.Hero = Hero;