import { makeStyles } from "@fluentui/react-components";
import { Outlet } from "react-router-dom";

const useStyles = makeStyles({
    root: {
        display: 'flex',
        justifyContent: 'center',
        height: '100%',
        width: '100%'
    }
})

export default function MainLayout() {
    const classes = useStyles()

    return (
        <div className={classes.root}>
            <Background />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', width: '100vw', height: '100vh' }}>
                <Outlet />
            </div>
        </div>
    )
}

const Background = () => {
    return (
        <svg id="corp-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100vh', display: 'block' }}>
            <defs>
                <style>
                    {`:root {
                            --c1: #0f4c81;   /* deep blue */
                        --c2: #1fb6ff;   /* bright cyan */
                        --c3: #7bd389;   /* muted green */
                        --muted: rgba(255,255,255,0.06);
                        }`}
                </style>

                <linearGradient id="grad-main" x1="0" x2="1" y1="0" y2="1">
                    <stop offset="0" stop-color="var(--c2)" stop-opacity="0.95" />
                    <stop offset="0.45" stop-color="var(--c1)" stop-opacity="0.95" />
                    <stop offset="1" stop-color="var(--c3)" stop-opacity="0.9" />
                </linearGradient>

                <filter id="f-blur">
                    <feGaussianBlur stdDeviation="40" result="b" />
                    <feColorMatrix type="matrix"
                        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 0.6 0" in="b" />
                </filter>

                <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
                    <rect width="100%" height="100%" fill="none" />
                    <circle cx="2" cy="2" r="1.1" fill="white" fill-opacity="0.06" />
                </pattern>

                <pattern id="diagonal" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
                    <rect width="12" height="12" fill="transparent" />
                    <path d="M0 0 L0 1" stroke="white" stroke-opacity="0.02" stroke-width="1" />
                </pattern>

                <radialGradient id="spot" cx="70%" cy="20%" r="50%">
                    <stop offset="0" stop-color="#ffffff" stop-opacity="0.06" />
                    <stop offset="1" stop-color="#ffffff" stop-opacity="0" />
                </radialGradient>

                <clipPath id="blob-clip">
                    <path id="blobPath"
                        d="M420 80C520 10 760 10 890 100C1040 210 1080 360 980 470C880 580 640 620 480 540C300 440 320 180 420 80Z" />
                </clipPath>
            </defs>

            <rect width="100%" height="100%" fill="url(#grad-main)" />

            <g filter="url(#f-blur)" opacity="0.95">
                <path d="M-60 150 C180 40 420 10 700 120 C1040 260 1180 520 960 760 C760 980 420 920 140 800 C-80 700 -40 300 -60 150 Z"
                    fill="white" fill-opacity="0.02" />
                <path d="M1200 40 C1060 -20 900 10 760 120 C620 240 620 420 760 560 C900 700 1160 760 1320 640 C1460 540 1440 200 1200 40 Z"
                    fill="white" fill-opacity="0.03" />
            </g>

            <g transform="translate(60,30) scale(1.2)" opacity="0.9">
                <g clip-path="url(#blob-clip)">
                    <rect width="100%" height="100%" fill="url(#spot)" />
                </g>
                <path id="morph" fill="white" fill-opacity="0.06">
                    <animate attributeName="d"
                        dur="18s"
                        repeatCount="indefinite"
                        values="
                M420 80C520 10 760 10 890 100C1040 210 1080 360 980 470C880 580 640 620 480 540C300 440 320 180 420 80Z;
                M380 60C520 0 760 40 930 120C1080 220 1060 360 940 460C800 560 600 620 420 560C240 500 250 200 380 60Z;
                M440 100C580 30 820 10 980 140C1130 280 1100 430 980 540C840 660 600 680 420 600C220 500 300 160 440 100Z;
                M420 80C520 10 760 10 890 100C1040 210 1080 360 980 470C880 580 640 620 480 540C300 440 320 180 420 80Z"/>
                </path>
            </g>

            <g opacity="0.12">
                <rect x="40" y="60" width="360" height="620" rx="20" fill="url(#diagonal)" />
                <rect x="980" y="80" width="380" height="540" rx="26" fill="url(#dots)" />
            </g>

            <g>
                <rect x="80" y="420" width="1280" height="120" rx="60" fill="white" fill-opacity="0.02" transform="skewX(-18)" />
                <rect x="-60" y="260" width="820" height="60" rx="30" fill="white" fill-opacity="0.015" transform="skewX(10)" />
            </g>

            <g stroke="white" stroke-opacity="0.06" stroke-width="1" fill="none">
                <path d="M120 720 C320 600 520 540 720 580 C920 620 1120 760 1360 700" />
                <path d="M40 620 C240 540 460 460 680 490 C920 520 1080 680 1360 640" />
            </g>

            <rect width="100%" height="100%" fill="black" opacity="0.02" />

        </svg>
    )
}