/* global React */
/* ============================================
   FOLLOW SYSTEM — centralised social channels
   Edit the URLs / handles below to update them
   EVERYWHERE on the site (footer + floating widget).
   ============================================ */
const SOCIAL_CHANNELS = [
  { id: 'telegram', label: 'Telegram', handle: '@MH82580',         url: 'https://t.me/MH82580',                     color: '#26A5E4' },
  { id: 'youtube',  label: 'YouTube',  handle: '@EXPERT4FOREX',    url: 'https://www.youtube.com/@EXPERT4FOREX',    color: '#FF0033' },
  { id: 'tiktok',   label: 'TikTok',   handle: '@expertforforex',  url: 'https://www.tiktok.com/@expertforforex',   color: '#00F2EA' },
];

function SocialIcon({ id, size = 22 }) {
  const common = { width: size, height: size, viewBox: '0 0 24 24' };
  switch (id) {
    case 'telegram':
      return (
        <svg {...common} fill="currentColor" aria-hidden="true">
          <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/>
        </svg>
      );
    case 'youtube':
      return (
        <svg {...common} fill="currentColor" aria-hidden="true">
          <path d="M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2C0 8.07 0 12 0 12s0 3.93.5 5.8a3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.8zM9.55 15.57V8.43L15.82 12l-6.27 3.57z"/>
        </svg>
      );
    case 'tiktok':
      return (
        <svg {...common} fill="currentColor" aria-hidden="true">
          <path d="M16.6 5.82a4.28 4.28 0 0 1-1.06-2.82h-3.2v12.93a2.59 2.59 0 0 1-2.59 2.5 2.59 2.59 0 0 1-2.59-2.59 2.59 2.59 0 0 1 3.4-2.46V7.7a5.92 5.92 0 0 0-.81-.06A5.92 5.92 0 0 0 4 13.56a5.92 5.92 0 0 0 5.92 5.92 5.92 5.92 0 0 0 5.92-5.92V8.79a7.4 7.4 0 0 0 4.33 1.39V6.98a4.28 4.28 0 0 1-3.49-1.16z"/>
        </svg>
      );
    default:
      return null;
  }
}

/* ---------- Footer / inline row of follow buttons ---------- */
function SocialLinks({ size = 42, gap = 10, showLabels = false }) {
  const [hover, setHover] = React.useState(null);
  return (
    <div className="flex" style={{ gap, flexWrap: 'wrap', alignItems: 'center' }}>
      {SOCIAL_CHANNELS.map(c => {
        const on = hover === c.id;
        return (
          <a key={c.id}
            href={c.url}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`Follow on ${c.label}`}
            onMouseEnter={() => setHover(c.id)}
            onMouseLeave={() => setHover(null)}
            className="flex"
            style={{
              alignItems: 'center', gap: showLabels ? 10 : 0,
              padding: showLabels ? '0 14px 0 0' : 0,
            }}>
            <span style={{
              width: size, height: size, borderRadius: '50%',
              display: 'grid', placeItems: 'center', flexShrink: 0,
              color: on ? '#000' : c.color,
              background: on ? c.color : 'rgba(255,255,255,0.04)',
              border: `1px solid ${on ? c.color : 'var(--line-strong)'}`,
              boxShadow: on ? `0 0 18px ${c.color}88` : 'none',
              transition: 'all 0.18s ease',
              transform: on ? 'translateY(-2px)' : 'none',
            }}>
              <SocialIcon id={c.id} size={size * 0.48} />
            </span>
            {showLabels && (
              <span style={{ lineHeight: 1.2 }}>
                <span style={{ display: 'block', fontWeight: 600, fontSize: 14, color: 'var(--text)' }}>{c.label}</span>
                <span className="font-mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{c.handle}</span>
              </span>
            )}
          </a>
        );
      })}
    </div>
  );
}

/* ---------- Site-wide floating "Follow us" widget (bottom-left) ---------- */
function FollowFAB() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="follow-fab-wrap" style={{ position: 'fixed', bottom: 24, left: 24, zIndex: 90 }}>
      {/* Expanding channel list — anchored above the button */}
      <div style={{
        position: 'absolute', bottom: 68, left: 0,
        display: 'flex', flexDirection: 'column-reverse', gap: 10,
        alignItems: 'flex-start',
        opacity: open ? 1 : 0,
        transform: open ? 'translateY(0)' : 'translateY(12px)',
        pointerEvents: open ? 'auto' : 'none',
        transition: 'opacity 0.22s ease, transform 0.25s cubic-bezier(0.2,0.8,0.2,1)',
      }}>
        {SOCIAL_CHANNELS.map((c, i) => (
          <a key={c.id}
            href={c.url}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`Follow on ${c.label}`}
            className="follow-chip"
            style={{
              display: 'flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap',
              padding: '8px 18px 8px 8px', borderRadius: 100,
              background: 'rgba(5,6,13,0.92)', backdropFilter: 'blur(8px)',
              border: `1px solid ${c.color}55`, textDecoration: 'none',
              transition: 'transform 0.25s cubic-bezier(0.2,0.8,0.2,1)',
              transitionDelay: open ? `${i * 45}ms` : '0ms',
            }}>
            <span style={{
              width: 38, height: 38, borderRadius: '50%', flexShrink: 0,
              display: 'grid', placeItems: 'center',
              background: `linear-gradient(135deg, ${c.color}, ${c.color}cc)`, color: '#000',
            }}>
              <SocialIcon id={c.id} size={20} />
            </span>
            <span style={{ lineHeight: 1.15 }}>
              <span style={{ display: 'block', fontWeight: 600, fontSize: 13, color: '#fff' }}>{c.label}</span>
              <span className="font-mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>{c.handle}</span>
            </span>
          </a>
        ))}
      </div>

      {/* Main toggle button */}
      <button
        type="button"
        aria-label={open ? 'Close follow menu' : 'Follow us'}
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
        className="follow-fab-btn"
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          height: 56, padding: open ? '0 18px' : '0 20px', borderRadius: 100,
          background: open ? 'rgba(5,6,13,0.95)' : 'linear-gradient(135deg, var(--cyan), #00b8cc)',
          color: open ? 'var(--cyan)' : '#000',
          border: open ? '1px solid var(--cyan)' : '1px solid rgba(255,255,255,0.15)',
          cursor: 'pointer',
          boxShadow: open ? '0 8px 24px rgba(0,0,0,0.5)' : '0 0 18px rgba(0,229,255,0.5), 0 6px 16px rgba(0,0,0,0.4)',
          transition: 'all 0.2s ease',
          fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '0.04em',
        }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'transform 0.25s ease', transform: open ? 'rotate(135deg)' : 'none', flexShrink: 0 }}>
          {open
            ? <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>
            : <><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></>}
        </svg>
        <span className="follow-fab-label">{open ? 'Close' : 'Follow us'}</span>
      </button>
    </div>
  );
}

window.SOCIAL_CHANNELS = SOCIAL_CHANNELS;
window.SocialIcon = SocialIcon;
window.SocialLinks = SocialLinks;
window.FollowFAB = FollowFAB;