/**
 * SpecialistReviews — Recent reviews section for a specialist.
 *
 * Props:
 *   specialistName (string) — Used to seed deterministic review selection
 *   visible        (bool)   — Show/hide the section (default: false)
 *
 * Contains placeholder review data. Replace getReviews() with a real
 * data source (API / store) when available, then set visible={true}.
 */
var SpecialistReviews = function (props) {
    var visible = props.visible || false;
    if (!visible) return null;

    var specialistName = props.specialistName || '';

    var getReviews = function () {
        return [
            { name: 'Sarah M.', initials: 'SM', text: 'Very professional and thorough. They explained everything clearly and the results were excellent.', stars: 5, time: '3 days ago' },
            { name: 'James T.', initials: 'JT', text: 'Great service, arrived on time and completed the work efficiently. Would recommend to anyone.', stars: 4, time: '1 week ago' },
            { name: 'Lisa K.', initials: 'LK', text: 'Knowledgeable team who really know their stuff. Fair pricing and honest assessment.', stars: 5, time: '2 weeks ago' },
        ];
    };

    var reviewList = getReviews();

    return (
        <section className="mb-4">
            <h3 className="text-base font-extrabold text-forest mb-3 flex items-center gap-2">
                <span className="material-symbols-outlined text-forest text-lg">reviews</span>
                Recent Reviews
            </h3>
            <div className="space-y-3">
                {reviewList.map(function (r, i) {
                    return (
                        <div key={i} className="bg-surface p-4 rounded-xl shadow-soft border border-stone-100/50">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center font-bold text-primary text-xs">{r.initials}</div>
                                    <span className="font-bold text-sm text-forest">{r.name}</span>
                                </div>
                                <div className="flex text-terracotta">
                                    {Array.apply(null, Array(5)).map(function (_, si) {
                                        return (
                                            <span
                                                key={si}
                                                className="material-symbols-outlined text-sm"
                                                style={{ fontVariationSettings: si < r.stars ? "'FILL' 1" : "'FILL' 0" }}
                                            >star</span>
                                        );
                                    })}
                                </div>
                            </div>
                            <p className="mt-2 text-sm text-forest/70 leading-relaxed">"{r.text}"</p>
                            <p className="mt-2 text-[10px] text-sage font-bold">{r.time}</p>
                        </div>
                    );
                })}
            </div>
        </section>
    );
};

window.SpecialistReviews = SpecialistReviews;