/* ============== VANCED About v2 — card-free agency patterns ==============
   Why=inline figure ledger · Believe=accordion · Attitudes=type band
   WhatWeDo=pinned horizontal track · HowWeWork=sticky spine
   ClientsGet/Who=hover-reveal index · Vision=inline rules
   Reuses shared theming via about/app.jsx + about/tweaks-panel.jsx
   ======================================================================= */
const { useState, useEffect, useRef } = React;

function R({ d = 0, as = 'div', className = '', children, ...rest }) {
  const Tag = as;
  return <Tag className={`reveal ${className}`} style={{ '--d': `${d}ms` }} {...rest}>{children}</Tag>;
}

function Head({ en, kr, sub }) {
  return (
    <div className="s-eyebrow">
      <span className="se-en">{en}</span>
      <span className="se-kr">{kr}</span>
      {sub ? <span className="se-sub">{sub}</span> : null}
    </div>
  );
}

function Marquee({ items, className = '', dur = 34 }) {
  const seq = [...items, ...items];
  return (
    <div className={`marquee ${className}`}>
      <div className="marquee-track" style={{ '--marq-dur': `${dur}s` }}>
        {seq.map((t, i) => (<span key={i}>{t}<span className="star">✳</span></span>))}
      </div>
    </div>
  );
}

/* shared: run a callback once when el enters viewport (rect-based — fires in all
   environments, including preview iframes where IntersectionObserver stays silent) */
function useInView(ref, cb, opts) {
  useEffect(() => {
    if (!ref.current) return;
    let done = false;
    const thr = (opts && typeof opts.threshold === 'number') ? opts.threshold : 0.4;
    const fire = () => {
      if (done || !ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const visible = Math.min(r.bottom, vh) - Math.max(r.top, 0);
      const ratio = r.height > 0 ? visible / Math.min(r.height, vh) : 0;
      if (r.top < vh && r.bottom > 0 && ratio >= Math.min(thr, 0.55)) {
        done = true; cb();
        window.removeEventListener('scroll', fire);
        window.removeEventListener('resize', fire);
      }
    };
    fire();
    const timers = [120, 400, 900].map(ms => setTimeout(fire, ms));
    window.addEventListener('scroll', fire, { passive: true });
    window.addEventListener('resize', fire);
    return () => {
      timers.forEach(clearTimeout);
      window.removeEventListener('scroll', fire);
      window.removeEventListener('resize', fire);
    };
  }, []);
}

/* ----------------------------- NAV ----------------------------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  /* scrolled class는 about nav.scrolled CSS와 별개 — 메인 nav는 스크롤 감지 없이 항상 동일 스타일 */
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className="main-nav">
      <a href="index.html" className="main-logo"><img src="uploads/logo-group.png" alt="밴스드 크리에이티브" /></a>
      <ul className="main-nav-links">
        <li><a href="work.html">Work</a></li>
        <li><a href="about.html" className="is-current">About</a></li>
        <li><a href="careers.html">Careers</a></li>
        <li><a href="#">Blog</a></li>
        <li>
          <a href="https://featpaper.com/l/kzub3PgA" target="_blank" rel="noopener" className="main-nav-download">
            회사 소개서
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  );
}

/* ----------------------------- HERO (kept) ---------------------------- */
function Hero() {
  const ref = useRef(null);
  const [collapsed, setCollapsed] = useState(false);
  useEffect(() => {
    const el = ref.current;
    requestAnimationFrame(() => el && el.classList.add('in'));
    const t = setTimeout(() => setCollapsed(true), 1350);
    return () => clearTimeout(t);
  }, []);
  return (
    <section className="hero" id="top" ref={ref}>
      <div className="shell">
        <R d={90}>
          <h1 className={`namebuild ${collapsed ? 'collapsed' : ''}`} aria-label="ADVANCED minus AD equals VANCED">
            <span className="strike">AD<span className="slash"></span></span>
            <span className="vanced">VANCED</span>
          </h1>
        </R>
        <div className="hero-lead">
          <R d={200}>
            <h2 className="hero-headline">광고 성과를 넘어,<br />성장의 구조를 만듭니다.</h2>
          </R>
          <R d={280}>
            <p className="hero-desc">
              밴스드는 진보(<span className="hl">ADVANCED</span>)에서 ‘뻔한 광고(<span style={{ color: 'var(--accent)' }}>AD</span>)’를 덜어낸 이름입니다.
              KPI 설계부터 미디어·크리에이티브·데이터 트래킹·성과 분석과 개선까지 하나로 연결하는
              데이터 기반 풀퍼널 그로스 마케팅 에이전시입니다.
            </p>
          </R>
        </div>
      </div>
    </section>
  );
}

