/**
 * AboutPage — Company story, mission, team, and careers.
 * Route: /about
 * Content migrated from reference/about_us/code.html.
 */
var AboutPage = function () {
    var navigate = ReactRouterDOM.useNavigate();

    var TEAM = [
        {
            name: 'Norah Copithorne',
            role: 'Co-Founder & CSO',
            bio: `Environmental Health specialist and Founder of Nature's Defence with deep domain expertise in mycological remediation using natural solutions.`,
            img: 'founding-team-norah.jpg'
        },
        {
            name: 'Mirko Nad',
            role: 'Co-Founder & COO',
            bio: '20+ years as a remedial builder, founder and CEO of Keystone Building Solutions and Riteflo Pty Ltd. Author of The 7 most common problems in strata buildings.',
            img: 'founding-team-mirko.jpg'
        },
        {
            name: 'Rozario Chivers',
            role: 'Co-Founder & CTO',
            bio: 'Serial entrepreneur and CTO with 20+ years in Digital Technology & AI. Specialised in Enterprise SaaS, Data, eCommerce and FinTech Platforms.',
            img: 'founding-team-rozario.jpg'
        },
    ];

    var VALUES = [
        { icon: 'eco', title: 'Natural Core', desc: 'We believe in remediation that works with nature, not against it.' },
        { icon: 'neurology', title: 'AI Intelligence', desc: 'Merging advanced detection algorithms with botanical and myocological expertise.' },
        { icon: 'health_and_safety', title: 'Proactive Care', desc: 'Spotting moisture and mould problems early, so you can act before they get worse.' }
    ];

    var ROLES = [
        { icon: 'code', label: 'Engineering' },
        { icon: 'palette', label: 'Design' },
        { icon: 'psychology', label: 'AI Research' },
        { icon: 'nutrition', label: 'Health Science' }
    ];

    // --- Render: Team card ---
    var renderTeamCard = function (member) {
        return (
            <div key={member.name} className="group bg-surface rounded-xl shadow-soft overflow-hidden border border-stone-100/50 btn-nature">
                <div className="aspect-square relative overflow-hidden">
                    <img className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src={member.img} alt={member.name} />
                </div>
                <div className="p-5">
                    <h4 className="font-extrabold text-forest text-base">{member.name}</h4>
                    <p className="text-[10px] font-black text-primary uppercase tracking-[0.15em] mb-2">{member.role}</p>
                    <p className="text-xs font-medium text-forest/70 leading-relaxed">{member.bio}</p>
                </div>
            </div>
        );
    };

    // --- Render: Value card ---
    var renderValueCard = function (val) {
        return (
            <div key={val.title} className="bg-surface p-6 rounded-xl shadow-soft border border-stone-100/50 btn-nature group hover:bg-forest transition-all duration-300">
                <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4 group-hover:bg-primary/20">
                    <span className="material-symbols-outlined">{val.icon}</span>
                </div>
                <h4 className="font-extrabold text-forest text-sm mb-1 group-hover:text-white transition-colors">{val.title}</h4>
                <p className="text-xs font-medium text-forest/70 group-hover:text-accent/60 transition-colors">{val.desc}</p>
            </div>
        );
    };

    return (
        <Layout>
            <main className="flex-1 overflow-y-auto overflow-x-hidden pb-36">
                <PageHeader title="About Us" showMenu={true} />
                {/* Hero: Our Story */}
                <section className="px-6 pb-8">
                    <img className="mt-2 mb-2 block mx-auto" width="80%" src="logo-mould-detect-cropped.png" alt="Mould Detect Logo" />
                    <span className="text-[10px] font-black text-forest uppercase tracking-[0.2em]">Established 2026</span>
                    <h2 className="text-3xl font-extrabold text-forest tracking-tight mt-1 mb-4">Our Story</h2>
                    <div className="space-y-4 text-sm font-medium text-forest leading-relaxed">
                        <p>Founded in the year 2026, Mould Detect emerged from a singular realisation: that our most intimate environments, the places we call home, are often the silent architects of our health.</p>
                        <p>What began as a technical investigation into mycological ecosystems evolved into a mission to bridge the gap between environmental science and everyday healthy living.</p>
                    </div>
                </section>

                {/* Mission & Values */}
                <section className="bio-bg bio-bg-20 rounded-xl px-6 py-8">
                    <div className="text-center mb-6">
                        <div className="inline-flex items-center gap-2 bg-surface px-3 py-1.5 rounded-full shadow-soft mb-4">
                            <span className="material-symbols-outlined text-primary text-[16px]">vitals</span>
                            <span className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Our Mission</span>
                        </div>
                        <h3 className="text-xl font-extrabold text-forest tracking-tight leading-snug mb-2">
                            {'To provide '}
                            <span className="text-primary italic">holistic solutions</span>
                            {' to Human Health Challenges with a focus on improving Human Environments.'}
                        </h3>
                        <p className="text-sm font-bold text-muted">It starts with Healthier Homes.</p>
                    </div>

                    <div className="text-center mb-6">
                        <div className="inline-flex items-center gap-2 bg-surface px-3 py-1.5 rounded-full shadow-soft mb-4">
                            <span className="material-symbols-outlined text-primary text-[16px]">vitals</span>
                            <span className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Our Call to Action</span>
                        </div>
                        <h3 className="text-xl font-extrabold text-forest tracking-tight leading-snug mb-2">
                            {'Mould is the new '}
                            <span className="text-primary italic">asbestos</span>.
                        </h3>
                        <p className="text-sm font-bold text-muted"> -- Mirko Nad</p>
                    </div>

                    <div className="grid grid-cols-1 gap-3">
                        {VALUES.map(function (val) { return renderValueCard(val); })}
                    </div>
                </section>

                {/* Founding Team */}
                <section className="px-6 py-8">
                    <h2 className="text-xl font-extrabold text-forest tracking-tight mb-2">Our Founding Team</h2>
                    <p className="text-xs font-medium text-forest leading-relaxed mb-6">A cross-disciplinary collective of scientists, builders, and tech pioneers dedicated to environmental wellbeing.</p>
                    <div className="space-y-4">
                        {TEAM.map(function (member) { return renderTeamCard(member); })}
                    </div>
                </section>

                {/* Join CTA */}
                <section className="px-6 pb-8">
                    <div className="bg-forest rounded-xl shadow-clay p-6 relative overflow-hidden">
                        <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/5 rounded-full blur-3xl"></div>
                        <div className="relative z-10">
                            <h2 className="text-2xl font-extrabold text-white mb-2 tracking-tight">Join Mould Detect</h2>
                            <p className="text-sm font-medium text-accent/80 mb-6">We're looking for health obsessed Product, Engineering, User Experience and AI experts.</p>
                            <button className="bg-surface rounded-xl px-6 py-3 font-extrabold text-sm text-forest flex items-center gap-2 btn-nature shadow-soft hover:brightness-110 transition-all mb-6">
                                View Open Roles
                                <span className="material-symbols-outlined text-base">east</span>
                            </button>
                            <div className="grid grid-cols-2 gap-3">
                                {ROLES.map(function (role) {
                                    return (
                                        <div key={role.label} className="bg-white/10 backdrop-blur-md p-4 rounded-xl border border-white/10">
                                            <span className="material-symbols-outlined text-white mb-2 block">{role.icon}</span>
                                            <p className="text-white font-bold text-xs">{role.label}</p>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </div>
                </section>

            </main>
        </Layout>
    );
};

window.AboutPage = AboutPage;