/* global window */
// Per-service channel configurations + capacity bar data.
// Layered on top of SERVICES so we don't bloat data.jsx.

// Helper: render a GoGorilla 3D webp icon as a channel mark (used for
// generic categories like email/phone/video/"other"). Brand marks (Meta,
// TikTok, Google, etc.) stay as inline SVG below to preserve recognition.
const ggIcon = (src) => (
  <img src={src} alt="" className="channel-tile__webp" loading="lazy" />
);

// Brand mark image, full-color logo (PNG/WebP/SVG). Used for major platforms
// where users recognize the actual logo (Meta, TikTok, YouTube, etc.).
const brandImg = (src) => (
  <img src={src} alt="" className="channel-tile__brand" loading="lazy" />
);

// Inline SVG channel icons, sized 28×28, monochrome-friendly via fill="currentColor"
const CH_ICONS = {
  // Email envelope, for sales outbound + email channel, uses GG 3D webp
  email: ggIcon('assets/icons/ch-email.webp'),
  // LinkedIn brand mark
  linkedin: brandImg('assets/icons/channels/linkedin.png'),
  // Phone (handset) for cold-call channel, uses GG 3D webp
  phone: ggIcon('assets/icons/ch-phone.webp'),
  // 2026-05-30: ch-phone.webp is actually a message-bubble (SMS) graphic, so it
  // is reused for SMS. 'calling' uses a temporary inline handset; Bea to replace
  // with a 3D webp (assets/icons/ch-call.webp) to match the other channel marks.
  calling: (
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
  ),
  // Video outreach, uses GG 3D webp
  video: ggIcon('assets/icons/ch-video.webp'),
  // Meta brand mark (full color)
  meta: brandImg('assets/icons/channels/meta.png'),
  // Facebook brand mark, inline SVG (blue rounded square + white 'f')
  facebook: (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="0" y="0" width="24" height="24" rx="5" fill="#1877F2"/>
      <path d="M14.5 12.5h-1.9V20h-3v-7.5H8v-2.6h1.6V8.2c0-1.5.7-3.7 3.7-3.7l2.7.01v2.5h-2c-.3 0-.8.2-.8.9v1.95h2.8l-.5 2.6z" fill="#fff"/>
    </svg>
  ),
  // Instagram (camera)
  instagram: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor"/>
    </svg>
  ),
  // TikTok brand mark (full color)
  tiktok: brandImg('assets/icons/channels/tiktok.webp'),
  // YouTube brand mark (full color)
  youtube: brandImg('assets/icons/channels/youtube.png'),
  // Pinterest brand mark (full color)
  pinterest: brandImg('assets/icons/channels/pinterest.png'),
  // X brand mark (full color)
  x: brandImg('assets/icons/channels/x.png'),
  // Snapchat brand mark (full color)
  snap: brandImg('assets/icons/channels/snap.png'),
  // WhatsApp brand mark (full color)
  whatsapp: brandImg('assets/icons/channels/whatsapp.png'),
  // Reddit brand mark, inline SVG (orange circle with white "r")
  reddit: (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="11" fill="#FF4500"/>
      <path d="M14.5 11c.7-.4 1.6-.4 2.2.2.7.7.7 1.8 0 2.5-.4.4-1 .6-1.5.5.05.3.07.6.07.9 0 2.4-2.5 4.4-5.6 4.4s-5.6-2-5.6-4.4c0-.3.02-.6.07-.9-.5.1-1.1-.1-1.5-.5-.7-.7-.7-1.8 0-2.5.6-.6 1.5-.6 2.2-.2 1-.7 2.4-1.1 3.9-1.2l.7-3.4c0-.1.1-.2.2-.2l2.5.5c.2-.4.6-.7 1.1-.7.7 0 1.2.5 1.2 1.2s-.5 1.2-1.2 1.2c-.7 0-1.2-.5-1.2-1.1l-2.2-.4-.6 3c1.5.06 2.9.5 3.9 1.2zm-7.5 2.5c0 .6.4 1 1 1s1-.4 1-1-.4-1-1-1-1 .4-1 1zm5 0c0 .6.4 1 1 1s1-.4 1-1-.4-1-1-1-1 .4-1 1zm-2.5 3.7c1.1 0 2-.3 2.6-.7.1-.1.1-.2 0-.3-.1-.1-.2-.1-.3 0-.5.4-1.3.6-2.3.6s-1.8-.2-2.3-.6c-.1-.1-.2-.1-.3 0-.1.1-.1.2 0 .3.6.4 1.5.7 2.6.7z" fill="#fff"/>
    </svg>
  ),
  // Quora brand mark
  quora: brandImg('assets/icons/channels/quora.svg'),
  // Google Ads brand mark (full color)
  google: brandImg('assets/icons/channels/googleads.png'),
  // Microsoft (Bing) Ads brand mark (full color)
  microsoft: brandImg('assets/icons/channels/microsoft.png'),
  // Klaviyo (K-ish)
  klaviyo: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 3 2 8.5l1.4 2.4L12 6l8.6 4.9L22 8.5 12 3zm0 7-7.5 4.3 1.4 2.4L12 13l6.1 3.7 1.4-2.4L12 10z"/>
    </svg>
  ),
  // Mailchimp (M-monkey-ear simplified)
  mailchimp: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2c2 0 3.7 1 4.4 2.6.7-.4 1.7-.4 2.4.2.8.7 1 1.9.5 2.9.7.6 1.2 1.5 1.2 2.6 0 1.4-.9 2.6-2.2 3 .3.7.5 1.6.5 2.6 0 3.4-2.6 6.1-7.7 6.1-5 0-7.6-2.7-7.6-6.1 0-3.7 3.4-6.6 6.5-8.6.5-.3 1-.6 1.5-.8C11.7 3.6 11.6 2 12 2zm-2.4 12.7c.1.4.5.7 1 .7s.9-.3 1-.7c0-.4-.3-.6-1-.6s-1.1.2-1 .6z"/>
    </svg>
  ),
  // HubSpot (sprocket)
  hubspot: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="13" cy="14" r="3.5"/>
      <path d="M13 10.5V5.5"/>
      <circle cx="17.5" cy="5" r="2"/>
      <path d="M10.5 14h-3.5"/>
      <circle cx="5" cy="14" r="1.5" fill="currentColor"/>
    </svg>
  ),
  // Braze (B-spark, generic)
  braze: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M5 4l3.5 3.5L5 11l3.5 3.5L5 18l3 3 7-7-3-3 3-3-7-7-3 3z"/>
    </svg>
  ),
  // Generic "more channels", uses GG 3D list webp
  more: ggIcon('assets/icons/ch-more.webp'),
};

