import { useEffect, useRef } from 'react';

export function useReveal() {
    const ref = useRef(null);
    useEffect(() => {
        const el = ref.current;
        if (!el) return;
        const io = new IntersectionObserver(
            (entries) => {
                entries.forEach((e) => {
                    if (e.isIntersecting) {
                        e.target.classList.add('is-visible');
                        io.unobserve(e.target);
                    }
                });
            },
            { threshold: 0.12, rootMargin: '0px 0px -8% 0px' },
        );
        io.observe(el);
        return () => io.disconnect();
    }, []);
    return ref;
}

export const Icons = {
    moon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" />
            <circle cx="14" cy="9" r=".6" fill="currentColor" />
            <circle cx="17" cy="12" r=".4" fill="currentColor" />
        </svg>
    ),
    path: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 20 L8 12 L12 16 L16 6 L21 14" />
            <circle cx="8" cy="12" r="1.2" fill="currentColor" />
            <circle cx="12" cy="16" r="1.2" fill="currentColor" />
            <circle cx="16" cy="6" r="1.2" fill="currentColor" />
        </svg>
    ),
    solo: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="9" />
            <path d="M12 7v5l3 2" />
            <circle cx="12" cy="12" r=".8" fill="currentColor" />
        </svg>
    ),
    mask: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 8c2-2 5-3 8-3s6 1 8 3v5c-1 4-4 7-8 7s-7-3-8-7z" />
            <path d="M8 11l2 2" />
            <path d="M16 11l-2 2" />
        </svg>
    ),
    wolf: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 9l3-5 3 4h6l3-4 3 5-2 3v5l-4 3h-6l-4-3V12z" />
            <circle cx="9" cy="13" r=".8" fill="currentColor" />
            <circle cx="15" cy="13" r=".8" fill="currentColor" />
        </svg>
    ),
    mythic: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <polygon points="12 3 15 9 22 10 17 15 18 22 12 19 6 22 7 15 2 10 9 9" />
        </svg>
    ),
    pass: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="6" width="18" height="14" rx="1" />
            <path d="M3 10h18" />
            <path d="M7 14h6" />
            <circle cx="17" cy="15" r="1.2" />
        </svg>
    ),
    collection: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="3" width="8" height="8" />
            <rect x="13" y="3" width="8" height="8" />
            <rect x="3" y="13" width="8" height="8" />
            <circle cx="17" cy="17" r="4" />
        </svg>
    ),
    kart: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 15l2-5h8l4 3h4v2" />
            <circle cx="7" cy="17" r="2" />
            <circle cx="17" cy="17" r="2" />
            <path d="M9 15h4" />
        </svg>
    ),
    arrow: (
        <svg className="btn-arrow" viewBox="0 0 14 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M1 5h12M9 1l4 4-4 4" />
        </svg>
    ),
};

export function MoonMark({ size = 32 }) {
    return (
        <svg viewBox="0 0 32 32" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1">
            <circle cx="16" cy="16" r="11" stroke="currentColor" strokeOpacity="0.3" />
            <path d="M20 7 A11 11 0 1 0 20 25 A8 8 0 1 1 20 7 Z" fill="currentColor" fillOpacity="0.7" />
            <circle cx="16" cy="16" r="15" stroke="currentColor" strokeOpacity="0.15" strokeDasharray="1 3" />
            <path d="M16 1 L16 4 M16 28 L16 31 M1 16 L4 16 M28 16 L31 16" stroke="currentColor" strokeOpacity="0.4" />
        </svg>
    );
}

export function getBootstrap() {
    return window.MOONWELL || {};
}
