// FlowSection — 고객 흐름 4단계 (홈 영상 바로 아래)
// 목록 한 줄 또는 이미지 번호 배지에 마우스를 올리면 서로 강조됨.
// box / badge 수치는 section2-flow.webp 이미지 기준 위치(%) — 이미지를 바꾸면 함께 조정할 것.
const FLOW_STEPS = [
  { n: 1, name: '유입', desc: '정확한 타겟에게 노출',
    tags: ['검색 광고', '디스플레이 광고', 'SNS 광고', '숏폼 광고'], href: 'service.html#ads',
    box: [3.6, 42.8, 37.6, 46.9], badge: [8.2, 44.4] },
  { n: 2, name: '인지·신뢰', desc: '기억에 남는 반복 노출',
    tags: ['SNS 채널', '블로그', '숏폼 콘텐츠'], href: 'service.html#sns',
    box: [9.4, 6.3, 32.7, 30.7], badge: [10.5, 7.0] },
  { n: 3, name: '전환', desc: '관심을 구매와 상담으로 연결',
    tags: ['상세페이지', '랜딩페이지', '상담 폼'], href: 'service.html#page',
    box: [59.9, 5.1, 36.2, 35.4], badge: [94.7, 6.3] },
  { n: 4, name: '리텐션', desc: '이탈 고객의 재방문 유도',
    tags: ['메시지 마케팅', 'CRM'], href: 'service.html#crm',
    box: [58.4, 48.6, 38.1, 46.1], badge: [93.4, 51.5] },
];

const FlowSection = () => {
  const [active, setActive] = React.useState(null);   // 강조 중인 단계 번호
  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();
  }, []);

  const hoverProps = (n) => ({
    onMouseEnter: () => setActive(n),
    onMouseLeave: () => setActive(null),
    onFocus: () => setActive(n),
    onBlur: () => setActive(null),
  });

  return (
    <section ref={ref} id="flow" className={`fs-sec${shown ? ' fs-in' : ''}`}>
      {/* 왼쪽 — 흐름 이미지 + 번호 배지 */}
      <div className="fs-visual">
        <div className={`fs-fig${active ? ' fs-focus' : ''}`}>
          <img className="fs-img"
            src={`assets/section2-flow.webp?v=${window.ASSET_VER}`}
            width="1122" height="1402" loading="lazy"
            alt="광고로 알리고, 팔로우로 관계를 쌓고, 구매로 전환한 뒤, 쿠폰 메시지로 다시 구매하게 만드는 4단계 마케팅 흐름" />
          {FLOW_STEPS.map((s) => (
            <span key={'veil' + s.n} className={`fs-veil${active === s.n ? ' fs-on' : ''}`}
              style={{ left: s.box[0] + '%', top: s.box[1] + '%', width: s.box[2] + '%', height: s.box[3] + '%' }} />
          ))}
          {FLOW_STEPS.map((s) => (
            <a key={'badge' + s.n} href={s.href} aria-label={`${s.name} 자세히 보기`}
              className={`fs-badge${active === s.n ? ' fs-on' : ''}`}
              style={{ left: s.badge[0] + '%', top: s.badge[1] + '%' }}
              {...hoverProps(s.n)}>0{s.n}</a>
          ))}
        </div>
      </div>

      {/* 오른쪽 — 카피 + 4단계 목록 */}
      <div className="fs-text">
        <p className="fs-eyebrow">MARKETING LOGIC</p>
        <h2 className="fs-title">광고는 시작일 뿐,<br />매출은 <em>흐름</em>에서 쌓입니다</h2>
        <p className="fs-lead">
          고객이 처음 알게 되는 순간부터 다시 찾아오기까지.<br className="only-desktop" />
          {' '}싱크온은 매체마다 역할을 나누고, 그 흐름을 하나로 연결합니다.
        </p>
        <div className="fs-steps">
          {FLOW_STEPS.map((s) => (
            <a key={s.n} href={s.href} className={`fs-step${active === s.n ? ' fs-on' : ''}`} {...hoverProps(s.n)}>
              <span className="fs-num">0{s.n}</span>
              <span className="fs-name">{s.name}<small>{s.desc}</small></span>
                            <span className="fs-tags">{s.tags.map((t) => <span key={t} className="fs-tag">{t}</span>)}</span>
            </a>
          ))}
        </div>
        <a className="fs-more" href="service.html">
          서비스 자세히 보기
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
        </a>
      </div>
    </section>
  );
};

window.FlowSection = FlowSection;