const { useState, useEffect, useLayoutEffect, useRef, useMemo, useImperativeHandle, forwardRef } = React;
const Section = window.Section;

/* imageRows: each entry is one row — 1 URL (full width) or 2 URLs (side by side, max 2). */
const WORK_FEATURED_PROJECTS = [
        {
            title: "Increased agent efficiency by 40% through logistics platform redesign",
            category: "Product Design",
            year: "2025",
            services: "UX & UI design, Product research, Design systems",
            client: "Flux Logistics",
            /* Card thumbnail only; modal gallery uses imageRows (first cell opens as flux1). */
            thumbnailSrc: "projects/flux/flux.png",
            imageRows: [
                ["projects/flux/flux1.png"],
                [
                    "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=1600",
                    "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=1600"
                ],
                ["https://images.unsplash.com/photo-1553729459-efe14ef6055d?auto=format&fit=crop&q=80&w=1600"]
            ],
            description:
                "The problem\n\nFlux's internal tools lived across disconnected screens: queue states, exceptions, and customer context were hard to scan under pressure, which slowed agents and increased escalations between teams.\n\nConstraints\n\nWe had to improve live dispatch workflows without freezing day-to-day operations—rolling out in stages on web, aligning with existing data models and engineering capacity, and satisfying both ops leadership (speed, accuracy) and internal compliance around what agents can see and do.\n\nWhat we did\n\nWe reframed the day-in-the-life of an agent, tightened information hierarchy for critical paths, and redesigned core workspace patterns for triage, resolution, and handoff—grounded in research with agents and team leads.\n\nScope\n\nInternal agent platform UX and UI, workflow and IA exploration, prototyping, and a lightweight component system covering primary operational surfaces (web).",
            outcome: {
                summary:
                    "After rollout, operations saw a calmer default workspace for agents: fewer context switches, clearer exception handling, and a UI foundation the product team could extend without fragmenting patterns.",
                metrics: [
                    { value: '~40%', label: 'Lift in agent efficiency (ops-reported throughput)' },
                    { value: '−32%', label: 'Reduction in escalations between dispatch tiers' },
                    { value: '3 mo', label: 'Staged rollout without freezing live dispatch' }
                ]
            },
            credits: ['Creative Direction: Sedem Oasis', 'Lead Designer: Jane Doe']
        },
        {
            title: "Reduced churn by 40% through userflow and UI redesign",
            category: "Product Design",
            year: "2023",
            services: "UX & UI design, Product research, Mobile UI systems",
            client: "Pillar Finances",
            imageRows: [
                [
                    "projects/pillar/pillar.png",
                    "projects/pillar/pillar.png"
                ],
                ["projects/pillar/pillar.png"],
                ["projects/pillar/pillar.png"]
            ],
            description:
                "The problem\n\nPillar’s mobile experience was leaking users after signup: key value moments were hard to reach, money actions felt high-friction, and the app’s navigation and states created uncertainty—showing up as churn in the first weeks.\n\nConstraints\n\nWe had to work within existing backend flows and compliance requirements, ship improvements incrementally, and prioritize clarity on small screens—especially for high-stress moments like transfers, verification, and support.\n\nWhat we did\n\nWe mapped churn points across onboarding and core money actions, simplified the information hierarchy, and redesigned the app’s navigation and key flows with clearer status language, safer defaults, and reusable mobile UI patterns.\n\nScope\n\nMobile app UX/UI redesign across onboarding and primary money flows, core navigation + IA, reusable component patterns, and implementation-ready specs for engineering handoff.",
            outcome: {
                summary:
                    "The redesigned app made it easier for customers to reach the first value moment, complete key money actions confidently, and understand status at every step—reducing early drop-off and improving retention.",
                metrics: [
                    { value: '−40%', label: 'Customer churn (post-redesign cohort)' },
                    { value: '+28%', label: 'Completion rate on key onboarding steps' },
                    { value: '−22%', label: 'Support contacts tied to onboarding confusion' }
                ]
            },
            credits: ['Lead UX: Sedem Oasis', 'Technical Lead: John Smith']
        },
        {
            title: "Boosted academy applications by 30% through targeted recruitment system",
            category: "Brand Identity",
            year: "2023",
            services: "Recruitment positioning, Campaign identity system, Templates & Guidelines",
            client: "Juventus Academy Ghana",
            imageRows: [
                [
                    "projects/juventus/juve.png",
                    "projects/juventus/juve.png"
                ],
                ["projects/juventus/juve.png"],
                ["projects/juventus/juve.png"]
            ],
            description:
                "The problem\n\nDespite strong on-field credibility, the academy’s recruitment communications didn’t speak clearly to the right Ghanaian footballers and parents—messages varied across channels and key trust signals (pathway, coaching, tryout details) were easy to miss.\n\nConstraints\n\nThe system had to be fast to deploy for campaign windows, simple for local production partners, and consistent from small social placements to print/community touchpoints—without losing recognizability.\n\nWhat we did\n\nWe defined a tighter recruitment positioning and built a targeted campaign identity system: clearer hierarchy for tryout info, repeatable layouts for posts and flyers, and a visual language tuned for attention and legibility in-feed.\n\nScope\n\nRecruitment positioning, campaign visual system, logo usage rules, color/type system, social + print templates, and lightweight guidelines for vendors and partner teams.",
            outcome: {
                summary:
                    "Recruitment comms became consistent and legible across channels—helping the academy reach more Ghanaian footballers with a clearer story and a stronger, repeatable campaign system.",
                metrics: [
                    { value: '+30%', label: 'Applications to academy programs (campaign period)' },
                    { value: '+42%', label: 'Tryout landing engagement from social (link CTR)' },
                    { value: '10+', label: 'Reusable templates shipped for recruitment + events' }
                ]
            },
            credits: ['Lead Creative: Sedem Oasis', 'Brand Design: Sedem Oasis']
        },
        {
            title: "Increased user trust in an AI voice chat app by redesigning the AI engine",
            category: "AI Product Design",
            year: "2024",
            services: "UX & UI design, Conversation design, AI product strategy",
            client: "Speakless",
            imageRows: [
                ["projects/speakless/speakless.png"],
                [
                    "projects/speakless/speakless.png",
                    "projects/speakless/speakless.png"
                ],
                ["projects/speakless/speakless.png"]
            ],
            description:
                "The problem\n\nUsers didn’t trust the assistant: responses sounded confident but were inconsistent, voice interactions felt unpredictable, and error states made it unclear whether the AI had understood—or was guessing.\n\nConstraints\n\nWe had to improve reliability without slowing the experience, work within latency and cost constraints for real-time voice, and ship changes safely while protecting user privacy.\n\nWhat we did\n\nWe redesigned the “AI engine” as a product system—tightening prompt and tool boundaries, clarifying when the assistant should ask questions vs. act, and pairing that with UI patterns that make confidence, sources, and status legible in voice-first flows.\n\nScope\n\nVoice chat UX, conversation patterns and guardrails, model behavior design (prompts, tool use, refusal rules), failure mode handling, and end-to-end interaction prototypes for engineering.",
            outcome: {
                summary:
                    "The new engine + UX reduced “mystery moments” in voice chat: users understood what the assistant was doing, why it asked questions, and how to recover when something went wrong—leading to stronger trust signals and retention.",
                metrics: [
                    { value: '+38%', label: 'Self-reported trust in the assistant (post-session survey)' },
                    { value: '−27%', label: '“AI didn’t understand me” reports (support + in-app)' },
                    { value: '+19%', label: '7-day retention for voice-first users' }
                ]
            },
            credits: ['Design Team: Sedem Oasis', 'Project Management: Alice Wang']
        }
];

