// Medway MSS — brand primitives. Logo recreates the actual wordmark:
// "medway" in lowercase rounded weight green + tagline "MEDICAL SOLUTIONS AND SUPPLY"

function MedwayWordmark({ height = 28, color, accent, light = false }) {
  // Real logo: lowercase "medway" rounded, green; the 'y' descender is exaggerated.
  // Tagline beneath in spaced caps. We recreate the spirit: lowercase rounded sans,
  // with a styled 'y' tail, plus the tagline.
  const green = accent || '#1ea34d';
  const inkColor = color || (light ? '#fafafa' : '#171717');
  // We scale to "logo unit" = height; tagline below
  const wordSize = height * 1.05;
  const tagSize = height * 0.34;
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1, color: inkColor, gap: height * 0.12 }}>
      <span style={{
        fontFamily: '"Nunito", "Inter", sans-serif',
        fontWeight: 800,
        fontSize: wordSize,
        letterSpacing: '-0.045em',
        color: green,
        lineHeight: 0.9,
        fontStyle: 'normal',
      }}>medwa<span style={{ display: 'inline-block', position: 'relative' }}>
        <span style={{ position: 'relative', zIndex: 1 }}>y</span>
      </span></span>
      <span style={{
        fontFamily: 'Inter, sans-serif',
        fontWeight: 600,
        fontSize: tagSize,
        letterSpacing: '0.16em',
        color: inkColor,
        textTransform: 'uppercase',
        lineHeight: 1,
      }}>Medical Solutions and Supply</span>
    </div>
  );
}

// Compact lockup for tight nav contexts — just the wordmark, no tagline
function MedwayMark({ height = 22, color, accent }) {
  const green = accent || '#1ea34d';
  return (
    <span style={{
      fontFamily: '"Nunito", "Inter", sans-serif',
      fontWeight: 800,
      fontSize: height,
      letterSpacing: '-0.045em',
      color: green,
      lineHeight: 1,
    }}>medway</span>
  );
}

// Numeric label, tabular figures
function Num({ children, size = 12 }) {
  return (
    <span style={{
      fontFamily: 'Inter, sans-serif',
      fontVariantNumeric: 'tabular-nums',
      fontFeatureSettings: '"tnum"',
      fontSize: size,
      fontWeight: 500,
      letterSpacing: '0.04em',
    }}>{children}</span>
  );
}

// Small uppercase eyebrow with optional dot
function Eyebrow({ children, accent, color }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontFamily: 'Inter, sans-serif',
      fontSize: 11,
      fontWeight: 600,
      letterSpacing: '0.14em',
      textTransform: 'uppercase',
      color: color || 'var(--fg-3)',
    }}>
      {accent !== false && (
        <span style={{
          width: 18, height: 1, background: accent || 'var(--fg-3)', display: 'inline-block',
        }} />
      )}
      <span>{children}</span>
    </div>
  );
}

function Rule({ color, style = {} }) {
  return <div style={{ height: 1, width: '100%', background: color || 'var(--border)', ...style }} />;
}

function I({ name, size = 18, stroke = 1.5, color = 'currentColor', style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const i = document.createElement('i');
      i.setAttribute('data-lucide', name);
      ref.current.appendChild(i);
      window.lucide.createIcons({
        attrs: { width: size, height: size, stroke: color, 'stroke-width': stroke },
      });
    }
  }, [name, size, stroke, color]);
  return <span ref={ref} style={{ display: 'inline-flex', width: size, height: size, color, ...style }} />;
}

// Language switcher — three small text buttons
function LangSwitcher({ lang, onChange, light = false }) {
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 0,
      padding: 2,
      border: `1px solid ${light ? '#404040' : 'var(--border)'}`,
      borderRadius: 6,
      background: light ? 'rgba(255,255,255,0.04)' : 'var(--bg)',
    }}>
      {window.MEDWAY_LANGS.map((l) => {
        const isActive = lang === l.code;
        return (
          <button
            key={l.code}
            onClick={() => onChange(l.code)}
            title={l.name}
            style={{
              padding: '5px 9px',
              fontFamily: 'Inter, sans-serif',
              fontSize: 11.5,
              fontWeight: 600,
              letterSpacing: '0.04em',
              border: 'none',
              borderRadius: 4,
              cursor: 'pointer',
              background: isActive ? (light ? '#fafafa' : 'var(--fg-1)') : 'transparent',
              color: isActive ? (light ? '#171717' : '#fff') : (light ? '#a3a3a3' : 'var(--fg-2)'),
              transition: 'all 150ms ease',
            }}
          >{l.label}</button>
        );
      })}
    </div>
  );
}

// Mobile detection — single source of truth used by every section.
// Returns true when the viewport is narrower than `breakpoint` (default 760px).
function useIsMobile(breakpoint = 760) {
  const get = () => typeof window !== 'undefined' && window.innerWidth < breakpoint;
  const [m, setM] = React.useState(get);
  React.useEffect(() => {
    const on = () => setM(get());
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return m;
}

Object.assign(window, { MedwayWordmark, MedwayMark, Num, Eyebrow, Rule, I, LangSwitcher, useIsMobile });