/* Flowdesk — Home page */
(function () {
  const { Header, Footer, BookingDialog, icons, wrap, eyebrow } = window.FS;
  const { ArrowRight, Check, Workflow, CodeIcon, Gauge, MapRoute, Wrench, Rocket, Clock } = icons;
  const DS = window.FlowdeskDesignSystem_d54181;
  const { Button, Card, Badge } = DS;

  function Hero({ onBook }) {
    return (
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <img src="./flowdesk-mark.png" alt="" aria-hidden="true"
          style={{ position: 'absolute', right: '-4%', top: '4%', width: 680, opacity: 0.035, pointerEvents: 'none', userSelect: 'none' }} />
        <div style={{ ...wrap, paddingTop: 96, paddingBottom: 80, position: 'relative' }}>
          <div style={{ maxWidth: 760 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <Badge tone="brand" dot>Auckland, NZ</Badge>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', fontWeight: 500, color: 'var(--text-muted)' }}>AI infrastructure agency</span>
            </div>
            <h1 style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(2.75rem, 5.5vw, 4.75rem)',
              lineHeight: 1.02, letterSpacing: '-0.03em',
              color: 'var(--text-strong)', margin: 0, fontWeight: 600
            }}>
              AI infrastructure<br />that pays for itself.
            </h1>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.25rem', lineHeight: 1.6, color: 'var(--text-muted)', margin: '22px 0 0', maxWidth: 580 }}>
              We design and build the automations and custom software that quietly run your business in the background — so your team does less busywork and more of what makes money.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" iconRight={<ArrowRight />} onClick={onBook}>Book a free call</Button>
              <Button variant="secondary" size="lg" onClick={() => { window.location.href = './services.html'; }}>See how it works</Button>
            </div>
            <div style={{ display: 'flex', gap: 40, marginTop: 52, paddingTop: 40, borderTop: '1px solid var(--border)', flexWrap: 'wrap' }}>
              {[['~12 hrs', 'saved per week, per team'], ['3 wks', 'from audit to first automation'], ['40%', 'fewer manual touches']].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: '1.875rem', color: 'var(--text-strong)', letterSpacing: '-0.02em' }}>{n}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--text-muted)', marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  function TrustBar() {
    const names = ['Kanuka Co.', 'Southbridge', 'Tāhuna Foods', 'Manaaki Health', 'Riverside Logistics'];
    return (
      <section style={{ borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', background: 'var(--surface-card)' }}>
        <div style={{ ...wrap, paddingTop: 20, paddingBottom: 20, display: 'flex', alignItems: 'center', gap: '32px', flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.72rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>Trusted by NZ teams</span>
          {names.map((n) => (
            <span key={n} style={{ fontFamily: 'var(--font-display)', fontSize: '1.0625rem', fontWeight: 600, color: 'var(--slate-400)', letterSpacing: '-0.01em' }}>{n}</span>
          ))}
        </div>
      </section>
    );
  }

  function Services() {
    const items = [
      { icon: <Workflow size={22} />, tag: 'Most popular', title: 'Workflow automation', body: 'We map every manual step draining your week and replace it with reliable, hands-free automation — invoicing, onboarding, reporting, follow-ups.' },
      { icon: <CodeIcon size={22} />, title: 'Custom SaaS builds', body: 'Software shaped around how you actually work. Internal tools, customer portals and dashboards that are easy to run and built to last.' },
      { icon: <Gauge size={22} />, title: 'AI infrastructure', body: 'Data pipelines, API integrations and AI agents wired into the tools you already use — the invisible layer that makes it all run.' },
    ];
    return (
      <section style={{ ...wrap, paddingTop: 96, paddingBottom: 48 }}>
        <span style={eyebrow}>What we do</span>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: '3rem', letterSpacing: '-0.025em', color: 'var(--text-strong)', margin: '12px 0 0', fontWeight: 600, maxWidth: 520 }}>
          Three ways we take work off your plate.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px', marginTop: 40 }}>
          {items.map((it) => (
            <Card key={it.title} interactive padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <span style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--brand-subtle)', color: 'var(--brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{it.icon}</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: '1.25rem', fontWeight: 600, color: 'var(--text-strong)', margin: 0 }}>{it.title}</h3>
                {it.tag && <Badge tone="brand">{it.tag}</Badge>}
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', lineHeight: 1.65, color: 'var(--text-muted)', margin: 0 }}>{it.body}</p>
            </Card>
          ))}
        </div>
        <div style={{ marginTop: 20, textAlign: 'right' }}>
          <a href="./services.html" style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', fontWeight: 500, color: 'var(--brand)', textDecoration: 'none' }}>See all services →</a>
        </div>
      </section>
    );
  }

  function Process() {
    const steps = [
      { icon: <MapRoute size={20} />, n: '01', title: 'Map the workflow', body: 'We sit with your team and chart every manual step, then score each for automation ROI.' },
      { icon: <Wrench size={20} />, n: '02', title: 'Build the automation', body: 'We build, test and wire it into your existing tools — no rip-and-replace, no disruption.' },
      { icon: <Rocket size={20} />, n: '03', title: 'Ship and support', body: 'It goes live, we monitor it, and you get a dashboard plus a human on call.' },
    ];
    return (
      <section style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
        <div style={{ ...wrap, paddingTop: 96, paddingBottom: 96 }}>
          <span style={eyebrow}>How it works</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: '3rem', letterSpacing: '-0.025em', color: 'var(--text-strong)', margin: '12px 0 0', fontWeight: 600 }}>
            Map. Build. Ship.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '56px', marginTop: 48 }}>
            {steps.map((s) => (
              <div key={s.n}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ width: 40, height: 40, borderRadius: 10, border: '1px solid var(--border-strong)', color: 'var(--brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-page)' }}>{s.icon}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', color: 'var(--text-faint)', fontWeight: 600 }}>{s.n}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: '1.375rem', fontWeight: 600, color: 'var(--text-strong)', margin: '20px 0 8px' }}>{s.title}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', lineHeight: 1.7, color: 'var(--text-muted)', margin: 0 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function Proof() {
    return (
      <section style={{ ...wrap, paddingTop: 96, paddingBottom: 96 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: '64px', alignItems: 'center' }}>
          <div>
            <span style={eyebrow}>Proof, not promises</span>
            <blockquote style={{ fontFamily: 'var(--font-display)', fontSize: '2.25rem', lineHeight: 1.25, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '16px 0 0', fontWeight: 500 }}>
              "Onboarding that took 3 days now takes 20 minutes. Flowdesk paid for itself in the first month."
            </blockquote>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24 }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--brand-subtle)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontFamily: 'var(--font-body)', fontSize: '0.8125rem' }}>AT</div>
              <div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', fontWeight: 600, color: 'var(--text-strong)' }}>Aria Tane</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-muted)' }}>Operations Lead, Tāhuna Foods</div>
              </div>
            </div>
            <div style={{ marginTop: 28 }}>
              <a href="./case-studies.html" style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', fontWeight: 500, color: 'var(--brand)', textDecoration: 'none' }}>See all case studies →</a>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
            {[
              [<Clock size={20} />, '12.4 hrs', 'saved every week'],
              [<Check size={18} />, '1,204', 'flows run this year'],
              [<Gauge size={20} />, '99.9%', 'automation uptime'],
              [<Rocket size={20} />, '6 wks', 'average payback'],
            ].map(([ic, n, l], i) => (
              <Card key={i} padding="md" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                <span style={{ color: 'var(--brand)' }}>{ic}</span>
                <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: '1.875rem', color: 'var(--text-strong)', letterSpacing: '-0.02em' }}>{n}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-muted)', lineHeight: 1.4 }}>{l}</div>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function CTABand({ onBook }) {
    return (
      <section style={{ ...wrap, 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: 380, opacity: 0.07, pointerEvents: 'none' }} />
          <div style={{ position: 'relative', maxWidth: 520 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: '3rem', lineHeight: 1.08, letterSpacing: '-0.025em', color: '#fff', margin: 0, fontWeight: 600, textWrap: 'balance' }}>
              Bring us your worst bottleneck.
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.125rem', color: 'var(--slate-300)', margin: '16px 0 0', lineHeight: 1.65 }}>
              A 30-minute call. We'll tell you exactly what we'd automate first — no pitch, no obligation.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" iconRight={<ArrowRight />} onClick={onBook}>Book a free call</Button>
              <Button variant="secondary" size="lg" onClick={() => { window.location.href = './case-studies.html'; }}>See our work</Button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function HomePage() {
    const [open, setOpen] = React.useState(false);
    const book = () => setOpen(true);
    return (
      <React.Fragment>
        <Header onBook={book} />
        <main>
          <Hero onBook={book} />
          <TrustBar />
          <Services />
          <Process />
          <Proof />
          <CTABand onBook={book} />
        </main>
        <Footer />
        <BookingDialog open={open} onClose={() => setOpen(false)} />
      </React.Fragment>
    );
  }

  window.FlowdeskCurrentPage = HomePage;
})();