/* Business landing — all sections in one file */

function BusinessHero() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
      <div className="m-container" style={{
        display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'center',
      }}>
        <div className="m-reveal">
          <div className="m-eyebrow" style={{ marginBottom: 18 }}>KwiikPay Business</div>
          <h1 style={{
            font: '500 clamp(48px, 5.6vw, 76px)/1.04 var(--font-sans)',
            letterSpacing: '-0.032em', margin: 0,
          }}>
            Treasury without<br />
            <span style={{ color: 'var(--m-fg-2)' }}>the banks.</span>
          </h1>
          <p style={{
            font: '400 18px/1.55 var(--font-sans)',
            color: 'var(--m-fg-2)', margin: '24px 0 0', maxWidth: 540,
          }}>
            Multi-currency vIBANs, cross-border payouts at scale, and an API
            your engineers will actually like. Built for fintechs, marketplaces and modern finance teams.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="../signup/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn m-btn-primary" style={{ padding: '14px 22px' }}>
                Open business account
              </button>
            </a>
            <a href="../otc-talk/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn" style={{
                padding: '14px 22px', background: 'transparent',
                border: '1px solid var(--m-border)', color: 'var(--m-fg)',
              }}>
                Book a demo
              </button>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 18, marginTop: 36 }}>
            {['Stripe', 'Modern Treasury', 'Vault', 'Lago', 'Sequoia portfolio'].map((c) => (
              <span key={c} style={{
                font: '500 12px/1 var(--font-sans)',
                color: 'var(--m-fg-3)', letterSpacing: '-0.005em',
                opacity: 0.7,
              }}>{c}</span>
            ))}
          </div>
        </div>

        <DashboardMock />
      </div>
    </section>
  );
}

function DashboardMock() {
  const [tab, setTab] = React.useState('balances');
  const [tick, setTick] = React.useState(0);
  const [volume, setVolume] = React.useState(284731);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      setTick((t) => t + 1);
      setVolume((v) => v + Math.round((Math.random() - 0.3) * 240));
    }, 1500);
    return () => clearInterval(id);
  }, [paused]);

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        background: 'var(--m-fg)', borderRadius: 20, padding: 4,
        boxShadow: '0 40px 80px -20px rgba(20,15,49,0.28), 0 8px 24px rgba(20,15,49,0.10)',
        position: 'relative',
      }}>
      <div style={{
        background: 'var(--m-bg)', borderRadius: 16, overflow: 'hidden',
      }}>
        {/* Window chrome */}
        <div style={{
          padding: '12px 16px',
          display: 'flex', alignItems: 'center', gap: 8,
          borderBottom: '1px solid var(--m-border)',
        }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FF5F57' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FEBC2E' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28CA42' }} />
          <span style={{
            margin: '0 auto', fontSize: 11, color: 'var(--m-fg-3)',
            fontFamily: 'IBM Plex Mono, monospace',
          }}>app.kwiikpay.com/treasury</span>
        </div>

        {/* Tab bar */}
        <div style={{
          display: 'flex', gap: 2, padding: '10px 16px 0',
          borderBottom: '1px solid var(--m-border)',
        }}>
          {[
            { id: 'balances', label: 'Balances' },
            { id: 'fx', label: 'FX' },
            { id: 'payments', label: 'Payments' },
          ].map((t) => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              border: 'none', background: 'transparent',
              padding: '8px 14px 12px',
              font: '500 12px/1 var(--font-sans)',
              color: tab === t.id ? 'var(--m-fg)' : 'var(--m-fg-3)',
              borderBottom: tab === t.id ? '2px solid var(--m-fg)' : '2px solid transparent',
              marginBottom: -1, cursor: 'pointer',
              transition: 'color var(--dur-base) var(--ease-standard)',
            }}>{t.label}</button>
          ))}
          <span style={{
            marginLeft: 'auto', alignSelf: 'center',
            paddingBottom: 8,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            font: '500 10.5px/1 var(--font-sans)',
            color: paused ? 'var(--m-fg-3)' : '#1F8A5B',
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: paused ? 'var(--m-fg-3)' : '#1F8A5B',
              animation: paused ? 'none' : 'm-pulse 1.4s infinite',
            }} />
            {paused ? 'Paused' : 'Live'}
          </span>
        </div>

        <div style={{ padding: 20, minHeight: 320 }}>
          {tab === 'balances' && <SceneBalances volume={volume} tick={tick} />}
          {tab === 'fx' && <SceneFx tick={tick} />}
          {tab === 'payments' && <ScenePayments tick={tick} />}
        </div>
      </div>

      <style>{`
        @keyframes m-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(0.85); }
        }
      `}</style>
    </div>
  );
}

