var _useState_ME = React.useState;

/**
 * MouldEdu — educational materials and resources on mould.
 *
 * Data-driven: EDU_TOPICS and EDU_VIDEOS render through the reusable
 * EduTopicCard / EduVideoCard components. Mirrors the Swift app's
 * MouldEduView.swift so both stay in sync.
 *
 * Sections: mould types & health, safe identification & cleaning, stopping
 * spread, natural solutions, partner videos (Nature's Defence), and a
 * placeholder for the planned mould-remediation certifications.
 *
 * Route: /edu
 */

var EDU_TOPICS = [
    {
        id: 'types',
        icon: 'science',
        title: 'Mould Types & Your Health',
        intro: 'Thousands of mould species exist, but a handful account for most indoor problems. Knowing what you’re looking at helps you judge urgency.',
        points: [
            { heading: 'Stachybotrys chartarum — “black mould”', body: 'Slimy, dark green-black patches on chronically wet plasterboard, timber or paper. Produces mycotoxins linked to respiratory irritation; treat any suspected patch with caution and avoid dry brushing.' },
            { heading: 'Aspergillus', body: 'Very common indoors; powdery green, yellow or brown colonies. Most species are harmless to healthy people, but can cause serious infection in those with weakened immune systems and can aggravate asthma.' },
            { heading: 'Penicillium', body: 'Blue-green, velvety growth on water-damaged materials, fabrics and food. Spreads quickly and is a frequent allergy trigger — sneezing, itchy eyes and sinus congestion.' },
            { heading: 'Cladosporium', body: 'Olive-green to brown-black; unusual in that it thrives in both warm and cool areas — window frames, bathroom seals, air-conditioning vents. A common asthma and hay-fever trigger.' },
            { heading: 'Alternaria', body: 'Dark grey-brown with a wool-like texture, common around showers, tubs and leaky sinks. One of the strongest allergenic moulds — often behind persistent “indoor hay fever”.' },
        ],
    },
    {
        id: 'identify-clean',
        icon: 'cleaning_services',
        title: 'Identify & Clean Safely',
        intro: 'Small, surface-level patches (under about half a square metre) can usually be handled yourself — anything larger, recurring, or inside wall cavities needs a professional.',
        points: [
            { heading: 'Confirm it’s mould', body: 'Mould smears when rubbed with a damp cloth and usually smells musty; dirt doesn’t. A Mould Detect scan gives you a fast first opinion and a record of the area over time.' },
            { heading: 'Protect yourself first', body: 'Wear gloves, a P2/N95 mask and eye protection. Open windows, close internal doors, and never dry-brush or vacuum mould — that launches spores into the air.' },
            { heading: 'Clean, don’t just bleach', body: 'Bleach whitens but often leaves roots in porous surfaces. Wash with warm soapy water or a vinegar solution, dry thoroughly, and monitor. Discard porous items (carpet, ceiling tiles) that stay mouldy after cleaning.' },
            { heading: 'Know when to stop', body: 'Patches larger than ~0.5 m², mould returning after cleaning, sewage-related growth, or anyone in the home with respiratory conditions — bring in a professional (see Find a Specialist).' },
        ],
    },
    {
        id: 'prevention',
        icon: 'health_and_safety',
        title: 'Stop Mould Spreading',
        intro: 'Mould needs moisture, still air and something to eat. Remove the moisture and you remove the mould’s future.',
        points: [
            { heading: 'Control humidity', body: 'Keep indoor humidity below 60% (ideally 30–50%). Use exhaust fans when cooking and showering, and a dehumidifier in damp rooms or seasons.' },
            { heading: 'Move the air', body: 'Open opposing windows daily for cross-flow, leave wardrobe and cupboard doors ajar in damp weather, and keep furniture a hand-width off external walls.' },
            { heading: 'Fix water fast', body: 'Leaks, rising damp and condensation feed mould within 24–48 hours. Dry wet areas immediately and repair the source, not just the stain.' },
            { heading: 'Watch the cold spots', body: 'Window frames, south-facing walls, built-in wardrobes and bathroom ceilings are condensation magnets — check them monthly, and scan anything suspicious.' },
        ],
    },
    {
        id: 'natural',
        icon: 'eco',
        title: 'Natural Solutions',
        intro: 'For routine cleaning and prevention, several natural options are effective and avoid harsh fumes — the approach our partners at Nature’s Defence specialise in.',
        points: [
            { heading: 'White vinegar', body: 'Undiluted white vinegar kills most household mould species and penetrates porous surfaces better than bleach. Spray, leave for an hour, wipe and dry.' },
            { heading: 'Clove oil', body: 'A few drops (about ¼ teaspoon per litre of water) inhibits mould regrowth on hard surfaces. Use sparingly — it’s potent — and keep away from pets.' },
            { heading: 'Tea tree oil', body: 'Two teaspoons per two cups of water makes an effective anti-fungal spray for bathrooms and window frames. No need to rinse; the residue keeps working.' },
            { heading: 'Bicarb & sunlight', body: 'Bicarbonate of soda scrubs and deodorises, and direct sunlight is a free anti-mould treatment — air bedding, rugs and cushions outside regularly.' },
        ],
    },
];

