/* eslint-disable */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ============== ICONS ============== */
const Icon = {
Chat: (p) => (),
Target: (p) => (),
Cal: (p) => (),
Brain: (p) => (),
Bell: (p) => (),
Gear: (p) => (),
Layers: (p) => (),
HandOff: (p) => (),
Chart: (p) => (),
Tag: (p) => (),
Crm: (p) => (),
Check: (p) => (),
Sun: (p) => (),
Moon: (p) => (),
Plus: (p) => (),
Arrow: (p) => (),
Mail: (p) => (),
Menu: (p) => (),
Close: (p) => (),
};
/* ============== BRAND / TOOL LOGOS — slots for official SVGs ==============
Each tool renders an ![]()
pointing to assets/brands/.svg with a
per-tool class (e.g. `logo-whatsapp`). To swap in the real logo, just
overwrite that SVG file. CSS rules in styles.css can selectively apply
`filter: brightness(0) invert(1)` per class for logos that need to be
forced to white.
*/
const brandLogo = (slug, alt) => {
const C = (p = {}) => {
const { width, height, className = '', style, ...rest } = p;
return (
);
};
C.displayName = `Brand(${alt})`;
C.slug = slug;
return C;
};
const Tool = {
Instagram: brandLogo('instagram', 'Instagram'),
WhatsApp: brandLogo('whatsapp', 'WhatsApp'),
Gmail: brandLogo('email', 'Email'),
Drive: brandLogo('drive', 'Google Drive'),
Excel: brandLogo('excel', 'Microsoft Excel'),
Tiendanube:brandLogo('tiendanube', 'Tiendanube'),
Web: brandLogo('web', 'Sitio Web'),
Webhook: brandLogo('webhooks', 'Webhooks'),
Mailchimp: brandLogo('mailchimp', 'Mailchimp'),
GCal: brandLogo('gcal', 'Google Calendar'),
Calendly: brandLogo('calendly', 'Calendly'),
ML: brandLogo('mercadolibre', 'MercadoLibre'),
TikTok: brandLogo('tiktok', 'TikTok'),
Meta: brandLogo('meta', 'Meta'),
Shopify: brandLogo('shopify', 'Shopify'),
Claude: brandLogo('claude', 'Claude'),
ChatGPT: brandLogo('chatgpt', 'ChatGPT'),
};
/* ============== WHINK LOGO ============== */
const WhinkLogo = ({ size = 28 }) => (
Whink
);
/* ============== REVEAL HOOK ============== */
const useReveal = () => {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); } });
}, { rootMargin: '0px 0px -80px 0px', threshold: 0.05 });
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
};
const Reveal = ({ children, delay = 0, variant, as: Tag = 'div', className = '', style = {}, ...rest }) => {
const ref = useReveal();
const baseClass = variant ? `reveal-${variant}` : 'reveal';
return {children};
};
window.Whink = { Icon, Tool, WhinkLogo, Reveal, useReveal };