import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { BlueButton } from './layout/Button';
import { useColorMode } from './layout/use-color-mode';
import { Spacer } from './Spacer';
import { YouAreHere } from './YouAreHere';
const row = {
    display: 'flex',
    flexDirection: 'row',
};
const flex = {
    flex: 1,
};
const list = {
    listStyleType: 'none',
    textAlign: 'center',
    paddingLeft: 0,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
};
const hr = {
    width: 20,
    textAlign: 'center',
    borderTop: 0,
    marginTop: 10,
    marginBottom: 10,
};
const docsButton = {
    textDecoration: 'none',
};
const StepTitle = ({ children }) => {
    return (_jsx("div", { className: "text-center text-xl font-semibold fontbrand mt-2", children: children }));
};
const Subtitle = ({ children }) => {
    return (_jsx("div", { className: "text-center text-base fontbrand text-[var(--subtitle)]", children: children }));
};
const Pane = ({ children }) => {
    return (_jsx("div", { className: "border-effect bg-pane flex-1 p-3 rounded-lg min-h-[500px] flex flex-col text-center", children: children }));
};
export const VideoApps = ({ active }) => {
    const { colorMode } = useColorMode();
    const [src, setSrc] = useState('/img/player-example.png');
    const [src2, setSrc2] = useState('/img/player-example-dark.png');
    useEffect(() => {
        if (colorMode === 'dark') {
            setSrc('/img/player-example-dark.png');
        }
        else {
            setSrc('/img/player-example.png');
        }
    }, [colorMode]);
    useEffect(() => {
        setSrc2(colorMode === 'dark' ? '/img/cluster-dark.png' : '/img/cluster.png');
    }, [colorMode]);
    return (_jsx("div", { className: "w-full", children: _jsxs("div", { className: 'flex flex-col lg:flex-row gap-2', children: [_jsxs(Pane, { children: [active === 'remotion' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion" }), _jsx(Subtitle, { children: "Make videos programmatically" }), _jsx("br", {}), _jsx("div", { style: {
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                flex: 1,
                            }, children: _jsx("img", { className: "max-w-[300px]", src: "/img/writeinreact.png" }) }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Use the Web to create graphics" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Consume user input and APIs" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Render real MP4 videos" })] }), _jsxs("div", { style: row, children: [active === 'remotion' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/", children: _jsx(BlueButton, { loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] }), _jsxs(Pane, { children: [active === 'player' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion Player" }), _jsx(Subtitle, { children: "Embeddable interactive videos" }), _jsx("br", {}), _jsx("div", { style: {
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                flex: 1,
                            }, children: _jsx("img", { className: "max-w-[300px]", src: src }) }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Preview videos in the browser" }), _jsx("hr", { style: hr }), _jsx("li", { children: "React to user input" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Customize look and behavior" })] }), _jsxs("div", { style: row, children: [active === 'player' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/player", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs/player", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] }), _jsxs(Pane, { children: [active === 'lambda' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion Lambda" }), _jsx(Subtitle, { children: "Render at scale" }), _jsx("br", {}), _jsx("div", { style: {
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                flex: 1,
                            }, children: _jsx("img", { className: "max-w-[300px]", src: src2 }) }), _jsx("div", { className: "flex-1" }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Render videos in the cloud" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Scale according to your volume" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Fast because distributed" })] }), _jsxs("div", { style: row, children: [active === 'lambda' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/lambda", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs/lambda", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] })] }) }));
};
