// ════════════════════════════════════════════════════════════════════
// NexFlow · Sections · marquee · market signal · services · HIW ·
//                       terminal · case studies
// ════════════════════════════════════════════════════════════════════
// Fixed by Opus 4.7 — 2026-05-29 — P1-1: NF_Services now reads location.hash
//   so the Nav dropdown, footer links, and services.html diagram nodes
//   (/services.html#n8n …#report) resolve to the right service tab.
// ════════════════════════════════════════════════════════════════════
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// Localise our own tagged list prices ("from A$2,400", "$50 USD") in copy
// to the visitor's currency. Falls back to the original string if
// engine/currency.js is absent. Bare example figures are never touched.
const nfLoc = (s) => (typeof window !== 'undefined' && window.nfLocalizePrice) ? window.nfLocalizePrice(s) : s;

// ── Marquee ────────────────────────────────────────────────────────
function Marquee() {
  const phrases = [
    'Stop doing it manually',
    'Audit-grade by default',
    'You own the code',
    '40+ hours saved per client / week',
    '2-week ship cycles',
    'No lock-in. Ever.',
    'Built on n8n · powered by AI',
  ];
  const items = [...phrases, ...phrases];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {items.map((p, i) => (
          <div key={i} className="marquee-item">
            <span style={{ color: i % 2 ? 'var(--fg-2)' : 'var(--fg-0)' }}>{p}</span>
            <span className="sep"/>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── What we actually do · plain-language explainer (restored v7) ───
// Sits immediately after the hero so a first-time visitor gets a clear,
// jargon-free statement of the offer before anything else. Solid paper,
// high contrast, scannable — no animation behind the text.
function WhatWeDo() {
  const jobs = [
    {
      k: 'Answer every call & message',
      d: 'An AI receptionist picks up 24/7, books the job straight into your calendar, and texts the customer back — before they ring the next tradie on the list.',
      href: '/services/ai-receptionist/',
    },
    {
      k: 'Chase every lead & quote',
      d: 'Every enquiry gets followed up, scored, and logged in your CRM automatically — so nothing slips through the cracks on a flat-out week.',
      href: '/services/crm-automation/',
    },
    {
      k: 'Do the paperwork',
      d: 'Invoices, receipts and data entry get read and filed straight into Xero or MYOB. No more sitting down to admin at 10pm.',
      href: '/services/invoice-processing/',
    },
  ];
  return (
    <section className="section tight" id="what-we-do" data-screen-label="What we do">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 760, marginBottom: 40 }}>
          <div className="eyebrow">WHAT WE ACTUALLY DO</div>
          <h2 className="t-h2" style={{ marginTop: 16, marginBottom: 16 }}>
            In plain English.
          </h2>
          <p className="t-lead">
            NexFlow isn&rsquo;t another app you have to learn. We set up AI that quietly handles the
            repetitive office jobs eating your day — then we hand it over and <em>you own it</em>.
          </p>
        </div>

        <div className="grid grid-3 reveal-stagger what-we-do-grid">
          {jobs.map((j, i) => (
            <a key={i} className="card what-do-card" href={j.href}>
              <span className="what-do-num t-mono">0{i + 1}</span>
              <h3 className="t-h4 what-do-k">{j.k}</h3>
              <p className="t-body">{j.d}</p>
              <span className="what-do-go">See how <span className="arr" aria-hidden="true">→</span></span>
            </a>
          ))}
        </div>

        <p className="t-small reveal what-do-foot">
          Built for you in about two weeks, on tools you keep. No lock-in, no jargon, no monthly
          software you&rsquo;ll never use.
        </p>
      </div>
    </section>
  );
}

// ── Market signal (PwC · McKinsey · Capgemini · Gartner) ───────────
function TrustStats() {
  return (
    <section className="section tight" id="market" data-screen-label="Market signal">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 820, marginBottom: 36 }}>
          <div className="eyebrow"><span className="dot" aria-hidden="true"></span>MARKET SIGNAL · 2025–2026</div>
          <h2 className="t-h2" style={{ marginTop: 14, marginBottom: 14 }}>
            The AI automation gap is widening. <em>The cost of waiting is now measurable.</em>
          </h2>
          <p className="t-lead">
            PwC, Capgemini, and McKinsey have stopped framing AI automation as an experiment. They now
            publish hard numbers on the value being captured — and the value being left on the table by
            businesses still hand-keying data.
          </p>
        </div>

        <div className="stat-grid reveal-stagger">
          {(window.NF_DATA?.MARKET_STATS || []).map((s) => (
            <div key={s.id}>
              <div className="val">{s.value}</div>
              {/* Bold any embedded numeric / metric token by splitting on the
                  match and wrapping it in a <strong>. The previous version
                  used dangerouslySetInnerHTML — safe today (label is from
                  the committed catalogue) but a stored-XSS sink if anything
                  ever lets users edit the source. React-element form is
                  XSS-safe by construction. */}
              <div className="lbl">{
                (function () {
                  var label = s.label || '';
                  // Split with a capturing group so the matches appear in the
                  // resulting array (at odd indices). Using a non-global regex
                  // because String.split's behaviour with /g flag is the same
                  // for this use case, and stateless regex is easier to reason
                  // about than re-using a /g instance whose lastIndex advances.
                  var parts = label.split(/(\d+%|top \d+%|\d+ slots|\d+\s?h)/);
                  var match = /^(\d+%|top \d+%|\d+ slots|\d+\s?h)$/;
                  return parts.map(function (p, i) {
                    return match.test(p) ? React.createElement('strong', { key: i }, p) : p;
                  });
                })()
              }</div>
              <div className="src">{s.sourceShort || s.source}</div>
            </div>
          ))}
        </div>

        <div className="grid grid-3 reveal-stagger" style={{ marginTop: 24 }}>
          <div className="card">
            <div className="eyebrow">PWC — THE LEADERS' EDGE</div>
            <p className="t-body" style={{ marginTop: 10 }}>
              Companies with the best AI-driven financial outcomes are <strong>2.8× more likely</strong> to have
              increased decisions made without human intervention, and <strong>twice as likely</strong> to redesign
              workflows around AI rather than bolt it on.
            </p>
            <div className="cite">SOURCE: <a href="https://www.pwc.com/gx/en/news-room/press-releases/2026/pwc-2026-ai-performance-study.html" target="_blank" rel="noopener">PwC 2026 AI Performance Study</a></div>
          </div>
          <div className="card">
            <div className="eyebrow">CAPGEMINI — TRUST IS THE GATE</div>
            <p className="t-body" style={{ marginTop: 10 }}>
              Only <strong>2%</strong> of organisations have deployed AI agents at scale; another 12% at partial
              scale. The blocker is rarely the model — it is governance, integration, and audit-grade ops.
            </p>
            <div className="cite">SOURCE: <a href="https://www.capgemini.com/insights/research-library/ai-agents/" target="_blank" rel="noopener">Capgemini Rise of Agentic AI 2025</a></div>
          </div>
          <div className="card">
            <div className="eyebrow">McKINSEY — PRODUCTIVITY DELTA</div>
            <p className="t-body" style={{ marginTop: 10 }}>
              Companies can boost productivity by <strong>20–25%</strong> by automating routine tasks. The
              business case is no longer about whether — it is about which workflows go first, and how to build
              them so they survive audit.
            </p>
            <div className="cite">SOURCE: McKinsey Global Institute · workflow automation research</div>
          </div>
        </div>

        <p className="t-small reveal" style={{ marginTop: 28, maxWidth: 820 }}>
          <strong style={{ color: 'var(--fg-0)' }}>What this means for an SMB.</strong> The companies pulling ahead are
          not bigger or better funded — they are simply operationalising AI on real workflows. NexFlow is the
          implementation layer between research-grade thinking and your inbox at 6pm.
        </p>
      </div>
    </section>
  );
}

