// ============================================================
// BVS — Algility-style sections (minimal, airy, corporate)
// ============================================================

// small lucide-style line glyphs (1.6 stroke), recolor via currentColor
const GLYPH = {
  agent: 'M12 3a4 4 0 0 1 4 4v1a4 4 0 0 1-8 0V7a4 4 0 0 1 4-4Z M5 21a7 7 0 0 1 14 0',
  system: 'M4 5h16v6H4z M4 15h7v4H4z M14 15h6v4h-6z',
  dash: 'M4 4h7v7H4z M14 4h6v4h-6z M14 11h6v9h-6z M4 14h7v6H4z',
  crm: 'M3 7l9-4 9 4-9 4-9-4Z M3 12l9 4 9-4 M3 17l9 4 9-4',
  doc: 'M7 3h7l4 4v14H7z M14 3v4h4 M9 12h6 M9 16h6',
  shield: 'M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3Z M9 12l2 2 4-4',
  globe: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z M3 12h18 M12 3c3 3 3 15 0 18 M12 3c-3 3-3 15 0 18',
  bolt: 'M13 2 4 14h7l-1 8 9-12h-7z',
};
function Glyph({ d, size = 22, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: 'block' }}>
      <path d={d} />
    </svg>
  );
}

// ---- "What we do" — consulting process + capabilities (light) ----
function ServicesGrid() {
  const ref = useReveal();
  const steps = [
    ['Consult', 'We embed in your business and map exactly where time and revenue leak — then pinpoint how to connect into your stack so our systems plug straight in.'],
    ['Build', 'We architect and deploy AI-native systems around those exact gaps — agents, the Healthcare AI OS, dashboards and document intake, built to your workflow.'],
    ['Manage', 'We don’t hand off and disappear. We run, monitor and continuously optimize every system we ship as your business evolves.'],
  ];
  const caps = [
    { g: 'agent', t: 'AI & Voice Agents', d: 'WhatsApp, web, voice and email agents that qualify, schedule and route — with policy-aligned human hand-off.' },
    { g: 'shield', t: 'Healthcare AI OS', d: 'Our operating system for clinics — an AI receptionist, automated insurance verification and patient intake, engineered HIPAA-compliant end to end.' },
    { g: 'dash', t: 'Dashboards & Decision Engines', d: 'Real-time operational dashboards and decision engines built around how your team actually works.' },
    { g: 'crm', t: 'CRM & Automation', d: 'Centralize records, pipeline and reporting on GoHighLevel, HubSpot and more — with AR recovery built in.' },
    { g: 'doc', t: 'Document Intake AI', d: 'Auto-classification, compliance audit trail and full workflow tracking for high-volume document operations.' },
    { g: 'crm', t: 'Compliance-Ready Data', d: 'HIPAA-aligned, financial and government-grade data architecture with complete change history.', gi: 'shield' },
  ];
  return (
    <section ref={ref} style={{ background: '#fff', padding: '78px 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <Eyebrow>how we work</Eyebrow>
          <h2 className="h-disp" style={{ fontSize: 'clamp(30px,4vw,56px)', marginTop: 16, lineHeight: 1.06 }}>We find the problem, build the system, and run it.</h2>
          <p style={{ fontSize: 'clamp(16px,1.3vw,19px)', lineHeight: 1.55, color: 'rgba(10,10,10,0.55)', marginTop: 18, fontWeight: 500, maxWidth: 600 }}>
            We start as consultants — not vendors. We come into your business, find exactly what’s broken, and engineer the systems that fix it.
          </p>
        </div>
        {/* consulting process */}
        <div className="proc3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, marginTop: 56, borderTop: '2px solid var(--bvs-blue)' }}>
          {steps.map((s, i) => (
            <div key={s[0]} className="reveal proc3-cell" style={{ ...delay(i), padding: '30px 30px 36px', borderRight: i < 2 ? '1px solid var(--bvs-line)' : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 16 }}>
                <span className="mono" style={{ fontSize: 13, fontWeight: 700, color: BLUE }}>0{i + 1}</span>
                <span className="h-disp" style={{ fontSize: 'clamp(22px,2.2vw,30px)' }}>{s[0]}</span>
              </div>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'rgba(10,10,10,0.58)', margin: 0, fontWeight: 500 }}>{s[1]}</p>
            </div>
          ))}
        </div>
        {/* capabilities */}
        <div className="reveal" style={{ marginTop: 64 }}>
          <div className="microtag" style={{ marginBottom: 24 }}>systems we build</div>
          <div className="svc6" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, borderTop: '1px solid var(--bvs-line)', borderLeft: '1px solid var(--bvs-line)' }}>
            {caps.map((it, i) => (
              <div key={it.t} className="svc6-cell" style={{ padding: '30px 30px 34px', borderRight: '1px solid var(--bvs-line)', borderBottom: '1px solid var(--bvs-line)' }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: PAPER, display: 'grid', placeItems: 'center', color: BLUE, marginBottom: 20 }}>
                  <Glyph d={GLYPH[it.gi || it.g]} />
                </div>
                <div className="h-disp" style={{ fontSize: 19, marginBottom: 9 }}>{it.t}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.6, color: 'rgba(10,10,10,0.55)', fontWeight: 500 }}>{it.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Specialized AI Agents grid (dark) ----
const AGENT_CATS = {
  HEALTHCARE: ['#4ade5b', 'rgba(74,222,91,0.45)', 'rgba(74,222,91,0.10)'],
  SALES: ['#9b8cff', 'rgba(155,140,255,0.45)', 'rgba(155,140,255,0.10)'],
  FINANCE: ['#ff9d4d', 'rgba(255,157,77,0.45)', 'rgba(255,157,77,0.10)'],
  OPERATIONS: ['#6f97ff', 'rgba(111,151,255,0.45)', 'rgba(111,151,255,0.10)'],
  LOGISTICS: ['#2dd4bf', 'rgba(45,212,191,0.45)', 'rgba(45,212,191,0.10)'],
};
const AGENTS = [
  ['AI Voice Receptionist', 'OPERATIONS', 'Answers, qualifies and books inbound calls 24/7 — with policy-aligned human hand-off.'],
  ['Insurance Verification', 'HEALTHCARE', 'Queries insurers, extracts benefit PDFs and flags co-pays before the appointment.'],
  ['Patient Intake Agent', 'HEALTHCARE', 'Automates intake, classification and record updates straight into Dentrix / your EHR.'],
  ['WhatsApp Triage Agent', 'SALES', '24/7 message classification, smart routing and lead qualification across channels.'],
  ['AR Recovery Agent', 'FINANCE', 'Runs 30/60/90-day aging sequences that chase invoices and apply late-fee logic automatically.'],
  ['Document Intake AI', 'OPERATIONS', 'Auto-classifies high-volume documents with a full compliance audit trail.'],
  ['Dispatch Agent', 'LOGISTICS', 'Real-time load assignment, trip consolidation and driver routing for fleet ops.'],
  ['Reminder & Rebook Agent', 'SALES', 'Multi-channel SMS, email and voice reminders that cut no-shows and recover dormant leads.'],
];
function AgentsGrid() {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ background: '#05060f', padding: '78px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 50% at 50% 0%, rgba(0,23,219,0.22) 0%, rgba(0,0,0,0) 60%)', pointerEvents: 'none' }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <Eyebrow onBlue style={{ display: 'block', color: 'rgba(255,255,255,0.5)' }}>specialized ai agents</Eyebrow>
          <h2 className="h-disp" style={{ color: '#fff', fontSize: 'clamp(30px,4vw,56px)', marginTop: 16, lineHeight: 1.06 }}>Agents we build, working in your business.</h2>
          <p style={{ fontSize: 'clamp(15px,1.2vw,18px)', lineHeight: 1.55, color: 'rgba(255,255,255,0.55)', marginTop: 16, fontWeight: 500 }}>
            Purpose-built agents trained on your operation — answering, qualifying, scheduling and executing around the clock.
          </p>
        </div>
        <div className="agents-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
          {AGENTS.map(([name, cat, desc], i) => {
            const [fg, bd, bg] = AGENT_CATS[cat];
            return (
              <div key={name} className="reveal agent-card" style={{ ...delay(i % 4, 70), background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: 16, padding: '24px 22px 26px', transition: 'border-color .2s var(--ease), background .2s var(--ease)' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 14 }}>
                  <div className="h-disp" style={{ color: '#fff', fontSize: 19, lineHeight: 1.15 }}>{name}</div>
                  <span className="mono" style={{ flex: 'none', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', padding: '4px 8px', borderRadius: 6, color: fg, border: '1px solid ' + bd, background: bg }}>{cat}</span>
                </div>
                <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{desc}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---- "Why we're trusted" — 4 oversized stat blocks ----
function WhyTrusted() {
  const ref = useReveal();
  const stats = [
    ['5+', 'SYSTEMS SHIPPED', 'Custom AI systems delivered across five industries.'],
    ['24/7', 'AI COVERAGE', 'Always-on communication across voice, chat and WhatsApp.'],
    ['100%', 'COMPLIANCE-READY', 'HIPAA-aligned, audit-ready data architecture on every build.'],
    ['END-TO-END', 'CONSULT · BUILD · MANAGE', 'We consult, build, then manage every system — long after launch.'],
  ];
  return (
    <section ref={ref} style={{ background: PAPER, padding: '78px 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <Eyebrow>why we’re trusted</Eyebrow>
          <h2 className="h-disp" style={{ fontSize: 'clamp(30px,4vw,56px)', marginTop: 16, lineHeight: 1.06 }}>Systems built for sales, growth and execution.</h2>
        </div>
        <div className="why4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0, marginTop: 56 }}>
          {stats.map(([n, label, d], i) => (
            <div key={label} className="reveal" style={{ ...delay(i), padding: '0 28px', borderLeft: i === 0 ? 'none' : '1px solid var(--bvs-line)' }}>
              <div className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: 'rgba(10,10,10,0.42)', marginBottom: 16 }}>{label}</div>
              <div className="h-disp" style={{ fontSize: 'clamp(34px,3.4vw,52px)', color: BLUE, lineHeight: 0.9, whiteSpace: 'nowrap' }}>{n}</div>
              <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(10,10,10,0.55)', marginTop: 18, fontWeight: 500 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- "Connected to the tools your team already uses" ----
// Inline SVGs for marks Simple Icons no longer serves (trademark removals).
const LOGO_SVG = {
  openai: 'M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9a6.0651 6.0651 0 0 0-10.5648 2.0824 5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zM13.2599 22.43a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zM3.5994 18.3046a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6456zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z',
  twilio: 'M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm0 19.92c-4.368 0-7.92-3.552-7.92-7.92S7.632 4.08 12 4.08s7.92 3.552 7.92 7.92-3.552 7.92-7.92 7.92zm4.704-9.36c0 1.296-1.056 2.352-2.352 2.352s-2.352-1.056-2.352-2.352 1.056-2.352 2.352-2.352 2.352 1.056 2.352 2.352zm0 5.232c0 1.296-1.056 2.352-2.352 2.352s-2.352-1.056-2.352-2.352 1.056-2.352 2.352-2.352 2.352 1.056 2.352 2.352zm-5.232 0c0 1.296-1.056 2.352-2.352 2.352s-2.352-1.056-2.352-2.352 1.056-2.352 2.352-2.352 2.352 1.056 2.352 2.352zm0-5.232c0 1.296-1.056 2.352-2.352 2.352S6.768 11.856 6.768 10.56s1.056-2.352 2.352-2.352 2.352 1.056 2.352 2.352z',
  slack: 'M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z',
  google: 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z',
};
const TOOLS = [
  { name: 'OpenAI', slug: 'openai' },
  { name: 'Claude', slug: 'anthropic' },
  { name: 'WhatsApp', slug: 'whatsapp' },
  { name: 'HubSpot', slug: 'hubspot' },
  { name: 'Zapier', slug: 'zapier' },
  { name: 'Airtable', slug: 'airtable' },
  { name: 'Twilio', slug: 'twilio' },
  { name: 'Stripe', slug: 'stripe' },
  { name: 'Slack', slug: 'slack' },
  { name: 'Make', slug: 'make' },
  { name: 'Notion', slug: 'notion' },
  { name: 'Google', slug: 'google' },
];
function ToolMark({ t }) {
  if (LOGO_SVG[t.slug]) {
    return (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="#0a0a0a" aria-hidden="true" style={{ display: 'block', opacity: 0.82 }}>
        <path d={LOGO_SVG[t.slug]} />
      </svg>
    );
  }
  return <img src={`https://cdn.simpleicons.org/${t.slug}/0a0a0a`} alt="" width="22" height="22" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }} style={{ display: 'block', opacity: 0.82 }} />;
}
function Integrations() {
  const ref = useReveal();
  const run = [...TOOLS, ...TOOLS];
  return (
    <section ref={ref} style={{ background: '#fff', padding: '74px 0', overflow: 'hidden' }}>
      <div className="wrap reveal" style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto' }}>
        <Eyebrow style={{ display: 'block' }}>integrations</Eyebrow>
        <h2 className="h-disp" style={{ fontSize: 'clamp(28px,3.4vw,44px)', marginTop: 16, lineHeight: 1.12 }}>Connected to the tools your team already uses.</h2>
      </div>
      <div style={{ position: 'relative', marginTop: 56 }}>
        <div className="marquee" style={{ gap: 0 }}>
          {run.map((t, i) => (
            <div key={i} style={{ flex: 'none', display: 'flex', alignItems: 'center', gap: 12, padding: '0 22px', margin: '0 8px', height: 60, background: '#fff', border: '1px solid var(--bvs-line)', borderRadius: 14, boxShadow: '0 8px 22px -16px rgba(10,10,10,0.3)' }}>
              <ToolMark t={t} />
              <span className="mono" style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.62)', whiteSpace: 'nowrap' }}>{t.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Before vs After ----
function BeforeAfter() {
  const ref = useReveal();
  const before = [
    ['Manual, disconnected ops', 'Teams run on spreadsheets and inboxes — slow, error-prone and impossible to scale.'],
    ['Leads slip through', 'Missed calls and unanswered messages quietly cost revenue every single day.'],
    ['No visibility', 'Without dashboards, performance is a guess and decisions lag behind reality.'],
  ];
  const after = [
    ['AI-native systems', 'Workflows run themselves — qualifying, routing and executing around the clock.'],
    ['Every lead captured', '24/7 agents answer, qualify and book — nothing falls through the cracks.'],
    ['Live operational clarity', 'Real-time dashboards turn raw activity into decisions you can act on.'],
  ];
  const Col = ({ tone, label, head, sub, items }) => {
    const dark = tone === 'after';
    return (
      <div className="reveal" style={{ ...delay(dark ? 1 : 0), background: dark ? BLUE : '#fff', color: dark ? '#fff' : INK, border: dark ? 'none' : '1px solid var(--bvs-line)', borderRadius: 20, padding: 'clamp(30px,3vw,44px)' }}>
        <div className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,0.6)' : 'rgba(10,10,10,0.4)', marginBottom: 14 }}>{label}</div>
        <h3 className="h-disp" style={{ color: dark ? '#fff' : INK, fontSize: 'clamp(22px,2.2vw,30px)', marginBottom: 10 }}>{head}</h3>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: dark ? 'rgba(255,255,255,0.78)' : 'rgba(10,10,10,0.55)', fontWeight: 500, margin: '0 0 26px' }}>{sub}</p>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {items.map(([t, d], i) => (
            <div key={t} style={{ display: 'flex', gap: 14, padding: '18px 0', borderTop: '1px solid ' + (dark ? 'rgba(255,255,255,0.16)' : 'var(--bvs-line)') }}>
              <span style={{ flex: 'none', width: 20, height: 20, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 800, marginTop: 2, background: dark ? GREEN : 'rgba(10,10,10,0.06)', color: dark ? INK : 'rgba(10,10,10,0.4)' }}>{dark ? '✓' : '×'}</span>
              <div>
                <div style={{ fontWeight: 700, fontSize: 15.5 }}>{t}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.5, color: dark ? 'rgba(255,255,255,0.72)' : 'rgba(10,10,10,0.5)', marginTop: 4, fontWeight: 500 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };
  return (
    <section ref={ref} style={{ background: PAPER, padding: '78px 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 56px' }}>
          <Eyebrow style={{ display: 'block' }}>before vs after</Eyebrow>
          <h2 className="h-disp" style={{ fontSize: 'clamp(30px,4vw,56px)', marginTop: 16, lineHeight: 1.06 }}>What changes when systems run themselves.</h2>
        </div>
        <div className="ba-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
          <Col tone="before" label="Before working with us" head="Growth stalls on manual work" sub="Disconnected tools and human bottlenecks cap how far the team can scale." items={before} />
          <Col tone="after" label="After working with us" head="Execution becomes a system" sub="Automation brings speed, clarity and scale to every workflow." items={after} />
        </div>
        <div className="reveal" style={{ ...delay(2), marginTop: 22, background: INK, color: '#fff', borderRadius: 20, padding: 'clamp(30px,3.5vw,48px)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 120% at 88% 0%, rgba(0,23,219,0.5) 0%, rgba(0,0,0,0) 60%)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'center' }} className="comp-grid">
            <div>
              <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: GREEN, marginBottom: 18 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: GREEN }} />the bvs standard
              </div>
              <h3 className="h-disp" style={{ color: '#fff', fontSize: 'clamp(24px,3vw,42px)', lineHeight: 1.04 }}>We build to <span style={{ color: GREEN }}>every standard</span> you operate under.</h3>
              <p style={{ fontSize: 'clamp(15px,1.2vw,17px)', lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', marginTop: 16, fontWeight: 500, maxWidth: 540 }}>
                Compliance isn’t bolted on at the end — it’s engineered in from day one. Wherever you operate, we follow the guidelines and data-privacy laws of your country’s jurisdiction and your industry. Full audit trails, role-based access and complete change history are the baseline on <em>every</em> system we ship.
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
              {[['Data privacy', 'per country jurisdiction'], ['Audit', 'trails on everything'], ['Guidelines', 'industry standards'], ['Role-based', 'access control']].map(([n, l], i) => (
                <div key={l} style={{ padding: '18px 16px', borderTop: '1px solid rgba(255,255,255,0.16)', borderLeft: i % 2 === 1 ? '1px solid rgba(255,255,255,0.16)' : 'none' }}>
                  <div className="h-disp" style={{ color: '#fff', fontSize: 'clamp(20px,2vw,26px)' }}>{n}</div>
                  <div className="mono" style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 8, lineHeight: 1.4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- FAQ accordion ----
function FAQ() {
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  const qs = [
    ['What industries do you work in?', 'Home services, healthcare, dentistry, logistics and financial services — anywhere manual operations are capping growth.'],
    ['Are systems custom-built for each client?', 'Yes. Every system is architected around your exact workflows, tools and goals — never a template.'],
    ['Do we need an internal tech team?', 'No. We handle discovery, build, deployment and ongoing optimization end-to-end.'],
    ['How long does a build take?', 'Most engagements run on a structured three-phase roadmap, with first systems live within weeks.'],
    ['Can you integrate with our current tools?', 'We connect to the stack you already run — CRMs, WhatsApp, payment and records systems and more.'],
    ['What happens after launch?', 'We keep optimizing — systems are managed, improved and expanded as your business evolves.'],
  ];
  return (
    <section ref={ref} style={{ background: '#fff', padding: '78px 0' }}>
      <div className="wrap faq-grid" style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 56, alignItems: 'start' }}>
        <div className="reveal sticky-col">
          <Eyebrow>faq</Eyebrow>
          <h2 className="h-disp" style={{ fontSize: 'clamp(28px,3.4vw,48px)', marginTop: 16, lineHeight: 1.08 }}>Answers to your questions.</h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(10,10,10,0.55)', marginTop: 18, fontWeight: 500, maxWidth: 320 }}>Still need clarity? Book a strategy call and we’ll map it out with you.</p>
        </div>
        <div className="reveal" style={delay(1)}>
          {qs.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={q} style={{ borderTop: '1px solid var(--bvs-line)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', background: 'transparent', border: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, padding: '24px 0', textAlign: 'left' }}>
                  <span className="h-disp" style={{ fontSize: 'clamp(17px,1.5vw,21px)', color: isOpen ? BLUE : INK, transition: 'color .2s var(--ease)' }}>{q}</span>
                  <span style={{ flex: 'none', width: 26, height: 26, position: 'relative', color: isOpen ? BLUE : 'rgba(10,10,10,0.4)' }}>
                    <span style={{ position: 'absolute', top: '50%', left: '50%', width: 13, height: 1.6, background: 'currentColor', transform: 'translate(-50%,-50%)' }} />
                    <span style={{ position: 'absolute', top: '50%', left: '50%', width: 13, height: 1.6, background: 'currentColor', transform: `translate(-50%,-50%) rotate(${isOpen ? 0 : 90}deg)`, transition: 'transform .26s var(--ease)' }} />
                  </span>
                </button>
                <div style={{ overflow: 'hidden', maxHeight: isOpen ? 200 : 0, transition: 'max-height .34s var(--ease)' }}>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(10,10,10,0.58)', margin: '0 0 24px', fontWeight: 500, maxWidth: 560 }}>{a}</p>
                </div>
              </div>
            );
          })}
          <div style={{ borderTop: '1px solid var(--bvs-line)' }} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesGrid, AgentsGrid, WhyTrusted, Integrations, BeforeAfter, FAQ });