/* =========================================================
   M-FLOW — UI primitives + icons
   ========================================================= */
const { useState, useEffect, useRef } = React;

/* ICONS — minimal line, all 24x24 viewBox ------------------ */
function Icon({ name, size = 18 }) {
    const props = {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: 1.5,
        strokeLinecap: "round",
        strokeLinejoin: "round",
    };
    const paths = {
        arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
        arrowUpRight: <path d="M7 17 17 7M8 7h9v9" />,
        plus: <path d="M12 5v14M5 12h14" />,
        check: <path d="m5 12 4 4L19 6" />,
        whatsapp: (
            <g>
                <path d="M3 21l1.6-5.3A8.5 8.5 0 1 1 8.3 19.4L3 21Z" />
                <path d="M9 9.5c0 1.5 .5 2.8 1.5 4s2.5 1.5 4 1.5l.7-1.5-2-1-1 .8c-.8-.4-1.5-1.1-1.8-1.8l.8-1-1-2L9 9.5Z" fill="currentColor" stroke="none" />
            </g>
        ),
        shield: (
            <g>
                <path d="M12 3 4 6v6c0 4.5 3.2 8.3 8 9 4.8-.7 8-4.5 8-9V6l-8-3Z" />
                <path d="m9 12 2 2 4-4" />
            </g>
        ),
        pulse: <path d="M3 12h4l2-7 4 14 2-7h6" />,
        fingerprint: (
            <g>
                <path d="M5 12a7 7 0 0 1 14 0v3" />
                <path d="M8 13c0-2.2 1.8-4 4-4s4 1.8 4 4v3" />
                <path d="M11 13v4M12 17v3" />
            </g>
        ),
        zap: <path d="m13 2-9 12h7l-1 8 9-12h-7l1-8Z" />,
        loop: <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5" />,
        cpu: (
            <g>
                <rect x="5" y="5" width="14" height="14" rx="1.5" />
                <rect x="9" y="9" width="6" height="6" rx="0.5" />
                <path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" />
            </g>
        ),
        layers: <path d="m12 2 9 5-9 5-9-5 9-5ZM3 12l9 5 9-5M3 17l9 5 9-5" />,
        compass: (
            <g>
                <circle cx="12" cy="12" r="9" />
                <path d="m15 9-2 5-5 2 2-5 5-2Z" />
            </g>
        ),
        target: (
            <g>
                <circle cx="12" cy="12" r="9" />
                <circle cx="12" cy="12" r="5" />
                <circle cx="12" cy="12" r="1" fill="currentColor" />
            </g>
        ),
        node: (
            <g>
                <circle cx="6" cy="12" r="2.5" />
                <circle cx="18" cy="6" r="2.5" />
                <circle cx="18" cy="18" r="2.5" />
                <path d="m8 11 8-4M8 13l8 4" />
            </g>
        ),
        clock: (
            <g>
                <circle cx="12" cy="12" r="9" />
                <path d="M12 7v5l3 2" />
            </g>
        ),
        chat: <path d="M3 12c0-5 4-8 9-8s9 3 9 8-4 8-9 8c-1.4 0-2.8-.2-4-.7L3 21l1-4.5c-.6-1.4-1-3-1-4.5Z" />,
    };
    return <svg {...props}>{paths[name] ?? null}</svg>;
}

/* BRAND --------------------------------------------------- */
function Brand() {
    return (
        <a href="#top" className="brand-mark" aria-label="M-FLOW · página inicial">
            <span className="mark-dot" />
            <span>M-FLOW</span>
            <span className="brand-suffix">/eng</span>
        </a>
    );
}

/* STATUS PILL --------------------------------------------- */
function StatusPill({ children }) {
    return (
        <span className="status-pill">
            <span className="pulse" />
            {children}
        </span>
    );
}

/* HEADER -------------------------------------------------- */
function SiteHeader({ onContactClick }) {
    const [scrolled, setScrolled] = useState(false);
    useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 24);
        onScroll();
        window.addEventListener("scroll", onScroll, { passive: true });
        return () => window.removeEventListener("scroll", onScroll);
    }, []);
    return (
        <header className="site-header" data-scrolled={scrolled}>
            <div className="container">
                <Brand />
                <nav className="nav" aria-label="Navegação principal">
                    <a href="#servicos">Serviços</a>
                    <a href="#manifesto">Sobre</a>
                    <a href="#diferenciais">Diferenciais</a>
                    <a href="#stack">Stack</a>
                </nav>
                <button className="btn btn-primary" onClick={onContactClick}>
                    Agendar consulta
                    <Icon name="arrow" size={14} />
                </button>
            </div>
        </header>
    );
}

/* REVEAL hook --------------------------------------------- */
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("in");
                        io.unobserve(e.target);
                    }
                });
            },
            { threshold: 0.12, rootMargin: "0px 0px -10% 0px" }
        );
        el.querySelectorAll(".reveal").forEach((c) => io.observe(c));
        return () => io.disconnect();
    }, []);
    return ref;
}

/* SECTION HEADER ------------------------------------------ */
function SectionHead({ eyebrow, title, aside, num }) {
    return (
        <div className="section-head reveal">
            <div>
                {num && <div className="section-num">{num}</div>}
                <div style={{ marginTop: num ? 12 : 0 }} className="eyebrow">{eyebrow}</div>
            </div>
            <div>
                <h2>{title}</h2>
                {aside && <p className="section-aside" style={{ marginTop: 18 }}>{aside}</p>}
            </div>
        </div>
    );
}

/* WHATSAPP FLOAT ----------------------------------------- */
function WhatsAppFloat({ phone }) {
    const href = `https://wa.me/${phone.replace(/\D/g, "")}`;
    return (
        <a className="wa-float" href={href} target="_blank" rel="noopener noreferrer" aria-label="Falar pelo WhatsApp">
            <span className="icn-circle"><Icon name="chat" size={11} /></span>
            <span>Falar agora</span>
        </a>
    );
}

/* expose to global scope */
Object.assign(window, {
    Icon, Brand, StatusPill, SiteHeader, SectionHead, useReveal, WhatsAppFloat,
});
