// trf-tab.jsx — Traffic & Channels top-level shell
function TrafficTab({ state, lang }) {
  const T = window.TRF_T[lang];
  const subTabs = [
    { id: 'snapshot', label: T.sec1 },
    { id: 'channels', label: T.sec2 },
    { id: 'pages',    label: T.sec3 },
    { id: 'seo',      label: T.sec4 },
    { id: 'funnel',   label: T.sec5 },
    { id: 'tech',     label: T.sec6 },
  ];
  const [active, setActive] = React.useState('snapshot');
  const skeleton = state === 'skeleton';

  return (
    <div className="page rev-page trf-page">
      <div className="rev-page-head">
        <div className="rev-page-title-row">
          <div>
            <h1 className="rev-page-title">{T.pageTitle}</h1>
            <div className="rev-page-sub">{T.pageSub}</div>
          </div>
        </div>
        <div className="rev-subtabs">
          {subTabs.map(st => (
            <button key={st.id} className={`rev-subtab ${active === st.id ? 'on' : ''}`} onClick={() => setActive(st.id)}>
              {st.label}
            </button>
          ))}
        </div>
      </div>

      {skeleton ? (
        <div className="trf-skel">
          {[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="trf-skel-card" />)}
        </div>
      ) : (
        <>
          {active === 'snapshot' && <window.TrfSnapshot state={state} lang={lang} />}
          {active === 'channels' && <window.TrfChannels lang={lang} />}
          {active === 'pages' && <window.TrfPages lang={lang} />}
          {active === 'seo' && <window.TrfSeo lang={lang} />}
          {active === 'funnel' && <window.TrfFunnel state={state} lang={lang} />}
          {active === 'tech' && <window.TrfTech lang={lang} />}
        </>
      )}
    </div>
  );
}

window.TrafficTab = TrafficTab;