function Landing({ goTo, openInviteTab }) {
    return React.createElement("main", { className: "storefront-page landing-page", id: "main-content" },
        React.createElement(Hero, { goTo: goTo, openInviteTab: openInviteTab }),
        React.createElement(TemplateShowcase, { goTo: goTo, openInviteTab: openInviteTab }),
        React.createElement(HowItWorks, null),
        React.createElement(LandingQuestions, null));
}
function Hero({ goTo, openInviteTab }) {
    const minPrice = Math.min(...TemplateCatalog.list("builder").filter(tpl => templateMatchesCategory(tpl, "shaadi")).map(tpl => tpl.price));
    return React.createElement("section", { className: "invitation-hero", "aria-labelledby": "hero-heading" },
        React.createElement("div", { className: "wrap invitation-hero-grid" },
            React.createElement("div", { className: "invitation-hero-copy" },
                React.createElement("p", { className: "hero-intro" }, "Made for your celebration"),
                React.createElement("h1", { id: "hero-heading" },
                    "Your story.",
                    React.createElement("br", null),
                    React.createElement("em", null, "A beautiful invitation.")),
                React.createElement("p", { className: "hero-description" }, "A wedding website with your moments, celebrations and guest replies. One personal link to share."),
                React.createElement("div", { className: "hero-actions" },
                    React.createElement("button", { className: "btn btn-primary", onClick: () => goTo("gallery") },
                        "Explore templates ",
                        React.createElement("span", { className: "action-arrow", "aria-hidden": "true" }, "\u2192")),
                    React.createElement("a", { href: "#how-it-works", className: "hero-how-link" },
                        "How it works ",
                        React.createElement("span", { className: "action-arrow", "aria-hidden": "true" }, "\u2193"))),
                React.createElement("p", { className: "hero-price-note" }, Number.isFinite(minPrice) ? `Try the editor for free. Publish from ₹${minPrice.toLocaleString("en-IN")}.` : 'New wedding designs are temporarily unavailable. Your saved invitations remain in your dashboard.')),
            React.createElement(HeroInvitations, { openInviteTab: openInviteTab })));
}
function HeroInvitations({ openInviteTab }) {
    const templates = React.useMemo(() => TemplateCatalog.list("demo").filter(tpl => templateMatchesCategory(tpl, "shaadi")), []);
    const [index, setIndex] = React.useState(0);
    const [ready, setReady] = React.useState({});
    const [paused, setPaused] = React.useState(false);
    const [hovered, setHovered] = React.useState(false);
    const [environment, setEnvironment] = React.useState({ visible: false, auto: true });
    const showcaseRef = React.useRef(null);
    const current = templates[index], next = templates[(index + 1) % templates.length];
    const onReadyChange = React.useCallback((id, loaded) => setReady(previous => previous[id] === loaded ? previous : { ...previous, [id]: loaded }), []);
    React.useEffect(() => {
        const motion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
        const connection = window.navigator?.connection;
        const measure = () => {
            const rect = showcaseRef.current?.getBoundingClientRect();
            const visible = Boolean(rect && rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < window.innerHeight && !document.hidden);
            const auto = !motion?.matches && !connection?.saveData;
            setEnvironment(previous => previous.visible === visible && previous.auto === auto ? previous : { visible, auto });
        };
        const hide = () => setEnvironment(previous => ({ ...previous, visible: false }));
        const observer = window.IntersectionObserver ? new window.IntersectionObserver(measure) : null;
        if (showcaseRef.current)
            observer?.observe(showcaseRef.current);
        if (!observer)
            window.addEventListener("scroll", measure, { passive: true });
        window.addEventListener("resize", measure, { passive: true });
        window.addEventListener("pagehide", hide);
        window.addEventListener("pageshow", measure);
        document.addEventListener("visibilitychange", measure);
        motion?.addEventListener?.("change", measure);
        connection?.addEventListener?.("change", measure);
        measure();
        return () => {
            observer?.disconnect();
            window.removeEventListener("scroll", measure);
            window.removeEventListener("resize", measure);
            window.removeEventListener("pagehide", hide);
            window.removeEventListener("pageshow", measure);
            document.removeEventListener("visibilitychange", measure);
            motion?.removeEventListener?.("change", measure);
            connection?.removeEventListener?.("change", measure);
        };
    }, []);
    React.useEffect(() => {
        if (templates.length < 2 || !environment.visible || !environment.auto || paused || hovered || !ready[current.id] || !ready[next.id])
            return;
        const timer = window.setTimeout(() => setIndex(value => (value + 1) % templates.length), 8000);
        return () => window.clearTimeout(timer);
    }, [index, templates, ready[current?.id], ready[next?.id], environment.visible, environment.auto, paused, hovered]);
    if (!current)
        return null;
    const move = direction => { setPaused(true); setIndex(value => (value + direction + templates.length) % templates.length); };
    const slides = environment.auto && templates.length > 1 ? [current, next] : [current];
    return React.createElement("figure", { className: "hero-invitation-showcase", ref: showcaseRef, "aria-label": "Invitation designs", "aria-roledescription": "carousel", onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocusCapture: event => { if (!event.target.closest("[data-hero-rotation-toggle]"))
            setPaused(true); } },
        React.createElement("div", { className: "hero-invitation-deck" }, slides.map(tpl => {
            const selected = tpl.id === current.id;
            return React.createElement("div", { key: tpl.id, className: "hero-invitation-slide" + (selected ? " is-current" : ""), "aria-hidden": selected ? undefined : true, inert: selected ? undefined : "" },
                React.createElement("div", { className: "hero-invitation-preview home-design-preview" },
                    React.createElement(TemplateShowcasePhone, { template: tpl, paused: !selected, onReadyChange: onReadyChange, onOpenDemo: selected ? openInviteTab : undefined })));
        })),
        React.createElement("figcaption", null,
            React.createElement("span", null, current.name),
            React.createElement("button", { className: "text-action", onClick: () => openInviteTab(current), "aria-label": "View featured " + current.name + " demo" },
                "View this invitation ",
                React.createElement("span", { "aria-hidden": "true" }, "\u2197"))),
        templates.length > 1 && React.createElement("div", { className: "hero-invitation-controls" },
            React.createElement("button", { type: "button", onClick: () => move(-1), "aria-label": "Previous invitation" }, "\u2190"),
            React.createElement("span", { "aria-label": "Design " + (index + 1) + " of " + templates.length },
                index + 1,
                " / ",
                templates.length),
            React.createElement("button", { type: "button", onClick: () => move(1), "aria-label": "Next invitation" }, "\u2192"),
            environment.auto && React.createElement("button", { type: "button", className: "hero-rotation-toggle", "data-hero-rotation-toggle": true, onClick: () => setPaused(value => !value), "aria-label": paused ? "Resume invitation slideshow" : "Pause invitation slideshow" }, paused ? "Play" : "Pause")));
}
function TemplateShowcase({ goTo, openInviteTab }) {
    const available = TemplateCatalog.list("demo");
    const weddingDesigns = available.filter(tpl => templateMatchesCategory(tpl, "shaadi"));
    const preferred = ["sargam", "patjhad", "royal-pichwai", "amethyst"];
    const featured = [...preferred.map(id => weddingDesigns.find(tpl => tpl.id === id)).filter(Boolean), ...weddingDesigns.filter(tpl => !preferred.includes(tpl.id))].slice(0, 4);
    const minPrice = Math.min(...weddingDesigns.map(tpl => tpl.price));
    return React.createElement("section", { id: "templates-showcase", className: "landing-designs landing-section", "aria-labelledby": "featured-designs-heading" },
        React.createElement("div", { className: "wrap" },
            React.createElement("div", { className: "landing-section-heading" },
                React.createElement("div", null,
                    React.createElement("p", { className: "section-kicker" }, "The collection"),
                    React.createElement("h2", { id: "featured-designs-heading" }, "A little preview of your day."),
                    React.createElement("p", null, "Explore a design, then make it yours.")),
                React.createElement("button", { className: "text-action landing-browse-all", onClick: () => goTo("gallery") },
                    "View all ",
                    available.length,
                    " designs ",
                    React.createElement("span", { className: "action-arrow", "aria-hidden": "true" }, "\u2192"))),
            React.createElement("div", { className: "home-design-grid" }, featured.map(tpl => React.createElement("article", { className: "home-design-card", key: tpl.id, "aria-labelledby": "home-design-" + tpl.id },
                React.createElement("div", { className: "home-design-preview" },
                    React.createElement(TemplateShowcasePhone, { template: tpl, onOpenDemo: openInviteTab })),
                React.createElement("div", { className: "home-design-details" },
                    React.createElement("div", { className: "home-design-title" },
                        React.createElement("h3", { id: "home-design-" + tpl.id }, tpl.name),
                        React.createElement("span", { className: "home-design-price" },
                            "\u20B9",
                            tpl.price.toLocaleString("en-IN"),
                            React.createElement("small", null, "One-time to publish"))),
                    React.createElement("p", null, tpl.style),
                    React.createElement("div", { className: "home-design-actions" },
                        TemplateCatalog.canCreate(tpl.id) && React.createElement("button", { className: "btn btn-primary", onClick: () => goTo("builder", { template: tpl, projectId: null }), "aria-label": "Customize " + tpl.name },
                            "Customize ",
                            React.createElement("span", { className: "action-arrow", "aria-hidden": "true" }, "\u2192")),
                        React.createElement("button", { className: "btn btn-ghost", onClick: () => openInviteTab(tpl), "aria-label": "View " + tpl.name + " demo" },
                            "View demo ",
                            React.createElement("span", { className: "action-arrow", "aria-hidden": "true" }, "\u2197"))))))),
            React.createElement("div", { className: "landing-collection-cta" },
                React.createElement("div", null,
                    React.createElement("p", { className: "collection-cta-title" }, "Your wedding, your invitation."),
                    React.createElement("p", null, Number.isFinite(minPrice) ? `From ₹${minPrice.toLocaleString("en-IN")} · One-time to publish` : 'New wedding designs are temporarily unavailable.')),
                React.createElement("button", { className: "btn btn-primary", onClick: () => goTo("gallery") },
                    "See all ",
                    available.length,
                    " templates ",
                    React.createElement("span", { "aria-hidden": "true" }, "\u2192")))));
}
function HowItWorks() {
    const steps = [
        { title: "Choose a design", description: "Open the demos and explore each invitation. Pick a style that suits your celebration." },
        { title: "Add your details", description: "Make it personal with your names, events and photos. Preview your changes as you go." },
        { title: "Publish and invite", description: "Sign in, save and pay to publish. Share your link on WhatsApp and collect replies in your dashboard." },
    ];
    return React.createElement("section", { id: "how-it-works", className: "landing-section landing-how", "aria-labelledby": "how-heading" },
        React.createElement("div", { className: "wrap" },
            React.createElement("div", { className: "landing-section-heading" },
                React.createElement("div", null,
                    React.createElement("h2", { id: "how-heading" }, "From a first look to \u201Csee you there\u201D."),
                    React.createElement("p", null, "Your invitation comes together in three steps."))),
            React.createElement("ol", { className: "landing-steps" }, steps.map((step, index) => React.createElement("li", { key: step.title },
                React.createElement("span", { className: "landing-step-number", "aria-hidden": "true" }, index + 1),
                React.createElement("div", null,
                    React.createElement("h3", null, step.title),
                    React.createElement("p", null, step.description)))))));
}
function LandingQuestions() {
    const questions = [
        ["Can I try a design before paying?", "Yes. Explore the demos and edit a design for free. Sign in to save it to your account. Payment is required when you publish an invitation."],
        ["What will my guests receive?", "A link to your invitation website. Guests can open it in their browser, view the details and send their RSVP without signing in."],
        ["Can I update my invitation later?", "Yes. Open your saved invitation from the dashboard, edit it and publish your changes. Your published invitation keeps the same link."],
        ["When will the music play?", "Music plays in the full template demos, with a control to pause it. If your browser blocks automatic playback, tap the demo to begin. The small previews on this page stay silent."],
    ];
    return React.createElement("section", { className: "landing-section landing-faq", "aria-labelledby": "questions-heading" },
        React.createElement("div", { className: "wrap landing-faq-layout" },
            React.createElement("div", null,
                React.createElement("h2", { id: "questions-heading" }, "Before you begin."),
                React.createElement("p", null, "A few things you might be wondering.")),
            React.createElement("div", { className: "landing-questions" }, questions.map(([question, answer]) => React.createElement("details", { key: question },
                React.createElement("summary", null,
                    question,
                    React.createElement("span", { "aria-hidden": "true" }, "+")),
                React.createElement("p", null, answer))))));
}
Object.assign(window, { Landing });