// CasesSection — 성과 사례 (홈 섹션 4)
// 왼쪽 배너 이미지, 오른쪽 글. 링크 주소는 CASE_LINK 한 곳에서 관리.
const CASE_LINK = 'case.html';

const CasesSection = () => {
  const [shown, setShown] = React.useState(false);   // 화면에 들어왔는지
  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();
  }, []);

  return (
    <section ref={ref} id="cases" className={`cs-sec${shown ? ' cs-in' : ''}`}>
      {/* 왼쪽 — 배너 */}
      <div className="cs-card">
        <a className="cs-banner" href={CASE_LINK} aria-label="광고주 성과 사례 자세히 보기">
          <img src={`assets/cases-banner.webp?v=${window.ASSET_VER}`}
            width="1536" height="1024" loading="lazy" alt="싱크온 광고주 성과 사례" />
        </a>
      </div>

      {/* 오른쪽 — 글 */}
      <div className="cs-text">
        <p className="cs-eyebrow">ACHIEVEMENTS</p>
        <h2 className="cs-h2">싱크온은 말이 아닌<br /><em>숫자</em>로 증명합니다.</h2>
        <div className="cs-case">
          <p className="cs-q">언제까지 광고에만 의존하실 건가요?</p>
          <p className="cs-desc">콘텐츠 하나를 블로그·숏폼·상세페이지로 확장해, 마케팅비 대비 24.4배의 매출을 만들었습니다.</p>
          <a className="cs-link" href={CASE_LINK}>
            전체 사례 보기
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
          </a>
        </div>
      </div>
    </section>
  );
};

window.CasesSection = CasesSection;