(() => {
const { Badge, Button, Icon } = window.SwivelDesignSystem_a628db;

// Layout constants shared by every section. The page root (#root) is an
// inline-size container, so `cqw` scales with the page width exactly as it
// did in the Claude Design frame.
const GUTTER = 'clamp(20px, 4cqw, 48px)';
const ASSETS = 'site/assets';
const LOGOS_DS = '_ds/swivel-design-system-a628db45-289a-434e-a559-32d25ff73f00/assets/logos';

// Content wrapper: 1280px maximum, the same edges as the nav and footer.
const inner = (padY, extra) => ({ maxWidth: 1280, width: '100%', margin: '0 auto', padding: `${padY} ${GUTTER}`, ...extra });

// The design switches layouts at two widths: 760px (two columns, horizontal
// timeline) and 1040px (the six nav links).
function useLayout() {
  const read = () => ({
    wide: window.matchMedia('(min-width: 760px)').matches,
    navWide: window.matchMedia('(min-width: 1040px)').matches,
  });
  const [layout, setLayout] = React.useState(read);
  React.useEffect(() => {
    const queries = ['(min-width: 760px)', '(min-width: 1040px)'].map((q) => window.matchMedia(q));
    const update = () => setLayout(read());
    queries.forEach((q) => q.addEventListener('change', update));
    return () => queries.forEach((q) => q.removeEventListener('change', update));
  }, []);
  return layout;
}

// Full-viewport section with the S monogram in the bottom-right corner:
// yellow on black grounds, black on white, grey and yellow grounds.
function Section({ id, label, bg, color, mark, children }) {
  return <section id={id} data-screen-label={label} style={{ background: bg, color, minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative' }}>
    {mark && <img src={`${ASSETS}/logos/swivel-icon-${mark}.png`} alt="" style={{ position: 'absolute', right: GUTTER, bottom: 32, width: 32, height: 32, objectFit: 'contain', pointerEvents: 'none' }}/>}
    {children}
  </section>;
}

const display = { fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', margin: 0 };
const headline = (size, extra) => ({ ...display, fontSize: size, lineHeight: 0.92, letterSpacing: '-0.03em', ...extra });
const body = (color, extra) => ({ fontSize: 20, lineHeight: 1.5, color, margin: 0, maxWidth: '40ch', ...extra });
const eyebrow = (color, extra) => ({ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color, ...extra });

// Section label pills. White-on-black sections restyle the inverse badge.
const WHITE_BADGE = { background: 'var(--swivel-white)', color: 'var(--swivel-signal-black)', borderColor: 'var(--swivel-white)' };
const OUTLINE_BADGE = { background: 'transparent', color: 'var(--swivel-white)', borderColor: 'var(--grey-600)' };
function Label({ children, tone = 'inverse', white = false }) {
  return <div style={{ display: 'flex' }}><Badge tone={tone} style={white ? WHITE_BADGE : undefined}>{children}</Badge></div>;
}

// Every "Book a demo" on the page is the same yellow button pointing at #contact.
const CTA_LABEL = 'Book a demo';
function Cta({ size = 'lg' }) {
  return <div style={{ display: 'flex' }}>
    <Button variant="primary" size={size} as="a" href="#contact" iconRight={<Icon name="arrow-up-right" size={18}/>}>{CTA_LABEL}</Button>
  </div>;
}

// MacBook Pro frame: dark lid with the camera notch, then the wider silver
// base with its hinge lip. `ratio` is the screen's aspect ratio.
function MacBook({ src, alt, ratio = '16 / 10', fit = 'contain' }) {
  return <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
    <div style={{ width: '88%', background: '#1A1A1C', border: '1px solid #3A3A3C', borderRadius: '16px 16px 6px 6px', padding: '12px 12px 18px', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 4, left: '50%', transform: 'translateX(-50%)', width: 84, height: 5, borderRadius: '0 0 6px 6px', background: '#0B0B0F' }}/>
      <div style={{ borderRadius: 6, overflow: 'hidden', background: '#000', aspectRatio: ratio }}>
        <img src={src} alt={alt} style={{ display: 'block', width: '100%', height: '100%', objectFit: fit }}/>
      </div>
    </div>
    <div style={{ width: '100%', height: 12, background: '#C8C9CC', border: '1px solid #A8A9AC', borderTop: 0, borderRadius: '0 0 10px 10px', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: '16%', height: 5, background: '#A8A9AC', borderRadius: '0 0 6px 6px' }}/>
    </div>
  </div>;
}

// "In partnership with" caption over a stack of partner logos, each given an
// explicit height so the marks read at the same visual size.
function Partners({ logos, align = 'flex-start', gap = 8 }) {
  return <div style={{ display: 'flex', flexDirection: 'column', alignItems: align, gap: 16 }}>
    <div style={eyebrow('var(--grey-600)')}>In partnership with</div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: align, gap }}>
      {logos.map((l) => <img key={l.alt} src={l.src} alt={l.alt} style={{ height: l.h, width: 'auto', display: 'block' }}/>)}
    </div>
  </div>;
}

window.SwivelSite = { GUTTER, ASSETS, LOGOS_DS, inner, useLayout, Section, display, headline, body, eyebrow, OUTLINE_BADGE, Label, CTA_LABEL, Cta, MacBook, Partners };
})();