/* Ampera — responsive CSS injection */
(function () {
  if (document.getElementById('amp-responsive')) return;
  const s = document.createElement('style');
  s.id = 'amp-responsive';
  s.textContent = [
    '@media (max-width:767px){',
    /* horizontal padding */
    '.amp-px{padding-left:20px!important;padding-right:20px!important}',
    /* vertical padding */
    '.amp-py{padding-top:56px!important;padding-bottom:56px!important}',
    /* grids → 1 column */
    '.amp-g2,.amp-g3{grid-template-columns:1fr!important}',
    /* 4-col grids → 2 columns */
    '.amp-g4{grid-template-columns:1fr 1fr!important}',
    /* large title scale-down */
    '.amp-t-xl{font-size:40px!important;line-height:1.1!important}',
    /* remove sticky on sidebar panels */
    '.amp-unsticky{position:static!important}',
    /* featured article image */
    '.amp-feat-img{height:240px!important}',
    /* nav: hide links + cta, show burger */
    '.amp-nav-links,.amp-nav-cta{display:none!important}',
    '.amp-nav-burger{display:flex!important}',
    '.amp-nav-inner{padding:16px 20px!important}',
    /* city hero inner padding */
    '.amp-city-hero{padding:72px 20px 56px!important}',
    /* stats bar */
    '.amp-stats-bar{padding:16px 20px!important}',
    /* blog filter bar → column */
    '.amp-filter-bar{flex-direction:column!important;align-items:flex-start!important;gap:12px!important}',
    '.amp-filter-search,.amp-filter-search input{width:100%!important;box-sizing:border-box!important}',
    '}',
  ].join('');
  document.head.appendChild(s);
}());

/* Ampera UI Kit — components shared across the site */

const Eyebrow = ({ children, dark }) => (
  <span style={{
    fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    color: dark ? '#C4A84F' : '#8B7232'
  }}>{children}</span>
);

const GoldRule = ({ width = 48 }) => (
  <span style={{ display: 'inline-block', width, height: 2, background: '#C4A84F', verticalAlign: 'middle' }} />
);

const Button = ({ variant = 'primary', size = 'md', children, icon, onClick, style, disabled }) => {
  const base = {
    fontFamily: 'Inter, sans-serif', fontWeight: 700,
    border: 'none', cursor: 'pointer', display: 'inline-flex',
    alignItems: 'center', gap: 8, borderRadius: 9999,
    transition: 'opacity .25s, box-shadow .25s, transform .15s',
    letterSpacing: '0.002em',
    fontSize: size === 'sm' ? 13 : 14,
    padding: size === 'sm' ? '10px 18px' : '14px 28px',
  };
  const variants = {
    primary: { background: '#C4A84F', color: '#0F3518', boxShadow: '0 4px 16px rgba(196,168,79,.24)' },
    green:   { background: '#1B5C2C', color: '#fff' },
    outline: { background: 'transparent', border: '1.5px solid #1B5C2C', color: '#1B5C2C' },
    ghost:   { background: 'transparent', color: '#1B5C2C', padding: '12px 0', borderRadius: 0, borderBottom: '2px solid rgba(27,92,44,.2)' },
    onDark:  { background: '#C4A84F', color: '#0F3518', boxShadow: '0 4px 16px rgba(196,168,79,.32)' },
  };
  return (
    <button onClick={onClick} disabled={disabled} style={{ ...base, ...variants[variant], ...style }}
            onMouseEnter={e => e.currentTarget.style.opacity = 0.92}
            onMouseLeave={e => e.currentTarget.style.opacity = 1}>
      {children}
      {icon && <span className="material-symbols-outlined" style={{ fontSize: 18 }}>{icon}</span>}
    </button>
  );
};

const Pill = ({ children, variant = 'green' }) => {
  const styles = {
    green: { background: 'rgba(27,92,44,.10)', color: '#1B5C2C' },
    gold:  { background: 'rgba(196,168,79,.16)', color: '#8B7232' },
    glass: { background: 'rgba(255,255,255,.10)', color: '#fff', border: '1px solid rgba(255,255,255,.18)', backdropFilter: 'blur(8px)' },
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 14px', borderRadius: 9999,
      fontSize: 12, fontWeight: 600, letterSpacing: '.02em',
      ...styles[variant],
    }}>{children}</span>
  );
};

const Card = ({ children, dark, step, style, onClick }) => {
  const base = {
    borderRadius: 16, padding: 28,
    transition: 'transform .35s var(--ease-out), box-shadow .35s',
    cursor: onClick ? 'pointer' : 'default',
  };
  const variant = dark
    ? { background: 'linear-gradient(135deg, #0F3518, #1B5C2C)', color: '#fff', border: '1px solid rgba(196,168,79,.18)' }
    : { background: '#fff', border: '1px solid rgba(15,53,24,.08)', boxShadow: '0 1px 2px rgba(15,53,24,.04),0 2px 8px rgba(15,53,24,.04)' };
  const stepStyle = step ? { borderTop: '3px solid #1B5C2C' } : {};
  return (
    <div onClick={onClick} style={{ ...base, ...variant, ...stepStyle, ...style }}
         onMouseEnter={e => onClick && (e.currentTarget.style.transform = 'translateY(-3px)')}
         onMouseLeave={e => onClick && (e.currentTarget.style.transform = 'translateY(0)')}>
      {children}
    </div>
  );
};

const Icon = ({ name, size = 24, color = '#1B5C2C', style }) => (
  <span className="material-symbols-outlined" style={{ fontSize: size, color, ...style }}>{name}</span>
);

Object.assign(window, { Eyebrow, GoldRule, Button, Pill, Card, Icon });