/* Tidewell Website — shared primitives
   Exposes: Icon, Button, Pill, Chip, Overline, Section, Container, useLucide, MSPBadge
   Loaded as a Babel script; exports to window at the end. */

const { useEffect, useState, useRef } = React;

/* Re-run lucide icon replacement after renders. Call once near the root. */
function useLucide(dep) {
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
}

/* Icon — renders a lucide <i> placeholder; replaced by useLucide. */
function Icon({ name, size = 20, stroke = 1.75, color = 'currentColor', style = {} }) {
  return (
    <i
      data-lucide={name}
      style={{ width: size, height: size, strokeWidth: stroke, color, display: 'inline-flex', ...style }}
    ></i>
  );
}

const TW_BTN = {
  base: {
    fontFamily: 'var(--font-sans)', fontWeight: 600, border: 0, cursor: 'pointer',
    borderRadius: 'var(--r-pill)', display: 'inline-flex', alignItems: 'center', gap: 8,
    whiteSpace: 'nowrap', transition: 'all var(--dur) var(--ease-out)', lineHeight: 1,
  },
  sizes: {
    sm: { fontSize: 14, padding: '9px 18px' },
    md: { fontSize: 15, padding: '13px 24px' },
    lg: { fontSize: 17, padding: '16px 30px' },
  },
};

function Button({ children, variant = 'primary', size = 'md', icon, iconRight, onClick, style = {}, type }) {
  const [hover, setHover] = useState(false);
  const [down, setDown] = useState(false);
  const variants = {
    primary: { background: hover ? 'var(--teal-800)' : 'var(--teal-700)', color: '#fff', boxShadow: 'var(--shadow-sm)' },
    secondary: { background: hover ? 'var(--sand-400)' : 'var(--sand-300)', color: 'var(--ink-900)' },
    ghost: { background: hover ? 'var(--teal-50)' : 'transparent', color: 'var(--teal-700)', boxShadow: 'inset 0 0 0 1.5px var(--teal-300)' },
    white: { background: hover ? '#fff' : 'rgba(255,255,255,0.92)', color: 'var(--teal-800)', boxShadow: 'var(--shadow-sm)' },
    link: { background: 'none', color: hover ? 'var(--teal-500)' : 'var(--teal-700)', padding: '4px 2px', boxShadow: 'none' },
  };
  return (
    <button
      type={type}
      onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setDown(false); }}
      onMouseDown={() => setDown(true)} onMouseUp={() => setDown(false)}
      style={{
        ...TW_BTN.base, ...TW_BTN.sizes[size], ...variants[variant],
        transform: down ? 'scale(0.97)' : 'scale(1)', ...style,
      }}
    >
      {icon && <Icon name={icon} size={size === 'lg' ? 20 : 17} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'lg' ? 20 : 17} />}
    </button>
  );
}

/* Wait-time / status pill */
function Pill({ status = 'go', children, frosted = false }) {
  const map = {
    go: { bg: 'var(--go-100)', fg: 'var(--go-700)', dot: 'var(--go-500)' },
    wait: { bg: 'var(--wait-100)', fg: 'var(--wait-700)', dot: 'var(--wait-500)' },
    stop: { bg: 'var(--stop-100)', fg: 'var(--stop-700)', dot: 'var(--stop-500)' },
  }[status];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 9, padding: '8px 15px',
      borderRadius: 'var(--r-pill)', fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-sans)', whiteSpace: 'nowrap',
      background: frosted ? 'rgba(255,255,255,0.82)' : map.bg,
      color: frosted ? 'var(--go-700)' : map.fg,
      backdropFilter: frosted ? 'blur(8px)' : 'none',
      boxShadow: frosted ? 'var(--shadow-sm)' : 'none',
    }}>
      <span style={{ width: 9, height: 9, borderRadius: '50%', background: map.dot, flex: 'none' }}></span>
      {children}
    </span>
  );
}

function Chip({ children, variant = 'tint' }) {
  const v = {
    solid: { background: 'var(--teal-700)', color: '#fff' },
    tint: { background: 'var(--teal-50)', color: 'var(--teal-700)' },
    sand: { background: 'var(--sand-200)', color: 'var(--ink-700)' },
    out: { background: 'transparent', boxShadow: 'inset 0 0 0 1.5px var(--line)', color: 'var(--ink-700)' },
  }[variant];
  return <span style={{ fontSize: 13, fontWeight: 600, padding: '7px 14px', borderRadius: 'var(--r-pill)', fontFamily: 'var(--font-sans)', display: 'inline-block', ...v }}>{children}</span>;
}

function MSPBadge() {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'var(--go-100)', color: 'var(--go-700)', fontWeight: 700, fontSize: 13, padding: '7px 14px', borderRadius: 'var(--r-pill)' }}>
      <Icon name="shield-check" size={16} /> Covered by MSP
    </span>
  );
}

/* Small "illustrative / sample" label for demo credibility content */
function IllusTag({ children = 'Illustrative', style = {} }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: 'var(--font-sans)',
      fontSize: 10.5, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase',
      color: 'var(--ink-400)', background: 'var(--sand-200)', padding: '3px 8px', borderRadius: 'var(--r-pill)', ...style,
    }}>
      <Icon name="info" size={11} stroke={2} /> {children}
    </span>
  );
}

function Overline({ children, style = {} }) {
  return <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--teal-600)', fontFamily: 'var(--font-sans)', ...style }}>{children}</div>;
}

function Container({ children, style = {} }) {
  return <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

function Section({ children, bg = 'var(--paper)', style = {}, id }) {
  return <section id={id} style={{ background: bg, padding: '96px 0', ...style }}>{children}</section>;
}

/* Reusable section heading block */
function SectionHead({ overline, title, intro, center = false, maxWidth = 680, titleSize = 40 }) {
  return (
    <div style={{ maxWidth, marginBottom: 48, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0, textAlign: center ? 'center' : 'left' }}>
      {overline && <Overline style={{ marginBottom: 14 }}>{overline}</Overline>}
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: titleSize, lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--ink-900)', margin: 0, textWrap: 'pretty' }}>{title}</h2>
      {intro && <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.6, color: 'var(--ink-500)', margin: '18px 0 0', textWrap: 'pretty' }}>{intro}</p>}
    </div>
  );
}

Object.assign(window, { useLucide, Icon, Button, Pill, Chip, MSPBadge, IllusTag, Overline, Container, Section, SectionHead });