import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
export const isWebkit = () => {
    if (typeof window === 'undefined') {
        return false;
    }
    const isSafariUserAgent = Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
    const isChrome = Boolean(navigator.userAgent.match(/CriOS\//));
    return isSafariUserAgent || isChrome;
};
const icon = {
    height: 16,
    marginLeft: 10,
};
export const IfYouKnowReact = () => {
    const [vid, setVid] = useState('/img/compose.webm');
    useEffect(() => {
        if (isWebkit()) {
            setVid('/img/compose.mp4');
        }
    }, []);
    return (_jsxs("div", { className: "flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8", children: [_jsx("video", { src: vid, muted: true, autoPlay: true, playsInline: true, loop: true, className: "w-[500px] h-[500px] cursor-default! relative lg:-translate-x-8 -mb-40 lg:mt-0 lg:mb-0" }), _jsxs("div", { children: [_jsxs("h2", { className: "text-4xl fontbrand pt-20", children: [_jsx("span", { className: "text-brand", children: "Compose" }), " with code"] }), _jsx("p", { className: "leading-relaxed font-brand", children: "Use React, a powerful frontend technology, to create sophisticated videos with code." }), _jsx("div", { className: "h-4" }), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/the-fundamentals", children: ["Learn Remotion", ' ', _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" }) })] })] })] }));
};