function SceneBalances({ volume, tick }) {
  const wallets = [
    { code: 'GBP', sym: '£', amount: '142,840.32', accent: '#6B8CFF' },
    { code: 'EUR', sym: '€', amount: '78,210.16',  accent: '#8B7BFF' },
    { code: 'USD', sym: '$', amount: '94,420.50',  accent: '#1F8A5B' },
    { code: 'USDC', sym: '$', amount: '32,180.00', accent: '#4DD4C5' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12 }}>
        <Stat label="Settled · 24h" value={`£${volume.toLocaleString('en-GB')}`} sub="↑ £12,480 vs yesterday" pos />
        <Stat label="Payouts" value="147" sub="across 12 corridors" />
        <Stat label="Avg. settle" value="14s" sub="↓ from 18s" pos />
      </div>
      <div style={{
        background: 'color-mix(in oklab, var(--m-fg) 3%, transparent)',
        borderRadius: 10, padding: '4px 0',
      }}>
        <div style={{
          fontSize: 10, color: 'var(--m-fg-3)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600,
          padding: '12px 14px 8px',
        }}>Multi-currency balances</div>
        {wallets.map((w, i) => (
          <div key={w.code} style={{
            display: 'grid', gridTemplateColumns: '24px 1fr auto', gap: 12,
            padding: '10px 14px', alignItems: 'center',
            borderTop: i === 0 ? 'none' : '1px solid var(--m-border)',
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: w.accent, color: '#fff',
              display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 700,
            }}>{w.sym}</span>
            <span style={{ fontSize: 12.5, fontWeight: 600 }}>{w.code}</span>
            <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12.5, fontWeight: 600 }}>
              {w.sym}{w.amount}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SceneFx({ tick }) {
  const pairs = [
    { p: 'GBP/USD', base: 1.2682, vol: 0.0008, dec: 4 },
    { p: 'EUR/USD', base: 1.0814, vol: 0.0006, dec: 4 },
    { p: 'GBP/NGN', base: 2284.50, vol: 1.20,  dec: 2 },
    { p: 'USD/MXN', base: 17.4380, vol: 0.012, dec: 4 },
    { p: 'EUR/BRL', base: 5.4120,  vol: 0.004, dec: 4 },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12 }}>
        <Stat label="FX volume · 24h" value="$8.4M" sub="across 38 pairs" />
        <Stat label="Avg. margin" value="0.18%" sub="vs banks 1.5%" pos />
        <Stat label="Active quotes" value="14" sub="streaming" />
      </div>
      <div style={{
        background: 'color-mix(in oklab, var(--m-fg) 3%, transparent)',
        borderRadius: 10, padding: '4px 0',
      }}>
        <div style={{
          fontSize: 10, color: 'var(--m-fg-3)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600,
          padding: '12px 14px 8px',
        }}>Live rates</div>
        {pairs.map((p, i) => {
          const seed = Math.sin((tick + i * 7) * 0.9) * 0.5 + Math.cos((tick + i * 3) * 0.4) * 0.5;
          const v = (p.base + seed * p.vol).toFixed(p.dec);
          const dir = seed >= 0;
          return (
            <div key={p.p} style={{
              display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 12,
              padding: '8px 14px', fontSize: 12, alignItems: 'center',
              borderTop: i === 0 ? 'none' : '1px solid var(--m-border)',
            }}>
              <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontWeight: 600 }}>{p.p}</span>
              <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontWeight: 500 }}>{v}</span>
              <span style={{
                fontSize: 10.5, fontWeight: 600, padding: '2px 7px', borderRadius: 999,
                background: dir ? 'rgba(31,138,91,0.12)' : 'rgba(194,66,65,0.12)',
                color: dir ? '#1F8A5B' : '#C24241',
              }}>{dir ? '▲' : '▼'} {(Math.abs(seed) * 0.06).toFixed(2)}%</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ScenePayments({ tick }) {
  const seeds = [
    { to: 'Acme Supplies Ltd',  amount: '−£4,820',   rail: 'FPS',     status: 'settled' },
    { to: 'Lemonade SARL',       amount: '−€2,340',   rail: 'SEPA',    status: 'settled' },
    { to: 'Pixelcraft Inc',      amount: '−$1,890',   rail: 'Fedwire', status: 'pending' },
    { to: 'Cyberdyne K.K.',      amount: '−¥48,200',  rail: 'SWIFT',   status: 'settled' },
    { to: 'Acquia Studios',      amount: '−£2,140',   rail: 'FPS',     status: 'settled' },
  ];
  const offset = tick % seeds.length;
  const rows = seeds.slice(offset).concat(seeds.slice(0, offset)).slice(0, 4);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12 }}>
        <Stat label="Settled · today" value={`${147 + (tick % 11)} payouts`} sub="↑ 12 vs yesterday" pos />
        <Stat label="Pending" value="3" sub="est. < 14m" />
        <Stat label="Failed" value="0" sub="all rails healthy" pos />
      </div>
      <div style={{
        background: 'color-mix(in oklab, var(--m-fg) 3%, transparent)',
        borderRadius: 10, padding: '4px 0',
      }}>
        <div style={{
          fontSize: 10, color: 'var(--m-fg-3)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600,
          padding: '12px 14px 8px',
        }}>Live · payouts</div>
        {rows.map((p, i) => (
          <div key={p.to + i} style={{
            display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 12,
            padding: '10px 14px', fontSize: 12, alignItems: 'center',
            borderTop: i === 0 ? 'none' : '1px solid var(--m-border)',
            background: i === 0 ? 'color-mix(in oklab, var(--m-accent) 4%, transparent)' : 'transparent',
            animation: i === 0 ? 'm-fade-in 500ms ease' : 'none',
          }}>
            <span style={{ fontWeight: 500 }}>{p.to}</span>
            <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontWeight: 600 }}>{p.amount}</span>
            <span style={{
              fontSize: 10, fontWeight: 600, padding: '3px 8px', borderRadius: 999,
              background: p.status === 'settled' ? 'rgba(31,138,91,0.12)' : 'rgba(176,125,0,0.12)',
              color: p.status === 'settled' ? '#1F8A5B' : '#B07D00',
              textTransform: 'uppercase', letterSpacing: '0.06em',
            }}>{p.rail}</span>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes m-fade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
}

function Stat({ label, value, sub, pos }) {
  return (
    <div style={{
      padding: 14,
      background: 'color-mix(in oklab, var(--m-fg) 4%, transparent)',
      borderRadius: 10,
    }}>
      <div style={{ fontSize: 10, color: 'var(--m-fg-3)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>
        {label}
      </div>
      <div style={{
        fontSize: 22, fontWeight: 500, marginTop: 6,
        fontFamily: 'IBM Plex Mono, monospace', letterSpacing: '-0.02em',
      }}>{value}</div>
      <div style={{ fontSize: 11, color: pos ? '#1F8A5B' : 'var(--m-fg-3)', fontWeight: 600, marginTop: 4 }}>
        {sub}
      </div>
    </div>
  );
}

function BusinessFeatures() {
  const features = [
    { tag: 'vIBANs', title: 'Multi-currency vIBANs', body: 'EUR, GBP, USD, plus 11 more — issued in your business name, named segregation by customer.' },
    { tag: 'Payouts', title: 'Cross-border at scale', body: 'Batch 10,000 payouts via API. SEPA Instant, FPS, Fedwire, SWIFT GPI — pick the cheapest rail per recipient.' },
    { tag: 'API', title: 'API that engineers like', body: 'REST, signed webhooks, idempotency keys, sandbox parity. SDKs for Node, Python, Ruby, Go.' },
    { tag: 'Marketplace', title: 'Marketplace payments', body: 'Hold buyer funds, release to sellers, split commission. KYB the seller once, route forever.' },
    { tag: 'Treasury', title: 'Treasury dashboard', body: 'See all entities, currencies, and counterparties in one view. FX hedging built in.' },
    { tag: 'Payroll', title: 'Contractor & payroll', body: 'Pay 200 contractors in 40 countries on the same day. Tax-receipt PDFs auto-generated.' },
  ];
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="m-eyebrow" style={{ marginBottom: 14 }}>Platform</div>
          <h2 style={{
            font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
            letterSpacing: '-0.025em', margin: 0,
          }}>
            One API. Every payment surface your business needs.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {features.map((f) => (
            <article key={f.title} style={{
              background: 'var(--m-card-bg, transparent)',
              border: '1px solid var(--m-border)',
              borderRadius: 20, padding: 24,
              transition: 'transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard)',
              cursor: 'pointer',
            }}
            onMouseOver={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--m-fg-3)'; }}
            onMouseOut={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--m-border)'; }}>
              <div style={{
                font: '600 11px/1 var(--font-sans)', letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'var(--m-fg-3)', marginBottom: 16,
              }}>{f.tag}</div>
              <h3 style={{ font: '500 20px/1.25 var(--font-sans)', letterSpacing: '-0.015em', margin: '0 0 10px' }}>{f.title}</h3>
              <p style={{ font: '400 14px/1.55 var(--font-sans)', color: 'var(--m-fg-2)', margin: 0 }}>{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function VolumeSavingsCalculator() {
  const [volume, setVolume] = React.useState(50);
  const monthlyVol = volume * 10000;
  const kwikCost = monthlyVol * 0.0018;
  const bankCost = monthlyVol * 0.015 + Math.floor(monthlyVol / 50000) * 25;
  const saved = bankCost - kwikCost;
  const annualSaved = saved * 12;

  return (
    <section className="m-section" style={{ paddingTop: 0 }}>
      <div className="m-container">
        <div style={{
          background: 'var(--m-fg)', color: 'var(--m-bg)',
          borderRadius: 28, padding: 48,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
        }}>
          <div>
            <div className="m-eyebrow" style={{ marginBottom: 14, color: 'rgba(255,255,255,0.55)' }}>Savings</div>
            <h2 style={{
              font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
              letterSpacing: '-0.025em', margin: 0, color: 'var(--m-bg)',
            }}>
              See how much you'd save.
            </h2>
            <p style={{ font: '400 16px/1.55 var(--font-sans)', color: 'rgba(255,255,255,0.7)', margin: '20px 0 0' }}>
              Drag the slider to your monthly international payments volume. We calculate against typical bank rates (1.5% FX + £25 per wire).
            </p>

            <div style={{ marginTop: 36 }}>
              <label style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 600 }}>Monthly volume</label>
              <div style={{ fontSize: 48, fontWeight: 500, fontFamily: 'IBM Plex Mono, monospace', letterSpacing: '-0.028em', marginTop: 12 }}>
                £{monthlyVol.toLocaleString('en-GB')}
              </div>
              <input
                type="range" min="1" max="500" value={volume}
                onChange={(e) => setVolume(+e.target.value)}
                style={{
                  width: '100%', marginTop: 20,
                  WebkitAppearance: 'none', appearance: 'none',
                  height: 4, borderRadius: 999,
                  background: `linear-gradient(to right, var(--m-bg) 0%, var(--m-bg) ${(volume / 500) * 100}%, rgba(255,255,255,0.18) ${(volume / 500) * 100}%)`,
                  outline: 'none',
                }}
                className="m-slider"
              />
              <style>{`
                .m-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--m-bg); border: 3px solid var(--m-fg); cursor: pointer; }
                .m-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: var(--m-bg); border: 3px solid var(--m-fg); cursor: pointer; }
              `}</style>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{
              padding: 28,
              background: 'rgba(116,219,168,0.10)',
              border: '1px solid rgba(116,219,168,0.20)',
              borderRadius: 20,
            }}>
              <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600, color: '#9DE5C2' }}>You'd save per year</div>
              <div style={{ fontSize: 56, fontWeight: 500, fontFamily: 'IBM Plex Mono, monospace', color: '#9DE5C2', letterSpacing: '-0.03em', marginTop: 14 }}>
                £{Math.round(annualSaved).toLocaleString('en-GB')}
              </div>
            </div>
            <div style={{
              padding: 20,
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(255,255,255,0.10)',
              borderRadius: 16,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 13 }}>
                <span style={{ color: 'rgba(255,255,255,0.7)' }}>Typical bank cost / month</span>
                <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontWeight: 500, textDecoration: 'line-through', color: 'rgba(255,255,255,0.5)' }}>£{Math.round(bankCost).toLocaleString('en-GB')}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 13 }}>
                <span style={{ color: 'rgba(255,255,255,0.7)' }}>KwiikPay cost / month</span>
                <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontWeight: 600 }}>£{Math.round(kwikCost).toLocaleString('en-GB')}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BusinessCarousel() {
  const stories = [
    { quote: "We replaced four banking partners with one operator. Settlement is twice as fast.", name: "Léa Martin", role: "CFO · Lemonade", flag: "🇫🇷" },
    { quote: "Our payouts API used to be 2,000 lines of glue code across three providers. Now it's 200.", name: "James Whitman", role: "VP Engineering · Pixelcraft", flag: "🇬🇧" },
    { quote: "Marketplace splits used to take a day to reconcile. Now it's instant — and audit-ready.", name: "Yuki Tanaka", role: "Head of Ops · Atlas Marketplace", flag: "🇯🇵" },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % stories.length), 5500);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="m-section" style={{ paddingTop: 0 }}>
      <div className="m-container">
        <div style={{
          background: 'var(--m-card-bg, transparent)',
          border: '1px solid var(--m-border)',
          borderRadius: 28, padding: 56,
          textAlign: 'center', maxWidth: 920, margin: '0 auto',
          position: 'relative',
        }}>
          <div className="m-eyebrow" style={{ marginBottom: 24 }}>Customer stories</div>
          {stories.map((s, i) => (
            <div key={i} style={{
              opacity: i === idx ? 1 : 0,
              transform: i === idx ? 'translateY(0)' : 'translateY(8px)',
              transition: 'opacity 600ms ease, transform 600ms ease',
              position: i === idx ? 'static' : 'absolute',
              top: i === idx ? 'auto' : 80, left: i === idx ? 'auto' : 56, right: i === idx ? 'auto' : 56,
            }}>
              <blockquote style={{
                font: '500 clamp(22px, 2.4vw, 30px)/1.4 var(--font-sans)',
                letterSpacing: '-0.018em', margin: 0,
              }}>
                "{s.quote}"
              </blockquote>
              <div style={{ marginTop: 28, fontSize: 14, color: 'var(--m-fg-2)' }}>
                <span style={{ fontSize: 18, marginRight: 8 }}>{s.flag}</span>
                <strong style={{ color: 'var(--m-fg)' }}>{s.name}</strong> · {s.role}
              </div>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 32 }}>
            {stories.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} style={{
                width: i === idx ? 24 : 8, height: 8, borderRadius: 999,
                background: i === idx ? 'var(--m-fg)' : 'var(--m-border)',
                border: 'none', padding: 0, cursor: 'pointer',
                transition: 'all var(--dur-base) var(--ease-standard)',
              }} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.BusinessHero = BusinessHero;
window.BusinessFeatures = BusinessFeatures;
window.VolumeSavingsCalculator = VolumeSavingsCalculator;
window.BusinessCarousel = BusinessCarousel;