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 AI 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"],
                ["projects/flux/flux_2.mov", "projects/flux/flux_3.png"],
                ["projects/flux/flux_4.mov"],
                ["projects/flux/flux_5.png"],
                
            ],
            description:
                "The problem\n\nFlux's user base was growing however, they had some inefficiencies in their internal processes and tools which impacted revenue. Their internal tools lived across disconnected platforms causing errors and inaccuracies, which slowed agents and increased escalations between teams.\n\nConstraints\n\nWe had a few weeks to improve live workflows without freezing day-to-day operations, rolling out in stages on web, aligning with existing data models and engineering capacity.\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 AI 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: ['Lead UX: Albert Hodo', 'Technical Lead: Rahul Srinivas']
        },
        {
            title: "Reduced churn by 40% through early stage redesign",
            category: "Product Design",
            year: "2026",
            services: "UX & UI design, Product research, Mobile UI systems",
            client: "Pillar Finances",
            thumbnailSrc: "projects/pillar/pillar.png",
            imageRows: [
                ["projects/pillar/pillar1.png"],
                ["projects/pillar/pillar2.mp4"],
                ["projects/pillar/p2.png"],
                // ["projects/pillar/p6.mp4", "projects/pillar/p4.mp4"],
                // ["projects/pillar/p3.mp4"]
            ],
            description:
                "The problem\n\nPillar’s mobile experience struggled to establish user trust after signup. Limited feedback, unclear system states, and friction in sensitive actions like transfers and verification reduced confidence in the product, leading to early churn.\n\nConstraints\n\n Rapid timelines, limited resources, and a small testing base for validation. Solutions had to work within existing backend and compliance constraints while being fast to implement.\n\nWhat we did\n\nDiagnosed trust gaps across onboarding and core flows, then redesigned key interactions to improve clarity, transparency, and feedback. Simplified navigation and introduced consistent UI patterns to reinforce reliability and user confidence.\n\nScope\n\nMobile UX/UI redesign across onboarding and primary money flows, navigation and IA, reusable component system, and engineering-ready specifications, with ongoing iteration post-release.",
            outcome: {
                summary:
                    "Improved clarity, transparency, and feedback increased user trust, resulting in higher activation and lower early drop-off.",
                metrics: [
                    { value: '−40%', label: 'Churn (early lifecycle)' },
                    { value: '+28%', label: 'Onboarding completion' },
                    { value: '+18%', label: 'First successful transaction rate' },
                    { value: '+25%', label: 'User confidence in key flows' }
                ]
            },
            credits: ['Lead UX: Rahul Srinivas', 'Product: Albert Hodo']
        },
        {
            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",
            thumbnailSrc: "projects/juventus/juve.png",
            imageRows: [
                ["projects/juventus/Artboard%201.png"],
                ["projects/juventus/Artboard%202.png"],
                ["projects/juventus/Artboard%203.png"],
                ["projects/juventus/Artboard%204.png"],
                ["projects/juventus/Artboard%205.png"],
                ["projects/juventus/Artboard%206.png"],
                ["projects/juventus/Artboard%207.png"],
                ["projects/juventus/Artboard%208.png"],
                ["projects/juventus/Artboard%209.png"]
            ],
            description:
                "The problem\n\nDespite strong on-field credibility, the academy’s communications didn’t clearly convey trust and opportunity to Ghanaian players and parents. Recruitment messaging was inconsistent, and key signals: pathway, coaching quality, and tryout details were easy to miss.\n\nConstraints\n\nShort campaign windows, limited production resources, and reliance on local vendors. The system had to be easy to apply across digital, print, and on-ground environments while staying consistent and recognizable.\n\nWhat we did\n\nClarified recruitment positioning and built a cohesive campaign system with clear information hierarchy and repeatable layouts. Extended the identity into physical and experiential touchpoints, including in-field medic uniforms and branded materials for academy events, to reinforce credibility and memorability.\n\nScope\n\nRecruitment positioning, campaign visual system, social and print templates, identity guidelines, plus branded applications across uniforms and event materials for consistent on- and off-field presence.",
            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: Frecy Tenkorang']
        },
        {
            title: "Increased user trust in an AI voice chat app by redesigning the AI engine",
            category: "AI Product Design",
            year: "2025",
            services: "UX & UI design, Conversation design, AI product strategy",
            client: "Speakless",
            thumbnailSrc: "projects/speakless/speakless.png",
            imageRows: [
                ["projects/speakless/1.png"],
                ["projects/speakless/2.png"],
                [ "projects/speakless/3.png"],
                ["projects/speakless/4.png"],
                ["projects/speakless/5.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: ['AI System: Albert Hodo, Rahul Srinivas']
        }
];

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 isVideoSrc = (src) => /\.(mp4|webm|mov)(\?.*)?$/i.test(String(src || ''));
const videoMimeType = (src) => {
    const s = String(src || '').toLowerCase();
    if (s.includes('.webm')) return 'video/webm';
    if (s.includes('.mp4')) return 'video/mp4';
    if (s.includes('.mov')) return 'video/quicktime';
    return '';
};

const Work = forwardRef((props, ref) => {
    const compactWorkLayout = props.compactWorkLayout === true;
    const extraProjects =
        Array.isArray(props.extraProjects) && props.extraProjects.length > 0
            ? props.extraProjects
            : EMPTY_EXTRA_PROJECTS;
    const modalOpenedAtRef = useRef(null);
    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;
        modalOpenedAtRef.current = Date.now();
        window.soTrack?.('modal_open', {
            project_title: activeProject.title,
            project_client: activeProject.client,
            project_category: activeProject.category
        });
        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 () => {
            const startedAt = modalOpenedAtRef.current;
            const durationMs = typeof startedAt === 'number' ? Math.max(0, Date.now() - startedAt) : null;
            window.soTrack?.('modal_close', {
                project_title: activeProject.title,
                duration_ms: durationMs
            });
            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;
        window.soTrack?.('modal_nav', { direction: 'prev', from_index: activeModalIndex });
        setActiveProject(modalProjects[prev]);
    };
    const goModalNext = () => {
        if (activeModalIndex < 0 || modalProjects.length < 2) return;
        const next = activeModalIndex >= modalProjects.length - 1 ? 0 : activeModalIndex + 1;
        window.soTrack?.('modal_nav', { direction: 'next', from_index: activeModalIndex });
        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) => (
                                                (() => {
                                                    const isVideo = isVideoSrc(src);
                                                    const isPillarMedia = String(src || '').startsWith('projects/pillar/');
                                                    const pillarVideoWhiteBg =
                                                        src === 'projects/pillar/pillar2.mp4' ||
                                                        src === 'projects/pillar/p3.mp4' ||
                                                        src === 'projects/pillar/p4.mp4' ||
                                                        src === 'projects/pillar/p6.mp4';
                                                    const videoBgClass = pillarVideoWhiteBg ? 'bg-white' : 'bg-black';
                                                    const videoPadClass =
                                                        src === 'projects/pillar/p3.mp4' ||
                                                        src === 'projects/pillar/p4.mp4' ||
                                                        src === 'projects/pillar/p6.mp4'
                                                            ? 'px-2 py-6 sm:px-2.5 sm:py-7 lg:px-3 lg:py-8'
                                                            : 'p-2 sm:p-2.5 lg:p-3';
                                                    const videoOffsetClass = src === 'projects/pillar/p6.mp4' ? '-translate-y-1/2' : '';
                                                    const videoZoomClass = src === 'projects/pillar/p6.mp4' ? 'scale-150' : '';
                                                    const videoRadiusClass = src === 'projects/pillar/p6.mp4' ? 'rounded-2xl' : 'rounded-md';
                                                    const pillarP2ImageZoomClass =
                                                        src === 'projects/pillar/p2.png' ? 'scale-[1.3]' : '';
                                                    return (
                                                <div
                                                    key={cellIdx}
                                                    className={`relative w-full min-w-0 overflow-hidden rounded-lg ${
                                                        isVideo && isPillarMedia
                                                            ? `${videoBgClass} ring-1 ring-black/[0.06]`
                                                            : '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-[125%]'
                                                        }
                                                        aria-hidden="true"
                                                    />
                                                    {isVideo ? (
                                                        isPillarMedia ? (
                                                            <div className={`absolute inset-0 flex items-center justify-center ${videoPadClass}`}>
                                                                <video
                                                                    className={`h-full w-full ${videoRadiusClass} ${videoBgClass} object-contain ${videoOffsetClass} ${videoZoomClass}`}
                                                                    autoPlay
                                                                    muted
                                                                    loop
                                                                    playsInline
                                                                    controls={false}
                                                                    preload={rowIdx === 0 && cellIdx === 0 ? 'auto' : 'metadata'}
                                                                >
                                                                    <source src={src} type={videoMimeType(src) || undefined} />
                                                                </video>
                                                            </div>
                                                        ) : (
                                                            <video
                                                                className="absolute inset-0 h-full w-full object-cover"
                                                                autoPlay
                                                                muted
                                                                loop
                                                                playsInline
                                                                controls={false}
                                                                preload={rowIdx === 0 && cellIdx === 0 ? 'auto' : 'metadata'}
                                                            >
                                                                <source src={src} type={videoMimeType(src) || undefined} />
                                                            </video>
                                                        )
                                                    ) : (
                                                        <img
                                                            src={src}
                                                            alt=""
                                                            className={`absolute inset-0 h-full w-full object-cover ${pillarP2ImageZoomClass}`}
                                                            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={`${compactWorkLayout ? '' : 'min-h-[85svh] sm:min-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={`${compactWorkLayout ? '' : '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={() => {
                                window.soTrack?.('project_card_click', {
                                    project_title: project.title,
                                    project_client: project.client,
                                    project_category: project.category
                                });
                                setActiveProject(project);
                            }}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter' || e.key === ' ') {
                                    e.preventDefault();
                                    window.soTrack?.('project_card_click', {
                                        project_title: project.title,
                                        project_client: project.client,
                                        project_category: project.category,
                                        via: 'keyboard'
                                    });
                                    setActiveProject(project);
                                }
                            }}
                            aria-label={project.title}
                            className="project-card group cursor-pointer flex-none w-[min(82vw,20rem)] sm:w-[22rem] md:w-[24rem] lg:w-[26rem] 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;