// Shared atoms for the landing page

const GoldDot = ({ size = 8, mx = 8 }) => (
  <span aria-hidden="true" style={{
    display: 'inline-block',
    width: size, height: size, borderRadius: '50%',
    background: 'var(--c-gold)',
    margin: `0 ${mx}px`,
    transform: 'translateY(-2px)',
  }} />
);

const Badge = ({ children, color = 'gold', style = {} }) => {
  const palette = {
    gold:  { bg: 'var(--c-gold)',  fg: 'var(--c-night)' },
    green: { bg: 'var(--c-green)', fg: 'var(--c-sand)'  },
    night: { bg: 'rgba(11,31,58,0.85)', fg: 'var(--c-gold)' },
    outline: { bg: 'transparent', fg: 'var(--c-gold)', border: '1px solid var(--c-gold)' },
  }[color];
  return (
    <span className="label" style={{
      background: palette.bg, color: palette.fg,
      border: palette.border || 'none',
      padding: '6px 12px', borderRadius: 20,
      display: 'inline-block', whiteSpace: 'nowrap',
      ...style,
    }}>{children}</span>
  );
};

const GoldButton = ({ children, href, onClick, variant = 'solid', icon, style = {}, ...rest }) => {
  const base = {
    fontFamily: 'var(--font-body)',
    fontWeight: 500,
    fontSize: 16,
    padding: '14px 28px',
    borderRadius: 6,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    cursor: 'pointer',
    transition: 'transform .15s ease, box-shadow .15s ease, background .15s ease',
    textDecoration: 'none',
  };
  const variants = {
    solid:  { background: 'var(--c-gold)', color: 'var(--c-night)', border: 'none' },
    ghost:  { background: 'transparent', color: 'var(--c-gold)', border: '1.5px solid var(--c-gold)' },
    whatsapp: { background: '#25D366', color: '#fff', border: 'none' },
  };
  const Tag = href ? 'a' : 'button';
  const handleClick = (e) => {
    if (href && (href.includes('walink') || href.includes('q.revenoise.com'))) {
      if (typeof gtag !== 'undefined') {
        gtag('event', 'whatsapp_click', { event_category: 'conversion', event_label: children });
      }
    }
    if (onClick) onClick(e);
  };
  return (
    <Tag href={href} onClick={handleClick} style={{ ...base, ...variants[variant], ...style }}
         onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 6px 20px rgba(245,197,24,0.18)'; }}
         onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
         {...rest}>
      {icon && <span style={{ display: 'inline-flex' }}>{icon}</span>}
      {children}
    </Tag>
  );
};

const SectionHead = ({ kicker, title, dark = true, center = false, kickerColor }) => (
  <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 40 }}>
    {kicker && (
      <div className="label" style={{
        color: kickerColor || 'var(--c-green)',
        marginBottom: 16,
        display: 'flex', alignItems: 'center', gap: 10,
        justifyContent: center ? 'center' : 'flex-start',
      }}>
        <span style={{ width: 24, height: 1, background: 'currentColor', display: 'inline-block', opacity: 0.6 }} />
        {kicker}
      </div>
    )}
    <h2 style={{
      fontFamily: 'var(--font-display)',
      fontSize: 'clamp(36px, 5vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '0.01em',
      textTransform: 'uppercase',
      color: dark ? 'var(--c-sand)' : 'var(--c-night)',
      margin: 0,
      maxWidth: 900,
      marginLeft: center ? 'auto' : 0,
      marginRight: center ? 'auto' : 0,
    }}>{title}</h2>
  </div>
);

const SectionWrap = ({ bg = 'night', children, id, pad = 'lg', style = {} }) => {
  const bgs = {
    night: 'var(--c-night)',
    sand: 'var(--c-sand)',
    stadium: 'var(--c-stadium)',
  };
  const pads = { lg: '64px 20px', md: '48px 20px', sm: '40px 20px' };
  return (
    <section id={id} style={{ background: bgs[bg], padding: pads[pad], position: 'relative', ...style }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {children}
      </div>
    </section>
  );
};

// WhatsApp icon SVG
const WhatsAppIcon = ({ size = 20, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413"/>
  </svg>
);

// Brazilian flag mini
const FlagBR = ({ size = 18 }) => (
  <svg width={size} height={size * 0.7} viewBox="0 0 14 10" aria-hidden="true">
    <rect width="14" height="10" fill="#009C3B"/>
    <path d="M7 1.2L12.6 5 7 8.8 1.4 5z" fill="#FEDF00"/>
    <circle cx="7" cy="5" r="1.7" fill="#002776"/>
  </svg>
);

const NumberCircle = ({ n }) => (
  <div style={{
    width: 56, height: 56, borderRadius: '50%',
    border: '1.5px solid var(--c-gold)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--c-gold)',
    letterSpacing: '0.02em',
  }}>{String(n).padStart(2,'0')}</div>
);

Object.assign(window, { GoldDot, Badge, GoldButton, SectionHead, SectionWrap, WhatsAppIcon, FlagBR, NumberCircle });