/*
 * SCR-T3 agency 서브홈 (§3C) — `/agency`, 미인증 공개 · track="agency".
 * 에이전시 히어로 + 등록업체 안내(등록 게이트 고지) + 공사 옥션(역경매) + 작업신고·안전 규정 + 로그인 CTA.
 * 킨텍스 차별점(역경매 옥션) 강조. 공개 옥션 API 미배포 → 안내+로그인 CTA(빈 화면 금지).
 * 데이터: 등록·절차·안전=정적 안내 · 옥션 공개 서브셋(있으면) · 로그인=SCR-01 딥링크(→ SCR-27/28).
 */
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { PublicShell } from './PublicShell';
import { PublicHeroSlides } from './PublicHeroSlides';
import {
  IconFactory,
  IconShield,
  IconInfo,
  IconCheck,
  IconArrowRight,
  IconBuyer,
  IconTicket,
} from './publicIcons';

const REG_STEPS = ['apply', 'review', 'register', 'eligible'];
const SAFETY_CARDS: { key: string; icon: typeof IconShield }[] = [
  { key: 'report', icon: IconInfo },
  { key: 'prohibited', icon: IconShield },
  { key: 'docs', icon: IconCheck },
];

export function AgencyTrackPage() {
  const { t } = useTranslation();

  return (
    <PublicShell active="exhibit" track="agency" cta={t('track.agency.ctaLogin')}>
      {/* 에이전시 히어로 — 옥션 차별점 강조 */}
      <section className="kxp-hero" aria-label={t('track.agency.heroAria')}>
        <div
          className="kxp-hero__bg"
          style={{ background: 'linear-gradient(135deg, #1a1330 0%, #3a2a6b 55%, #0066b3 130%)' }}
          aria-hidden
        >
          <PublicHeroSlides />
        </div>
        <div className="kxp-hero__scrim" aria-hidden />
        <div className="kxp-hero__inner">
          <div className="kxp-hero__content">
            <span className="kxp-hero__eyebrow">
              <IconFactory width={16} height={16} /> {t('track.agency.eyebrow')}
            </span>
            <h1 className="kxp-hero__title">{t('track.agency.title')}</h1>
            <p className="kxp-hero__lead">{t('track.agency.subtitle')}</p>
            <div className="kxp-hero__actions">
              <a className="kxp-btn kxp-btn--primary kxp-btn--lg" href="#registry">
                {t('track.agency.ctaRegister')}
              </a>
              <Link className="kxp-btn kxp-btn--ghost kxp-btn--lg" to="/login">
                {t('track.agency.ctaLogin')}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 등록업체 안내 + 등록 게이트 고지 */}
      <section className="kxp-section" id="registry" aria-label={t('track.agency.registryAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head">
            <div>
              <h2 className="kxp-section__title"><IconBuyer className="kx-title-ic" width={22} height={22} />{t('track.agency.registryTitle')}</h2>
              <p className="kxp-section__sub">{t('track.agency.registrySub')}</p>
            </div>
          </div>

          <div className="kxp-notice-card kxp-notice-card--warn" role="note">
            <span className="kxp-notice-card__ic" aria-hidden>
              <IconInfo width={22} height={22} />
            </span>
            <div>
              <div className="kxp-notice-card__title">{t('track.agency.gateTitle')}</div>
              <p className="kxp-notice-card__body">{t('track.agency.gateBody')}</p>
            </div>
          </div>

          <ol className="kxp-flow" style={{ marginTop: 20 }}>
            {REG_STEPS.map((k, i) => (
              <li key={k} className="kxp-flow__step">
                <span className="kxp-flow__no">{i + 1}</span>
                <span className="kxp-flow__title">{t(`track.agency.reg.${k}.title`)}</span>
                <span className="kxp-flow__desc">{t(`track.agency.reg.${k}.desc`)}</span>
              </li>
            ))}
          </ol>
          <div style={{ marginTop: 16 }}>
            <a className="kxp-btn kxp-btn--primary" href="#login-cta">
              {t('track.agency.ctaRegister')}
            </a>
          </div>
        </div>
      </section>

      {/* 진행 중 공사 옥션 (역경매) — 차별점 강조 */}
      <section className="kxp-section kxp-section--alt" aria-label={t('track.agency.auctionAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head">
            <div>
              <h2 className="kxp-section__title"><IconTicket className="kx-title-ic" width={22} height={22} />{t('track.agency.auctionTitle')}</h2>
              <p className="kxp-section__sub">{t('track.agency.auctionSub')}</p>
            </div>
          </div>
          {/* 공개 옥션 목록 API 미배포 — 안내 + 로그인 유도(빈 화면 금지) */}
          <div className="kxp-notice-card" role="note">
            <span className="kxp-notice-card__ic" aria-hidden style={{ color: 'var(--color-primary-600, #0066b3)' }}>
              <IconFactory width={22} height={22} />
            </span>
            <div>
              <div className="kxp-notice-card__title" style={{ color: 'var(--color-primary-700, #004c86)' }}>
                {t('track.agency.auctionEmptyTitle')}
              </div>
              <p className="kxp-notice-card__body">{t('track.agency.auctionEmptyBody')}</p>
            </div>
          </div>
          <div style={{ marginTop: 16 }}>
            <Link className="kxp-btn kxp-btn--primary" to="/login">
              {t('track.agency.ctaAuctionLogin')} <IconArrowRight width={16} height={16} />
            </Link>
          </div>
        </div>
      </section>

      {/* 작업신고·안전 규정 */}
      <section className="kxp-section" aria-label={t('track.agency.safetyAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head">
            <div>
              <h2 className="kxp-section__title"><IconShield className="kx-title-ic" width={22} height={22} />{t('track.agency.safetyTitle')}</h2>
              <p className="kxp-section__sub">{t('track.agency.safetySub')}</p>
            </div>
          </div>
          <div className="kxp-guidegrid">
            {SAFETY_CARDS.map(({ key, icon: Icon }) => (
              <article key={key} className="kxp-guide">
                <span className="kxp-guide__ic" aria-hidden>
                  <Icon width={22} height={22} />
                </span>
                <div>
                  <div className="kxp-guide__title">{t(`track.agency.safety.${key}.title`)}</div>
                  <p className="kxp-guide__desc">{t(`track.agency.safety.${key}.desc`)}</p>
                </div>
              </article>
            ))}
          </div>
          <div style={{ marginTop: 16 }}>
            <Link className="kxp-btn kxp-btn--outline" to="/login">
              {t('track.agency.ctaWorkReport')}
            </Link>
          </div>
        </div>
      </section>

      {/* 등록업체 로그인 CTA 밴드 */}
      <section className="kxp-section kxp-section--alt" id="login-cta" aria-label={t('track.agency.ctaBandAria')}>
        <div className="kxp-wrap">
          <div className="kxp-ctaband">
            <span className="kxp-ctaband__text">{t('track.agency.ctaBandText')}</span>
            <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to="/login">
              {t('track.agency.ctaLogin')}
            </Link>
          </div>
        </div>
      </section>
    </PublicShell>
  );
}