const EMPTY_EXTRA_PROJECTS = [];

/* AllWorks opens archive rows via this event so it still works when Babel/CDN drops unknown props on custom components. */
const OPEN_ARCHIVE_PROJECT_EVENT = 'sedem-oasis:open-archive-project';

const normalizeOutcome = (outcome) => {
    if (outcome && typeof outcome === 'object' && outcome.summary != null) {
        return {
            summary: String(outcome.summary),
            metrics: Array.isArray(outcome.metrics) ? outcome.metrics : []
        };
    }
    return { summary: String(outcome || ''), metrics: [] };
};

const normalizeCredits = (credits) => {
    if (Array.isArray(credits)) {
        return credits.map(String).map((s) => s.trim()).filter(Boolean);
    }
    const s = String(credits || '').trim();
    if (!s) return [];
    if (s.includes('\n')) return s.split(/\n+/).map((x) => x.trim()).filter(Boolean);
    return s.split(/\s*,\s*/).map((x) => x.trim()).filter(Boolean);
};

const Work = forwardRef((props, ref) => {
    const extraProjects =
        Array.isArray(props.extraProjects) && props.extraProjects.length > 0
            ? props.extraProjects
            : EMPTY_EXTRA_PROJECTS;
    const scrollRef = useRef(null);
    const closeBtnRef = useRef(null);
    const modalGalleryRef = useRef(null);
    const [canScrollLeft, setCanScrollLeft] = useState(false);
    const [canScrollRight, setCanScrollRight] = useState(true);
    const [activeProject, setActiveProject] = useState(null);
    const [openAccordion, setOpenAccordion] = useState('info');
    const modalProjects = useMemo(
        () => [...WORK_FEATURED_PROJECTS, ...extraProjects],
        [extraProjects]
    );

    useImperativeHandle(ref, () => ({
        openProject: (project) => setActiveProject(project)
    }), []);

    useEffect(() => {
        const onOpenArchive = (e) => {
            const p = e?.detail?.project;
            if (p && p.title) setActiveProject(p);
        };
        window.addEventListener(OPEN_ARCHIVE_PROJECT_EVENT, onOpenArchive);
        return () => window.removeEventListener(OPEN_ARCHIVE_PROJECT_EVENT, onOpenArchive);
    }, []);

    const checkScroll = () => {
        if (scrollRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
            setCanScrollLeft(scrollLeft > 5);
            setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5);
        }
    };

    useEffect(() => {
        const el = scrollRef.current;
        if (el) {
            setTimeout(checkScroll, 100);
            el.addEventListener('scroll', checkScroll);
            window.addEventListener('resize', checkScroll);
        }
        return () => {
            if (el) el.removeEventListener('scroll', checkScroll);
            window.removeEventListener('resize', checkScroll);
        };
    }, []);

    useEffect(() => {
        if (!activeProject) return;
        const prevOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        const idx = modalProjects.findIndex((p) => p.title === activeProject.title);
        const onKeyDown = (e) => {
            if (e.key === 'Escape') {
                setActiveProject(null);
                return;
            }
            if (modalProjects.length < 2 || idx < 0) return;
            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                const prev = idx <= 0 ? modalProjects.length - 1 : idx - 1;
                setActiveProject(modalProjects[prev]);
            }
            if (e.key === 'ArrowRight') {
                e.preventDefault();
                const next = idx >= modalProjects.length - 1 ? 0 : idx + 1;
                setActiveProject(modalProjects[next]);
            }
        };
        window.addEventListener('keydown', onKeyDown);
        const t = requestAnimationFrame(() => closeBtnRef.current?.focus());
        return () => {
            document.body.style.overflow = prevOverflow;
            window.removeEventListener('keydown', onKeyDown);
            cancelAnimationFrame(t);
        };
    }, [activeProject, modalProjects]);

    /* Scroll reset + layout flush after portal paints. Double rAF avoids flex/aspect
       first-frame bugs (WebKit: aspect-ratio + abspos img often skips paint until reflow). */
    useLayoutEffect(() => {
        if (!activeProject) return;
        let innerRaf;
        const flushScroll = () => {
            const el = modalGalleryRef.current;
            if (!el) return;
            el.scrollTop = 0;
            void el.getBoundingClientRect();
        };
        flushScroll();
        const outerRaf = requestAnimationFrame(() => {
            innerRaf = requestAnimationFrame(flushScroll);
        });
        return () => {
            cancelAnimationFrame(outerRaf);
            cancelAnimationFrame(innerRaf);
        };
    }, [activeProject]);

    const scroll = (direction) => {
        if (scrollRef.current) {
            const scrollAmount = window.innerWidth > 768 ? window.innerWidth * 0.45 : window.innerWidth * 0.8;
            scrollRef.current.scrollBy({
                left: direction === 'left' ? -(scrollAmount + 32) : (scrollAmount + 32),
                behavior: 'smooth'
            });
        }
    };

    const activeModalIndex = activeProject ? modalProjects.findIndex((p) => p.title === activeProject.title) : -1;
    const goModalPrev = () => {
        if (activeModalIndex < 0 || modalProjects.length < 2) return;
        const prev = activeModalIndex <= 0 ? modalProjects.length - 1 : activeModalIndex - 1;
        setActiveProject(modalProjects[prev]);
    };
    const goModalNext = () => {
        if (activeModalIndex < 0 || modalProjects.length < 2) return;
        const next = activeModalIndex >= modalProjects.length - 1 ? 0 : activeModalIndex + 1;
        setActiveProject(modalProjects[next]);
    };

    const modal =
        activeProject &&
        ReactDOM.createPortal(
            <div
                className="fixed inset-0 z-[200] p-0 sm:p-3 md:p-4 lg:p-6 flex items-stretch sm:items-center justify-center bg-black/[0.12] backdrop-blur-[2px] pt-[env(safe-area-inset-top,0px)] pb-[env(safe-area-inset-bottom,0px)]"
                onClick={() => setActiveProject(null)}
                role="presentation"
            >
                <div
                    className="relative flex-1 min-h-0 w-full h-full max-h-[100dvh] sm:h-auto sm:flex-none sm:max-h-[min(56rem,92vh)] sm:rounded-xl flex flex-col bg-white sm:shadow-2xl border-0 sm:border border-black/[0.06] overflow-hidden rounded-none"
                    role="dialog"
                    aria-modal="true"
                    aria-labelledby="project-modal-title"
                    onClick={(e) => e.stopPropagation()}
                >
                    <button
                        ref={closeBtnRef}
                        type="button"
                        onClick={() => setActiveProject(null)}
                        className="absolute top-[max(0.5rem,env(safe-area-inset-top,0px))] right-2 sm:top-4 sm:right-4 md:top-5 md:right-5 z-30 w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-lg border border-black/[0.08] bg-white/95 backdrop-blur-sm text-black/60 hover:text-black hover:border-black/20 transition-all active:scale-95 shadow-sm"
                        aria-label="Close project details"
                    >
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                            <line x1="18" y1="6" x2="6" y2="18" />
                            <line x1="6" y1="6" x2="18" y2="18" />
                        </svg>
                    </button>
                    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain lg:flex-row lg:overflow-hidden">
                        {/* Below lg: vertical stack (copy → gallery → nav). lg+: two columns, gallery left / copy right */}
                        <div className="order-1 flex w-full shrink-0 flex-col border-b border-black/[0.06] bg-white lg:order-2 lg:min-h-0 lg:min-w-[26rem] lg:max-w-xl lg:flex-1 lg:shrink lg:overflow-hidden lg:border-b-0 lg:border-l lg:border-black/[0.06]">
                            <div className="shrink-0 px-4 pt-14 pb-3 sm:px-6 sm:pt-12 md:pt-14 md:pb-2">
                                <h2 id="project-modal-title" className="text-[1.0625rem] leading-snug sm:text-xl md:text-2xl font-display font-medium text-black tracking-tighter pr-12 sm:pr-14 md:pr-16">
                                    {activeProject.title}
                                </h2>
                            </div>
                            <div className="px-4 pb-4 sm:px-6 lg:min-h-0 lg:flex-1 lg:overflow-y-auto lg:overscroll-y-contain lg:px-5 lg:pb-6 touch-pan-y">
                                <div className="space-y-4 border-b border-black/[0.03] pb-4">
                                    {[
                                        { label: 'Year', value: activeProject.year },
                                        { label: 'Type', value: activeProject.category },
                                        { label: 'Client', value: activeProject.client },
                                        { label: 'Services', value: activeProject.services }
                                    ].map((item) => (
                                        <div key={item.label} className="flex flex-col gap-1 sm:flex-row sm:justify-between sm:items-baseline sm:gap-0">
                                            <span className="text-[14px] sm:text-[16px] tracking-tight font-medium text-black shrink-0">{item.label}</span>
                                            <span className="text-sm md:text-base text-black font-light text-left sm:text-right sm:ml-4 leading-snug">{item.value}</span>
                                        </div>
                                    ))}
                                </div>

                                <div className="space-y-1">
                                    {[
                                        { id: 'info', label: 'Project Info', content: activeProject.description },
                                        {
                                            id: 'outcome',
                                            label: 'Outcome',
                                            content: normalizeOutcome(activeProject.outcome)
                                        },
                                        {
                                            id: 'credits',
                                            label: 'Credits',
                                            content: normalizeCredits(activeProject.credits)
                                        }
                                    ].map((acc) => (
                                        <div key={acc.id} className="border-b border-black/[0.03]">
                                            <button
                                                type="button"
                                                onClick={() => setOpenAccordion(openAccordion === acc.id ? null : acc.id)}
                                                className="w-full min-h-[3rem] py-3 sm:py-4 flex justify-between items-center gap-3 text-left group"
                                            >
                                                <span className="text-[15px] sm:text-[16px] tracking-tight font-medium text-black group-hover:opacity-70 transition-opacity">
                                                    {acc.label}
                                                </span>
                                                <span className="text-lg font-light opacity-20 group-hover:opacity-100 transition-opacity shrink-0" aria-hidden="true">
                                                    {openAccordion === acc.id ? '−' : '+'}
                                                </span>
                                            </button>
                                            {/* 0fr/1fr grid avoids a short max-height trap + nested scroll; parent column scrolls the full copy. */}
                                            <div
                                                className={`grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
                                                    openAccordion === acc.id ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
                                                }`}
                                            >
                                                <div className="min-h-0 overflow-hidden">
                                                    <div className="py-3 sm:py-4 pr-1 sm:pr-4">
                                                        {acc.id === 'outcome' ? (
                                                            <>
                                                                <div className="space-y-4">
                                                                    {(String(acc.content.summary || '')
                                                                        .split(/\n\n+/)
                                                                        .map((s) => s.trim())
                                                                        .filter(Boolean))
                                                                        .map((para, pIdx) => (
                                                                            <p
                                                                                key={pIdx}
                                                                                className="text-sm md:text-base leading-relaxed text-black font-light"
                                                                            >
                                                                                {para}
                                                                            </p>
                                                                        ))}
                                                                </div>
                                                                {acc.content.metrics.length > 0 && (
                                                                    <div className="mt-5 grid w-full grid-cols-1 gap-2.5 sm:gap-3">
                                                                        {acc.content.metrics.map((m, mIdx) => (
                                                                            <div
                                                                                key={mIdx}
                                                                                className="w-full rounded-lg border border-black/[0.08] bg-neutral-50 px-3.5 py-3.5 sm:px-4 sm:py-4"
                                                                            >
                                                                                <p className="font-display text-xl font-medium tabular-nums tracking-tight text-black sm:text-2xl">
                                                                                    {m.value}
                                                                                </p>
                                                                                <p className="mt-1.5 text-[11px] font-light leading-snug text-black/55 sm:text-xs">
                                                                                    {m.label}
                                                                                </p>
                                                                            </div>
                                                                        ))}
                                                                    </div>
                                                                )}
                                                            </>
                                                        ) : acc.id === 'credits' ? (
                                                            <ul className="list-none space-y-0 divide-y divide-black/[0.06]">
                                                                {acc.content.map((line, lineIdx) => (
                                                                    <li
                                                                        key={lineIdx}
                                                                        className="py-3 text-sm leading-relaxed text-black font-light first:pt-0 last:pb-0 md:text-base"
                                                                    >
                                                                        {line}
                                                                    </li>
                                                                ))}
                                                            </ul>
                                                        ) : (
                                                            <div className="space-y-4">
                                                                {(String(acc.content || '')
                                                                    .split(/\n\n+/)
                                                                    .map((s) => s.trim())
                                                                    .filter(Boolean))
                                                                    .map((para, pIdx) => (
                                                                        <p
                                                                            key={pIdx}
                                                                            className="text-sm md:text-base leading-relaxed text-black font-light"
                                                                        >
                                                                            {para}
                                                                        </p>
                                                                    ))}
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            {modalProjects.length > 1 && (
                                <div className="hidden shrink-0 items-center justify-between gap-2 border-t border-black/[0.06] bg-white px-4 pt-4 pb-4 sm:px-6 lg:flex lg:px-5">
                                    <button
                                        type="button"
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            goModalPrev();
                                        }}
                                        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-black/[0.07] bg-white text-black/40 transition-all hover:border-black/20 hover:text-black hover:opacity-100 active:scale-90 lg:h-11 lg:w-11"
                                        aria-label="Previous project"
                                    >
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                            <line x1="19" y1="12" x2="5" y2="12" />
                                            <polyline points="12 19 5 12 12 5" />
                                        </svg>
                                    </button>
                                    <span className="min-w-[3.25rem] whitespace-nowrap px-1 text-center text-[12px] font-medium tabular-nums tracking-wide text-black/35">
                                        {activeModalIndex >= 0
                                            ? `${String(activeModalIndex + 1).padStart(2, '0')} / ${String(modalProjects.length).padStart(2, '0')}`
                                            : '—'}
                                    </span>
                                    <button
                                        type="button"
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            goModalNext();
                                        }}
                                        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-black/[0.07] bg-white text-black/40 transition-all hover:border-black/20 hover:text-black hover:opacity-100 active:scale-90 lg:h-11 lg:w-11"
                                        aria-label="Next project"
                                    >
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                            <line x1="5" y1="12" x2="19" y2="12" />
                                            <polyline points="12 5 19 12 12 19" />
                                        </svg>
                                    </button>
                                </div>
                            )}
                        </div>

                        {/* Below lg: images stack under copy. lg+: left column */}
                        <div
                            ref={modalGalleryRef}
                            className="order-2 flex w-full min-h-0 shrink-0 flex-col gap-2 bg-neutral-100 p-2 touch-pan-y lg:order-1 lg:min-h-0 lg:shrink lg:flex-[3_1_0%] lg:min-w-0 lg:basis-0 lg:self-stretch lg:p-3 lg:overflow-y-auto lg:overscroll-y-contain"
                            role="region"
                            aria-label="Project images"
                        >
                            <div
                                key={activeProject.title}
                                className="flex min-h-0 w-full min-w-0 flex-col gap-2"
                            >
                                {activeProject.imageRows.map((row, rowIdx) => {
                                    const cells = row.slice(0, 2);
                                    if (cells.length === 0) return null;
                                    return (
                                        <div
                                            key={rowIdx}
                                            className={`flex w-full min-w-0 gap-2 lg:gap-2.5 ${cells.length === 2 ? 'flex-col sm:flex-row' : ''}`}
                                        >
                                            {cells.map((src, cellIdx) => (
                                                <div
                                                    key={cellIdx}
                                                    className={`relative w-full min-w-0 overflow-hidden rounded-lg bg-neutral-200 ${
                                                        cells.length === 2 ? 'sm:min-w-0 sm:flex-1' : ''
                                                    }`}
                                                >
                                                    {/* Padding-top % = height/width; avoids WebKit flex + aspect-ratio + abspos img paint bugs */}
                                                    <div
                                                        className={
                                                            cells.length === 1
                                                                ? 'pointer-events-none w-full pt-[56.25%]'
                                                                : 'pointer-events-none w-full pt-[100%]'
                                                        }
                                                        aria-hidden="true"
                                                    />
                                                    <img
                                                        src={src}
                                                        alt=""
                                                        className="absolute inset-0 h-full w-full object-cover"
                                                        loading="eager"
                                                        decoding="sync"
                                                        fetchPriority={rowIdx === 0 && cellIdx === 0 ? 'high' : 'auto'}
                                                    />
                                                </div>
                                            ))}
                                        </div>
                                    );
                                })}
                            </div>
                        </div>

                        {/* Below lg: prev/next after images */}
                        {modalProjects.length > 1 && (
                            <div className="order-3 flex w-full shrink-0 items-center justify-between gap-2 border-t border-black/[0.06] bg-white px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom,0px))] sm:px-6 lg:hidden">
                                <button
                                    type="button"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        goModalPrev();
                                    }}
                                    className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-black/[0.07] bg-white text-black/40 transition-all active:scale-90 hover:border-black/20 hover:text-black hover:opacity-100"
                                    aria-label="Previous project"
                                >
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                        <line x1="19" y1="12" x2="5" y2="12" />
                                        <polyline points="12 19 5 12 12 5" />
                                    </svg>
                                </button>
                                <span className="min-w-[3.25rem] whitespace-nowrap px-1 text-center text-[12px] font-medium tabular-nums tracking-wide text-black/35">
                                    {activeModalIndex >= 0
                                        ? `${String(activeModalIndex + 1).padStart(2, '0')} / ${String(modalProjects.length).padStart(2, '0')}`
                                        : '—'}
                                </span>
                                <button
                                    type="button"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        goModalNext();
                                    }}
                                    className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-black/[0.07] bg-white text-black/40 transition-all active:scale-90 hover:border-black/20 hover:text-black hover:opacity-100"
                                    aria-label="Next project"
                                >
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                        <line x1="5" y1="12" x2="19" y2="12" />
                                        <polyline points="12 5 19 12 12 19" />
                                    </svg>
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            </div>,
            document.body
        );

    return (
        <>
            {modal}
            <Section id="work" className="min-h-[85svh] sm:min-h-screen md:h-screen px-4 sm:px-8 md:px-16 bg-white border-b border-black/[0.03] flex flex-col pb-[max(0.5rem,env(safe-area-inset-bottom,0px))]">
                <div className="pt-20 sm:pt-24 pb-8 sm:pb-10 md:pb-12 flex justify-start shrink-0">
                    <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black">Selected Work</h2>
                </div>
                <div ref={scrollRef} className="flex-1 flex items-center min-h-0 overflow-x-auto overflow-y-visible no-scrollbar -mx-4 sm:-mx-8 md:-mx-16 px-4 sm:px-8 md:px-16 gap-4 sm:gap-6 md:gap-8 py-2 pb-6 sm:pb-8 scroll-smooth touch-pan-x">
                    {WORK_FEATURED_PROJECTS.map((project, i) => (
                        <div
                            key={i}
                            role="button"
                            tabIndex={0}
                            onClick={() => {
                                // setActiveProject(project);
                            }}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter' || e.key === ' ') {
                                    e.preventDefault();
                                    // setActiveProject(project);
                                }
                            }}
                            aria-label={project.title}
                            className="project-card group cursor-pointer flex-none w-[min(80vw,20rem)] sm:w-auto sm:h-[min(65vh,100%)] md:h-[min(72vh,100%)] max-h-[min(42rem,100%)] aspect-[1080/1350] flex flex-col justify-end relative overflow-hidden rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-black/20 focus-visible:ring-offset-2"
                        >
                            <div className="absolute inset-0 overflow-hidden rounded-lg bg-neutral-50 transition-colors group-hover:bg-neutral-100">
                                <img
                                    src={project.thumbnailSrc ?? project.imageRows[0][0]}
                                    alt={project.title}
                                    className="project-image h-full w-full rounded-lg object-cover transition-all duration-700"
                                />
                            </div>
                            <div className="relative z-10 p-4 sm:p-5 md:p-6 transition-all duration-700 translate-y-3 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 text-left pointer-events-none">
                                <h3 className="text-base sm:text-xl md:text-2xl font-display font-medium text-black mb-1.5 sm:mb-2 leading-snug">{project.title}</h3>
                                <p className="text-[9px] sm:text-[10px] opacity-50 uppercase tracking-[0.18em] font-medium text-black">{project.category}</p>
                            </div>
                        </div>
                    ))}
                    <div className="flex-none w-8 sm:w-16 md:w-32 h-full min-h-[1px]"></div>
                </div>

                <div className="flex justify-end pb-8 sm:pb-10 md:pb-12 shrink-0 space-x-2">
                    <button
                        type="button"
                        onClick={() => scroll('left')}
                        disabled={!canScrollLeft}
                        className={`w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-lg border border-black/[0.07] transition-all active:scale-90 bg-white ${!canScrollLeft ? 'opacity-10 cursor-default' : 'opacity-40 text-black hover:opacity-100 hover:border-black/20'}`}
                        aria-label="Scroll left"
                    >
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                            <line x1="19" y1="12" x2="5" y2="12"></line>
                            <polyline points="12 19 5 12 12 5"></polyline>
                        </svg>
                    </button>
                    <button
                        type="button"
                        onClick={() => scroll('right')}
                        disabled={!canScrollRight}
                        className={`w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-lg border border-black/[0.07] transition-all active:scale-90 bg-white ${!canScrollRight ? 'opacity-10 cursor-default' : 'opacity-40 text-black hover:opacity-100 hover:border-black/20'}`}
                        aria-label="Scroll right"
                    >
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                    </button>
                </div>
            </Section>
        </>
    );
});

window.Work = Work;
window.SEDEM_OPEN_ARCHIVE_PROJECT_EVENT = OPEN_ARCHIVE_PROJECT_EVENT;