/* --------------------- WHY · inline figure ledger (no cards) --------------------- */
function CountUp({ end, dur = 1300 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useInView(ref, () => {
    const t0 = performance.now();
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(e * end));
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, { threshold: 0.6 });
  return <span ref={ref}>{val}</span>;
}
function Why() {
  /* [pre, grad(키워드), post, body] */
  const cards = [
    ['전략부터 실행, 개선까지 ', '전 단계', '를 커버합니다', '전략 제안에서 멈추지 않고 매체 운영, 데이터 분석, 성과 개선까지 마케팅의 전 과정을 직접 책임집니다.'],
    ['성장에 필요한 역량을 ', '한 팀', '에서 다룹니다', '전략·미디어·크리에이티브·데이터가 분리된 외주가 아니라, 하나의 팀으로 협업하며 광고주의 문제를 함께 해결합니다.'],
    ['대행사지만, ', '인하우스 팀', '처럼 일합니다', '외부 실행 조직에 머무르지 않습니다. 광고주의 비즈니스를 우리 일처럼 이해하고, 전략 제안부터 매체 운영과 인사이트 도출까지 내부 팀처럼 깊이 관여합니다.'],
    ['', '글로벌 경험', '이 풍부합니다', '한국과 동남아를 비롯한 여러 시장에서 캠페인을 운영하며, 현지화된 성장 전략을 설계한 경험을 축적해 왔습니다.'],
    ];
  return (
    <section className="sec invert" id="why">
      <div className="shell grid">
        <Head en="Why VANCED" kr="밴스드가 존재하는 이유" sub="광고 계정 밖의 문제까지 함께 보는 파트너." />
        <div>
          <R d={60}>
            <p className="statement">광고가 잘됐는가가 아니라,<br /><span className="em">비즈니스가 성장했는가</span>를 묻습니다.</p>
          </R>
          <R d={130}>
            <p className="lead">
              좋은 광고 지표가 언제나 좋은 비즈니스 결과를 의미하지는 않습니다. 클릭과 전환이 증가해도
              고객 품질이 낮거나, 상담과 구매로 연결되지 않거나, 재구매가 발생하지 않는다면
              마케팅은 지속 가능한 성장으로 이어지기 어렵습니다.
            </p>
          </R>
          <R className="wlines" d={80}>
            {cards.map(([pre, grad, post, body], i) => (
              <div className="wline" key={grad}>
                <span className="wline-no">{String(i + 1).padStart(2, '0')}</span>
                <div className="wline-main">
                  <h3 className="wline-t">{pre}<span className="grad">{grad}</span>{post}</h3>
                  <p className="wline-d">{body}</p>
                </div>
              </div>
            ))}
          </R>
        </div>
      </div>
    </section>
  );
}

/* --------------------- MISSION · kinetic chips (kept, enhanced) --------------------- */
function Mission() {
  const ref = useRef(null);
  const channels = ['매체', '콘텐츠', '크리에이티브', '랜딩페이지', '데이터', 'CRM · 세일즈'];
  const rots = [-7, 5, -3, 8, -5, 4];
  const tys = [10, -14, 16, -8, 12, -10];
  useInView(ref, () => ref.current.classList.add('in'), { threshold: 0.3 });
  return (
    <section className="sec hair" id="mission">
      <div className="shell grid">
        <Head en="Mission" kr="우리가 해결하려는 문제" />
        <div>
          <R d={60}>
            <p className="statement">마케팅의 복잡성을<br /><span className="em">성장 가능한 구조</span>로 바꿉니다.</p>
          </R>
          <R d={130}>
            <p className="lead">
              매체·콘텐츠·크리에이티브·랜딩페이지·데이터·CRM과 세일즈를 동시에 관리해야 하지만, 각 영역이 분리되어 있으면
              많은 데이터를 확보하고도 무엇을 바꿔야 하는지 판단하기 어렵습니다. 밴스드는 흩어진 마케팅 활동을
              하나의 고객 여정과 KPI로 연결합니다.
            </p>
          </R>
          <div className="mviz" ref={ref}>
            <div className="chips">
              {channels.map((c, i) => (
                <span className="chip" key={c} style={{ '--rot': `${rots[i]}deg`, '--ty': `${tys[i]}px` }}>{c}</span>
              ))}
            </div>

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

/* --------------------- WHAT WE BELIEVE · accordion + attitudes band --------------------- */
function Believe() {
  const principles = [
    ['맞춤 전략', 'Customized Strategy', '모든 비즈니스에 같은 성공 공식을 적용하지 않습니다. 상품·시장·고객·구매 주기와 조직의 데이터 환경을 이해하고 현재 상황과 목표에 적합한 전략을 설계합니다.'],
    ['데이터 기반 실행', 'Data-driven Insight & Action', '데이터는 결과를 보고하기 위한 자료가 아니라 다음 행동을 결정하기 위한 기준입니다. 성과의 원인을 분석하고 구체적인 가설과 실행 계획으로 전환합니다.'],
    ['성장 방법론', 'Growth Methodology', '단기 광고 효율과 장기 성장 구조를 함께 봅니다. CPA·ROAS·CAC를 개선하는 동시에 데이터와 콘텐츠가 지속적으로 축적되도록 설계합니다.'],
    ['전 과정 책임', 'End-to-End Ownership', '전략만 제안하거나 매체 운영만 수행하지 않습니다. 전략·실행·측정·개선이 끊기지 않도록 전 과정을 연결하고 필요한 영역을 직접 책임집니다.'],
  ];
  const attitudes = [
    ['Impact', '비즈니스 지표 중심', '바쁘게 일하는 것이 아니라 비즈니스 지표로 결과를 정의합니다.'],
    ['Honesty', '투명한 공유', '듣기 좋은 말보다 문제와 한계까지 투명하게 공유합니다.'],
    ['Tenacity', '집요한 개선', '결과가 나올 때까지 집요하게 파고들어 개선합니다.'],
    ['Fast Learning', '빠른 적용', '새로운 도구와 AI를 빠르게 학습하고 적용합니다.'],
    ['Question First', '먼저 질문', '실행에 앞서 왜를 먼저 묻고 전제를 점검합니다.'],
    ['Say NO', '근거 있는 거절', '비효율적 방향에는 근거를 들어 더 나은 제안을 합니다.'],
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="sec hair" id="believe">
      <div className="shell grid">
        <Head en="What We Believe" kr="우리가 믿는 원칙" sub="선언이 아니라, 전략과 운영에서 반복되는 판단 기준." />
        <div>
          <R d={60}>
            <p className="statement">모든 광고주에게<br /><span className="em">같은 해법</span>을 적용하지 않습니다.</p>
          </R>
          <R className="acc" d={120}>
            {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>
          <R className="att-band-v2" d={80}>
            <span className="att-label">Working Attitudes</span>
            <div className="att-grid">
              {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>
        </div>
      </div>
    </section>
  );
}

/* --------------------- WHAT WE DO · JS-fixed horizontal track --------------------- */
function WhatWeDo() {
  const areas = [
    ['Strategy', '전략', ['비즈니스 및 시장 분석', '핵심 KPI와 퍼널 설계', '고객 여정과 타깃 정의', '미디어와 예산 전략 수립']],
    ['Execution', '실행', ['퍼포먼스 미디어 운영', '크리에이티브 전략 및 제작 관리', '랜딩페이지와 전환 구조 개선', '신규 채널 테스트']],
    ['Data', '데이터', ['광고·분석 트래킹 환경 구축', '광고와 비즈니스 데이터 연결', '고객 획득 및 전환 품질 분석', '대시보드와 리포트 설계']],
    ['Growth', '성장', ['가설 수립과 실험', '전환율·고객 획득 비용 개선', 'CRM·리타겟팅·리텐션 전략', '반복 가능한 성장 시스템 구축']],
  ];
  const secRef = useRef(null);
  const stickyRef = useRef(null);
  const trackRef = useRef(null);
  const [activeIdx, setActiveIdx] = useState(0);

  useEffect(() => {
    const update = () => {
      const sec = secRef.current, sticky = stickyRef.current, track = trackRef.current;
      if (!sec || !sticky || !track) return;
      const mobile = window.innerWidth < 860;
      if (mobile) {
        sticky.style.cssText = '';
        track.style.transform = 'none';
        return;
      }
      const sTop = sec.offsetTop;
      const scrollRange = sec.offsetHeight - window.innerHeight;
      const sy = window.scrollY;
      const vH = window.innerHeight;
      if (sy < sTop) {
        sticky.style.cssText = 'position:absolute;top:0;left:0;right:0;height:' + vH + 'px;overflow:hidden;';
        track.style.transform = 'translateX(0)';
        setActiveIdx(0);
      } else if (sy <= sTop + scrollRange) {
        sticky.style.cssText = 'position:fixed;top:0;left:0;right:0;height:' + vH + 'px;overflow:hidden;';
        const p = (sy - sTop) / scrollRange;
        const maxX = track.scrollWidth - track.parentElement.clientWidth;
        track.style.transform = `translateX(${-p * maxX}px)`;
        setActiveIdx(Math.min(areas.length - 1, Math.floor(p * areas.length)));
      } else {
        sticky.style.cssText = 'position:absolute;top:' + scrollRange + 'px;left:0;right:0;height:' + vH + 'px;overflow:hidden;';
        const maxX = track.scrollWidth - track.parentElement.clientWidth;
        track.style.transform = `translateX(${-maxX}px)`;
        setActiveIdx(areas.length - 1);
      }
    };
    update();
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, []);

  return (
    <section className="wd-tall invert" id="whatwedo" ref={secRef}>
      <div className="wd-sticky" ref={stickyRef}>
        <div className="shell grid">
          <div className="wd-left">
            <Head en="What We Do" kr="전략부터 실행, 데이터와 성장까지" sub="매체를 파는 회사가 아니라, 성장 과제를 해결하는 회사." />
            <div className="wd-progress">
              {areas.map((a, i) => (
                <span key={a[0]} className={`wd-dot${i <= activeIdx ? ' on' : ''}`}><i></i><b>{a[0]}</b></span>
              ))}
            </div>
          </div>
          <div className="wd-right">
            <R d={60}>
              <p className="statement">필요한 수단을 조합해<br /><span className="em">성장 과제</span>를 해결합니다.</p>
            </R>
            <div className="wd-clip">
              <div className="wd-track" ref={trackRef}>
                {areas.map(([en, kr, items], i) => (
                  <article className="wd-panel" key={en}>
                    <div className="wd-num">{String(i + 1).padStart(2, '0')}</div>
                    <div className="wd-pn">{kr}<span className="wd-en">{en}</span></div>
                    <ul className="wd-list">{items.map(it => <li key={it}>{it}</li>)}</ul>
                  </article>
                ))}
              </div>
            </div>
            <R className="loopnote" d={0}>
              <span className="tag">↻ Loop</span>
              <span>Strategy → Execution → Data → Growth, 그리고 다시 Strategy.</span>
            </R>
          </div>
        </div>
      </div>
    </section>
  );
}


/* --------------------- HOW WE WORK · sticky spine --------------------- */
function HowWeWork() {
  const steps = [
    ['진단', 'Diagnose', '광고 계정을 보기 전에 상품, 고객, 시장, 구매 과정과 조직의 현재 상황을 이해합니다.'],
    ['목표 설계', 'Define', 'CPA·ROAS뿐 아니라 CAC, 리드 품질, 상담 연결률, 실제 구매와 계약 등 비즈니스에 필요한 KPI를 정의합니다.'],
    ['전략 수립', 'Plan', '성과에 영향을 미치는 매체·타깃·메시지·크리에이티브·랜딩과 데이터 요소를 구분하고 우선순위를 정합니다.'],
    ['실행 · 실험', 'Run', '가설을 실제 캠페인과 크리에이티브, 랜딩페이지 테스트로 옮기고 충분한 데이터를 확보합니다.'],
    ['분석 · 학습', 'Learn', '단순 증감이 아니라 왜 성과가 발생했는지 분석하고, 다음 실행에 활용할 학습으로 정리합니다.'],
    ['확장', 'Scale', '검증된 전략은 예산·채널·타깃·시장으로 확장하고, 성과가 반복되도록 운영 체계에 반영합니다.'],
  ];
  const refs = useRef([]);
  const [active, setActive] = useState(0);
  useEffect(() => {
    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 (
    <section className="sec hair" id="howwework">
      <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>
          <div className="spine">
            <div className="spine-aside">
              <div className="spine-sticky">
                <div className="spine-bignum">{active + 1}</div>
                <div className="spine-now">
                  <div className="spine-kr">{steps[active][0]}</div>
                  <div className="spine-en">{steps[active][1]}</div>
                </div>
                <div className="spine-track">
                  <div className="spine-fill" style={{ height: `${((active + 1) / steps.length) * 100}%` }}></div>
                </div>
                <div className="spine-loop">↻ 진단·전략·실행·학습이 반복되며 성장 자산이 축적됩니다</div>
              </div>
            </div>
            <ol className="spine-steps">
              {steps.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>
        </div>
      </div>
    </section>
  );
}

/* --------------------- card grid (Clients / Who) --------------------- */
function CardGrid({ items, feature }) {
  return (
    <div className={`cgrid${feature ? ' has-feature' : ''}`}>
      {items.map(([t, d], i) => (
        <article className={`ccard${feature && i === 0 ? ' feature' : ''}`} key={t}>
          <span className="ccard-no">{String(i + 1).padStart(2, '0')}</span>
          <h4 className="ccard-t">{t}</h4>
          <p className="ccard-d">{d}</p>
        </article>
      ))}
    </div>
  );
}

/* --------------------- editorial numbered list (Clients / Who) --------------------- */
function EditorialList({ items }) {
  const refs = useRef([]);
  const [active, setActive] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const focal = window.innerHeight * 0.48;
      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="elist">
      {items.map(([t, d], i) => (
        <div className={`el-item${i === active ? ' on' : ''}`} key={t} 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">{t}</h4>
            <p className="el-desc">{d}</p>
          </div>
        </div>
      ))}
    </div>
  );
}


/* --------------------- WHAT CLIENTS GET · hover index --------------------- */
function ClientsGet() {
  const items = [
    ['명확한 의사결정 기준', '어떤 캠페인과 고객이 실제 비즈니스 성과에 기여하는지 판단할 수 있습니다.'],
    ['실행 가능한 인사이트', '지난 결과를 설명하는 데서 끝나지 않고, 다음에 무엇을 해야 하는지를 구체적으로 제안합니다.'],
    ['연결된 마케팅 운영', '매체·콘텐츠·크리에이티브·랜딩페이지·트래킹과 CRM을 하나의 퍼널로 관리합니다.'],
    ['축적되는 성장 자산', '고객 데이터, 성과 패턴, 메시지와 크리에이티브 인사이트가 다음 캠페인에 활용되도록 남깁니다.'],
    ['내부 팀과의 협업', '외부 실행 조직에 머무르지 않고 마케팅·세일즈·데이터·프로덕트 조직과 함께 문제를 해결합니다.'],
  ];
  return (
    <section className="sec hair" id="clientsget">
      <div className="shell grid">
        <Head en="What Clients Get" />
        <div>
          <R d={60}>
            <p className="statement">결과를 전달받는 것을 넘어,<br /><span className="em">더 나은 성장 결정의 기준</span>을 확보합니다.</p>
          </R>
          <R d={120}><CardGrid items={items} feature /></R>
        </div>
      </div>
    </section>
  );
}

/* --------------------- WHO WE WORK WITH · hover index --------------------- */
function WhoWeWorkWith() {
  const items = [
    ['글로벌 브랜드', '한국 시장에 진입하거나 현지화된 성장 전략이 필요한 글로벌 브랜드.'],
    ['스타트업', '빠르게 고객을 확보하고 제품·시장 적합성을 검증해야 하는 스타트업.'],
    ['스케일업', '현재의 광고 효율을 넘어 다음 성장 단계로 확장하려는 기업.'],
    ['B2B', '리드의 양보다 고객 품질과 실제 매출 연결이 중요한 B2B 기업.'],
    ['앱 · 플랫폼', '복잡한 고객 여정과 전환 구조를 가진 앱·플랫폼·교육·헬스케어 기업.'],
  ];
  return (
    <section className="sec invert" id="whoworkwith">
      <div className="shell grid">
        <Head en="Who We Work With" kr="우리가 잘 돕는 기업" sub="업종이 아니라, 상황으로 정의합니다." />
        <div>
          <R d={60}>
            <p className="statement">규모와 업종은 달라도,<br />질문은 <span className="em">하나</span>입니다.</p>
          </R>
          <R className="who-q" d={120}>
            <span className="who-q-mark">Q.</span>
            <p>이 마케팅 활동이 <span className="em">실제 비즈니스의 성장</span>으로 이어지고 있는가?</p>
          </R>
          <R d={150}><CardGrid items={items} feature /></R>
        </div>
      </div>
    </section>
  );
}

/* --------------------- VISION · inline rules (no boxes) --------------------- */
function Vision() {
  const pillars = [
    '전략과 실행을 하나로 잇는 컨설팅형 에이전시로 일합니다.',
    '사람의 경험과 데이터 시스템을 함께 운영합니다.',
    '성과가 개인이 아닌 조직의 자산으로 남는 구조를 만듭니다.',
    '한국과 글로벌 시장을 연결하는 마케팅 파트너가 됩니다.',
    ];
  return (
    <section className="sec brand" id="vision">
      <div className="shell grid">
        <Head en="Vision" kr="밴스드가 향하는 방향" />
        <div>
          <R d={60}>
            <p className="statement">마케팅 실행과 비즈니스<br />의사결정의 간극을 없앱니다.</p>
          </R>
          <R d={130}>
            <p className="lead" style={{ color: 'rgba(255,255,255,.9)' }}>
              밴스드는 광고 운영을 넘어, 기업이 고객을 더 깊이 이해하고 더 나은 성장 결정을 내릴 수 있도록 돕는 파트너를 지향합니다.
              성과가 특정 담당자의 감각이나 경험에만 의존하지 않고, 데이터와 조직의 시스템으로 축적되도록 만드는 것.
            </p>
          </R>
          <R className="vlines" d={180}>
            {pillars.map((s, i) => (
              <div className="vline" key={i}>
                <span className="vline-no">{String(i + 1).padStart(2, '0')}</span>
                <p className="vline-s">{s}</p>
              </div>
            ))}
          </R>
        </div>
      </div>
    </section>
  );
}

/* --------------------- CLOSING + FOOTER (kept) --------------------- */
function Closing({ deckUrl }) {
  return (
    <React.Fragment>
      <section className="sec invert" id="closing">
        <div className="shell closing">
          <R d={0}>
            <p className="big">Better Decisions.<span className="l2">Sustainable Growth.</span></p>
          </R>
          <R d={90}>
            <p className="sub">
              광고가 필요한 기업을 넘어, 성장의 다음 단계가 필요한 기업과 함께합니다.
              현재의 마케팅 구조를 진단하고 데이터 기반의 성장 가설과 우선순위를 제안해 드립니다.
            </p>
          </R>
          <R className="cta-row" d={160}>
            <a className="btn primary" href={deckUrl} target="_blank" rel="noopener">회사 소개서 다운로드 <span className="arw">↓</span></a>
            <a className="btn ghost" href="contact.html">지금 문의하기</a>
          </R>
        </div>
      </section>

      <footer className="foot">
        <div className="shell">
          <div className="fl">
            <img src={(window.__resources && window.__resources.vancedLogo) || "about/assets/vanced-logo.png"} alt="VANCED" />
            <p className="tagline">데이터 기반 풀퍼널 그로스 마케팅 에이전시</p>
          </div>
          <div className="fm">
            <div><a href="index.html">vanced.kr</a></div>
            <div>Seoul · Korea & Global</div>
            <div>© {new Date().getFullYear()} VANCED</div>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}

Object.assign(window, {
  R, Head, Marquee, Nav, Hero, Why, Mission, Believe, WhatWeDo, HowWeWork, ClientsGet, WhoWeWorkWith, Vision, Closing, EditorialList, CardGrid,
});