'use client';

import { useEffect, useState } from 'react';
import { WhatsappGlyph, Icon } from './icons';
import { waGeneralInquiry } from '@/lib/whatsapp';

export function FloatingWhatsapp() {
    const [showTop, setShowTop] = useState(false);
    useEffect(() => {
        const onScroll = () => setShowTop(window.scrollY > 480);
        onScroll();
        window.addEventListener('scroll', onScroll, { passive: true });
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    return (
        <div className="fixed right-4 bottom-4 sm:right-6 sm:bottom-6 z-40 flex flex-col items-end gap-3">
            {showTop && (
                <button
                    aria-label="Scroll to top"
                    onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
                    className="w-11 h-11 rounded-full bg-ink-900 border border-white/10 text-steel-200 hover:bg-orange-600 hover:text-white hover:border-orange-600 inline-flex items-center justify-center shadow-lg transition-all"
                >
                    <Icon.ChevronDown className="w-5 h-5 rotate-180" />
                </button>
            )}
            <a
                href={waGeneralInquiry()}
                target="_blank"
                rel="noopener"
                aria-label="Chat on WhatsApp"
                className="relative w-14 h-14 rounded-full bg-[var(--color-whatsapp)] text-white inline-flex items-center justify-center shadow-[0_12px_28px_rgba(37,211,102,0.45)] animate-wa-pulse hover:scale-105 transition-transform"
            >
                <WhatsappGlyph className="w-7 h-7" />
            </a>
        </div>
    );
}