// ExpertsSection — 3대 핵심 역량 (홈 섹션 3)
// 역량에 마우스를 올리면 연결된 이미지만 선명해짐.
// 성과 숫자를 바꿀 때는 아래 EX_KPIS만 수정.
const EX_ROLES = [
  { n: 1, role: '퍼포먼스 마케터', desc: '시장과 데이터를 분석해 광고 전략을 설계합니다', parts: ['card'] },
    { n: 2, role: 'AI 크리에이티브', desc: '사진 한 장으로 다양한 콘셉트의 연출 이미지를 만듭니다', parts: ['before', 'after', 'arrow'] },
  { n: 3, role: '콘텐츠 디자이너', desc: '멈추고, 읽고, 클릭하게 만드는 카피와 디자인', parts: ['after'] },
];
const EX_KPIS = [
  { label: 'ROAS', to: 19.5, dec: 1, unit: '배', main: true },
  { label: '매출', to: 5, dec: 0, unit: '억 원+' },
  { label: '구매', to: 4179, dec: 0, unit: '건' },
];

const ExpertsSection = () => {
  const [shown, setShown] = React.useState(false);   // 화면에 들어왔는지
  const [active, setActive] = React.useState(null);  // 마우스를 올린 역량
  const [progress, setProgress] = React.useState(0); // 숫자 올라가는 진행률 0~1
  const ref = React.useRef(null);

  // 섹션이 화면에 20% 이상 들어오면 등장 시작 (한 번만)
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !('IntersectionObserver' in window)) { setShown(true); return; }
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setShown(true); io.disconnect(); }
    }, { threshold: 0.2 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // 성과 카드가 나타난 뒤(1.7초 후) 1.4초 동안 숫자가 올라감
  React.useEffect(() => {
    if (!shown) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setProgress(1); return; }
    let raf; const t0 = performance.now() + 1700, dur = 1400;
    const tick = (now) => {
      const p = Math.min(1, Math.max(0, (now - t0) / dur));
      setProgress(1 - Math.pow(1 - p, 3));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [shown]);

  const fmt = (k) => (k.to * progress).toLocaleString('ko-KR', { minimumFractionDigits: k.dec, maximumFractionDigits: k.dec });
  const activeParts = active ? EX_ROLES.find((r) => r.n === active).parts : [];
  const partClass = (name) => (activeParts.includes(name) ? ' ex-on' : '');

  return (
    <section ref={ref} id="experts" className={`ex-sec${shown ? ' ex-in' : ''}`}>
      {/* 왼쪽 — 글 + 3대 역량 */}
      <div className="ex-text">
        <p className="ex-eyebrow">OUR EXPERTS</p>
        <h2 className="ex-title">사진 한 장으로 시작해<br /><em>성과</em>로 증명합니다</h2>
                <p className="ex-lead">추가 촬영 없이, 평범하게 찍은 제품 사진으로 시작합니다.<br className="only-desktop" />{' '}전략·크리에이티브·디자인 전문가가 각자의 영역에서 광고를 완성하고, 결과는 숫자로 보여드립니다.</p>
        <div className={`ex-list${active ? ' ex-focus' : ''}`}>
          {EX_ROLES.map((r) => (
            <div key={r.n} className={`ex-item${active === r.n ? ' ex-on' : ''}`}
              onMouseEnter={() => setActive(r.n)} onMouseLeave={() => setActive(null)}>
              <span className="ex-num">0{r.n}</span>
              <span className="ex-role">{r.role}</span>
              <span className="ex-desc">{r.desc}</span>
            </div>
          ))}
        </div>
      </div>

      {/* 오른쪽 — 성과 카드 + 비포·애프터 */}
      <div className="ex-visual">
        <div className={`ex-stage${active ? ' ex-focus' : ''}`}>
                    <div className={'ex-card' + partClass('card')}>
            <div className="ex-kpis">
              {EX_KPIS.map((k) => (
                <div key={k.label} className={`ex-kpi${k.main ? ' ex-main' : ''}`}>
                  <span>{k.label}</span>
                  <b>{fmt(k)}<small>{k.unit}</small></b>
                </div>
              ))}
            </div>
            <div className="ex-shot">
              <img src={`assets/experts-table.webp?v=${window.ASSET_VER}`} alt="메타 광고 관리자 성과 화면" loading="lazy" />
            </div>
          </div>

          <div className={'ex-after' + partClass('after')}>
            <div className="ex-ph">
              <span className="ex-tag">AFTER</span>
              <img src={`assets/experts-after.webp?v=${window.ASSET_VER}`} alt="AI로 완성한 토너 광고 이미지" width="900" height="1125" loading="lazy" />
            </div>
          </div>

          <div className={'ex-before' + partClass('before')}>
            <div className="ex-ph">
              <span className="ex-tag">BEFORE</span>
              <img src={`assets/experts-before.webp?v=${window.ASSET_VER}`} alt="휴대폰으로 찍은 원본 제품 사진" width="800" height="800" loading="lazy" />
            </div>
          </div>

                              <div className={'ex-arrow' + partClass('arrow')} aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ExpertsSection = ExpertsSection;