/* ============== VANCED About — Approach (merged section) ==============
   What We Believe + What We Do + How We Work → 하나의 섹션 "우리가 일하는 방식".
   - 공통: 원칙 아코디언(Believe 스타일) + Working Attitudes 밴드
   - 프로세스 표현은 트윅(data-approach)으로 4가지 전환:
       accordion · editorial · band · spine
   - App/Panel이 별도 React 루트라, 트윅 값은 documentElement[data-approach]로
     전달받아 MutationObserver로 구독한다.
   ======================================================================= */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

/* 원칙 (What We Believe) */
const AP_PRINCIPLES = [
  ['맞춤 전략', 'Customized Strategy', '모든 비즈니스에 같은 성공 공식을 적용하지 않습니다. 상품·시장·고객·구매 주기와 조직의 데이터 환경을 이해하고 현재 상황과 목표에 적합한 전략을 설계합니다.'],
  ['데이터 기반 실행', 'Data-driven Insight & Action', '데이터는 결과를 보고하기 위한 자료가 아니라 다음 행동을 결정하기 위한 기준입니다. 성과의 원인을 분석하고 구체적인 가설과 실행 계획으로 전환합니다.'],
  ['성장 방법론', 'Growth Methodology', '단기 광고 효율과 장기 성장 구조를 함께 봅니다. CPA·ROAS·CAC를 개선하는 동시에 데이터와 콘텐츠가 지속적으로 축적되도록 설계합니다.'],
  ['전 과정 책임', 'End-to-End Ownership', '전략만 제안하거나 매체 운영만 수행하지 않습니다. 전략·실행·측정·개선이 끊기지 않도록 전 과정을 연결하고 필요한 영역을 직접 책임집니다.'],
];

/* Working Attitudes */
const AP_ATTITUDES = [
  ['Impact', '비즈니스 지표 중심', '바쁘게 일하는 것이 아니라 비즈니스 지표로 결과를 정의합니다.'],
  ['Honesty', '투명한 공유', '듣기 좋은 말보다 문제와 한계까지 투명하게 공유합니다.'],
  ['Tenacity', '집요한 개선', '결과가 나올 때까지 집요하게 파고들어 개선합니다.'],
  ['Fast Learning', '빠른 적용', '새로운 도구와 AI를 빠르게 학습하고 적용합니다.'],
  ['Question First', '먼저 질문', '실행에 앞서 왜를 먼저 묻고 전제를 점검합니다.'],
  ['Say NO', '근거 있는 거절', '비효율적 방향에는 근거를 들어 더 나은 제안을 합니다.'],
];

/* 프로세스 — 6단계(풀 워딩) */
const AP_STEPS6 = [
  ['진단', 'Diagnose', '광고 계정을 보기 전에 상품, 고객, 시장, 구매 과정과 조직의 현재 상황을 이해합니다.'],
  ['목표 설계', 'Define', 'CPA·ROAS뿐 아니라 CAC, 리드 품질, 상담 연결률, 실제 구매와 계약 등 비즈니스에 필요한 KPI를 정의합니다.'],
  ['전략 수립', 'Plan', '성과에 영향을 미치는 매체·타깃·메시지·크리에이티브·랜딩과 데이터 요소를 구분하고 우선순위를 정합니다.'],
  ['실행 · 실험', 'Run', '가설을 실제 캠페인과 크리에이티브, 랜딩페이지 테스트로 옮기고 충분한 데이터를 확보합니다.'],
  ['분석 · 학습', 'Learn', '단순 증감이 아니라 왜 성과가 발생했는지 분석하고, 다음 실행에 활용할 학습으로 정리합니다.'],
  ['확장', 'Scale', '검증된 전략은 예산·채널·타깃·시장으로 확장하고, 성과가 반복되도록 운영 체계에 반영합니다.'],
];

