window.Kit.Services = function Services() {
  const { Button, Tabs, Tag, Eyebrow, Badge } = window.DS;
  const { Icon, Photo, Mask, brand, data } = window.Kit;
  const [phase, setPhase] = React.useState('all');
  const list = data.services.filter((s) => phase === 'all' || s.phase === phase);
  const count = (ph) => data.services.filter((s) => s.phase === ph).length;
  const tabs = [{ id: 'all', label: 'All', count: data.services.length }, { id: 'build', label: 'Build', count: count('build') }, { id: 'grow', label: 'Grow', count: count('grow') }, { id: 'run', label: 'Run', count: count('run') }];
  return (
    <main>
      <section className="section section--first" style={{ paddingBottom: 'var(--space-10)' }}>
        <div className="container stack" style={{ gap: 'var(--space-8)' }}>
          <div className="reveal"><Eyebrow>Services</Eyebrow></div>
          <h1 className="display-xl"><Mask text="Everything your business" delay={60} /><br /><Mask text="needs online." delay={300} /></h1>
          <div className="grid grid-2" style={{ alignItems: 'end' }}>
            <p className="lead reveal" data-d="2" style={{ maxWidth: '46ch' }}>Nine jobs that usually mean eight vendors and a spreadsheet of logins. We do all of them, in one plan, with one person you can call.</p>
            <div className="reveal" data-d="3" style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Tabs variant="pill" caps items={tabs} value={phase} onChange={setPhase} />
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="container">
          {list.map((s, i) => (
            <article key={s.id + phase} className="service-row scale-in" style={{ animationDelay: (i * 60) + 'ms' }}>
              <div className="service-row__copy stack" style={{ gap: 'var(--space-5)' }}>
                <div className="row" style={{ gap: 14 }}><div className="service-icon"><Icon name={s.icon} size={22} /></div><Eyebrow tone="muted" number={data.services.indexOf(s) + 1}>{s.kicker}</Eyebrow><Badge tone="outline">{s.phase}</Badge></div>
                <h2 className="h1">{s.title}</h2>
                <p className="lead" style={{ maxWidth: '44ch' }}>{brand(s.desc)}</p>
                <ul className="feature-list">
                  {s.bullets.map((b) => <li key={b}><Icon name="Check" size={16} strokeWidth={2.5} />{b}</li>)}
                </ul>
                <div className="row"><Button variant="secondary" arrow href="#/pricing">Included in every plan</Button></div>
              </div>
              <Photo id={'svc-' + s.id} ratio="5 / 4" label={s.photo} />
            </article>
          ))}
        </div>
      </section>

      <section className="section band" data-theme="dark" style={{ background: 'var(--bg)', color: 'var(--text)' }}>
        <div className="container grid grid-2" style={{ alignItems: 'center', gap: 'var(--space-8)' }}>
          <div className="stack reveal"><Eyebrow>Not sure where to start?</Eyebrow><h2 className="display">The audit tells you.</h2><p className="lead">Twenty minutes. We look at what you have, tell you what's missing, and what it would take.</p></div>
          <div className="row reveal" data-d="1" style={{ justifyContent: 'flex-end' }}><Button size="xl" arrow href="#/audit">Book the free audit</Button></div>
        </div>
      </section>
    </main>
  );
};