/* Flowdesk — Case Studies page */
(function () {
  const { Header, Footer, BookingDialog, icons, wrap, eyebrow } = window.FS;
  const { ArrowRight, Gauge, Clock } = icons;
  const DS = window.FlowdeskDesignSystem_d54181;
  const { Button, Card, Badge } = DS;

  const CASES = [
    {
      client: 'Tāhuna Foods', initials: 'TF',
      industry: 'Food manufacturing · Auckland',
      challenge: 'Supplier onboarding took 3 working days — mostly manual document collection and approval routing across 4 people.',
      solution: 'Automated supplier intake form with conditional logic, document validation, Slack notifications and a digital approval workflow with full audit trail.',
      results: [
        { metric: '20 min', label: 'New onboarding time (was 3 days)' },
        { metric: '0', label: 'Manual data-entry steps remaining' },
        { metric: '3 hrs', label: 'Saved per supplier, per team member' },
      ],
      quote: '"Flowdesk paid for itself in the first month."',
      author: 'Aria Tane, Operations Lead',
    },
    {
      client: 'Riverside Logistics', initials: 'RL',
      industry: 'Freight & logistics · Christchurch',
      challenge: '8+ hours per week reconciling carrier invoices against purchase orders across two separate systems — all done manually.',
      solution: 'AI-powered invoice matching pipeline: reads PDFs, extracts line items, reconciles against the PO database automatically, and flags exceptions for human review.',
      results: [
        { metric: '15 min', label: 'Weekly reconciliation time (was 8+ hrs)' },
        { metric: '99.1%', label: 'Automatic match accuracy' },
        { metric: '$24k', label: 'Estimated annual saving (NZD)' },
      ],
      quote: '"We basically got a full-time employee back."',
      author: 'Dean Hooper, Finance Manager',
    },
    {
      client: 'Southbridge Property', initials: 'SP',
      industry: 'Real estate · Wellington',
      challenge: 'Enquiries came in through 4 channels (website, email, Trade Me, Facebook). CRM updates were manual, leads got lost, and follow-up was inconsistent.',
      solution: 'Centralised n8n pipeline pulling all enquiries into one CRM queue, with auto-tagging, lead scoring and automated first-response emails based on property type.',
      results: [
        { metric: '100%', label: 'Lead capture rate (up from ~70%)' },
        { metric: '< 2 min', label: 'Average first-response time (was hours)' },
        { metric: '0', label: 'Manual data entry steps for agents' },
      ],
      quote: '"Agents now start the day with warm leads, not admin."',
      author: 'Claire Sutherland, Operations',
    },
    {
      client: 'Manaaki Health', initials: 'MH',
      industry: 'Healthcare · Auckland',
      challenge: 'Phone-based patient intake averaged 15+ minutes per call, put pressure on front desk staff, and meant zero after-hours booking capability.',
      solution: 'Automated online intake form with patient history collection, eligibility checks, appointment booking and EHR pre-population — available 24/7.',
      results: [
        { metric: '4 min', label: 'Average intake time (was 15+ min)' },
        { metric: '24/7', label: 'Booking availability (was business hours only)' },
        { metric: '38%', label: 'Increase in new patient bookings' },
      ],
      quote: '"Patients come in already set up. Front desk can focus on people, not paperwork."',
      author: 'Ngaio Te Aho, Practice Manager',
    },
  ];

  function CasesHero() {
    return (
      <section style={{ ...wrap, paddingTop: 88, paddingBottom: 64 }}>
        <span style={eyebrow}>Case studies</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: 640 }}>
          Real results from real NZ businesses.
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.25rem', lineHeight: 1.6, color: 'var(--text-muted)', margin: '22px 0 0', maxWidth: 520 }}>
          Every project below started with a free 30-minute call and a clear bottleneck. Here's what happened next.
        </p>
      </section>
    );
  }

  function CaseCard({ c, i }) {
    return (
      <div style={{ borderTop: '1px solid var(--border)', paddingTop: 64, paddingBottom: 64 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '64px', alignItems: 'start' }}>
          <div style={{ order: i % 2 === 0 ? 0 : 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
              <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--brand-subtle)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '0.875rem' }}>{c.initials}</div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.125rem', fontWeight: 600, color: 'var(--text-strong)' }}>{c.client}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: 2 }}>{c.industry}</div>
              </div>
            </div>
            <div style={{ marginBottom: 20 }}>
              <div style={eyebrow}>The challenge</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', lineHeight: 1.7, color: 'var(--text-body)', margin: '10px 0 0' }}>{c.challenge}</p>
            </div>
            <div>
              <div style={eyebrow}>What we built</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', lineHeight: 1.7, color: 'var(--text-body)', margin: '10px 0 0' }}>{c.solution}</p>
            </div>
            {c.quote && (
              <div style={{ marginTop: 24, padding: '18px 22px', borderLeft: '3px solid var(--brand)', background: 'var(--brand-subtle)', borderRadius: '0 10px 10px 0' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '0.9375rem', fontWeight: 500, color: 'var(--text-strong)', fontStyle: 'italic', lineHeight: 1.55 }}>{c.quote}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: 8 }}>— {c.author}</div>
              </div>
            )}
          </div>
          <div style={{ order: i % 2 === 0 ? 1 : 0, display: 'flex', flexDirection: 'column', gap: '14px' }}>
            <div style={eyebrow}>Results</div>
            {c.results.map((r) => (
              <Card key={r.label} padding="md" style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: '2.25rem', fontWeight: 700, color: 'var(--brand)', letterSpacing: '-0.02em', minWidth: 96, flexShrink: 0 }}>{r.metric}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--text-muted)', lineHeight: 1.55 }}>{r.label}</div>
              </Card>
            ))}
          </div>
        </div>
      </div>
    );
  }

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

  function CaseStudiesPage() {
    const [open, setOpen] = React.useState(false);
    const book = () => setOpen(true);
    return (
      <React.Fragment>
        <Header onBook={book} />
        <main>
          <CasesHero />
          <section style={wrap}>
            {CASES.map((c, i) => <CaseCard key={c.client} c={c} i={i} />)}
          </section>
          <CasesCTA onBook={book} />
        </main>
        <Footer />
        <BookingDialog open={open} onClose={() => setOpen(false)} />
      </React.Fragment>
    );
  }

  window.FlowdeskCurrentPage = CaseStudiesPage;
})();