📬 PRD — Sistema de Contacto Multicanal · ALENOR

type ContactChannel = 'whatsapp' | 'email' | null;

const [isOpen, setIsOpen] = useState(false);
const [confirmingChannel, setConfirmingChannel] = useState<ContactChannel>(null);
const [isVisible, setIsVisible] = useState(true);
const lastScrollYRef = useRef(0);  // ref para evitar re-renders en scroll

useEffect(() => {
  let ticking = false;  // Throttle con requestAnimationFrame

  const handleScroll = () => {
    if (!ticking) {
      requestAnimationFrame(() => {
        const currentScrollY = window.scrollY;

        // Mostrar: scroll hacia arriba O posición < 100px
        if (currentScrollY < lastScrollYRef.current || currentScrollY < 100) {
          setIsVisible(true);
        }
        // Ocultar: scroll hacia abajo Y posición > 100px
        else if (currentScrollY > lastScrollYRef.current && currentScrollY > 100) {
          setIsVisible(false);
        }

        lastScrollYRef.current = currentScrollY;
        ticking = false;
      });
      ticking = true;
    }
  };

  window.addEventListener('scroll', handleScroll, { passive: true });
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

<motion.button
  initial={{ scale: 0, opacity: 0, y: 100 }}
  animate={{
    scale: isVisible ? 1 : 0,
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 100
  }}
  transition={{ duration: 0.3, ease: 'easeInOut' }}
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
>

<motion.div
  initial={{ opacity: 0, scale: 0.9, y: 20 }}
  animate={{ opacity: 1, scale: 1, y: 0 }}
  exit={{ opacity: 0, scale: 0.9, y: 20 }}
  transition={{ type: 'spring', duration: 0.5 }}
>

<motion.div
  initial={{ opacity: 0, scale: 0.9 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.9 }}
  transition={{ type: 'spring', duration: 0.4 }}
>

const WHATSAPP_NUMBER = '51933248169';  // Código de Perú (+51) + número

const MESSAGE = `Hola bienvenid@s 👋
Este es nuestro canal de atención al cliente...
Esa Care
Atención al Cliente`;

const handleConfirmWhatsApp = () => {
  const encodedMessage = encodeURIComponent(MESSAGE);
  window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${encodedMessage}`, '_blank');
};

const EMAIL = 'aleidanoriegamunoz@gmail.com';

const handleConfirmEmail = () => {
  const subject = encodeURIComponent('Consulta - ALENOR');
  const body = encodeURIComponent(MESSAGE);
  window.location.href = `mailto:${EMAIL}?subject=${subject}&body=${body}`;
};

// Dynamic import — no afecta el bundle inicial
const ContactWidget = dynamic(() => import('./components/widgets/ContactWidget'));

// Renderizado fuera del <main>, al nivel del layout
<ContactWidget />

// Coordenadas: Rioja, San Martín, Perú
// Lat: -5.986204, Lng: -77.282693

<iframe
  src="https://maps.google.com/maps?q=-5.986204,-77.282693&t=&z=16&ie=UTF8&iwloc=&output=embed"
  width="100%"
  height="400"
  style={{ border: 0 }}
  allowFullScreen
  loading="lazy"
  referrerPolicy="no-referrer-when-downgrade"
  title="Ubicación de Alenor"
/>

// Tres badges que refuerzan la propuesta de valor
const trustElements = [
  'Envío Gratuito +S/ 100',
  '100% Natural',
  'Hecho en Perú',
];

// Columna izquierda — entra desde la izquierda
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}

// Columna derecha (mapa) — entra desde la derecha con delay
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.2 }}

// Trust badges — fade in con delay mayor
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.3 }}

/* Gradiente diagonal de colores de la marca */
bg-linear-to-br from-sage-primary via-sage-primary/95 to-tan-primary

/* Margin negativo para eliminar gap entre secciones */
-mt-1

import { buildWhatsAppUrl, buildOrderWhatsAppMessage } from '@/app/lib/format';
import type { Order } from '@/app/types/orders';

export default function WhatsAppCTA({ order }: WhatsAppCTAProps) {
  const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
  const message = buildOrderWhatsAppMessage(order, baseUrl);
  const url = buildWhatsAppUrl(message);
  // ...
}

// Los emojis se generan en runtime desde code points para evitar
// problemas de encoding de archivos
const E = {
  leaf:      String.fromCodePoint(0x1F33F),  // 🌿
  wave:      String.fromCodePoint(0x1F44B),  // 👋
  clipboard: String.fromCodePoint(0x1F4CB),  // 📋
  soap:      String.fromCodePoint(0x1F9FC),  // 🧼
  money:     String.fromCodePoint(0x1F4B0),  // 💰
  // ...
};

const DASH = String.fromCodePoint(0x2501);   // ━
const LINE = String.fromCodePoint(0x2500);   // ─
const SEP_THICK = DASH.repeat(22);           // ━━━━━━━━━━━━━━━━━━━━━━━
const SEP_THIN  = LINE.repeat(19);           // ───────────────────

// app/lib/constants.ts
export const BUSINESS = {
  name:       'ALENOR',
  slogan:     'Cuidamos tu piel, cuidamos el planeta',
  whatsapp:   '51933248169',   // Código Perú (+51) + número
  email:      'aleidanoriegamunoz@gmail.com',
  location:   'Rioja, San Martín, Perú',
  courier:    'Shalom',
  courierUrl: 'https://shalom.com.pe/',
} as const;