import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// Adjustments to the EvaluateRemotionSection.tsx to separate the flex box into two boxes
// with specified alignment and positioning requirements.
import { useEffect, useState } from 'react';
import { experts } from '../experts';
import { BlueButton } from './layout/Button';
const EvaluateRemotionSection = () => {
    const [dailyAvatars, setDailyAvatars] = useState([]);
    useEffect(() => {
        const avatars = experts.map((expert) => expert.image);
        const selectedAvatars = [];
        for (let i = 0; i < 3; i++) {
            const index = Math.floor(Math.random() * avatars.length);
            selectedAvatars.push(avatars[index]);
            avatars.splice(index, 1); // Remove selected avatar to avoid duplicates
        }
        setDailyAvatars(selectedAvatars);
    }, []);
    return (_jsxs("div", { className: "flex flex-col lg:flex-row gap-2", children: [_jsxs("div", { className: 'card flex-1 flex flex-col', children: [_jsx("div", { className: 'fontbrand text-2xl font-bold', children: "Questions about our license?" }), _jsx("p", { className: 'text-muted fontbrand leading-snug', children: "Book a 20 minute call or write us an email to get all your questions answered." }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap gap-2", children: [_jsx("a", { target: "_blank", href: "https://cal.com/remotion/evaluate", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Schedule a call" }) }), _jsx("a", { target: "_blank", href: "mailto:hi@remotion.dev", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Write an email" }) })] })] }), _jsxs("div", { className: 'card flex-1 flex flex-col', children: [_jsx("div", { className: 'fontbrand text-2xl font-bold', children: "Get help with your Remotion project" }), _jsx("p", { className: 'text-muted fontbrand leading-snug', children: "Contact our experts for help and work." }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: 'flex flex-row justify-between', children: [_jsx("a", { href: "/experts", style: { textDecoration: 'none' }, children: _jsx(BlueButton, { size: "sm", loading: false, children: "Remotion Experts" }) }), _jsx("div", { className: 'flex justify-end items-end gap-3', children: dailyAvatars.map((avatar) => (_jsx("div", { className: 'w-12 h-12 rounded-full bg-muted bg-cover bg-center -ml-5 border-2 border-black', style: { backgroundImage: `url(${avatar})` } }, avatar))) })] })] })] }));
};
export default EvaluateRemotionSection;