// ── Services tab panel ────────────────────────────────────────────
// Each service maps to a 3D scene mode so the background animation
// matches the service the user is browsing. Tab clicks set the mode
// directly; auto-cycling honour the same map.
const SERVICE_SCENE_MODE = {
  n8n:    'workflow',
  agents: 'agents',
  crm:    'workflow',
  chat:   'chatbot',
  doc:    'document',
  report: 'dashboard',
};
function Services() {
  const data = window.NF_DATA;
  const [pick, setPick] = useStateS(data.SERVICES[0].id);
  const [manual, setManual] = useStateS(false);
  const [inView, setInView] = useStateS(false);
  const cur = data.SERVICES.find(s => s.id === pick) || data.SERVICES[0];
  const sectionRef = useRefS(null);

  // Drive the 3D background to match the active service
  useEffectS(() => {
    const mode = SERVICE_SCENE_MODE[pick] || 'workflow';
    if (window.NexFlowScene && window.NexFlowScene.setMode) {
      window.NexFlowScene.setMode(mode);
    }
  }, [pick]);

  // Track in-view so we only cycle when the user is here
  useEffectS(() => {
    if (!sectionRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => setInView(e.intersectionRatio > 0.25));
    }, { threshold: [0, 0.25, 0.5, 0.75] });
    io.observe(sectionRef.current);
    return () => io.disconnect();
  }, []);

  // Auto-cycle through service tabs whenever the section is in view and
  // the user hasn't manually chosen — so the background animations
  // rotate "without selecting" the way the user wants.
  useEffectS(() => {
    if (manual || !inView) return;
    const ids = data.SERVICES.map(s => s.id);
    const t = setInterval(() => {
      setPick(p => ids[(ids.indexOf(p) + 1) % ids.length]);
    }, 5500);
    return () => clearInterval(t);
  }, [manual, inView]);

  // Deep-link support (P1-1). The Nav dropdown, the footer service list,
  // and the services.html diagram nodes all link to /services.html#<id>
  // (n8n · agents · crm · chat · doc · report). Those tabs are React state,
  // not DOM anchors, so the browser cannot scroll to them natively. Read
  // the hash on mount and on hashchange: if it names a real service, select
  // that tab, stop the auto-cycle, and bring the panel into view.
  useEffectS(() => {
    const ids = data.SERVICES.map(s => s.id);
    function applyHash() {
      const id = (window.location.hash || '').replace(/^#/, '');
      if (!id || ids.indexOf(id) === -1) return;
      setManual(true);
      setPick(id);
      // Defer the scroll so the tab content has reconciled and layout has
      // settled before we measure the section's position.
      requestAnimationFrame(() => {
        if (sectionRef.current) sectionRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
      });
    }
    applyHash();
    window.addEventListener('hashchange', applyHash);
    return () => window.removeEventListener('hashchange', applyHash);
  }, []);

  const handlePick = (id) => { setManual(true); setPick(id); };
  const openDemo = () => {
    if (window.NF_ServiceDemos && window.NF_ServiceDemos.openDemo) {
      window.NF_ServiceDemos.openDemo(pick);
    }
  };

  return (
    <section ref={sectionRef} className="section" id="services" data-screen-label="Services" data-scene-mode-controlled="services">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 36 }}>
          <div className="eyebrow"><span className="dot" aria-hidden="true"></span>SEE IT WORKING</div>
          <h2 className="t-h2" style={{ marginTop: 14 }}>
            Want to see it actually work? <em>Here's a live demo of every build.</em>
          </h2>
        </div>

        <div className="svc reveal">
          <div className="svc-list" role="tablist" aria-label="Services">
            {data.SERVICES.map((s) => (
              <button key={s.id} role="tab"
                aria-selected={pick === s.id}
                tabIndex={pick === s.id ? 0 : -1}
                onClick={() => handlePick(s.id)}>
                <span>{s.title}</span>
                <span className="svc-num" aria-hidden="true">{s.id === pick ? '→' : '·'}</span>
              </button>
            ))}
          </div>
          <div className="svc-detail">
            <div className="eyebrow" style={{ marginBottom: 10 }}>{cur.eyebrow}</div>
            <h3 className="t-h2" style={{ marginBottom: 14 }}>{cur.h}</h3>
            <p className="t-body" style={{ marginBottom: 22, color: 'var(--fg-1)' }}>{cur.body}</p>
            <div className="grid grid-3" style={{ marginBottom: 24, gap: 14 }}>
              {cur.facts.map(([k, v]) => (
                <div key={k + v} className="card flat" style={{ padding: '14px 16px' }}>
                  <div className="t-mono" style={{ color: 'var(--fg-2)' }}>{v.toUpperCase()}</div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginTop: 4 }}>{nfLoc(k)}</div>
                </div>
              ))}
            </div>
            <div className="row" style={{ flexWrap: 'wrap', gap: 10 }}>
              <button type="button" className="demo-trigger" onClick={openDemo}>
                <span className="dot" aria-hidden="true"/>
                See live demo <span className="arr" aria-hidden="true">→</span>
              </button>
              <a href="#pricing" className="btn">See pricing <span className="arr" aria-hidden="true">→</span></a>
              <a href="#contact" className="btn ghost">Book a 15-min map</a>
            </div>
            {/* Removed the visible "KEYWORDS:" strip — visible keyword lists read
                as keyword-stuffing to Google and looked out of place to users.
                Machine-readable keyword signals already live in the services.html
                <meta keywords> and the per-service Service schema. */}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── How it works · scroll-driven sticky story ─────────────────────
