// 스펙트럼 스크롤이 끝난 뒤, Wellness Science 앞에 놓이는 "총 정리" 섹션.
// 좌: 그래프 이미지 + 리더선에 붙는 라벨 오버레이 / 우: 5개 항목 텍스트.
function SpectrumSummary() {
  const { t } = useI18n();
  const items = t('spectrumSummary.items');

  // 그래프 이미지(2888×2196) 우측 리더선 끝점을 픽셀로 측정해 %로 환산한 값.
  // 라벨을 이 높이에 맞춰 이미지 바깥(오른쪽 여백)에 배치한다.
  const leaders = [
    { key: 'nat', left: '99.93%', top: '13.57%', color: '#3FA9F5', label: t('spectrumSummary.legendNatural') },
    { key: 'sun', left: '94.15%', top: '40.44%', color: '#F5A623', label: t('spectrumSummary.legendSunlike') },
    { key: 'std', left: '95.05%', top: '72.59%', color: '#111111', label: t('spectrumSummary.legendStandard') }
  ];

  return (
    <section id="spectrum-summary" data-section="spectrum-summary"
      data-screen-label={t('spectrumSummary.screenLabel')}
      style={{
        background: '#ffffff',
        padding: 'clamp(64px, 10vw, 112px) 0',
        borderTop: '1px solid var(--rule)'
      }}>
      <div className="reveal ss-wrap">
        {/* ── 좌: 제목 + 그래프 ── */}
        <div className="ss-left">
          <h2 className="ss-title">
            <strong>{t('spectrumSummary.titleStrong')}</strong>
            <span>{t('spectrumSummary.titleRest')}</span>
          </h2>
          <p className="ss-lead">{t('spectrumSummary.lead')}</p>
          <p className="ss-sub">{t('spectrumSummary.sub')}</p>

          <figure className="ss-figure">
            <div className="ss-imgbox">
              {/* ss-imginner가 이미지와 정확히 같은 크기 → 라벨 %좌표의 기준이 된다.
                  라벨이 놓일 여백은 바깥 ss-imgbox의 padding-right로 확보. */}
              <div className="ss-imginner">
                <img
                  src="assets/spectrum-summary.png"
                  alt={t('spectrumSummary.imageAlt')}
                  loading="lazy" />
                {/* 리더선 끝에 붙는 라벨 — 데스크톱에서만 노출 */}
                <div className="ss-labels" aria-hidden="true">
                  {leaders.map((l) =>
                    <span key={l.key} className="ss-label" style={{ top: l.top, left: l.left, color: l.color }}>
                      {l.label}
                    </span>
                  )}
                </div>
              </div>
            </div>
            {/* 좁은 화면에서는 오버레이 대신 범례 목록으로 대체 */}
            <ul className="ss-legend" aria-hidden="true">
              {leaders.map((l) =>
                <li key={l.key}><i style={{ background: l.color }} />{l.label}</li>
              )}
            </ul>
            <figcaption className="ss-note">{t('spectrumSummary.graphNote')}</figcaption>
          </figure>

          <p className="ss-caption">{t('spectrumSummary.caption')}</p>
        </div>

        {/* ── 우: 5개 항목 ── */}
        <div className="ss-right">
          {items.map((it, i) =>
            <div key={i} className="ss-item">
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          )}
        </div>
      </div>

      <style>{`
        #spectrum-summary .ss-wrap {
          /* 그래프 + 우측 라벨 + 본문 5항목을 한 줄로 담기 위해 본문 폭(1180)보다 약간 넓게 */
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 clamp(20px, 5vw, 56px);
          display: grid;
          grid-template-columns: 1.25fr 1fr;
          gap: clamp(32px, 5vw, 72px);
          align-items: start;
        }
        #spectrum-summary .ss-title {
          margin: 0 0 18px;
          font-family: var(--font-nav);
          font-size: clamp(22px, 2.4vw, 30px);
          line-height: 1.3;
          letter-spacing: -0.02em;
          color: var(--ink);
          font-weight: 400;
        }
        #spectrum-summary .ss-title strong { font-weight: 700; }
        #spectrum-summary .ss-lead {
          margin: 0 0 8px;
          font-family: var(--font-nav);
          font-size: clamp(17px, 1.7vw, 22px);
          line-height: 1.45;
          letter-spacing: -0.01em;
          color: var(--ink);
          word-break: keep-all;
        }
        #spectrum-summary .ss-sub {
          margin: 0 0 28px;
          font-family: var(--font-nav);
          font-size: 14px;
          line-height: 1.6;
          color: var(--fg-3);
        }
        #spectrum-summary .ss-figure { margin: 0; }
        #spectrum-summary .ss-imgbox { position: relative; }
        #spectrum-summary .ss-imginner { position: relative; }
        #spectrum-summary .ss-imginner img {
          display: block;
          width: 100%;
          height: auto;
        }
        /* 라벨: 이미지 우측 리더선 끝에 정렬 */
        #spectrum-summary .ss-labels {
          position: absolute;
          inset: 0;
          pointer-events: none;
        }
        /* left는 각 리더선 끝점의 x(이미지 기준 %)를 인라인으로 받는다.
           절대배치 요소는 폭을 명시하지 않으면 컨테이너 오른쪽 경계까지로 축소되므로
           width를 지정해 이미지 바깥(padding 영역)으로 넘겨 쓴다. */
        #spectrum-summary .ss-label {
          position: absolute;
          transform: translate(6px, -50%);
          width: max-content;
          max-width: 46%;
          font-family: var(--font-nav);
          font-size: clamp(9px, 0.72vw, 10.5px);
          font-weight: 500;
          line-height: 1.3;
          word-break: keep-all;
        }
        #spectrum-summary .ss-legend { display: none; }
        #spectrum-summary .ss-note {
          margin: 14px 0 0;
          font-family: var(--font-nav);
          font-size: 11px;
          line-height: 1.5;
          color: var(--fg-3);
        }
        #spectrum-summary .ss-caption {
          margin: 26px 0 0;
          font-family: var(--font-nav);
          font-size: clamp(15px, 1.5vw, 18px);
          line-height: 1.5;
          letter-spacing: -0.01em;
          color: var(--ink);
          word-break: keep-all;
        }
        #spectrum-summary .ss-item + .ss-item { margin-top: clamp(24px, 3vw, 34px); }
        #spectrum-summary .ss-item h3 {
          margin: 0 0 10px;
          font-family: var(--font-nav);
          font-size: clamp(16px, 1.5vw, 19px);
          font-weight: 700;
          line-height: 1.4;
          letter-spacing: -0.01em;
          color: var(--ink);
          word-break: keep-all;
        }
        #spectrum-summary .ss-item p {
          margin: 0;
          font-family: var(--font-nav);
          font-size: clamp(13px, 1.15vw, 15px);
          font-weight: 300;
          line-height: 1.75;
          color: var(--fg-2);
          white-space: pre-line;
          word-break: keep-all;
        }

        /* 라벨이 들어갈 우측 여백 확보 (데스크톱) */
        @media (min-width: 1025px) {
          #spectrum-summary .ss-imgbox { padding-right: 30%; }
        }

        /* 태블릿 이하: 1단 + 라벨 오버레이 → 범례 목록 */
        @media (max-width: 1024px) {
          #spectrum-summary .ss-wrap {
            grid-template-columns: 1fr;
            gap: clamp(32px, 6vw, 48px);
          }
          #spectrum-summary .ss-labels { display: none; }
          #spectrum-summary .ss-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 20px;
            margin: 16px 0 0;
            padding: 0;
            list-style: none;
          }
          #spectrum-summary .ss-legend li {
            display: flex;
            align-items: center;
            gap: 7px;
            font-family: var(--font-nav);
            font-size: 12px;
            line-height: 1;
            color: var(--fg-2);
          }
          #spectrum-summary .ss-legend i {
            width: 18px;
            height: 3px;
            border-radius: 2px;
            flex-shrink: 0;
          }
        }
      `}</style>
    </section>
  );
}

window.SpectrumSummary = SpectrumSummary;