/* 프로세스 — 4단계(압축 워딩) */
const AP_STEPS4 = [
  ['진단 · 설계', 'Diagnose & Define', '상품·고객·시장과 데이터 환경을 먼저 이해하고, 비즈니스에 필요한 KPI와 퍼널을 정의합니다.'],
  ['전략 · 실행', 'Plan & Run', '성과를 좌우하는 요소를 우선순위화하고, 캠페인·크리에이티브·랜딩 테스트로 가설을 검증합니다.'],
  ['분석 · 학습', 'Analyze & Learn', '왜 그 성과가 나왔는지 분석해, 다음 실행에 쓰는 학습으로 정리합니다.'],
  ['확장', 'Scale', '검증된 전략을 예산·채널·시장으로 확장하고, 반복 가능한 성장 시스템으로 만듭니다.'],
];

/* 트윅 값 구독 (documentElement[data-approach]) */
function useApproachVariant() {
  const [v, setV] = useStateA(
    (typeof document !== 'undefined' && document.documentElement.getAttribute('data-approach')) || 'accordion'
  );
  useEffectA(() => {
    const read = () => setV(document.documentElement.getAttribute('data-approach') || 'accordion');
    read();
    const obs = new MutationObserver(read);
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-approach'] });
    return () => obs.disconnect();
  }, []);
  return v;
}

/* 미니 블록 라벨 */
function ApLabel({ children }) {
  return <div className="ap-blocklabel">{children}</div>;
}

/* 원칙 아코디언 (Believe 스타일 재사용) */
function PrincipleAccordion() {
  const [open, setOpen] = useStateA(0);
  return (
    <R className="acc" d={120}>
      {AP_PRINCIPLES.map(([kr, en, d], i) => (
        <div className={`acc-row${open === i ? ' open' : ''}`} key={en}>
          <button className="acc-head" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            <span className="acc-kr">{kr}</span>
            <span className="acc-en">{en}</span>
            <span className="acc-ic" aria-hidden="true"></span>
          </button>
          <div className="acc-body"><div className="acc-inner"><p>{d}</p></div></div>
        </div>
      ))}
    </R>
  );
}

/* Attitudes 밴드 (Believe 스타일 재사용) */
function AttitudesBand() {
  return (
    <R className="att-band-v2" d={80}>
      <span className="att-label">Working Attitudes</span>
      <div className="att-grid">
        {AP_ATTITUDES.map(([en, kr, d]) => (
          <div className="att-it" key={en}>
            <div className="ae">{en}</div>
            <div className="ak">{kr}</div>
            <div className="ad">{d}</div>
          </div>
        ))}
      </div>
    </R>
  );
}

/* 프로세스 — 아코디언 (4단계) */
function ProcAccordion() {
  const [open, setOpen] = useStateA(-1);
  return (
    <R className="acc ap-proc" d={80}>
      {AP_STEPS4.map(([kr, en, d], i) => (
        <div className={`acc-row${open === i ? ' open' : ''}`} key={en}>
          <button className="acc-head" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            <span className="acc-num">{String(i + 1).padStart(2, '0')}</span>
            <span className="acc-kr">{kr}</span>
            <span className="acc-en">{en}</span>
            <span className="acc-ic" aria-hidden="true"></span>
          </button>
          <div className="acc-body"><div className="acc-inner"><p>{d}</p></div></div>
        </div>
      ))}
    </R>
  );
}