// Channel option dictionary keyed by id, referenced from per-service configs.
// Each option: id, label, icon, brandColor (used for selected/hover accent)
const CHANNEL_OPTIONS = {
  // Sales/outbound
  'email':     { id: 'email',     label: 'Email Outbound',  icon: CH_ICONS.email,     color: '#D14728', tip: 'Personalised cold email sequences from warmed-up domains, written and managed by our team.' },
  'linkedin':  { id: 'linkedin',  label: 'LinkedIn',        icon: CH_ICONS.linkedin,  color: '#0A66C2', tip: 'Targeted LinkedIn connection requests and follow-ups to your ideal prospects.' },
  'phone':     { id: 'phone',     label: 'Phone',           icon: CH_ICONS.phone,     color: '#16a34a' },
  'sms':       { id: 'sms',       label: 'SMS',             icon: CH_ICONS.phone,     color: '#16a34a', tip: 'Short, compliant text follow-ups to warm prospects, used alongside email and calling to lift reply rates.' },
  'calling':   { id: 'calling',   label: 'Calling',         icon: CH_ICONS.calling,   color: '#16a34a', tip: 'Human cold calling by our in-house SDRs, sequenced with your other channels.' },
  'video':     { id: 'video',     label: 'Video outreach',  icon: CH_ICONS.video,     color: '#8b5cf6' },
  // Social platforms
  'meta':      { id: 'meta',      label: 'Meta',            icon: CH_ICONS.meta,      color: '#1877F2', tip: 'Meta (Facebook and Instagram), used to warm up and reach prospects alongside your direct outreach.' },
  'facebook':  { id: 'facebook',  label: 'Facebook',        icon: CH_ICONS.facebook,  color: '#1877F2' },
  'instagram': { id: 'instagram', label: 'Instagram',       icon: CH_ICONS.instagram, color: '#E1306C' },
  'tiktok':    { id: 'tiktok',    label: 'TikTok',          icon: CH_ICONS.tiktok,    color: '#000000' },
  'youtube':   { id: 'youtube',   label: 'YouTube',         icon: CH_ICONS.youtube,   color: '#FF0000' },
  'pinterest': { id: 'pinterest', label: 'Pinterest',       icon: CH_ICONS.pinterest, color: '#E60023' },
  'x':         { id: 'x',         label: 'X',               icon: CH_ICONS.x,         color: '#000000' },
  'snap':      { id: 'snap',      label: 'Snapchat',        icon: CH_ICONS.snap,      color: '#FFFC00' },
  'whatsapp':  { id: 'whatsapp',  label: 'WhatsApp',        icon: CH_ICONS.whatsapp,  color: '#25D366', tipTitle: 'WhatsApp Follow-Up (Add-on)', tip: 'Personalised WhatsApp follow-ups from a real device after your initial email, with much higher open and reply rates. Adds £199/mo.' },
  'reddit':    { id: 'reddit',    label: 'Reddit',          icon: CH_ICONS.reddit,    color: '#FF4500' },
  'quora':     { id: 'quora',     label: 'Quora',           icon: CH_ICONS.quora,     color: '#B92B27' },
  'linkedin-org': { id: 'linkedin-org', label: 'LinkedIn',  icon: CH_ICONS.linkedin,  color: '#0A66C2' },
  // Search / ads
  'google':    { id: 'google',    label: 'Google Ads',      icon: CH_ICONS.google,    color: '#4285F4' },
  'microsoft': { id: 'microsoft', label: 'Microsoft Ads',   icon: CH_ICONS.microsoft, color: '#737373' },
  // Email platforms
  'klaviyo':   { id: 'klaviyo',   label: 'Klaviyo',         icon: CH_ICONS.klaviyo,   color: '#1E1E1E' },
  'mailchimp': { id: 'mailchimp', label: 'Mailchimp',       icon: CH_ICONS.mailchimp, color: '#FFE01B' },
  'hubspot':   { id: 'hubspot',   label: 'HubSpot',         icon: CH_ICONS.hubspot,   color: '#FF7A59' },
  'braze':     { id: 'braze',     label: 'Braze',           icon: CH_ICONS.braze,     color: '#FFA800' },
  // Generic catch-all
  'more':      { id: 'more',      label: 'Other',           icon: CH_ICONS.more,      color: '#0B1838' },
};

