import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Switch } from '@remotion/design';
import React, { useCallback, useMemo } from 'react';
import { cn } from '../../cn';
import { InfoTooltip } from './InfoTooltip';
import { PricingBulletPoint } from './PricingBulletPoint';
const Container = ({ children, }) => {
    return (_jsx("div", { className: 'flex flex-col border-effect rounded-xl p-5 bg-pane', children: children }));
};
const Title = ({ children }) => {
    return (_jsx("div", { className: "text-4xl font-bold leading-none fontbrand mt-2 mb-5", children: children }));
};
const Audience = ({ children }) => {
    return _jsx("div", { className: 'fontbrand text-lg leading-none', children: children });
};
const BottomInfo = ({ children, className, ...props }) => {
    return (_jsx("div", { className: cn(className, 'text-[var(--subtitle)] fontbrand text-sm'), ...props, children: children }));
};
const PriceTag = ({ children }) => {
    return (_jsx("div", { className: 'fontbrand text-2xl font-bold min-w-[80px] w-auto text-right shrink-0 ml-4', children: children }));
};
const icon = {
    height: 16,
    marginLeft: 4,
};
const PricingSlider = ({ value, onChange, min, max, step = 1 }) => {
    const percentage = ((value - min) / (max - min)) * 100;
    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
					.pricing-slider {
						-webkit-appearance: none;
						appearance: none;
						height: 12px;
						border-radius: 8px;
						border: 2px solid black;
						cursor: pointer;
					}
				.pricing-slider::-webkit-slider-thumb {
					-webkit-appearance: none;
					appearance: none;
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background: white;
					border: 2px solid black;
					border-bottom-width: 4px;
					cursor: pointer;
					scale: 1.2;
				}
				.pricing-slider::-moz-range-thumb {
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background: white;
					border: 2px solid black;
					border-bottom-width: 4px;
					scale: 1.2;
					cursor: pointer;
				}
				` }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange(Number(e.target.value)), className: "pricing-slider w-full", style: {
                    background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--background) ${percentage}%, var(--background) 100%)`,
                } })] }));
};
const textUnitWrapper = {
    display: 'flex',
    flexDirection: 'column',
};
export const FreePricing = () => {
    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For individuals and companies of up to 3 people" }), _jsx(Title, { children: "Free License" }), _jsx(PricingBulletPoint, { text: "Create and automate", checked: true }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Unlimited use", checked: true }), _jsx(PricingBulletPoint, { text: "Must upgrade when your team grows", checked: false }), _jsx("div", { className: 'flex flex-row justify-end mt-4', children: _jsx("div", { style: {
                        ...textUnitWrapper,
                        alignItems: 'flex-end',
                    }, children: _jsxs("a", { target: "_blank", href: "https://www.remotion.dev/docs", className: "font-brand text-brand flex flex-row items-center gap-1 no-underline", children: ["No sign up needed - get started", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", 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" }) })] }) }) })] }));
};
export const EnterpriseLicense = () => {
    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For advanced needs" }), _jsx(Title, { children: "Enterprise License" }), _jsx(PricingBulletPoint, { text: "Everything in Company License", checked: true }), _jsx(PricingBulletPoint, { text: "Private Slack or Discord", checked: true }), _jsx(PricingBulletPoint, { text: "Monthly consulting session", checked: true }), _jsx(PricingBulletPoint, { text: "Custom terms, billing and pricing", checked: true }), _jsx(PricingBulletPoint, { text: "Compliance forms", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized feature requests", checked: true }), _jsx(PricingBulletPoint, { text: _jsxs("span", { children: [_jsx("a", { href: "https://www.remotion.dev/editor-starter", className: "underline underline-offset-4 text-inherit", children: "Editor Starter" }), ' ', "included"] }), checked: true }), _jsx("div", { style: { height: 30 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: {
                        ...textUnitWrapper,
                        alignItems: 'flex-end',
                    }, children: [_jsx(PriceTag, { children: _jsx("a", { className: 'cursor-pointer no-underline text-inherit hover:text-brand', target: '_blank', href: "https://www.remotion.pro/contact", children: "Contact us" }) }), _jsx("div", { className: 'text-[var(--subtitle)] fontbrand text-sm', children: "Starting at $500 per month" })] }) })] }));
};
const SEAT_PRICE = 25;
const RENDER_UNIT_PRICE = 10;
const SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
    return (_jsxs("div", { className: "flex flex-row gap-3 cursor-pointer select-none items-center", children: [_jsx(Switch, { active: checked, onToggle: () => onChange(!checked) }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "fontbrand font-bold text-lg flex flex-row items-center gap-1", children: [title, children] }), _jsx("div", { className: "text-muted fontbrand text-sm", children: subtitle })] }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: cn('fontbrand text-muted transition-opacity duration-150', checked ? 'hidden' : 'opacity-100'), children: "Not selected" })] }));
};
export const CompanyPricing = () => {
    const [creatorsSelected, setCreatorsSelected] = React.useState(false);
    const [automatorsSelected, setAutomatorsSelected] = React.useState(true);
    const [devSeatCount, setDevSeatCount] = React.useState(3);
    const [cloudRenders, setCloudRenders] = React.useState(10000);
    const formatPrice = useCallback((price) => {
        const formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            maximumFractionDigits: 0,
        });
        return formatter.format(price);
    }, []);
    const creatorsPrice = creatorsSelected ? devSeatCount * SEAT_PRICE : 0;
    const automatorsPrice = automatorsSelected
        ? Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE
        : 0;
    const totalPrice = useMemo(() => {
        const basePrice = creatorsPrice + automatorsPrice;
        // Minimum only applies if automation is selected
        if (automatorsSelected) {
            return Math.max(100, basePrice);
        }
        return basePrice;
    }, [creatorsPrice, automatorsPrice, automatorsSelected]);
    const totalPriceString = useMemo(() => {
        return formatPrice(totalPrice);
    }, [formatPrice, totalPrice]);
    const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
    const showEnterpriseMessage = totalPrice >= 500;
    return (_jsxs(Container, { children: [_jsx(Audience, { children: "For collaborations and companies of 4+ people" }), _jsx(Title, { children: "Company License" }), _jsx(PricingBulletPoint, { text: "Create and automate", checked: true }), _jsx(PricingBulletPoint, { text: "Commercial use allowed", checked: true }), _jsx(PricingBulletPoint, { text: "Pay according to usage", checked: true }), _jsx(PricingBulletPoint, { text: "Prioritized Support", checked: true }), _jsx(PricingBulletPoint, { text: "$250 Mux credits", checked: true, children: _jsxs(InfoTooltip, { children: ["Credits for Mux.com.", _jsx("br", {}), " Applies only to new Mux customers."] }) }), _jsx("div", { style: { height: 30 } }), _jsx(SectionCheckbox, { checked: creatorsSelected, onChange: setCreatorsSelected, title: "Remotion for Creators", subtitle: "Create videos for yourself - $25/mo per seat", children: _jsxs(InfoTooltip, { children: ["Intended for low volume video creations through coding and prompting, and building motion design systems in a local environment.", _jsx("br", {}), _jsx("br", {}), "Get 1 Seat per user."] }) }), _jsx("div", { className: cn('grid ease-out', creatorsSelected
                    ? 'grid-rows-[1fr] opacity-100'
                    : 'grid-rows-[0fr] opacity-0'), style: {
                    transition: creatorsSelected
                        ? 'grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms'
                        : 'opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms',
                }, children: _jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(PricingSlider, { value: devSeatCount, onChange: setDevSeatCount, min: 1, max: 50 }) }), _jsxs("div", { className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center", children: [devSeatCount, " ", devSeatCount === 1 ? 'Seat' : 'Seats'] }), _jsxs("div", { className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap", children: ["$", new Intl.NumberFormat('en-US', {
                                        maximumFractionDigits: 0,
                                    }).format(SEAT_PRICE * devSeatCount)] })] }) }) }), _jsx("div", { className: "h-6" }), _jsx(SectionCheckbox, { checked: automatorsSelected, onChange: setAutomatorsSelected, title: "Remotion for Automators", subtitle: "Build video creation tools - $0.01 per render, $100/mo minimum", children: _jsxs(InfoTooltip, { children: ["Intended for companies launching ", _jsx("br", {}), "SaaS applications; such as video editors and prompt-to-video apps, and automated high-volume video creation.", _jsx("br", {}), _jsx("br", {}), "A $100/mo Minimum Spend applies.", _jsx("br", {}), _jsx("br", {}), "Developers working on automation projects do not require a Seat."] }) }), _jsx("div", { className: cn('grid ease-out', automatorsSelected
                    ? 'grid-rows-[1fr] opacity-100'
                    : 'grid-rows-[0fr] opacity-0'), style: {
                    transition: automatorsSelected
                        ? 'grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms'
                        : 'opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms',
                }, children: _jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx(PricingSlider, { value: cloudRenders, onChange: setCloudRenders, min: 1000, max: 100000, step: 1000 }) }), _jsxs("div", { className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right", children: [new Intl.NumberFormat('en-US').format(cloudRenders), " Renders"] }), _jsxs("div", { className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap", children: ["$", new Intl.NumberFormat('en-US', {
                                        maximumFractionDigits: 0,
                                    }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)] })] }) }) }), _jsx("div", { style: { height: 14 } }), _jsx("div", { className: 'flex flex-row justify-end', children: _jsxs("div", { style: { ...textUnitWrapper, alignItems: 'flex-end' }, children: [_jsxs(PriceTag, { children: [totalPriceString, "/month"] }), _jsx(BottomInfo, { "data-visible": showMinimumMessage, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: "The minimum is $100 per month for Remotion for Automators" }), _jsxs(BottomInfo, { "data-visible": showEnterpriseMessage, className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity", children: ["At this spend, you are eligible for the Enterprise License.", _jsx("br", {}), " You can select it when setting up your license, or", ' ', _jsx("a", { className: "bluelink", target: "_blank", href: "https://www.remotion.pro/contact", children: "contact us" }), "."] })] }) }), _jsx("div", { className: 'flex flex-row justify-end mt-4', children: _jsx("div", { style: {
                        ...textUnitWrapper,
                        alignItems: 'flex-end',
                    }, children: _jsxs("a", { href: "https://remotion.pro/dashboard", className: "font-brand text-brand flex flex-row items-center gap-1 no-underline", children: ["Buy now", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", 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" }) })] }) }) })] }));
};