/* 프로세스 — 넘버 리스트 (6단계, 스크롤 활성) */
function ProcEditorial() {
  const refs = useRefA([]);
  const [active, setActive] = useStateA(0);
  useEffectA(() => {
    const onScroll = () => {
      const focal = window.innerHeight * 0.46;
      let best = 0, bd = Infinity;
      refs.current.forEach((el, i) => {
        if (!el) return;
        const r = el.getBoundingClientRect();
        const c = r.top + r.height / 2;
        const d = Math.abs(c - focal);
        if (d < bd) { bd = d; best = i; }
      });
      setActive(best);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <R className="elist" d={80}>
      {AP_STEPS6.map(([kr, en, d], i) => (
        <div className={`el-item${i === active ? ' on' : ''}`} key={en} ref={el => refs.current[i] = el}>
          <span className="el-no">{String(i + 1).padStart(2, '0')}</span>
          <div className="el-body">
            <h4 className="el-title">{kr}<span className="el-en"> {en}</span></h4>
            <p className="el-desc">{d}</p>
          </div>
        </div>
      ))}
    </R>
  );
}

/* 프로세스 — 타입 밴드 (4단계, 컴팩트) */
function ProcBand() {
  return (
    <R className="ap-band" d={80}>
      <ol className="ap-band-flow">
        {AP_STEPS4.map(([kr, en], i) => (
          <li className="ap-band-step" key={en}>
            <span className="ap-band-no">{String(i + 1).padStart(2, '0')}</span>
            <span className="ap-band-kr">{kr}</span>
            <span className="ap-band-en">{en}</span>
          </li>
        ))}
      </ol>
      <p className="ap-band-note"><span className="tag">↻ Loop</span> 진단 → 실행 → 학습 → 확장, 그리고 다시 진단으로. 한 번의 캠페인이 다음 성장의 자산이 됩니다.</p>
    </R>
  );
}

/* 프로세스 — 스파인 (6단계, How We Work 원형) */
function ProcSpine() {
  const refs = useRefA([]);
  const [active, setActive] = useStateA(0);
  useEffectA(() => {
    const onScroll = () => {
      const focal = window.innerHeight * 0.42;
      let best = 0, bd = Infinity;
      refs.current.forEach((el, i) => {
        if (!el) return;
        const r = el.getBoundingClientRect();
        const c = r.top + r.height / 2;
        const d = Math.abs(c - focal);
        if (d < bd) { bd = d; best = i; }
      });
      setActive(best);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className="spine ap-spine">
      <div className="spine-aside">
        <div className="spine-sticky">
          <div className="spine-bignum">{active + 1}</div>
          <div className="spine-now">
            <div className="spine-kr">{AP_STEPS6[active][0]}</div>
            <div className="spine-en">{AP_STEPS6[active][1]}</div>
          </div>
          <div className="spine-track">
            <div className="spine-fill" style={{ height: `${((active + 1) / AP_STEPS6.length) * 100}%` }}></div>
          </div>
          <div className="spine-loop">↻ 진단·전략·실행·학습이 반복되며 성장 자산이 축적됩니다</div>
        </div>
      </div>
      <ol className="spine-steps">
        {AP_STEPS6.map(([kr, en, d], i) => (
          <li className={`spine-step${i === active ? ' on' : ''}`} key={en} ref={el => refs.current[i] = el}>
            <p className="spine-d">{d}</p>
          </li>
        ))}
      </ol>
    </div>
  );
}

function ApproachProcess({ variant }) {
  if (variant === 'editorial') return <ProcEditorial />;
  if (variant === 'band') return <ProcBand />;
  if (variant === 'spine') return <ProcSpine />;
  return <ProcAccordion />;
}

function Approach() {
  const variant = useApproachVariant();
  return (
    <section className="sec hair" id="approach">
      <div className="shell grid">
        <Head en="How We Work" kr="우리가 일하는 방식" sub="믿는 원칙 · 일하는 순서 · 일하는 태도를 하나로." />
        <div>
          <R d={60}>
            <p className="statement">감각이 아니라,<br /><span className="em">재현 가능한 과정</span>으로 일합니다.</p>
          </R>
          <R d={110}>
            <p className="lead">
              밴스드는 광고 계정 안의 숫자만 보지 않습니다. 비즈니스를 먼저 이해하고, 데이터를 다음 행동의 기준으로 삼아,
              전략부터 실행과 개선까지 끊김 없이 연결합니다. 같은 원칙을 같은 순서로 반복하기 때문에 성과가 사람이 아닌 시스템으로 남습니다.
            </p>
          </R>

          <PrincipleAccordion />

          <AttitudesBand />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Approach, useApproachVariant, PrincipleAccordion, AttitudesBand,
  ProcAccordion, ProcEditorial, ProcBand, ProcSpine,
});