const iconClass = "w-full h-full";
const green = "#28c76f";
const greenLight = "#85c443";
const greenDim = "rgba(40,199,111,0.15)";

export function IconSMS({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <path d="M8 12C8 10.343 9.343 9 11 9H29C30.657 9 32 10.343 32 12V23C32 24.657 30.657 26 29 26H22L16 31V26H11C9.343 26 8 24.657 8 23V12Z" fill={green} fillOpacity="0.2" stroke={green} strokeWidth="1.8" strokeLinejoin="round"/>
      <circle cx="14" cy="17.5" r="1.5" fill={green}/>
      <circle cx="20" cy="17.5" r="1.5" fill={green}/>
      <circle cx="26" cy="17.5" r="1.5" fill={green}/>
    </svg>
  );
}

export function IconEmail({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <rect x="7" y="11" width="26" height="18" rx="3" fill={green} fillOpacity="0.15" stroke={green} strokeWidth="1.8"/>
      <path d="M7 14L20 22L33 14" stroke={green} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M13 22L9 27M27 22L31 27" stroke={green} strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.5"/>
    </svg>
  );
}

export function IconSocial({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <circle cx="30" cy="13" r="4" fill={green} fillOpacity="0.25" stroke={green} strokeWidth="1.8"/>
      <circle cx="10" cy="20" r="4" fill={green} fillOpacity="0.25" stroke={green} strokeWidth="1.8"/>
      <circle cx="30" cy="27" r="4" fill={green} fillOpacity="0.25" stroke={green} strokeWidth="1.8"/>
      <line x1="14" y1="18" x2="26" y2="14" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="14" y1="22" x2="26" y2="26" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <circle cx="30" cy="13" r="2" fill={green}/>
      <circle cx="10" cy="20" r="2" fill={green}/>
      <circle cx="30" cy="27" r="2" fill={green}/>
    </svg>
  );
}

export function IconPBX({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <path d="M12 10H18L20 16L17 18C18.5 21.5 21.5 24.5 25 26L27 23L33 25V31C33 31 29 34 22 28C15 22 10 15 12 10Z" fill={green} fillOpacity="0.2" stroke={green} strokeWidth="1.8" strokeLinejoin="round"/>
      <path d="M26 10C28.5 10 31 12 31 15" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <path d="M26 13.5C27.2 13.5 28.5 14.5 28.5 16" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  );
}

