// Tokens + hook de breakpoints responsive
const TOKENS = {
  bg: '#F5F7FA',
  bgAlt: '#FFFFFF',
  ink: '#0A2540',
  inkSoft: '#3D5172',
  inkMuted: '#7A8AA8',
  accent: '#1454D6',
  accentSoft: '#E8EFFB',
  rule: '#D8DFEA',
  ruleSoft: '#EAEEF5',
  whatsapp: '#25D366',
  whatsappDark: '#128C7E',
  success: '#10B981',
};

// Hook responsive
function useBreakpoint() {
  const [w, setW] = React.useState(() => window.innerWidth);
  React.useEffect(() => {
    const handler = () => setW(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return {
    isMobile: w < 768,
    isTablet: w >= 768 && w < 1024,
    isDesktop: w >= 1024,
    w,
  };
}

function Section({ id, bg, children, padTop, padBottom }) {
  const { isMobile, isTablet } = useBreakpoint();
  const pt = padTop  ?? (isMobile ? 64 : isTablet ? 88 : 120);
  const pb = padBottom ?? (isMobile ? 64 : isTablet ? 88 : 120);
  return (
    <section id={id} style={{
      background: bg || 'transparent',
      padding: `${pt}px 0 ${pb}px`,
      position: 'relative',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '0 20px' : isTablet ? '0 32px' : '0 48px',
      }}>
        {children}
      </div>
    </section>
  );
}

function Eyebrow({ children, color }) {
  return (
    <div style={{
      fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
      color: color || TOKENS.accent, fontWeight: 700,
      display: 'inline-flex', alignItems: 'center', gap: 12,
    }}>
      <span style={{ width: 24, height: 1, background: 'currentColor' }}></span>
      {children}
    </div>
  );
}

function Button({ kind = 'primary', children, onClick, icon }) {
  const styles = {
    primary:  { background: TOKENS.ink, color: '#fff', border: 'none' },
    accent:   { background: TOKENS.accent, color: '#fff', border: 'none' },
    whatsapp: { background: TOKENS.whatsapp, color: '#fff', border: 'none' },
    ghost:    { background: 'transparent', color: TOKENS.ink, border: `1px solid ${TOKENS.rule}` },
    light:    { background: '#fff', color: TOKENS.ink, border: `1px solid ${TOKENS.rule}` },
  };
  return (
    <button onClick={onClick} style={{
      ...styles[kind],
      padding: '14px 22px', borderRadius: 10,
      fontSize: 15, fontWeight: 500, fontFamily: 'inherit',
      cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
      letterSpacing: '-0.01em', transition: 'transform 0.15s ease, box-shadow 0.15s ease',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 6px 20px -6px rgba(10,37,64,0.25)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      {icon}{children}
    </button>
  );
}

function WhatsAppGlyph({ size = 18, color = '#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.2L2 22l4.9-1.5C8.4 21.5 10.1 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z" fill={color}/>
      <path d="M9 7.5c-.3 0-.7.1-1 .5-.4.4-1.4 1.3-1.4 3.2 0 1.9 1.4 3.7 1.6 4 .2.3 2.7 4.3 6.7 5.8 3.3 1.3 4 1 4.7.9.7-.1 2.3-.9 2.6-1.9.3-.9.3-1.7.2-1.9-.1-.2-.4-.3-.8-.5-.4-.2-2.3-1.1-2.7-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.2 1.5-.2.2-.4.3-.8.1-.4-.2-1.7-.6-3.2-2-1.2-1-2-2.3-2.2-2.7-.2-.4 0-.6.2-.8.2-.2.4-.4.5-.7.2-.2.2-.4.4-.7.1-.3.1-.5 0-.7 0-.2-.8-2.1-1.2-2.9-.3-.7-.6-.6-.8-.6h-.7z" fill={TOKENS.whatsapp}/>
    </svg>
  );
}

window.TOKENS = TOKENS;
window.useBreakpoint = useBreakpoint;
window.Section = Section;
window.Eyebrow = Eyebrow;
window.Button = Button;
window.WhatsAppGlyph = WhatsAppGlyph;