/* global React */
const { useState, useEffect } = React;

// ───── Eyebrow ─────
const Eyebrow = ({ children, color = 'var(--fg-muted)' }) =>
<div style={{
  fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 12,
  letterSpacing: '0.18em', textTransform: 'uppercase', color
}}>{children}</div>;


// ───── Btn ─────
const Btn = ({ children, variant = 'primary', icon, onClick, href, size = 'md', target, rel }) => {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer',
    fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: size === 'lg' ? 16 : 14,
    padding: size === 'lg' ? '15px 28px' : '12px 22px',
    borderRadius: 999, border: 0, transition: 'all .18s cubic-bezier(.16,1,.3,1)',
    textDecoration: 'none', whiteSpace: 'nowrap'
  };
  const styles = {
    primary: { ...base, background: 'var(--brotek-magenta)', color: '#fff' },
    ghost: { ...base, background: 'transparent', color: 'var(--fg)', border: '1px solid rgba(255,255,255,.18)' },
    text: { ...base, background: 'transparent', color: 'var(--fg)', padding: '8px 0' },
    glass: { ...base, background: 'linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03))',
      color: 'var(--fg)', border: '1px solid rgba(255,255,255,.14)', backdropFilter: 'blur(12px)' }
  };
  const Tag = href ? 'a' : 'button';
  const [hover, setHover] = useState(false);
  const hoverStyle = hover ?
  variant === 'primary' ? { background: '#FF1A9E', boxShadow: '0 0 60px rgba(236,0,140,.4)' } :
  variant === 'ghost' ? { borderColor: 'rgba(255,255,255,.4)' } :
  {} :
  {};
  return (
    <Tag href={href} onClick={onClick} target={target} rel={target === '_blank' ? (rel || 'noopener noreferrer') : rel}
    onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{ ...styles[variant], ...hoverStyle }}>
      {children}
      {icon && <Icon name={icon} size={14} />}
    </Tag>);

};

// ───── Icon (Feather-style) ─────
const ICONS = {
  'arrow-right': <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></>,
  'arrow-up-right': <><line x1="7" y1="17" x2="17" y2="7" /><polyline points="9 7 17 7 17 15" /></>,
  'check': <polyline points="20 6 9 17 4 12" />,
  'x': <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>,
  'shield': <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
  'zap': <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
  'lock': <><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>,
  'alert': <><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></>,
  'trending': <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></>,
  'users': <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></>,
  'message': <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
  'plus': <><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></>,
  'minus': <line x1="5" y1="12" x2="19" y2="12" />,
  'calendar': <><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></>,
  'menu': <><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></>,
  'search': <><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></>,
  'cpu': <><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><line x1="9" y1="1" x2="9" y2="4" /><line x1="15" y1="1" x2="15" y2="4" /><line x1="9" y1="20" x2="9" y2="23" /><line x1="15" y1="20" x2="15" y2="23" /><line x1="20" y1="9" x2="23" y2="9" /><line x1="20" y1="14" x2="23" y2="14" /><line x1="1" y1="9" x2="4" y2="9" /><line x1="1" y1="14" x2="4" y2="14" /></>,
  'eye': <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></>,
  'code': <><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></>,
  'globe': <><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>,
  'linkedin': <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></>,
  'youtube': <><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.27 29 29 0 0 0-.46-5.41z" /><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" /></>,
  'instagram': <><rect x="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></>,
  'twitter': <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
};
const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 2 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
    {ICONS[name]}
  </svg>;


// ───── GlassCard ─────
const GlassCard = ({ children, style, glow, radius = 24, hover = true }) => {
  const [h, setH] = useState(false);
  const glowMap = {
    magenta: 'rgba(236,0,140,.35)', violet: 'rgba(163,53,231,.30)',
    green: 'rgba(53,231,71,.25)', blue: 'rgba(53,81,231,.30)',
    cyan: 'rgba(53,231,199,.25)', orange: 'rgba(251,136,29,.25)',
    red: 'rgba(236,77,42,.30)'
  };
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{
      background: 'linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02))',
      border: `1px solid rgba(255,255,255,${h && hover ? .18 : .10})`,
      backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
      borderRadius: radius, padding: 28,
      transition: 'all .24s cubic-bezier(.16,1,.3,1)',
      transform: h && hover ? 'translateY(-2px)' : 'none',
      boxShadow: glow ? `inset 0 0 60px ${glowMap[glow] || glowMap.magenta}` : 'none',
      ...style
    }}>
      {children}
    </div>);

};

// ───── Light (radial color blur) ─────
const Light = ({ color = '#EC008C', size = 800, opacity = 0.5, top, left, right, bottom, blur = 80 }) =>
<div style={{
  position: 'absolute', pointerEvents: 'none', top, left, right, bottom,
  width: size, height: size, borderRadius: '50%',
  background: `radial-gradient(circle, ${color} 0%, transparent 60%)`,
  opacity, filter: `blur(${blur}px)`, zIndex: 0
}} />;


// ───── Sticker (decorative service tag) ─────
const Sticker = ({ color = '#EC008C', label, size = 110, rotate = -8, sublabel }) =>
<div style={{
  width: size, height: size * 0.78, borderRadius: 14,
  background: `linear-gradient(140deg, ${color} 0%, ${color}aa 100%)`,
  border: '2px solid rgba(255,255,255,.35)', position: 'relative',
  transform: `rotate(${rotate}deg)`,
  boxShadow: `0 18px 40px ${color}55, inset 0 -10px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.3)`,
  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
  padding: '10px 12px', flexShrink: 0
}}>
    {/* perforation hole */}
    <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
    width: 14, height: 14, borderRadius: '50%', background: '#171717', border: '2px solid rgba(255,255,255,.4)' }} />
    <div style={{ height: 18 }} />
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,.7)',
    letterSpacing: '.1em', textTransform: 'uppercase' }}>{sublabel || 'BROTEK·SVC'}</div>
    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#fff',
    textTransform: 'uppercase', lineHeight: 1, letterSpacing: '-0.01em' }}>{label}</div>
  </div>;


// ───── Logo ─────
// Uses the official Brotek PNG logos provided by the brand team.
// variant: 'full' (wordmark) | 'iso' (isotype). theme: 'white' (for dark bg) | 'black'.
const Logo = ({ height = 28, variant = 'full', theme = 'white' }) => {
  // Resolve asset path: pages in nested folders (servicios/ or blog/) need ../ prefix; root pages don't.
  const prefix = (window.location.pathname.includes('/servicios/') || window.location.pathname.includes('/blog/')) ? '../' : '';
  const src = variant === 'iso' ?
  `${prefix}assets/logos/brotek-isotype-${theme}.png` :
  `${prefix}assets/logos/brotek-logo-${theme}.png`;
  return (
    <img src={src} alt="Brotek"
    style={{ ...{ height, display: 'block', userSelect: 'none', width: "65.5875px" }, width: "75.5875px", height: "39px" }} />);

};

Object.assign(window, { Eyebrow, Btn, Icon, GlassCard, Light, Sticker, Logo });