// Per-service channel configs.
// `mode: 'included'`, show channels included in this tier (informational, no select)
// `mode: 'select'`  , user selects up to `max[tier]` channels from `options`.
//                      `options` may be either an array (same menu for all tiers) or
//                      an object keyed by tier id { starter:[...], grow:[...], scale:[...] }
//                      so the available menu can grow as tiers level up.
// `extras`, additional UI per service, e.g. paid-ads daily ad-spend input
const SERVICE_CHANNELS = {
  sales: {
    mode: 'select',
    helpInactive: 'Pick from the following channels',
    helpActive: 'Choose your outbound channels',
    options: {
      starter: ['email', 'linkedin'],
      grow:    ['email', 'linkedin', 'sms', 'calling', 'whatsapp'],
      scale:   ['email', 'linkedin', 'sms', 'calling', 'whatsapp', 'meta'],
      // enterprise inherits scale's menu
    },
    max: { starter: 2, grow: 5, scale: 6 },
  },
  'paid-ads': {
    mode: 'select',
    helpInactive: 'Pick from the following channels',
    helpActive: 'Choose your ad channel(s)',
    options: {
      starter: ['google', 'microsoft'],
      grow:    ['meta', 'tiktok', 'pinterest', 'linkedin'],
      scale:   ['google', 'meta', 'tiktok', 'pinterest', 'linkedin', 'microsoft'],
      // enterprise inherits scale's menu
    },
    max: { starter: 1, grow: 1, scale: 2 },
    extras: { dailyAdSpend: true },
  },
  email: {
    mode: 'select',
    helpInactive: 'Channels included at this tier',
    helpActive: 'Channels included at your tier',
    options: ['email'],
    max: { starter: 1, grow: 1, scale: 2 },
  },
  smm: {
    mode: 'select',
    helpInactive: 'Pick from the following channels',
    helpActive: 'Choose channels to manage',
    options: {
      starter:    ['facebook', 'instagram'],
      grow:       ['facebook', 'instagram', 'tiktok'],
      scale:      ['facebook', 'instagram', 'tiktok', 'pinterest'],
      enterprise: ['facebook', 'instagram', 'tiktok', 'pinterest'],
    },
    max: { starter: 2, grow: 3, scale: 4, enterprise: 4 },
  },
  content: {
    mode: 'select',
    helpInactive: 'Pick from the following channels',
    helpActive: 'Choose channels to produce content for',
    options: ['meta', 'tiktok', 'youtube', 'pinterest', 'linkedin', 'x'],
    max: { starter: 2, grow: 4, scale: 6 },
  },
  motion: {
    mode: 'select',
    helpInactive: 'Pick from the following channels',
    helpActive: 'Choose channels to produce motion content for',
    options: {
      starter:    ['meta', 'tiktok', 'youtube', 'pinterest', 'linkedin'],
      grow:       ['meta', 'tiktok', 'youtube', 'pinterest', 'linkedin', 'x'],
      scale:      ['meta', 'tiktok', 'youtube', 'pinterest', 'linkedin', 'x', 'snap', 'reddit'],
      enterprise: ['meta', 'tiktok', 'youtube', 'pinterest', 'linkedin', 'x', 'snap', 'reddit'],
    },
    max: { starter: 5, grow: 6, scale: 8, enterprise: 8 },
  },
};

