function Gallery({ goTo, openInviteTab, focusedTemplateId }) {
    const templates = TemplateCatalog.list("demo");
    const [activeCategory, setActiveCategory] = React.useState("all");
    const visibleTemplates = templates.filter(tpl => templateMatchesCategory(tpl, activeCategory));
    React.useEffect(() => {
        if (!focusedTemplateId || !templates.some(tpl => tpl.id === focusedTemplateId))
            return;
        setActiveCategory("all");
        const frame = requestAnimationFrame(() => {
            const card = document.getElementById("gallery-card-" + focusedTemplateId);
            card?.scrollIntoView({ block: "start", behavior: "instant" });
            card?.focus({ preventScroll: true });
        });
        return () => cancelAnimationFrame(frame);
    }, [focusedTemplateId]);
    const openDemo = React.useCallback((tpl) => {
        if (typeof openInviteTab === "function")
            return openInviteTab(tpl);
        if (tpl.demoPath)
            window.location.assign(window.EA_APP?.path ? window.EA_APP.path(tpl.demoPath) : tpl.demoPath);
    }, [openInviteTab]);
    const descriptionFor = tpl => ({
        sargam: "Pearl arches & a personal letter",
        patjhad: "An autumn garden celebration",
        amethyst: "Enchanted doors & lilac gardens",
        neelangan: "Painted florals & lapis blue",
        "haveli-dusk": "A candlelit haveli at dusk",
        "royal-pichwai": "Pichwai art & a royal reveal",
        "moonlit-mehfil": "A celebration beneath the stars",
        vivaha: "Your story as a wedding film",
        "dear-you": "A personal letter & memories",
    }[tpl.id] || tpl.style);
    return (React.createElement("main", { className: "gallery-page storefront-page", id: "main-content" },
        React.createElement("section", { className: "gallery-heading" },
            React.createElement("div", { className: "wrap", style: { textAlign: "center" } },
                React.createElement("h1", { className: "display" }, "Find your invitation."),
                React.createElement("p", { className: "muted" }, "Watch the preview. Explore the demo. Make it yours."))),
        React.createElement("section", { className: "section gallery-cards-section", "aria-label": "Invitation templates" },
            React.createElement("div", { className: "wrap" },
                React.createElement(TemplateCategoryTabs, { active: activeCategory, onChange: setActiveCategory, templates: templates }),
                React.createElement("p", { className: "collection-count", "aria-live": "polite" },
                    visibleTemplates.length,
                    " ",
                    visibleTemplates.length === 1 ? "design" : "designs",
                    " to explore"),
                visibleTemplates.length ? (React.createElement("div", { className: "showcase-grid" }, visibleTemplates.map(tpl => (React.createElement(ShowcaseCard, { key: tpl.id, template: tpl, description: descriptionFor(tpl), onOpenDemo: () => openDemo(tpl), onBuild: () => goTo("builder", { template: tpl, projectId: null }) }))))) : React.createElement(TemplateCategoryEmpty, { category: getTemplateCategory(activeCategory) })))));
}
function ShowcaseCard({ template, description, onOpenDemo, onBuild }) {
    return (React.createElement("article", { id: "gallery-card-" + template.id, tabIndex: -1, className: "showcase-card showcase-card--" + template.id, "aria-labelledby": "gallery-design-" + template.id },
        React.createElement("div", { className: "sc-phone-stage" },
            React.createElement(TemplateShowcasePhone, { template: template, onOpenDemo: onOpenDemo })),
        React.createElement("div", { className: "sc-meta" },
            React.createElement("h3", { className: "sc-title", id: "gallery-design-" + template.id }, template.name),
            React.createElement("p", { className: "sc-desc" }, description),
            React.createElement("div", { className: "sc-price" },
                React.createElement("span", { className: "sc-price-now" },
                    "\u20B9",
                    template.price.toLocaleString("en-IN")),
                React.createElement("span", { className: "sc-price-note" }, "One-time to publish")),
            React.createElement("div", { className: "sc-card-actions" },
                TemplateCatalog.canCreate(template.id) && React.createElement("button", { type: "button", className: "sc-cta-btn", onClick: onBuild, "aria-label": "Customize " + template.name },
                    "Customize ",
                    React.createElement("span", { className: "action-arrow", "aria-hidden": "true" }, "\u2192")),
                React.createElement("button", { type: "button", className: "sc-secondary-btn", onClick: onOpenDemo, "aria-label": "View " + template.name + " demo" },
                    "View demo ",
                    React.createElement("span", { className: "action-arrow", "aria-hidden": "true" }, "\u2197"))))));
}
Object.assign(window, { Gallery, ShowcaseCard });