/* global React */

const CS = {
  pink: '#F50CA0',
  magenta: '#D6219E',
  blue: '#48ceea',
  orange: '#F5A94E',
  caramel: '#B5751E',
  white: '#ffffff',
  ink: '#2a2536',
  display: "'Fredoka', sans-serif",
  body: "'Barlow Semi Condensed', sans-serif",
};

// official brand logos (Simple Icons, CC0) rendered in white to sit on the colored circles
function Glyph({ kind, c = '#fff' }) {
  const common = { width: 26, height: 26, viewBox: '0 0 24 24', fill: c };
  switch (kind) {
    case 'youtube':
      return <svg {...common}><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /></svg>;
    case 'spotify':
      return <svg {...common}><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.561.3z" /></svg>;
    case 'tiktok':
      return <svg {...common}><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" /></svg>;
    case 'instagram':
      return <svg {...common}><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163C8.741 0 8.332.014 7.052.072 2.695.272.273 2.69.073 7.052.014 8.332 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.332 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.668-.072-4.948-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" /></svg>;
    default:
      return null;
  }
}

const PLATFORMS = [
  { name: 'YouTube', glyph: 'youtube', color: '#F50CA0', url: 'https://www.youtube.com/@TheMusicFairyandFriends' },
  { name: 'Spotify', glyph: 'spotify', color: '#B5751E', url: 'https://open.spotify.com/artist/41Wf13K9fLweohjxHfAgLo' },
  { name: 'TikTok', glyph: 'tiktok', color: '#2a2536', url: 'https://www.tiktok.com/@the.music.fairy.a' },
  { name: 'Instagram', glyph: 'instagram', color: '#D6219E', url: 'https://www.instagram.com/themusicfairyandfriends' },
];

function Socials({ size = 58, gap = 18, labels = true, justify = 'center' }) {
  return (
    <div style={{ display: 'flex', gap, justifyContent: justify, flexWrap: 'wrap' }}>
      {PLATFORMS.map((p) => (
        <a key={p.name} href={p.url || '#'} title={p.name}
          target={p.url && p.url !== '#' ? '_blank' : undefined}
          rel={p.url && p.url !== '#' ? 'noopener noreferrer' : undefined}
          onClick={p.url && p.url !== '#' ? undefined : (e) => e.preventDefault()} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
          textDecoration: 'none', cursor: 'pointer',
        }}>
          <span style={{
            width: size, height: size, borderRadius: '50%',
            background: p.color, border: '4px solid #fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 0 rgba(20,40,60,0.16)',
            transition: 'transform .15s ease',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px) scale(1.06)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}>
            <Glyph kind={p.glyph} />
          </span>
          {labels && <span style={{ fontFamily: CS.body, fontWeight: 600, fontSize: 14, color: '#fff', letterSpacing: 0.3, textShadow: '0 1px 2px rgba(20,40,60,0.25)' }}>{p.name}</span>}
        </a>
      ))}
    </div>
  );
}

// email capture with friendly success state
function EmailForm({ accent = '#F50CA0', onLight = false, stacked = false }) {
  const [val, setVal] = React.useState('');
  const [done, setDone] = React.useState(false);
  const ok = /.+@.+\..+/.test(val);
  const submit = (e) => { e.preventDefault(); if (ok) setDone(true); };

  if (done) {
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 12,
        background: '#fff', borderRadius: 50, padding: '14px 26px',
        boxShadow: '0 8px 0 rgba(20,40,60,0.14)', border: '4px solid #fff',
        fontFamily: CS.display, fontWeight: 600, fontSize: 22, color: accent,
      }}>
        <span style={{ fontSize: 26 }}>✦</span> You're on the list! See you soon!
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{
      display: 'flex', flexDirection: stacked ? 'column' : 'row',
      gap: 12, alignItems: 'stretch', width: stacked ? 320 : 'auto',
    }}>
      <input
        type="email" value={val} onChange={(e) => setVal(e.target.value)}
        placeholder="Enter your email…"
        style={{
          flex: 1, minWidth: stacked ? 'auto' : 260,
          fontFamily: CS.body, fontSize: 19, fontWeight: 500,
          padding: '15px 24px', borderRadius: 50, border: '4px solid #fff',
          outline: 'none', color: CS.ink, background: '#fff',
          boxShadow: '0 6px 0 rgba(20,40,60,0.12)',
        }}
      />
      <button type="submit" style={{
        fontFamily: CS.display, fontWeight: 600, fontSize: 21, color: '#fff',
        padding: '14px 32px', borderRadius: 50, border: '4px solid #fff',
        background: accent, cursor: 'pointer', whiteSpace: 'nowrap',
        boxShadow: '0 6px 0 rgba(20,40,60,0.2)', transition: 'transform .12s ease',
      }}
        onMouseDown={(e) => { e.currentTarget.style.transform = 'translateY(3px)'; e.currentTarget.style.boxShadow = '0 2px 0 rgba(20,40,60,0.2)'; }}
        onMouseUp={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 6px 0 rgba(20,40,60,0.2)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 6px 0 rgba(20,40,60,0.2)'; }}>
        Notify me!
      </button>
    </form>
  );
}

Object.assign(window, { CS, Glyph, Socials, EmailForm, PLATFORMS });