// Capacity per service: status drives the bar fill + status pill + copy.
//   - 'open'    : ~30% fill, calm blue
//   - 'limited' : ~70% fill, blue→violet gradient
//   - 'full'    : 100% fill, amber gradient + waitlist copy
const SERVICE_CAPACITY = {
  sales:       { status: 'open', fill: 0.32, copy: 'We currently have capacity to onboard new clients for this service. We recommend scheduling a call soon to secure your place with our specialist team.' },
  'paid-ads':  { status: 'open', fill: 0.28, copy: 'We currently have capacity to onboard new clients for this service. We recommend scheduling a call soon to secure your place with our specialist team.' },
  email:       { status: 'open', fill: 0.30, copy: 'We currently have capacity to onboard new clients for this service. We recommend scheduling a call soon to secure your place with our specialist team.' },
  smm:         { status: 'open', fill: 0.34, copy: 'We currently have capacity to onboard new clients for this service. We recommend scheduling a call soon to secure your place with our specialist team.' },
  content:     { status: 'open', fill: 0.32, copy: 'We currently have capacity to onboard new clients for this service. We recommend scheduling a call soon to secure your place with our specialist team.' },
  motion:      { status: 'open', fill: 0.28, copy: 'We currently have capacity to onboard new clients for this service. We recommend scheduling a call soon to secure your place with our specialist team.' },
  whitelabel:  { status: 'open', fill: 0.22, copy: 'We currently have capacity to onboard new agency partners.' },
  fundraising: { status: 'open', fill: 0.30, copy: 'Open availability. Book a call to begin.' },
  'founders-portal': { status: 'open', fill: 0.18, copy: 'Open availability, instant onboarding.' },
};

window.SERVICE_CHANNELS = SERVICE_CHANNELS;
window.SERVICE_CAPACITY = SERVICE_CAPACITY;
window.CHANNEL_OPTIONS = CHANNEL_OPTIONS;

// Resolve the channel ids for a given service + tier.
// - 'select' mode: returns options[tierId] (if per-tier object) or options (if array)
//                  Enterprise → scale fallback.
// - 'included' mode: returns perTier[tierId]
window.channelsForTier = function channelsForTier(serviceId, tierId) {
  const cfg = SERVICE_CHANNELS[serviceId];
  if (!cfg) return [];
  if (cfg.mode === 'select') {
    const opts = cfg.options;
    if (Array.isArray(opts)) return opts;
    if (opts && typeof opts === 'object') {
      return opts[tierId] || opts.scale || opts.grow || opts.starter || [];
    }
    return [];
  }
  if (cfg.mode === 'included') {
    const pt = cfg.perTier || {};
    return pt[tierId] || pt.starter || [];
  }
  return cfg.options || [];
};