const PanelStrategy = () => (
  <>
    <div className="panel-head"><span className="label">Growth plan · next 2 quarters</span><span className="tag-illus">Illustrative</span></div>
    <p style={{ fontSize: 15 }}>Where the next dollar goes, in order, with the expected return on each move.</p>
    <div className="plan">
      {[['Fix measurement', 'Revenue events back to the platforms', 'Wk 1–2', 'Unlocks everything below'], ['Scale what works', 'Lift budget on the two efficient channels', 'Wk 3–6', '+18% revenue, flat CAC'], ['Open a third channel', 'Controlled test budget, kill criteria set', 'Q+1', 'Diversifies 60% channel dependence'], ['Hold enterprise', 'Until the sales cycle is mapped', 'Q+2', 'Avoids $120K of unproven spend']].map(([t, d, w, r], k) => (
        <div className="plan-row" key={t}><span className="n">{k + 1}</span><div><strong>{t}</strong><small>{d}</small></div><span className="label">{w}</span><em>{r}</em></div>
      ))}
    </div>
    <p className="note">Every plan is sequenced. You know what to fix first before anything scales.</p>
  </>
);
const PanelAnalytics = () => (
  <>
    <div className="panel-head"><span className="label">Weekly scorecard</span><span className="tag-illus">Illustrative</span></div>
    <div className="kpis">
      {[['Revenue', '$1.42M', '+12% WoW'], ['Blended CAC', '$184', '−6% WoW'], ['Conv. rate', '3.8%', '+0.4 pt'], ['Payback', '7.1 mo', '−0.5 mo']].map(([k, v, d]) => (
        <div className="kpi" key={k}><span className="label">{k}</span><b>{v}</b><small className="chip chip-ok">{d}</small></div>
      ))}
    </div>
    <div className="proj">
      <div className="label" style={{ marginBottom: 8 }}>12-month projection · spend vs revenue</div>
      <svg viewBox="0 0 400 120" style={{ width: '100%', height: 'auto', display: 'block' }}>
        {[30, 60, 90].map(y => <line key={y} x1="0" x2="400" y1={y} y2={y} stroke="var(--line-2)"></line>)}
        <path d="M0 100 C80 96 160 80 240 58 S360 20 400 14" fill="none" stroke="var(--blue-600)" strokeWidth="3" strokeLinecap="round"></path>
        <path d="M0 104 C100 102 220 94 400 84" fill="none" stroke="var(--ink)" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="4 5"></path>
        <text x="398" y="10" textAnchor="end" fontFamily="var(--mono)" fontSize="9" fill="var(--blue-700)" letterSpacing=".08em">REVENUE</text>
        <text x="398" y="80" textAnchor="end" fontFamily="var(--mono)" fontSize="9" fill="var(--muted)" letterSpacing=".08em">SPEND</text>
      </svg>
    </div>
    <div className="signal"><div><span className="label">Before</span><s>Optimizing to form fills</s></div><span className="signal-arrow">→</span><div><span className="label">After</span><strong>Optimizing to closed-won revenue from CRM</strong></div></div>
    <p className="note">One source of truth across channels, with projection models your finance team can audit.</p>
  </>
);
const PanelAcq = () => (
  <>
    <div className="panel-head"><span className="label">Channel mix</span><span className="tag-illus">Illustrative</span></div>
    <div className="bars">{[['Google', 34], ['Meta', 27], ['TikTok', 15], ['CTV', 12], ['Affiliate and partnerships', 8], ['Experimental', 4]].map(([c, v], k) => (
      <div className="bar" key={c}><span>{c}</span><i style={{ width: `${v * 2.6}%`, animationDelay: `${k * 80}ms`, background: k > 3 ? 'var(--blue-300)' : undefined }}></i><b>{v}%</b></div>
    ))}</div>
    <p className="note">More channels means less dependence on any one of them.</p>
  </>
);
const PanelCRO = () => (
  <>
    <div className="panel-head"><span className="label">Test log · this month</span></div>
    <div className="log">
      {[['Demo page v3 vs control', '+11% form completion · sig 0.03', 'Shipped', 'chip-ok'], ['Pricing page, annual plan first', 'Day 9 of 14', 'Running', 'chip-human'], ['Onboarding, two fewer fields', 'Starts Monday', 'Queued', 'chip-mute'], ['Checkout trust badges', 'No measurable lift', 'Retired', 'chip-mute']].map(([t, s, st, c]) => (
        <div className="log-row" key={t}><div>{t}<small>{s}</small></div><span className={`chip ${c}`}>{st}</span></div>
      ))}
    </div>
    <span className="tag-illus">Illustrative, except demo page v3</span>
  </>
);
const PanelUpper = () => (
  <>
    <div className="panel-head"><span className="label">Branded search, exposed markets</span><span className="tag-illus">Illustrative</span></div>
    <div className="lift"><div><b>+9%</b><span>Branded search vs holdout</span></div><div><b>+4%</b><span>New customers vs holdout</span></div></div>
    <p className="note">Read: the lift holds against holdout markets. Expand to three more markets next month.</p>
  </>
);
const PanelCreative = () => (
  <>
    <div className="panel-head"><span className="label">Creative Flywheel</span><span className="tag-illus">Live account view</span></div>
    <div className="creatives">
      <div className="cr"><div className="thumb"></div><strong>Hook A · 9:16</strong><span className="chip chip-ok">Live</span></div>
      <div className="cr fat"><div className="thumb"></div><strong>Hook A · 1:1</strong><span className="chip chip-warn">Fatigue detected</span></div>
      <div className="cr"><div className="thumb"></div><strong>Hook C · 4:5</strong><span className="chip chip-human">Ready to swap in</span></div>
    </div>
    <p className="note">Replacement for Hook A queued for creative strategist approval.</p>
  </>
);

