const { Icon, Badge, Button, Card, SectionHeading, PetIcon, Logo } = window.VeterinariaSanPatricioDesignSystem_c9a149;

/* Shared layout helpers for the marketing home. */
function Section({ children, tone, tight, style }) {
  return (
    <section style={{ padding: (tight ? 'var(--section-y-tight)' : 'var(--section-y)') + ' var(--space-8)', background: tone || 'transparent', ...style }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>{children}</div>
    </section>
  );
}

const PHOTO = '../../assets/photos/';

function Slot({ id, height, radius = 16, placeholder, src, style }) {
  return (
    <div style={{ position: 'relative', width: '100%', height, ...style }}>
      <image-slot id={id} shape="rounded" radius={radius} placeholder={placeholder} src={src ? PHOTO + src : undefined} style={{ width: '100%', height: '100%' }}></image-slot>
    </div>
  );
}

function Eyebrow({ children, tone }) {
  return (
    <div style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: tone || 'var(--green-700)' }}>{children}</div>
  );
}

Object.assign(window, { Section, Slot, Eyebrow, PHOTO });