const { Button, Card, Badge, Callout, Tabs, DataTable } = window.ZaviFxDesignSystem_f15c31;

function ServicesPage({ go }) {
  const [active, setActive] = React.useState(SERVICES[1].slug);
  const svc = SERVICES.find((s) => s.slug === active) || SERVICES[0];
  return (
    <>
      <PageHero eyebrow="Services" title="Everything a growing business needs online, in one team"
        intro="Start with the service that unblocks revenue first. Most clients begin with SEO or a website rebuild and add channels as the data justifies it.">
        <Button onClick={() => go('contact')}>Book a Free Consultation</Button>
        <Button variant="secondary" onClick={() => go('work')} iconRight={<Arrow />}>View Our Work</Button>
      </PageHero>

      <Section eyebrow="Service catalogue" title="Twelve services, one strategist" pad="var(--space-section)">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-md)' }}>
          {SERVICES.map((s) => (
            <Card key={s.slug} interactive eyebrow={s.caps[0]} title={s.title}
              footer={
                <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap', alignItems: 'center' }}>
                  {s.caps.slice(1).map((c) => <Badge key={c}>{c}</Badge>)}
                  <Button variant="text" size="sm" iconRight={<Arrow />} onClick={() => setActive(s.slug)}>Open</Button>
                </div>
              }>{s.body}</Card>
          ))}
        </div>
      </Section>

      <Section tone="sunken" eyebrow="Service page template" title={svc.title} intro={svc.body} pad="var(--space-section)">
        <div style={{ marginBottom: 'var(--space-xl)' }}>
          <Tabs variant="pill" items={SERVICES.slice(0, 6).map((s) => ({ id: s.slug, label: s.title.split(' ')[0] }))} value={active} onChange={setActive} ariaLabel="Service" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,.7fr)', gap: 'var(--space-section)', alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
            <div>
              <h3 className="t-h2">What you get</h3>
              <ul style={{ margin: 'var(--space-md) 0 0', paddingLeft: 'var(--space-lg)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
                <li>A written audit and prioritised backlog in week one.</li>
                <li>{svc.caps.join(', ')} delivered on a two-week cadence.</li>
                <li>A dashboard showing the one metric this service is accountable for.</li>
                <li>Handover documentation so your team can maintain the work.</li>
              </ul>
            </div>
            <div>
              <h3 className="t-h2">How we work</h3>
              <ol style={{ margin: 'var(--space-md) 0 0', paddingLeft: 'var(--space-lg)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
                {PROCESS.map((p) => <li key={p.n}><strong style={{ color: 'var(--text-strong)' }}>{p.t}</strong> — {p.b}</li>)}
              </ol>
            </div>
            <Callout variant="note">Scope, timeline and price are confirmed after the free consultation — we do not quote before seeing the account.</Callout>
          </div>
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', position: 'sticky', top: 'calc(var(--nav-height) + var(--space-lg))' }}>
            <Card title="Typical engagement">
              REPLACE: add your standard duration and fee range for this service.
            </Card>
            <Card variant="subtle" title="Good fit if">
              You have traffic or budget already moving and need it to convert — or you are launching and want the foundations right the first time.
            </Card>
            <Button fullWidth onClick={() => go('contact')}>Request a Proposal</Button>
          </aside>
        </div>
      </Section>

      <CTAStrip go={go} title="Not sure which service to start with?" body="Book the consultation. We review your funnel and tell you what to fix first, in priority order." />
    </>
  );
}
Object.assign(window, { ServicesPage });