/**
 * MissMouldPanel — dashboard entry point to the Miss Mould assistant.
 *
 * This is the "Mycology AI" panel from the original dashboard grid, renamed and given a
 * face. The old panel had no onClick at all — it was a placeholder for a feature that did
 * not exist yet. It does now (docs/adr/0009), so this one navigates.
 *
 * Spans both grid columns rather than sitting as a fifth 2x2 cell: an avatar needs more
 * room than the 12x12 icon tile the other panels use, five cells would leave a hole in a
 * two-column grid, and this is the feature we lead with in a demo.
 *
 * Route: navigates to /miss-mould
 */

var MissMouldPanel = function () {
    var navigate = ReactRouterDOM.useNavigate();

    return (
        <div
            onClick={function () { navigate('/miss-mould'); }}
            className="col-span-2 bio-bg bio-bg-10 p-5 rounded-xl shadow-soft border border-stone-100/50 btn-nature cursor-pointer group hover:bg-forest transition-all duration-300 flex items-center gap-4"
        >
            {/* width/height are set so the browser reserves the box before the image
                decodes — without them the whole grid reflows on load. */}
            <img
                src="assets/images/miss-mould-96.webp"
                alt="Miss Mould, the Mould Detect AI mycologist"
                width="72"
                height="72"
                loading="lazy"
                decoding="async"
                className="w-[72px] h-[72px] rounded-full object-cover shrink-0 ring-2 ring-primary/30 group-hover:ring-primary transition-all"
            />
            <div className="min-w-0">
                <div className="flex items-center gap-1.5">
                    <h4 className="font-extrabold text-sm text-forest group-hover:text-white">Miss Mould</h4>
                    <span className="material-symbols-outlined text-primary text-base group-hover:text-primary">auto_awesome</span>
                </div>
                <p className="text-[10px] font-bold text-muted uppercase tracking-wider group-hover:text-accent/60">
                    Your AI Mycologist &mdash; Ask Anything About Mould
                </p>
                <p className="text-[11px] text-forest/70 mt-1 group-hover:text-white/80 leading-snug">
                    Speak or type. Answers come from our reviewed knowledge base, with sources.
                </p>
            </div>
        </div>
    );
};

window.MissMouldPanel = MissMouldPanel;