/* Flowdesk — Services page */
(function () {
  const { Header, Footer, BookingDialog, icons, wrap, eyebrow } = window.FS;
  const { ArrowRight, Check, Workflow, CodeIcon, Cpu, Zap } = icons;
  const DS = window.FlowdeskDesignSystem_d54181;
  const { Button, Card, Badge } = DS;

  function ServicesHero() {
    return (
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <img src="./flowdesk-mark.png" alt="" aria-hidden="true"
          style={{ position: 'absolute', right: '-4%', top: '5%', width: 520, opacity: 0.035, pointerEvents: 'none' }} />
        <div style={{ ...wrap, paddingTop: 88, paddingBottom: 72, position: 'relative' }}>
          <span style={eyebrow}>Services</span>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2.5rem, 5vw, 4rem)', lineHeight: 1.04, letterSpacing: '-0.03em', color: 'var(--text-strong)', margin: '14px 0 0', fontWeight: 600, maxWidth: 660 }}>
            Everything we build removes work from your plate.
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.25rem', lineHeight: 1.6, color: 'var(--text-muted)', margin: '22px 0 0', maxWidth: 520 }}>
            Four focused service lines. All built around one goal: sustainable cost reduction through AI and automation.
          </p>
        </div>
      </section>
    );
  }

  function OutcomeList({ outcomes }) {
    return (
      <div style={{ borderRadius: 16, border: '1px solid var(--border)', background: 'var(--surface-card)', padding: '32px 28px' }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.72rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--brand)', marginBottom: 20 }}>What you get</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          {outcomes.map((o) => (
            <div key={o} style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
              <span style={{ color: 'var(--brand)', flexShrink: 0, marginTop: 2 }}><Check size={15} /></span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', color: 'var(--text-body)', lineHeight: 1.55 }}>{o}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  const SERVICES = [
    {
      icon: <Workflow size={24} />, tag: 'Most popular', sub: 'Service 01',
      title: 'Workflow automation',
      desc: "We map every manual step draining your week and replace it with a reliable, hands-free system. From invoice processing to employee onboarding to daily reporting — if it's repeatable, it can be automated.",
      outcomes: [
        'End-to-end automation for invoicing, onboarding, reporting and follow-ups',
        'Triggers from email, forms, CRM updates, calendar events and more',
        'Typically saves 8–20 hours per week, per team',
        'Full audit trail and error alerts so nothing slips through',
      ],
    },
    {
      icon: <CodeIcon size={24} />, sub: 'Service 02',
      title: 'Custom SaaS builds',
      desc: "Off-the-shelf software rarely fits perfectly. We build the internal tools, customer portals and dashboards your team actually needs — shaped around your workflows, not the other way around.",
      outcomes: [
        'Internal tools that replace messy spreadsheets and manual tracking',
        'Customer portals and self-service dashboards',
        'Built to last: documented, tested and easy to maintain',
        'Integrates with your existing stack from day one',
      ],
      reverse: true,
    },
    {
      icon: <Cpu size={24} />, sub: 'Service 03',
      title: 'AI integrations & API development',
      desc: 'We wire AI capabilities into the tools you already use. Document processing, email triage, data extraction, AI-assisted decision making — connected via APIs into your live business stack.',
      outcomes: [
        'AI document processing for contracts, invoices and applications',
        'Intelligent email routing and automated response drafting',
        'Data extraction from PDFs, images and unstructured text',
        'Custom AI agents for specific repetitive cognitive tasks',
      ],
    },
    {
      icon: <Zap size={24} />, sub: 'Service 04',
      title: 'n8n automation pipelines',
      desc: "n8n is our go-to platform for visual workflow automation at scale. We design, build and deploy pipelines that connect hundreds of tools — CRMs, ERPs, databases and APIs — reliably and without vendor lock-in.",
      outcomes: [
        'CRM sync, lead routing and contact enrichment pipelines',
        'Multi-step approval and notification workflows',
        'Data transformation and reporting automation',
        'Self-hosted option for full data sovereignty',
      ],
      reverse: true,
    },
  ];

  function ServiceBlock({ icon, tag, sub, title, desc, outcomes, reverse }) {
    const detail = (
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
          <span style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--brand-subtle)', color: 'var(--brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</span>
          {tag && <Badge tone="brand">{tag}</Badge>}
        </div>
        <span style={eyebrow}>{sub}</span>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: '2.25rem', letterSpacing: '-0.025em', color: 'var(--text-strong)', margin: '10px 0 0', fontWeight: 600 }}>{title}</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: '1rem', lineHeight: 1.75, color: 'var(--text-muted)', margin: '16px 0 0' }}>{desc}</p>
      </div>
    );
    const list = <OutcomeList outcomes={outcomes} />;
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '64px', alignItems: 'center', padding: '80px 0', borderTop: '1px solid var(--border)' }}>
        {reverse ? <React.Fragment>{list}{detail}</React.Fragment> : <React.Fragment>{detail}{list}</React.Fragment>}
      </div>
    );
  }

  function TechStrip() {
    const tools = ['n8n', 'OpenAI', 'Anthropic Claude', 'Supabase', 'PostgreSQL', 'Make', 'REST APIs', 'GraphQL', 'Xero', 'HubSpot'];
    return (
      <section style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
        <div style={{ ...wrap, paddingTop: 36, paddingBottom: 36 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '24px', flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.72rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>Tools we use</span>
            {tools.map((t) => (
              <span key={t} style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', fontWeight: 500, color: 'var(--text-muted)', background: 'var(--surface-page)', border: '1px solid var(--border)', borderRadius: 6, padding: '4px 11px' }}>{t}</span>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function ServicesCTA({ onBook }) {
    return (
      <section style={{ ...wrap, paddingTop: 80, paddingBottom: 96 }}>
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 24, background: 'var(--slate-900)', padding: '80px 72px' }}>
          <img src="./flowdesk-mark.png" alt="" aria-hidden="true"
            style={{ position: 'absolute', right: -50, bottom: -80, width: 360, opacity: 0.07, pointerEvents: 'none' }} />
          <div style={{ position: 'relative', maxWidth: 520 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: '2.75rem', lineHeight: 1.08, letterSpacing: '-0.025em', color: '#fff', margin: 0, fontWeight: 600, textWrap: 'balance' }}>
              Not sure which service fits?
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.125rem', color: 'var(--slate-300)', margin: '16px 0 0', lineHeight: 1.65 }}>
              Tell us your bottleneck and we'll tell you exactly what we'd build — no commitment.
            </p>
            <div style={{ marginTop: 32 }}>
              <Button variant="primary" size="lg" iconRight={<ArrowRight />} onClick={onBook}>Book a free call</Button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function ServicesPage() {
    const [open, setOpen] = React.useState(false);
    const book = () => setOpen(true);
    return (
      <React.Fragment>
        <Header onBook={book} />
        <main>
          <ServicesHero />
          <section style={wrap}>
            {SERVICES.map((s) => <ServiceBlock key={s.title} {...s} />)}
          </section>
          <TechStrip />
          <ServicesCTA onBook={book} />
        </main>
        <Footer />
        <BookingDialog open={open} onClose={() => setOpen(false)} />
      </React.Fragment>
    );
  }

  window.FlowdeskCurrentPage = ServicesPage;
})();