// Clients — 고객사 로고 (홈 섹션 5)
// 왼쪽 글 + 오른쪽 로고 띠 3줄(가로로 흐름, 마우스 올리면 멈춤).
// 로고 추가·교체는 CLIENT_LOGOS만 수정. file은 assets 안 파일명, name은 alt 텍스트.
const CLIENT_LOGOS = [
  { file: 'client-cafealtro.png', name: '카페알트로' },
  { file: 'client-uslic.png', name: '어슬릭' },
  { file: 'client-mocean.png', name: '모션' },
  { file: 'client-empove.png', name: '엠포브' },
  { file: 'client-backbone.png', name: '백본' },
  { file: 'client-babyline.png', name: '베이비라인' },
  { file: 'client-aboe.png', name: '아비오에' },
  { file: 'client-lballet.png', name: '엘발레스튜디오' },
  { file: 'client-oneuljjok.png', name: '오늘은꼭' },
  { file: 'client-paupli.png', name: '포플리' },
  { file: 'client-onename.png', name: '원네임' },
  { file: 'client-lopeco.png', name: '로페코' },
  { file: 'client-seolarae.png', name: '설아래' },
  { file: 'client-cashmaker.png', name: '캐시메이커' },
  { file: 'client-geuegebanhada.png', name: '그에게반하다' },
  { file: 'client-foerae.png', name: '포에르미' },
  { file: 'client-chunejip.png', name: '츄네집' },
  { file: 'client-physicalmarket.png', name: '피지컬마켓' },
  { file: 'client-andmore.png', name: '앤드모어' },
  { file: 'client-hicotton.png', name: '히코튼' },
];

const Clients = () => {
  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();
  }, []);

  // 로고를 3줄로 나눔 (7 / 7 / 6)
  const per = Math.ceil(CLIENT_LOGOS.length / 3);
  const rows = [0, 1, 2].map((i) => CLIENT_LOGOS.slice(i * per, (i + 1) * per));

  return (
    <section ref={ref} id="clients" className={`cl-sec${shown ? ' cl-in' : ''}`}>
      {/* 왼쪽 — 글 */}
      <div className="cl-text">
        <p className="cl-eyebrow">CLIENTS</p>
        <h2 className="cl-h2">성장하는 브랜드의<br /><em>선택</em> 싱크온</h2>
                <p className="cl-lead">업종도, 규모도 다른 브랜드들이 싱크온만의 마케팅 시스템으로 성장의 변화를 경험하고 있습니다.</p>
        <p className="cl-count"><b>93%</b><span>재계약률</span></p>
        <p className="cl-note">광고주의 다음 선택도, 싱크온</p>
      </div>

      {/* 오른쪽 — 로고 띠 3줄 (1·3줄 왼쪽, 2줄 오른쪽으로 흐름) */}
      <div className="cl-wall">
        {rows.map((row, i) => (
          <div className="cl-row" key={i}>
            <div className={`cl-track cl-t${i + 1}`}>
              {/* 끊김 없이 반복되도록 같은 목록을 두 번 나열 */}
              {row.concat(row).map((c, j) => (
                <span className="cl-logo" key={c.file + j}>
                  <img src={`assets/${c.file}?v=${window.ASSET_VER}`} alt={c.name}
                    width="600" height="300" loading="lazy" />
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

window.Clients = Clients;