/*
 * SCR-T0 트랙 관문 랜딩 (§3C) — 루트 `/`, 미인증 공개.
 * 제품 히어로 + 3-트랙 대형 분기 카드 + 진행/예정 전시 레일.
 * 데이터: GET /api/public/events(레일) · 3-트랙 카드=정적 메타. i18n: track.gateway.* / track.shell.*
 */
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { PublicShell } from './PublicShell';
import { PublicHeroSlides } from './PublicHeroSlides';
import { usePublicEvents, EventGrid } from './trackShared';
import {
  IconSparkles,
  IconChevronRight,
  IconQr,
  IconVenue,
  IconFactory,
  IconArrowRight,
} from './publicIcons';
import type { ComponentType, SVGProps } from 'react';

type Ico = ComponentType<SVGProps<SVGSVGElement>>;

/** 3-트랙 분기 카드 메타 — 관람(1순위·강조) · 비즈니스 · 협력사. */
const TRACK_CARDS: { key: string; icon: Ico; to: string; primary?: boolean }[] = [
  { key: 'visitor', icon: IconQr, to: '/visitor', primary: true },
  { key: 'business', icon: IconVenue, to: '/business' },
  { key: 'agency', icon: IconFactory, to: '/agency' },
];

export function PublicGatewayPage() {
  const { t } = useTranslation();
  const events = usePublicEvents(8);

  return (
    <PublicShell active="events" cta={t('track.gateway.ctaPreReg')}>
      {/* 제품 히어로 — 배경 실사진 5장 크로스페이드 회전(그라디언트+패턴은 로드 실패 폴백). */}
      <section className="kxp-hero pub-hero" aria-label={t('track.gateway.heroAria')}>
        <div
          className="kxp-hero__bg pub-fallback-gradient pub-pattern-grid"
          data-parallax="0.18"
          aria-hidden
        >
          <PublicHeroSlides />
        </div>
        <div className="kxp-hero__scrim" aria-hidden />
        <span className="kxp-aiwm">{t('track.gateway.aiWatermark')}</span>
        <div className="kxp-hero__inner">
          <div className="kxp-hero__content pub-hero__fg">
            <span className="kxp-hero__eyebrow">
              <IconSparkles width={16} height={16} /> {t('track.gateway.eyebrow')}
            </span>
            <h1 className="kxp-hero__title">{t('track.gateway.title')}</h1>
            <p className="kxp-hero__lead">{t('track.gateway.subtitle')}</p>
            <div className="kxp-hero__actions">
              <a className="kxp-btn kxp-btn--primary kxp-btn--lg" href="#events">
                {t('track.gateway.ctaPreReg')}
              </a>
              <Link className="kxp-btn kxp-btn--ghost kxp-btn--lg" to="/public/exhibit-inquiry">
                {t('track.gateway.ctaInquiry')}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 3-트랙 대형 분기 카드 */}
      <section className="kxp-section" id="tracks" aria-label={t('track.gateway.tracksAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head pub-reveal">
            <div>
              <h2 className="kxp-section__title">{t('track.gateway.tracksTitle')}</h2>
              <p className="kxp-section__sub">{t('track.gateway.tracksSub')}</p>
            </div>
          </div>

          <div className="kxp-trackcards pub-reveal pub-reveal--stagger">
            {TRACK_CARDS.map(({ key, icon: Icon, to, primary }, i) => (
              <article
                key={key}
                className={`kxp-trackcard pub-card--lift${primary ? ' kxp-trackcard--primary' : ''}`}
                style={{ '--i': i } as React.CSSProperties}
              >
                <span className="kxp-trackcard__ic" aria-hidden>
                  <Icon width={26} height={26} />
                </span>
                <span className="kxp-trackcard__label">{t(`track.gateway.card.${key}.label`)}</span>
                <h3 className="kxp-trackcard__title">{t(`track.gateway.card.${key}.title`)}</h3>
                <p className="kxp-trackcard__desc">{t(`track.gateway.card.${key}.desc`)}</p>
                <Link className="kxp-btn kxp-btn--primary kxp-trackcard__cta" to={to}>
                  {t(`track.gateway.card.${key}.cta`)} <IconChevronRight width={16} height={16} />
                </Link>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* 행사 하이라이트 레일 */}
      <section className="kxp-section kxp-section--alt" id="events" aria-label={t('track.gateway.eventsAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head pub-reveal">
            <div>
              <h2 className="kxp-section__title">{t('track.gateway.eventsTitle')}</h2>
              <p className="kxp-section__sub">{t('track.gateway.eventsSub')}</p>
            </div>
            <Link className="kxp-section__more" to="/visitor">
              {t('track.gateway.eventsMore')} <IconArrowRight width={16} height={16} />
            </Link>
          </div>
          <EventGrid state={events} variant="rail" />
        </div>
      </section>
    </PublicShell>
  );
}
