/**
 * FindSpecialistPanel — Reusable "Find a Specialist" call-to-action panel.
 *
 * Renders a full-width dark-green gradient card linking to /specialists.
 * Copy is driven by the `context` and `severity` props so each placement
 * feels contextually relevant without duplicating the component.
 *
 * Props:
 *   context  {string} 'general' | 'analysis' | 'location' | 'scan-details' | 'reports'
 *   severity {string} 'low' | 'moderate' | 'high' | 'critical' | null
 *   className {string} additional wrapper classes (e.g. 'mt-4')
 *
 * Written in ES5 for Babel 6 compatibility.
 */
var FindSpecialistPanel = function (props) {
    var context   = props.context   || 'general';
    var severity  = props.severity  || null;
    var className = props.className || '';

    var navigate = ReactRouterDOM.useNavigate();

    // --- Copy matrix ---
    var headline = 'Find a Local Specialist';
    var body     = 'Connect with certified mould remediation professionals in your area.';

    if (context === 'analysis') {
        if (severity === 'critical' || severity === 'high') {
            headline = 'Mould Detected \u2014 Act Now';
            body     = 'Our AI has identified strong indicators of mould. A certified remediation specialist can assess the extent and recommend safe treatment.';
        } else if (severity === 'moderate') {
            headline = 'Possible Mould \u2014 Get Expert Advice';
            body     = 'Our AI has detected possible mould indicators. A specialist can confirm the finding and advise on the best course of action.';
        } else {
            headline = 'Not Sure? Ask a Specialist';
            body     = 'Even low-risk results can benefit from a professional eye. Connect with a local mould specialist for peace of mind.';
        }
    } else if (context === 'location') {
        headline = 'Ready to Take Action?';
        body     = 'Once you\u2019ve saved your room details, a local specialist can review your scans and recommend the right treatment.';
    } else if (context === 'scan-details') {
        headline = 'Need Professional Help?';
        body     = 'A certified mould remediation specialist can assess this scan in person and recommend the safest treatment for your home.';
    } else if (context === 'reports') {
        headline = 'Take Action on Your Results';
        body     = 'Connect with a local mould specialist who can review your report and provide a professional remediation plan.';
    }

    var handleClick = function () {
        navigate('/specialists');
    };

    return (
        <section className={'mb-4 ' + className}>
            <div
                onClick={handleClick}
                className="bg-gradient-to-br from-forest to-forest/80 rounded-2xl p-6 text-white shadow-2xl overflow-hidden relative cursor-pointer group btn-nature hover:brightness-110 transition-all duration-300"
            >
                {/* Decorative background icon */}
                <span className="material-symbols-outlined absolute -right-3 -bottom-3 text-[100px] opacity-5 group-hover:opacity-10 transition-opacity duration-300">support_agent</span>

                <div className="relative z-10">
                    {/* Header row */}
                    <div className="flex items-center gap-2 mb-3">
                        <span className="material-symbols-outlined text-primary text-lg">support_agent</span>
                        <span className="text-[10px] font-black text-primary uppercase tracking-widest">Find a Specialist</span>
                    </div>

                    {/* Headline + body */}
                    <h3 className="text-lg font-black tracking-tight mb-1 group-hover:text-accent transition-colors duration-300">{headline}</h3>
                    <p className="text-sm text-accent/70 font-medium leading-relaxed mb-5">{body}</p>

                    {/* CTA button */}
                    <div className="w-full bg-primary text-white font-extrabold py-3 rounded-xl shadow-clay flex items-center justify-center gap-2 group-hover:brightness-110 transition-all">
                        <span className="material-symbols-outlined text-lg">arrow_forward</span>
                        Find a Local Specialist
                    </div>
                </div>
            </div>
        </section>
    );
};

window.FindSpecialistPanel = FindSpecialistPanel;