const Work = window.Work;
const Section = window.Section;

const dispatchOpenArchiveProject = (project) => {
    const name = window.SEDEM_OPEN_ARCHIVE_PROJECT_EVENT || 'sedem-oasis:open-archive-project';
    window.dispatchEvent(new CustomEvent(name, { detail: { project } }));
};

const ARCHIVE_PROJECTS = [
    {
        title: "UX redesign of a neural-control platform",
        category: "Product Design",
        year: "2022",
        services: "UX & UI design, Interaction design, Usability research",
        client: "BCI platform partner",
        imageRows: [
            ["metatag.png"],
            ["metatag.png"]
        ],
        description: "Simplified calibration, feedback, and error recovery for a brain–computer interface workspace so first-time users could build reliable control faster, with clearer mental models and progressive disclosure for advanced settings.",
        outcome: "Shorter time-to-first-successful command and fewer abandonments during early sessions, with a UI baseline the team could extend as protocols evolved.",
        credits: "Product Design: Sedem Oasis"
    },
    {
        title: "Brand & launch strategy for a multi-sport community center",
        category: "Brand Identity",
        year: "2021",
        services: "Brand strategy, Visual identity, Launch communications",
        client: "Regional sports center",
        imageRows: [
            ["metatag.png"],
            [
                "metatag.png",
                "metatag.png"
            ]
        ],
        description: "Positioning and visual system for a new sports center: naming architecture, mark and color, photography direction, and rollout assets for open house, memberships, and local partnerships.",
        outcome: "A recognizable launch footprint across signage, digital, and on-site touchpoints that supported early membership goals and partner co-marketing.",
        credits: "Creative Direction: Sedem Oasis"
    },
    {
        title: "Campaign design and seasonal GTM for a publishing house",
        category: "Brand Identity",
        year: "2020",
        services: "Campaign identity, Art direction, Print & digital templates",
        client: "Independent publishing house",
        imageRows: [
            ["metatag.png"],
            [
                "metatag.png",
                "metatag.png"
            ]
        ],
        description: "Campaign system and sales-focused layouts for lists, author spotlights, and retail co-promotions: repeatable grids, bold type, and clear hierarchy so seasonal pushes could ship quickly without diluting the house brand.",
        outcome: "Stronger list visibility at key selling moments and a template set the marketing team could run with through peak seasons.",
        credits: "Creative Direction: Sedem Oasis"
    }
];

const experimentItems = [
    {
        title: "Streamlined checkout for regional retail chain",
        year: "2022",
        type: "Product Design",
        image: "metatag.png"
    },
    {
        title: "Visual system for climate data nonprofit",
        year: "2021",
        type: "Brand Identity",
        image: "metatag.png"
    },
    {
        title: "Mobile-first dashboard for field operations",
        year: "2023",
        type: "Product Design",
        image: "metatag.png"
    }
];

const AllWorks = () => (
    <div className="bg-white">
        <Work extraProjects={ARCHIVE_PROJECTS} compactWorkLayout />
        <Section
            id="archive"
            className="scroll-mt-28 flex flex-col px-4 sm:px-8 md:px-16 pt-12 sm:pt-16 md:pt-20 pb-[max(5rem,calc(env(safe-area-inset-bottom,0px)+3rem))] sm:pb-24 md:pb-28 bg-white border-b border-black/[0.03] min-h-[min(100svh,52rem)]"
        >
            <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black mb-10 sm:mb-12 md:mb-16">Archive</h2>
            <div className="w-full flex flex-col">
                {ARCHIVE_PROJECTS.map((item, i) => (
                    <button
                        key={i}
                        type="button"
                        aria-label={`Open project: ${item.title}`}
                        className="group w-full text-left font-inherit py-10 md:py-14 border-0 border-b border-black/[0.06] last:border-b-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-black/20 focus-visible:ring-offset-2 rounded-sm bg-transparent text-black"
                    >
                        <p className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-40 mb-3">
                            {item.category}
                        </p>
                        <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 md:gap-8 items-stretch">
                            <h3 className="min-w-0 self-start text-xl sm:text-2xl md:text-4xl lg:text-5xl font-display font-medium text-black/35 group-hover:text-black transition-colors duration-300 tracking-tight leading-[0.95]">
                                {item.title}
                            </h3>
                            <p className="row-start-1 col-start-2 self-end text-[14px] sm:text-[16px] tracking-tight font-medium text-black opacity-50 tabular-nums text-right shrink-0">
                                {item.year}
                            </p>
                        </div>
                    </button>
                ))}
            </div>
        </Section>
        {/*
        <Section id="experiments" className="px-8 md:px-16 pt-24 pb-32 md:pt-32 md:pb-40 bg-white border-t border-black/[0.03]">
            <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black mb-12 md:mb-16">Experiments</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
                {experimentItems.map((item, i) => (
                    <article
                        key={i}
                        className="group border border-black/[0.05] rounded-lg overflow-hidden transition-all duration-500 hover:border-black/15 bg-white"
                    >
                        <div className="aspect-[4/3] bg-neutral-100 overflow-hidden">
                            <img
                                src={item.image}
                                alt=""
                                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
                                loading="lazy"
                            />
                        </div>
                        <div className="p-6 md:p-8">
                            <p className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-40 mb-3">
                                {item.year}
                                <span className="mx-2 opacity-30">·</span>
                                {item.type}
                            </p>
                            <h3 className="text-xl md:text-2xl font-display font-medium text-black tracking-tight leading-tight">
                                {item.title}
                            </h3>
                        </div>
                    </article>
                ))}
            </div>
        </Section>
        */}
    </div>
);

window.AllWorks = AllWorks;