function HowItWorks() {
  const data = window.NF_DATA;
  const [active, setActive] = useStateS(0);
  const rootRef = useRefS(null);

  useEffectS(() => {
    if (!rootRef.current) return;
    const stepEls = rootRef.current.querySelectorAll('[data-hiw-step]');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const idx = parseInt(e.target.getAttribute('data-hiw-step'));
          setActive(idx);
        }
      });
    }, { rootMargin: '-40% 0px -40% 0px', threshold: 0 });
    stepEls.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const cur = data.HIW_STEPS[active];

  return (
    <section className="section" id="how" data-screen-label="How it works" ref={rootRef}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 680, marginBottom: 48 }}>
          <div className="eyebrow"><span className="dot" aria-hidden="true"></span>HOW IT WORKS</div>
          <h2 className="t-h2" style={{ marginTop: 14 }}>
            From "we should automate this" to <em>running in production</em> in about two weeks.
          </h2>
        </div>

        <div className="hiw">
          <div className="pin">
            <div className="t-mono" style={{ color: 'var(--fg-2)', marginBottom: 8 }}>STEP {cur.n} / 04</div>
            <h3 className="t-h1" style={{ marginBottom: 14 }}><em>{cur.word}</em></h3>
            <p className="t-body" style={{ marginBottom: 18, maxWidth: '42ch' }}>{cur.title}</p>
            <div className="row"><span className="tag">{nfLoc(cur.cost)}</span></div>
            <div className="hiw-progress">
              {data.HIW_STEPS.map((s, i) => (
                <div key={s.n} className={i <= active ? 'on' : ''}/>
              ))}
            </div>
          </div>
          <div>
            {data.HIW_STEPS.map((s, i) => (
              <div key={s.n} className="hiw-step" data-hiw-step={i}>
                <div className="t-mono" style={{ color: 'var(--fg-2)', marginBottom: 4 }}>{s.n} · {s.word.toUpperCase()}</div>
                <h4 className="t-h3" style={{ marginBottom: 10 }}>{s.title}</h4>
                <p className="t-body" style={{ maxWidth: '56ch' }}>{s.body}</p>
                <div className="term" style={{ marginTop: 18 }}>
                  {s.receipt.map((line, j) => (
                    <div key={j}><span className="ts">[{i+1}.{j+1}]</span>{' '}<span className={j === s.receipt.length - 1 ? 'ok' : ''}>{line}</span></div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Live event terminal ───────────────────────────────────────────
function LiveTerminal() {
  const sample = [
    'real-estate-pipeline · sophie.k → ghl ✓',
    'shopify-restock · sku #4711 → klaviyo ✓',
    'invoice-ocr · pdf #2847 → xero ✓',
    'medical-noshow · appt #8821 → sms.refill ✓',
    'support-triage · ticket #122 → assigned ✓',
    'hubspot-enrich · contact #91 → ✓',
    'legal-intake · matter CL-188 → clio ✓',
    'xero-reconcile · 14 txn → matched ✓',
    '► real-estate-pipeline running…',
  ];
  const [lines, setLines] = useStateS(sample);
  const [count, setCount] = useStateS(2847);

  useEffectS(() => {
    const t = setInterval(() => {
      setLines(prev => { const next = [...prev]; const first = next.shift(); next.push(first); return next; });
      setCount(c => c + Math.floor(Math.random() * 3) + 1);
    }, 2400);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="section bg-ink" data-screen-label="Live event stream">
      <div className="wrap">
        <div className="grid grid-2" style={{ alignItems: 'center' }}>
          <div className="reveal">
            <div className="eyebrow on-dark"><span className="dot" aria-hidden="true"></span>LIVE EVENT STREAM · ANONYMISED</div>
            <h2 className="t-h1" style={{ marginTop: 18, marginBottom: 18, color: '#fff' }}>
              <em>Nothing</em> happens in the dark.
            </h2>
            <p className="t-lead" style={{ color: 'var(--fg-inv-1)' }}>
              Every workflow we ship logs every step it takes — timestamped, replayable, exportable. Auditors can
              follow the trail. So can you, your CFO, and your insurer. The stream on the right is a live,
              anonymised sample of automations running for NexFlow clients right now.
            </p>
            <div className="row" style={{ marginTop: 24, gap: 36 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 48, lineHeight: 1, color: '#fff' }} className="tick">{count.toLocaleString()}</div>
                <div className="t-mono" style={{ color: 'var(--fg-inv-2)', marginTop: 6 }}>EVENTS · LAST HOUR</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 48, lineHeight: 1, color: '#fff' }}>99.94%</div>
                <div className="t-mono" style={{ color: 'var(--fg-inv-2)', marginTop: 6 }}>SUCCESS · 30 DAYS</div>
              </div>
            </div>
          </div>
          <div className="reveal">
            <div className="term" style={{ background: '#06070B', minHeight: 280 }}>
              <div className="t-mono dim" style={{ marginBottom: 10 }}>▸ NEXFLOW · LIVE · SCRUBBED OF PII</div>
              {lines.map((l, i) => (
                <div key={i} style={{ opacity: 1 - i * 0.06, transition: 'opacity .8s' }}>
                  <span className="ts">[14:{Math.abs(13 - i).toString().padStart(2, '0')}:{(i * 13 + 11).toString().padStart(2,'0')}]</span>{' '}
                  {l.startsWith('►') ? <span className="now">{l}</span> : l}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Case studies ──────────────────────────────────────────────────
function CaseStudies() {
  const data = window.NF_DATA;
  return (
    <section className="section" id="case-studies" data-screen-label="Case studies">
      <div className="wrap">
        <div className="row row-between reveal" style={{ alignItems: 'flex-end', marginBottom: 36 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="eyebrow"><span className="dot" aria-hidden="true"></span>CASE STUDIES</div>
            <h2 className="t-h2" style={{ marginTop: 14 }}>Three workflows we have <em>shipped multiple times</em>.</h2>
          </div>
        </div>
        <div className="grid grid-3 reveal-stagger">
          {data.CASES.map((c, i) => (
            <article key={i} className="card" style={{ display: 'flex', flexDirection: 'column' }}>
              <div className="eyebrow">{c.industry}</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(36px,4vw,52px)', letterSpacing: '-.02em', margin: '10px 0 6px' }}>{c.metric}</div>
              <div className="t-mono" style={{ color: 'var(--fg-2)', marginBottom: 14 }}>{c.metricLbl.toUpperCase()}</div>
              <h3 className="t-h3" style={{ marginBottom: 10 }}>{c.title}</h3>
              <p className="t-body" style={{ marginBottom: 18 }}>{c.body}</p>
              <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px dashed var(--rule)' }}>
                <div className="t-mono" style={{ color: 'var(--fg-2)', marginBottom: 8 }}>RECEIPTS</div>
                <div className="row" style={{ gap: 6 }}>
                  {c.receipt.map(r => <span key={r} className="tag">{r}</span>)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Problems we solve + plain-English "what we do" grid (v9) ───────
// Customer-language entry point: lead with the owner's pain in their
// own words, then point at the service that fixes it. Six cards below
// link to the individual service pages. Mirrors the static snapshot in
// index.html so crawlers and no-JS visitors see the same copy.
function SvcIcon({ name }) {
  const p = { width: 26, height: 26, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
  switch (name) {
    case 'phone':   return (<svg {...p}><path d="M5 4h3l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>);
    case 'crm':     return (<svg {...p}><path d="M3 12a9 9 0 1 1 9 9"/><path d="M3 12h6l2-3 2 6 2-3h2"/></svg>);
    case 'invoice': return (<svg {...p}><path d="M6 2h9l4 4v16H6z"/><path d="M9 8h6M9 12h6M9 16h4"/></svg>);
    case 'chat':    return (<svg {...p}><path d="M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12z"/><path d="M8.5 12h.01M12 12h.01M15.5 12h.01"/></svg>);
    case 'doc':     return (<svg {...p}><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 14l1.5 1.5L14 13"/></svg>);
    case 'flow':    return (<svg {...p}><rect x="3" y="4" width="6" height="5" rx="1"/><rect x="15" y="15" width="6" height="5" rx="1"/><path d="M9 6h4a3 3 0 0 1 3 3v6"/></svg>);
    default:        return (<svg {...p}><circle cx="12" cy="12" r="9"/></svg>);
  }
}

function Problems() {
  const data = window.NF_DATA;
  const problems = data?.PROBLEMS || [];
  const pages = data?.SERVICE_PAGES || [];
  return (
    <section className="section" id="problems" data-screen-label="Problems we solve">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 760, marginBottom: 36 }}>
          <div className="eyebrow"><span className="dot" aria-hidden="true"></span>SOUND FAMILIAR?</div>
          <h2 className="t-h2" style={{ marginTop: 14, marginBottom: 14 }}>
            You started a business to do the work you love. <em>Not the busywork.</em>
          </h2>
          <p className="t-lead">
            You're great at the job — you're just flat out. Here are the things quietly costing you
            time and money every week, and what we put in place so they stop.
          </p>
        </div>

        <div className="prob-grid reveal-stagger">
          {problems.map((p, i) => (
            <div key={i} className="prob-card">
              <p className="prob-pain">&ldquo;{p.pain}&rdquo;</p>
              <p className="prob-fix">{p.fix}</p>
              <a className="prob-link" href={p.href}>{p.cta} <span className="arr" aria-hidden="true">→</span></a>
            </div>
          ))}
        </div>

        <div className="reveal" style={{ maxWidth: 760, margin: '64px 0 28px' }}>
          <div className="eyebrow"><span className="dot" aria-hidden="true"></span>WHAT WE DO FOR YOU</div>
          <h2 className="t-h2" style={{ marginTop: 14 }}>
            Six ways NexFlow takes work off your plate.
          </h2>
        </div>
        <div className="svc-page-grid reveal-stagger">
          {pages.map((s) => (
            <a key={s.slug} className="svc-page-card" href={'/services/' + s.slug + '/'}>
              <span className="svc-page-ico" aria-hidden="true"><SvcIcon name={s.icon}/></span>
              <span className="svc-page-tag">{s.tag}</span>
              <h3 className="svc-page-title">{s.title}</h3>
              <p className="svc-page-desc">{s.desc}</p>
              <span className="svc-page-more">Learn more <span className="arr" aria-hidden="true">→</span></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.NF_Marquee = Marquee;
window.NF_WhatWeDo = WhatWeDo;
window.NF_TrustStats = TrustStats;
window.NF_Services = Services;
window.NF_HowItWorks = HowItWorks;
window.NF_LiveTerminal = LiveTerminal;
window.NF_CaseStudies = CaseStudies;
window.NF_Problems = Problems;