export function IconChatbot({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <rect x="8" y="14" width="24" height="18" rx="4" fill={green} fillOpacity="0.15" stroke={green} strokeWidth="1.8"/>
      <circle cx="15" cy="22" r="2.5" fill={green}/>
      <circle cx="25" cy="22" r="2.5" fill={green}/>
      <path d="M16 27.5C17.2 28.8 22.8 28.8 24 27.5" stroke={green} strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="20" y1="14" x2="20" y2="10" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <circle cx="20" cy="9" r="1.5" fill={green}/>
      <line x1="9" y1="20" x2="6" y2="20" stroke={green} strokeWidth="1.5" strokeLinecap="round"/>
      <line x1="31" y1="20" x2="34" y2="20" stroke={green} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

export function IconCRM({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <circle cx="20" cy="14" r="5" fill={green} fillOpacity="0.2" stroke={green} strokeWidth="1.8"/>
      <path d="M10 32C10 26.477 14.477 22 20 22C25.523 22 30 26.477 30 32" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <circle cx="10" cy="17" r="3.5" stroke={green} strokeWidth="1.5" strokeOpacity="0.6"/>
      <path d="M4 29C4 25.5 6.7 22.7 10 22.5" stroke={green} strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.6"/>
      <circle cx="30" cy="17" r="3.5" stroke={green} strokeWidth="1.5" strokeOpacity="0.6"/>
      <path d="M36 29C36 25.5 33.3 22.7 30 22.5" stroke={green} strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.6"/>
    </svg>
  );
}

export function IconAnalytics({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <rect x="8" y="22" width="6" height="11" rx="2" fill={green} fillOpacity="0.5"/>
      <rect x="17" y="15" width="6" height="18" rx="2" fill={green} fillOpacity="0.75"/>
      <rect x="26" y="9" width="6" height="24" rx="2" fill={green}/>
      <path d="M8 20L14 15L20 18L29 10" stroke={greenLight} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="29" cy="10" r="2" fill={greenLight}/>
    </svg>
  );
}

export function IconTickets({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconClass}>
      <rect width="40" height="40" rx="10" fill={greenDim} />
      <rect x="7" y="10" width="26" height="20" rx="3" fill={green} fillOpacity="0.15" stroke={green} strokeWidth="1.8"/>
      <line x1="7" y1="17" x2="33" y2="17" stroke={green} strokeWidth="1.5" strokeOpacity="0.4"/>
      <circle cx="12" cy="13.5" r="1.5" fill={green} fillOpacity="0.6"/>
      <circle cx="17" cy="13.5" r="1.5" fill={green} fillOpacity="0.6"/>
      <circle cx="22" cy="13.5" r="1.5" fill={green} fillOpacity="0.6"/>
      <line x1="13" y1="22" x2="27" y2="22" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="13" y1="26" x2="21" y2="26" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  );
}

// ── Why Choose Us icons ───────────────────────────────────────────────────────

export function IconProvenStrategies({ size = 48 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="48" height="48" rx="14" fill={greenDim} />
      {/* Chart grid */}
      <rect x="10" y="10" width="28" height="28" rx="3" fill={green} fillOpacity="0.08" stroke={green} strokeWidth="1.5" strokeOpacity="0.4"/>
      {/* Bars */}
      <rect x="14" y="28" width="4" height="8" rx="1.5" fill={green} fillOpacity="0.4"/>
      <rect x="20" y="22" width="4" height="14" rx="1.5" fill={green} fillOpacity="0.65"/>
      <rect x="26" y="16" width="4" height="20" rx="1.5" fill={green}/>
      {/* Trend arrow line */}
      <path d="M13 30 L22 20 L28 24 L36 13" stroke={greenLight} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="36" cy="13" r="2.5" fill={greenLight}/>
    </svg>
  );
}

export function IconAIPowered({ size = 48 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="48" height="48" rx="14" fill={greenDim} />
      {/* Brain/chip outline */}
      <rect x="13" y="13" width="22" height="22" rx="5" fill={green} fillOpacity="0.12" stroke={green} strokeWidth="1.8"/>
      {/* Circuit pins */}
      <line x1="13" y1="19" x2="9" y2="19" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="13" y1="24" x2="9" y2="24" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="13" y1="29" x2="9" y2="29" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="35" y1="19" x2="39" y2="19" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="35" y1="24" x2="39" y2="24" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="35" y1="29" x2="39" y2="29" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="19" y1="13" x2="19" y2="9" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="29" y1="13" x2="29" y2="9" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="19" y1="35" x2="19" y2="39" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="29" y1="35" x2="29" y2="39" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      {/* Inner grid */}
      <rect x="18" y="18" width="12" height="12" rx="2.5" fill={green} fillOpacity="0.2" stroke={green} strokeWidth="1.5"/>
      <circle cx="24" cy="24" r="3" fill={green}/>
    </svg>
  );
}

export function IconDedicatedSupport({ size = 48 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="48" height="48" rx="14" fill={greenDim} />
      {/* Headset arc */}
      <path d="M13 24C13 17.925 17.925 13 24 13C30.075 13 35 17.925 35 24" stroke={green} strokeWidth="2" strokeLinecap="round"/>
      {/* Left ear cup */}
      <rect x="10" y="23" width="6" height="9" rx="3" fill={green} fillOpacity="0.2" stroke={green} strokeWidth="1.8"/>
      {/* Right ear cup */}
      <rect x="32" y="23" width="6" height="9" rx="3" fill={green} fillOpacity="0.2" stroke={green} strokeWidth="1.8"/>
      {/* Mic arm */}
      <path d="M35 30 Q35 36 28 36 L24 36" stroke={green} strokeWidth="1.8" strokeLinecap="round"/>
      {/* Mic dot */}
      <circle cx="24" cy="36" r="2" fill={green}/>
      {/* Pulse rings */}
      <circle cx="24" cy="36" r="4" stroke={green} strokeWidth="1" strokeOpacity="0.35"/>
    </svg>
  );
}

export function IconScalable({ size = 48 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="48" height="48" rx="14" fill={greenDim} />
      {/* Rocket body */}
      <path d="M24 8 C24 8 32 14 32 24 L32 30 L24 34 L16 30 L16 24 C16 14 24 8 24 8Z" fill={green} fillOpacity="0.2" stroke={green} strokeWidth="1.8" strokeLinejoin="round"/>
      {/* Window */}
      <circle cx="24" cy="22" r="4" fill={green} fillOpacity="0.35" stroke={green} strokeWidth="1.5"/>
      <circle cx="24" cy="22" r="1.8" fill={green}/>
      {/* Left fin */}
      <path d="M16 26 L10 30 L16 32Z" fill={green} fillOpacity="0.5" stroke={green} strokeWidth="1.2" strokeLinejoin="round"/>
      {/* Right fin */}
      <path d="M32 26 L38 30 L32 32Z" fill={green} fillOpacity="0.5" stroke={green} strokeWidth="1.2" strokeLinejoin="round"/>
      {/* Flame */}
      <path d="M20 34 Q22 40 24 38 Q26 40 28 34" fill={greenLight} fillOpacity="0.7" stroke={greenLight} strokeWidth="1" strokeLinejoin="round"/>
    </svg>
  );
}

export const serviceIconMap: Record<string, React.FC<{ size?: number }>> = {
  "sms-marketing": IconSMS,
  "email-marketing": IconEmail,
  "social-media-marketing": IconSocial,
  "pbx-voip": IconPBX,
  "chat-crm-chatbot": IconChatbot,
  "crm": IconCRM,
  "analytics": IconAnalytics,
  "support-tickets": IconTickets,
};
