/*
 * SCR-T2 business 서브홈 (§3C) — `/business`, 미인증 공개 · track="business".
 * 비즈니스 히어로 + 2-분기 가치(주최자·참가) + 임대 절차 스텝 + 요금·서류 + 로그인/문의 CTA.
 * 데이터: 안내·절차·요금=정적(M1·M2·M4·M5·M6 소개) · 문의=SCR-P6 딥링크 · 로그인=SCR-01 딥링크.
 */
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { PublicShell } from './PublicShell';
import { PublicHeroSlides } from './PublicHeroSlides';
import {
  IconVenue,
  IconBuyer,
  IconCheck,
  IconCheckCircle,
  IconSparkles,
  IconArrowRight,
  IconTicket,
} from './publicIcons';

/** 주최자·참가 가치 항목. ai=true 면 보라색 AI 칩 표기. */
const VALUE_CARDS: { key: string; icon: typeof IconVenue; items: { k: string; ai?: boolean }[]; to: string }[] = [
  {
    key: 'organizer',
    icon: IconVenue,
    to: '/login',
    items: [{ k: 'rental' }, { k: 'quote', ai: true }, { k: 'floorplan' }, { k: 'rate' }],
  },
  {
    key: 'exhibitor',
    icon: IconBuyer,
    to: '/login',
    items: [{ k: 'apply' }, { k: 'utility' }, { k: 'compliance', ai: true }, { k: 'render', ai: true }],
  },
];

const PROCESS_STEPS = ['inquiry', 'quote', 'contract', 'assign', 'booth', 'inspect'];
const RATE_TYPES = ['shell', 'space', 'premium'];
const DOC_ITEMS = ['assign', 'flame', 'structure'];

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

  return (
    <PublicShell active="exhibit" track="business" cta={t('track.business.ctaApply')}>
      {/* 비즈니스 히어로 */}
      <section className="kxp-hero" aria-label={t('track.business.heroAria')}>
        <div
          className="kxp-hero__bg"
          style={{ background: 'linear-gradient(135deg, #12233b 0%, #23346b 60%, #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">
              <IconVenue width={16} height={16} /> {t('track.business.eyebrow')}
            </span>
            <h1 className="kxp-hero__title">{t('track.business.title')}</h1>
            <p className="kxp-hero__lead">{t('track.business.subtitle')}</p>
            <div className="kxp-hero__actions">
              <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to="/public/exhibit-inquiry">
                {t('track.business.ctaApply')}
              </Link>
              <Link className="kxp-btn kxp-btn--ghost kxp-btn--lg" to="/login">
                {t('track.business.ctaLogin')}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 2-분기 가치 제안 */}
      <section className="kxp-section" aria-label={t('track.business.valueAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head">
            <div>
              <h2 className="kxp-section__title"><IconCheckCircle className="kx-title-ic" width={22} height={22} />{t('track.business.valueTitle')}</h2>
              <p className="kxp-section__sub">{t('track.business.valueSub')}</p>
            </div>
          </div>

          <div className="kxp-valuegrid">
            {VALUE_CARDS.map(({ key, icon: Icon, items, to }) => (
              <article key={key} className="kxp-value">
                <div className="kxp-value__head">
                  <span className="kxp-value__ic" aria-hidden>
                    <Icon width={24} height={24} />
                  </span>
                  <h3 className="kxp-value__title">{t(`track.business.value.${key}.title`)}</h3>
                </div>
                <p className="kxp-trackcard__desc">{t(`track.business.value.${key}.desc`)}</p>
                <ul className="kxp-value__list">
                  {items.map(({ k, ai }) => (
                    <li key={k} className="kxp-value__li">
                      <IconCheck width={18} height={18} />
                      <span>{t(`track.business.value.${key}.item.${k}`)}</span>
                      {ai && (
                        <span className="kxp-aichip">
                          <IconSparkles width={11} height={11} /> AI
                        </span>
                      )}
                    </li>
                  ))}
                </ul>
                <Link className="kxp-btn kxp-btn--primary" to={to}>
                  {t(`track.business.value.${key}.cta`)}
                </Link>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* 임대 절차 흐름 스텝 */}
      <section className="kxp-section kxp-section--alt" aria-label={t('track.business.processAria')}>
        <div className="kxp-wrap">
          <div className="kxp-section__head">
            <div>
              <h2 className="kxp-section__title"><IconArrowRight className="kx-title-ic" width={22} height={22} />{t('track.business.processTitle')}</h2>
              <p className="kxp-section__sub">{t('track.business.processSub')}</p>
            </div>
          </div>
          <ol className="kxp-flow">
            {PROCESS_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.business.process.${k}.title`)}</span>
                <span className="kxp-flow__desc">{t(`track.business.process.${k}.desc`)}</span>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* 요금·서류 안내 */}
      <section className="kxp-section" aria-label={t('track.business.rateAria')}>
        <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.business.rateTitle')}</h2>
              <p className="kxp-section__sub">{t('track.business.rateSub')}</p>
            </div>
          </div>
          <div className="kxp-trackcards">
            {RATE_TYPES.map((k) => (
              <article key={k} className="kxp-trackcard">
                <span className="kxp-trackcard__label">{t(`track.business.rate.${k}.label`)}</span>
                <h3 className="kxp-trackcard__title">{t(`track.business.rate.${k}.price`)}</h3>
                <p className="kxp-trackcard__desc">{t(`track.business.rate.${k}.desc`)}</p>
              </article>
            ))}
          </div>
          <div className="kxp-list" style={{ marginTop: 20 }}>
            {DOC_ITEMS.map((k) => (
              <div key={k} className="kxp-listrow">
                <div className="kxp-listrow__main">
                  <div className="kxp-listrow__title">{t(`track.business.doc.${k}.title`)}</div>
                  <div className="kxp-listrow__meta">{t(`track.business.doc.${k}.desc`)}</div>
                </div>
                <span className="kxp-listrow__right">
                  <IconArrowRight width={18} height={18} />
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 로그인/문의 CTA 밴드 */}
      <section className="kxp-section kxp-section--alt" aria-label={t('track.business.ctaBandAria')}>
        <div className="kxp-wrap">
          <div className="kxp-ctaband">
            <span className="kxp-ctaband__text">{t('track.business.ctaBandText')}</span>
            <div className="kxp-hero__actions" style={{ margin: 0 }}>
              <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to="/login">
                {t('track.business.ctaLogin')}
              </Link>
              <Link className="kxp-btn kxp-btn--outline kxp-btn--lg" to="/public/exhibit-inquiry">
                {t('track.business.ctaInquiry')}
              </Link>
            </div>
          </div>
        </div>
      </section>
    </PublicShell>
  );
}
