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: "Rebrand and site for independent publisher",
        category: "Brand Identity",
        year: "2020",
        services: "Brand strategy, Visual identity, Web design & build",
        client: "Independent publisher",
        imageRows: [
            ["https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&q=80&w=1600"],
            [
                "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=1600",
                "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=1600"
            ]
        ],
        description: "A full rebrand and editorial website for an independent publisher—typography-led identity, flexible content templates, and a calm reading experience across catalog and long-form pieces.",
        outcome: "Unified brand presence across print and digital, with faster production of seasonal lists and author pages.",
        credits: "Creative Direction: Sedem Oasis"
    },
    {
        title: "Onboarding flows for healthcare portal",
        category: "Product Design",
        year: "2022",
        services: "UX & UI design, Flow mapping, Accessibility review",
        client: "Regional healthcare network",
        imageRows: [
            ["https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&q=80&w=1600"],
            ["https://images.unsplash.com/photo-1551190822-a9333d879a1f?auto=format&fit=crop&q=80&w=1600"]
        ],
        description: "End-to-end onboarding for a patient portal—clear consent steps, insurance verification, and appointment booking with WCAG-aligned patterns and plain-language microcopy.",
        outcome: "Reduced support tickets related to account setup and improved completion rates on critical registration steps.",
        credits: "Product Design: Sedem Oasis"
    },
    {
        title: "Campaign toolkit for music festival series",
        category: "Brand Identity",
        year: "2019",
        services: "Campaign art direction, Social templates, Print & signage",
        client: "Music festival collective",
        imageRows: [
            [
                "https://images.unsplash.com/photo-1459749411175-04bf5292ceea?auto=format&fit=crop&q=80&w=1600",
                "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&q=80&w=1600"
            ],
            ["https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&q=80&w=1600"]
        ],
        description: "Modular visual toolkit for a recurring festival series—bold type, duotone photography, and plug-and-play layouts for posters, stages, and digital promotion.",
        outcome: "Faster turnaround for each city date while keeping a cohesive look across partners and sponsors.",
        credits: "Art direction: Sedem Oasis"
    }
];

const experimentItems = [
    {
        title: "Streamlined checkout for regional retail chain",
        year: "2022",
        type: "Product Design",
        image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=1200"
    },
    {
        title: "Visual system for climate data nonprofit",
        year: "2021",
        type: "Brand Identity",
        image: "https://images.unsplash.com/photo-1617791160505-6f00504e3519?auto=format&fit=crop&q=80&w=1200"
    },
    {
        title: "Mobile-first dashboard for field operations",
        year: "2023",
        type: "Product Design",
        image: "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&q=80&w=1200"
    }
];

const AllWorks = () => (
    <div className="bg-white">
        <Work extraProjects={ARCHIVE_PROJECTS} />
        <Section id="archive" className="min-h-screen flex flex-col px-4 sm:px-8 md:px-16 pt-20 sm:pt-24 md:pt-32 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]">
            <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}`}
                        onClick={() => {
                            // dispatchOpenArchiveProject(item);
                        }}
                        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;