// Cards.jsx — UseCaseCard, AudienceCard, StarterPackCard const HeartIcon = () => ( ); const ArrowRightIcon = () => ( ); function PhaseVisual({ phaseId }) { if (phaseId === "launch") return ( ); if (phaseId === "vis-promo") return ( ); if (phaseId === "reg-drive") return ( ); if (phaseId === "showtime") return ( ); if (phaseId === "post-event") return ( ); return null; } function AudienceVisual({ audienceId }) { if (audienceId === "attendees") return ( ); if (audienceId === "exhibitors") return ( ); if (audienceId === "sponsors") return ( ); if (audienceId === "speakers") return ( ); return null; } function BreakerCardVisual({ kind, id }) { if (kind === "phase") return ; if (kind === "audience") return ; return (
); } function UseCaseCard({ id, title, phase, page, audience, videos, variant = 0, onClick, onUseTemplate }) { // Phase + page chip lookups (data lives on window from templates-data.js). const phaseDef = (window.PHASES || []).find((p) => p.id === phase); // Thumbnail variant is derived from video count (1..6 → variant 0..5), // so the diagram matches the real flow shape. const flowVariant = Math.max(0, Math.min(5, ((videos || []).length || 1) - 1)); const phaseLabel = phaseDef ? phaseDef.label : null; const pageLabel = (window.PAGES || {})[page] || null; const audienceLabel = (window.AUDIENCES || {})[audience] || null; const videoCount = Array.isArray(videos) ? videos.length : 0; return (
{phaseLabel && ( {phaseLabel} )}

{title}

{videoCount} {videoCount === 1 ? "video" : "videos"}
); } function AudienceCard({ label, count, tone = "yellow", onClick }) { return ( ); } function StarterPackCard({ name, description, templateCount, variants, onClick }) { return (
{templateCount} Templates

{name}

{description}

); } // ───────────────────────────────────────────────────────────────────────────── // BrowseByCarousel — generic horizontal-scroll row used by both // "Browse by campaign phase" and "Browse by audience" sections. // Each item renders as the same audience-card visual treatment so the two // breakers feel like one family. Right-arrow control nudges the row. // ───────────────────────────────────────────────────────────────────────────── function BrowseByCarousel({ title, subtitle, items }) { const trackRef = React.useRef(null); const [canScrollRight, setCanScrollRight] = React.useState(false); const [canScrollLeft, setCanScrollLeft] = React.useState(false); const updateScrollState = React.useCallback(() => { const el = trackRef.current; if (!el) return; setCanScrollLeft(el.scrollLeft > 4); setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4); }, []); React.useEffect(() => { updateScrollState(); const el = trackRef.current; if (!el) return; el.addEventListener("scroll", updateScrollState, { passive: true }); window.addEventListener("resize", updateScrollState); return () => { el.removeEventListener("scroll", updateScrollState); window.removeEventListener("resize", updateScrollState); }; }, [updateScrollState, items]); const scrollBy = (dir) => { const el = trackRef.current; if (!el) return; // Step ≈ one card width plus gap. const step = Math.max(280, el.clientWidth * 0.6); el.scrollBy({ left: dir * step, behavior: "smooth" }); }; return (

{title}

{subtitle &&

{subtitle}

}
{items.map((it) => ( ))}
); } // ───────────────────────────────────────────────────────────────────────────── // StarterPacksCarousel — same horizontal-scroll chrome as BrowseByCarousel // but renders the chunky stacked-card "pack" visual. One pack per phase, // in manifest order. Click → opens StarterPackModal with that pack's templates. // ───────────────────────────────────────────────────────────────────────────── function StarterPacksCarousel({ phases, templates, onOpenPack }) { const trackRef = React.useRef(null); const [canScrollRight, setCanScrollRight] = React.useState(false); const [canScrollLeft, setCanScrollLeft] = React.useState(false); const updateScrollState = React.useCallback(() => { const el = trackRef.current; if (!el) return; setCanScrollLeft(el.scrollLeft > 4); setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4); }, []); React.useEffect(() => { updateScrollState(); const el = trackRef.current; if (!el) return; el.addEventListener("scroll", updateScrollState, { passive: true }); window.addEventListener("resize", updateScrollState); return () => { el.removeEventListener("scroll", updateScrollState); window.removeEventListener("resize", updateScrollState); }; }, [updateScrollState]); const scrollBy = (dir) => { const el = trackRef.current; if (!el) return; const step = Math.max(300, el.clientWidth * 0.6); el.scrollBy({ left: dir * step, behavior: "smooth" }); }; // Build pack data: one pack per phase, with that phase's templates inside. const packs = phases.map((p) => { const items = templates.filter((t) => t.phase === p.id); return { name: p.label + " Pack", phaseId: p.id, description: p.packDescription || p.job, window: p.window, templates: items, variants: items.slice(0, 3).map((t) => Math.max(0, Math.min(5, ((t.videos || []).length || 1) - 1))) }; }).filter((pk) => pk.templates.length > 0); return (

Starter packs

Load every template for a phase in one go — your homepage, why-attend, sponsor, and more, all wired up.

{packs.map((pk) => (
onOpenPack(pk)}>
{pk.templates.length} Templates

{pk.name}

{pk.window}

))}
); } Object.assign(window, { UseCaseCard, AudienceCard, StarterPackCard, BrowseByCarousel, StarterPacksCarousel, HeartIcon, ArrowRightIcon, PhaseVisual, AudienceVisual, BreakerCardVisual });