var EDU_VIDEOS = [
    { id: 'gRCFC3GQOko', title: 'Safe Mould Removal: Natural Solution & Holistic Approach', partner: 'Nature’s Defence' },
    { id: 'OO6w131ghC8', title: 'Discovering Mycotoxins: What You Need to Know', partner: 'Nature’s Defence' },
    { id: '5hNOGBkbqrI', title: 'Mould Reset — Kill Existing Mould, Fix the Fault, Maintain Your Home', partner: 'Nature’s Defence' },
    { id: 'Xm1GuXdyKok', title: 'Mould Stains', partner: 'Nature’s Defence' },
];

/* Reusable: one educational topic with expandable key points. */
var EduTopicCard = function (props) {
    var topic = props.topic;
    var expandedState = _useState_ME(false);
    var isExpanded = expandedState[0];
    var setExpanded = expandedState[1];

    return (
        <div className="bio-bg bio-bg-30 rounded-xl shadow-soft border border-stone-100/50 p-4 mb-4">
            <button
                className="w-full flex items-center gap-3 text-left btn-nature"
                onClick={function () { setExpanded(!isExpanded); }}
                aria-expanded={isExpanded}
            >
                <span className="w-10 h-10 rounded-xl bg-forest/5 flex items-center justify-center shrink-0">
                    <span className="material-symbols-outlined text-primary">{topic.icon}</span>
                </span>
                <span className="font-extrabold text-sm text-forest flex-1">{topic.title}</span>
                <span className={'material-symbols-outlined text-sage transition-transform ' + (isExpanded ? 'rotate-180' : '')}>expand_more</span>
            </button>
            <p className="text-xs font-medium text-forest/70 mt-2">{topic.intro}</p>
            {isExpanded && (
                <div className="mt-3 space-y-3">
                    {topic.points.map(function (point) {
                        return (
                            <div key={point.heading}>
                                <p className="text-xs font-extrabold text-forest">{point.heading}</p>
                                <p className="text-xs font-medium text-forest/70">{point.body}</p>
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
};

/* Reusable: partner video link — thumbnail + title, opens YouTube in a new tab. */
var EduVideoCard = function (props) {
    var video = props.video;
    return (
        <a
            href={'https://www.youtube.com/watch?v=' + video.id}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-3 bg-surface rounded-xl p-2.5 mb-3 btn-nature border border-stone-100/50"
        >
            <img
                src={'https://img.youtube.com/vi/' + video.id + '/hqdefault.jpg'}
                alt=""
                loading="lazy"
                className="w-24 h-14 object-cover rounded-lg shrink-0 bg-forest/10"
            />
            <span className="flex-1">
                <span className="block text-xs font-bold text-forest leading-snug">{video.title}</span>
                <span className="flex items-center gap-1 text-[11px] font-bold text-primary mt-0.5">
                    <span className="material-symbols-outlined text-[13px]">play_circle</span>
                    {video.partner}
                </span>
            </span>
        </a>
    );
};

var MouldEdu = function () {
    return (
        <Layout>
            <main className="flex-1 overflow-y-auto overflow-x-hidden pb-28">
                <PageHeader title="Mould Edu" showBack={true} showMenu={true} />
                <div className="px-6">

                    {/* Header */}
                    <div className="mb-5">
                        <span className="material-symbols-outlined text-primary text-4xl">school</span>
                        <h2 className="text-lg font-extrabold text-forest mt-1">Learn about mould</h2>
                        <p className="text-xs font-medium text-forest/70 mt-1">
                            Practical, health-first guidance: know the mould types that matter, clean safely,
                            and stop mould coming back — including natural approaches.
                        </p>
                    </div>

                    {/* Topics */}
                    {EDU_TOPICS.map(function (topic) {
                        return <EduTopicCard key={topic.id} topic={topic} />;
                    })}

                    {/* Videos */}
                    <div className="bio-bg bio-bg-50 rounded-xl shadow-soft border border-stone-100/50 p-4 mb-4">
                        <div className="flex items-center gap-2 mb-1">
                            <span className="material-symbols-outlined text-primary">play_circle</span>
                            <h3 className="font-extrabold text-sm text-forest">Watch &amp; Learn</h3>
                        </div>
                        <p className="text-xs font-medium text-forest/70 mb-3">
                            Video guides from companies partnered with Mould Detect.
                        </p>
                        {EDU_VIDEOS.map(function (video) {
                            return <EduVideoCard key={video.id} video={video} />;
                        })}
                    </div>

                    {/* Certifications — coming soon */}
                    <div className="bio-bg bio-bg-70 rounded-xl shadow-soft border border-stone-100/50 p-4 mb-4">
                        <div className="flex items-center gap-2 mb-1">
                            <span className="material-symbols-outlined text-primary">workspace_premium</span>
                            <h3 className="font-extrabold text-sm text-forest">Certifications</h3>
                        </div>
                        <p className="text-xs font-medium text-forest/70">
                            Structured courses and certifications in mould remediation are coming to Mould Edu.
                            Learn at your own pace and earn recognised credentials — stay tuned.
                        </p>
                        <span className="inline-block mt-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-[11px] font-extrabold tracking-widest">COMING SOON</span>
                    </div>
                </div>
            </main>
        </Layout>
    );
};

window.MouldEdu = MouldEdu;