(() => {
const { Icon } = window.SwivelDesignSystem_a628db;
const { ASSETS, inner, useLayout, Section, headline, body, Label } = window.SwivelSite;

const BLACK = 'var(--swivel-signal-black)';
const nodeTitle = { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(18px, 1.8cqw, 24px)', lineHeight: 1, letterSpacing: '-0.02em', textTransform: 'uppercase' };
const nodeTag = { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.8 };
const vLine = (h) => <div style={{ width: 1, height: h, background: BLACK, margin: '0 auto' }}/>;
// Horizontal rail between the two orchestrator columns' centres.
const hRail = <div style={{ height: 1, background: BLACK, margin: '0 calc(25% - 13.5px)' }}/>;
const threeCol = (children, extra) => <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)', gap: 16, ...extra }}>{children}</div>;
const drops = threeCol(<React.Fragment>{vLine(24)}<div style={{ width: 22 }}/>{vLine(24)}</React.Fragment>);

function Orchestrator({ file, name }) {
  return <div style={{ border: '1px solid ' + BLACK, padding: '18px 12px', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
    <div style={{ height: 40, width: '100%', maxWidth: 160, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <img src={`${ASSETS}/payments/${file}`} alt={name} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}/>
    </div>
    <div style={nodeTag}>Orchestration</div>
  </div>;
}

// Your brand → Swivel → Fyntek or BridgerPay → hundreds of PSPs.
function Diagram() {
  return <div style={{ display: 'flex', flexDirection: 'column' }}>
    <div style={{ border: '1px solid ' + BLACK, padding: '18px 20px', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={nodeTitle}>Your brand</div><div style={nodeTag}>Operator</div>
    </div>
    {vLine(28)}
    <div style={{ background: BLACK, color: 'var(--swivel-portal-yellow)', border: '1px solid ' + BLACK, padding: '18px 20px', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={nodeTitle}>Swivel</div><div style={nodeTag}>Platform · one integration</div>
    </div>
    {vLine(28)}
    {hRail}
    {drops}
    {threeCol(<React.Fragment>
      <Orchestrator file="fyntek.webp" name="Fyntek"/>
      <div style={{ width: 22, textAlign: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>or</div>
      <Orchestrator file="bridgerpay.webp" name="BridgerPay"/>
    </React.Fragment>, { alignItems: 'center' })}
    {drops}
    {hRail}
    {vLine(28)}
    <div style={{ border: '1px solid ' + BLACK, padding: 20, display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)', gap: 20, alignItems: 'center' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(56px, 6cqw, 96px)', lineHeight: 0.85, letterSpacing: '-0.05em' }}>100s</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={nodeTitle}>Payment providers</div>
        <div style={{ fontSize: 15, lineHeight: 1.4 }}>Volume routed between them for the highest acceptance rate.</div>
      </div>
    </div>
  </div>;
}

// Payment methods: icon chips and logo chips, matched so every mark reads at
// the same height (logos 28px, Aeropay's wide wordmark 22px, icons 24px).
const METHODS = [
  { icon: 'credit-card', label: 'Cards' },
  { logo: 'apple-pay.png', alt: 'Apple Pay', h: 28 },
  { logo: 'google-pay.png', alt: 'Google Pay', h: 28 },
  { logo: 'aeropay.png', alt: 'Aeropay', h: 22 },
  { icon: 'landmark', label: 'ACH' },
  { icon: 'bitcoin', label: 'Crypto' },
  { icon: 'wallet', label: 'APM' },
];
const chip = { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', border: '1px solid ' + BLACK, padding: '12px 18px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, whiteSpace: 'nowrap', height: 64 };

function Payments() {
  const { wide } = useLayout();
  return <Section id="payments" label="05 Payments" bg="var(--swivel-portal-yellow)" color={BLACK} mark="black">
    <div style={inner('128px', { display: 'flex', flexDirection: 'column', gap: 64 })}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 400px), 1fr))', gap: 64, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <Label white>Payments</Label>
          <h2 style={headline('clamp(40px, 5.5cqw, 84px)', { lineHeight: 0.96, textWrap: 'balance' })}>One integration. Hundreds of PSP's.</h2>
          <p style={body('inherit')}>You pick one orchestration layer, Fyntek or BridgerPay. We are already integrated with both. Either one connects you to hundreds of payment providers, so you launch with cards, wallets, bank rails and crypto on day one.</p>
          <p style={body('inherit')}>The layer routes every deposit to the PSP most likely to approve it. Higher acceptance. Fewer failed deposits.</p>
        </div>
        <Diagram/>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Your players pay with</div>
        <div style={{ display: 'grid', gridTemplateColumns: wide ? 'repeat(7, minmax(0, 1fr))' : 'repeat(auto-fit, minmax(140px, 1fr))', gap: 8 }}>
          {METHODS.map((m) => m.icon
            ? <div key={m.label} style={chip}><Icon name={m.icon} size={24}/>{m.label}</div>
            : <div key={m.alt} style={{ ...chip, padding: '6px 10px', minWidth: 0 }}>
                <div style={{ height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: 0, maxWidth: '100%' }}>
                  <img src={`${ASSETS}/payments/${m.logo}`} alt={m.alt} style={{ maxHeight: m.h, maxWidth: '100%', height: 'auto', width: 'auto', display: 'block', minWidth: 0 }}/>
                </div>
              </div>)}
        </div>
      </div>
    </div>
  </Section>;
}

Object.assign(window, { Payments });
})();