import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { SectionTitle } from './VideoAppsTitle';
const appPipeline = [
    {
        step: '01',
        title: 'Design a template',
        description: 'Start in Remotion Studio and build a reusable composition for your video workflow.',
        link: '/docs/studio',
        buttonText: 'Remotion Studio',
        illustration: 'studio',
    },
    {
        step: '02',
        title: 'Build an app around it',
        description: 'Expose props for text, images, colors, timing, and layouts to power editors, generators, and automations.',
        link: '/docs/parameterized-rendering',
        buttonText: 'Parameterized rendering',
        illustration: 'preview',
    },
    {
        step: '03',
        title: 'Preview and render',
        description: (_jsxs(_Fragment, { children: ["Use the", ' ', _jsx("a", { href: "/player", className: "font-semibold text-text no-underline", children: "Player" }), ' ', "for interactive previews, then render locally, on servers, serverlessly, or in-browser."] })),
        link: '/docs/render',
        buttonText: 'Rendering options',
        illustration: 'render',
    },
];
const launchOptions = [
    {
        title: 'Start from a template',
        description: 'Use starter projects for SaaS workflows, social videos, slideshows, captions, and repeatable video products.',
        link: '/templates',
        buttonText: 'Browse templates',
    },
    {
        title: 'Build a video editor',
        description: 'Editor Starter is an official paid template for a timeline, canvas, asset uploads, and rendering.',
        link: '/docs/editor-starter',
        buttonText: 'Editor Starter',
    },
    {
        title: 'See what teams ship',
        description: 'Audiograms, captioning tools, year-in-review generators, creative editors, and other products built with Remotion.',
        link: '/showcase',
        buttonText: 'Showcase',
    },
];
const icon = {
    height: 16,
    marginLeft: 10,
};
const Arrow = () => (_jsx("svg", { style: icon, viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentColor", d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" }) }));
const InlineLink = ({ href, children }) => {
    return (_jsxs("a", { href: href, className: "mt-3 inline-flex flex-row items-center font-brand text-base font-semibold text-text no-underline sm:text-sm", children: [children, _jsx(Arrow, {})] }));
};
const illustrationFrame = 'relative mb-5 flex h-40 w-full items-center justify-center px-3';
const StudioIllustration = () => {
    return (_jsx("div", { className: illustrationFrame, "aria-hidden": "true", children: _jsxs("div", { className: "relative w-full max-w-[220px] rounded-md bg-pane px-4 py-6 fontbrand", children: [_jsxs("div", { className: "absolute bottom-5 left-1/2 top-3 flex -translate-x-1/2 flex-col items-center", children: [_jsx("div", { className: "h-2 w-1 rounded-full bg-brand" }), _jsx("div", { className: "w-px flex-1 bg-brand/50" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-[28px_1fr] items-center gap-3", children: [_jsx("div", { className: "h-2 rounded-full bg-muted" }), _jsx("div", { className: "h-3 rounded-full bg-brand" })] }), _jsxs("div", { className: "grid grid-cols-[28px_1fr] items-center gap-3", children: [_jsx("div", { className: "h-2 rounded-full bg-muted" }), _jsx("div", { className: "ml-8 h-3 rounded-full bg-muted" })] }), _jsxs("div", { className: "grid grid-cols-[28px_1fr] items-center gap-3", children: [_jsx("div", { className: "h-2 rounded-full bg-muted" }), _jsx("div", { className: "mr-10 h-3 rounded-full bg-muted" })] })] })] }) }));
};
const PropsIllustration = () => {
    return (_jsx("div", { className: illustrationFrame, "aria-hidden": "true", children: _jsxs("div", { className: "flex h-[124px] w-full max-w-[240px] flex-col justify-center whitespace-nowrap rounded-md bg-pane p-4 text-left font-mono text-base leading-6 text-text sm:text-sm sm:leading-5", children: [_jsx("div", { className: "text-brand", children: "{" }), _jsx("div", { className: "pl-4", children: "title: 'Sale'," }), _jsx("div", { className: "pl-4", children: "color: '#0B84F3'," }), _jsx("div", { className: "pl-4", children: "items: 42" }), _jsx("div", { className: "text-brand", children: "}" })] }) }));
};
const PreviewIllustration = () => {
    return (_jsx("div", { className: illustrationFrame, "aria-hidden": "true", children: _jsxs("div", { className: "w-full max-w-[240px] rounded-md border border-solid border-muted bg-card-bg p-2 fontbrand", children: [_jsx("div", { className: "relative flex h-[92px] items-center justify-center rounded-sm border border-solid border-muted bg-pane text-brand", children: _jsxs("svg", { className: "h-14 w-14 text-brand", viewBox: "-11.5 -10.23174 23 20.46348", fill: "none", children: [_jsx("circle", { cx: "0", cy: "0", r: "2.05", fill: "currentColor" }), _jsx("ellipse", { cx: "0", cy: "0", rx: "11", ry: "4.2", stroke: "currentColor", strokeWidth: "1" }), _jsx("ellipse", { cx: "0", cy: "0", rx: "11", ry: "4.2", stroke: "currentColor", strokeWidth: "1", transform: "rotate(60)" }), _jsx("ellipse", { cx: "0", cy: "0", rx: "11", ry: "4.2", stroke: "currentColor", strokeWidth: "1", transform: "rotate(120)" })] }) }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx("div", { className: "fontbrand text-xs font-semibold text-text", children: "0:12" }), _jsx("div", { className: "h-1.5 flex-1 rounded-full bg-muted", children: _jsx("div", { className: "h-full w-2/5 rounded-full bg-brand" }) }), _jsx("div", { className: "fontbrand text-xs font-semibold text-text", children: "0:30" })] })] }) }));
};
const RenderIllustration = () => {
    return (_jsx("div", { className: illustrationFrame, "aria-hidden": "true", children: _jsx("div", { className: "grid w-full max-w-[240px] grid-cols-2 gap-2 fontbrand text-base font-semibold", children: ['.mp4', '.webm', '.gif', '.png'].map((format) => (_jsx("div", { className: "rounded-md bg-pane px-4 py-3 text-center text-brand", children: format }, format))) }) }));
};
const PipelineIllustration = ({ kind }) => {
    if (kind === 'studio') {
        return _jsx(StudioIllustration, {});
    }
    if (kind === 'props') {
        return _jsx(PropsIllustration, {});
    }
    if (kind === 'preview') {
        return _jsx(PreviewIllustration, {});
    }
    return _jsx(RenderIllustration, {});
};
const AutomationsSection = () => {
    return (_jsxs("div", { children: [_jsx(SectionTitle, { children: "Create video apps and automations" }), _jsx("div", { className: "mx-auto mb-8 mt-3 max-w-[70ch] text-center fontbrand text-base leading-relaxed text-muted text-pretty", children: "Design a reusable video template in Remotion, expose props for app UIs and automations, then preview and render it wherever your workflow runs." }), _jsx("div", { className: "py-4", children: _jsx("dl", { className: "grid grid-cols-1 justify-items-stretch gap-5 lg:grid-cols-3 lg:justify-items-center lg:gap-0", children: appPipeline.map((item) => (_jsxs("div", { className: "flex w-full flex-col rounded-lg border border-solid border-text/10 bg-card-bg px-4 py-5 text-left sm:px-5 lg:max-w-[300px] lg:rounded-none lg:border-y-0 lg:border-r-0 lg:border-l lg:bg-transparent lg:px-6 lg:py-0 lg:first:border-l-0", children: [_jsx(PipelineIllustration, { kind: item.illustration }), _jsxs("div", { className: "mb-2 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-pane fontbrand text-xs font-semibold text-brand", children: item.step }), _jsx("dt", { className: "fontbrand text-xl font-semibold tracking-tight text-text text-balance", children: item.title })] }), _jsx("dd", { className: "m-0 mt-1 flex-1 fontbrand text-base leading-relaxed text-muted text-pretty sm:text-sm", children: item.description }), _jsx(InlineLink, { href: item.link, children: item.buttonText })] }, item.step))) }) }), _jsxs("div", { className: "mt-8 flex flex-wrap justify-center gap-x-5 gap-y-2 fontbrand text-base text-muted sm:text-sm", children: [_jsx("span", { children: "Explore:" }), launchOptions.map((item) => (_jsx("a", { href: item.link, className: "font-semibold text-text no-underline", title: item.description, children: item.buttonText }, item.link)))] })] }));
};
export default AutomationsSection;