const Services = () => {
  const items = [
    ['Strategy', 'Know where to play before you spend.', 'Positioning, go-to-market design and a sequenced growth plan, with a measurement framework your board can read.', null, PanelStrategy],
    ['Paid acquisition', 'Channels that scale without losing efficiency.', 'Meta, Google, TikTok, programmatic, partnerships, affiliate, CTV and experimental channels, with attribution you can defend in a budget meeting.', null, PanelAcq],
    ['CRO', 'More customers from traffic you already pay for.', 'Landing pages, onboarding, checkout, pricing and lifecycle, tested every week with statistical discipline.', null, PanelCRO],
    ['Upper funnel', 'Brand demand you can actually measure.', 'CTV, programmatic and brand placements that feed the rest of your funnel, held to the same attribution standard as your performance spend.', null, PanelUpper],
    ['Creative Flywheel', 'New creative ready before the current set wears out.', 'Agentic workflows spot fatigue early and draft replacements at volume. Senior creative directors decide what ships.', ['How the Creative Flywheel works →', 'https://www.apexgrowth.co/services/creative-flywheel'], PanelCreative],
    ['Reporting and analytics', 'One number set everyone trusts.', 'CRM and offline conversions piped back to the ad platforms, so bidding optimizes to closed revenue, not form fills. Weekly scorecards and projection models keep every decision on the same data.', null, PanelAnalytics],
  ];
  const [on, setOn] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  const [hover, setHover] = React.useState(false);
  React.useEffect(() => { if (!auto || hover) return; const t = setTimeout(() => setOn(v => (v + 1) % items.length), 7000); return () => clearTimeout(t); }, [on, auto, hover]);
  const pick = k => { setOn(k); setAuto(false); };
  const Panel = items[on][4];
  return (
    <section className="sec sec-white" id="services">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <span className="label eyebrow">Services</span>
          <h2 className="h2">One Apex team runs everything your growth and marketing team needs.</h2>
          <p className="lede">Run together, <strong>each function makes the others better</strong>: creative feeds testing, testing feeds media, media tells strategy where to go next.</p>
        </div>
        <div className="svc">
          <div className="svc-list" data-reveal onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
            <div className="svc-hint label">Click a function to see it in action</div>
            {items.map(([t, sub, d, link], k) => (
              <div className={`svc-item${on === k ? ' on' : ''}`} key={t} onClick={() => pick(k)} role="button" tabIndex={0} onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && pick(k)}>
                <h3>{t}<span className="svc-go">0{k + 1}<i>→</i></span></h3>
                <div className="sub">{sub}</div>
                {on === k && auto && <div className={`svc-prog${hover ? ' paused' : ''}`} key={on}></div>}
                <div className="svc-body"><p>{d}</p>{link && <a href={link[1]} onClick={e => e.stopPropagation()}>{link[0]}</a>}</div>
              </div>
            ))}
          </div>
          <div className="card svc-panel" data-reveal key={on}><Panel /></div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Services });