@props([
    'corner' => 'tl',
])

@php
    $corner = in_array($corner, ['tl', 'tr', 'br'], true) ? $corner : 'tl';
    $maskId = 'qg-splash-wire-mask-'.$corner;
@endphp

<div {{ $attributes->merge(['class' => 'qg-splash__wires qg-splash__wires--'.$corner]) }} aria-hidden="true">
    <svg
        class="qg-splash__wire-svg"
        viewBox="0 0 1000 1000"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMinYMin meet"
    >
        <defs>
            <linearGradient id="{{ $maskId }}-fade" x1="0%" y1="0%" x2="88%" y2="88%">
                <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                <stop offset="42%" stop-color="#fff" stop-opacity="0.82" />
                <stop offset="68%" stop-color="#fff" stop-opacity="0.48" />
                <stop offset="88%" stop-color="#fff" stop-opacity="0.18" />
                <stop offset="100%" stop-color="#fff" stop-opacity="0" />
            </linearGradient>
            <mask id="{{ $maskId }}">
                <rect width="1000" height="1000" fill="url(#{{ $maskId }}-fade)" />
            </mask>
        </defs>

        <g class="qg-splash__wire-triangles" mask="url(#{{ $maskId }})">
            {{-- Canto: poucos triângulos grandes, com folga entre si --}}
            <g class="qg-splash__wire-tri qg-splash__wire-tri--near">
                <polygon points="8,12 145,8 72,158" />
                <polygon points="105,88 285,58 198,245" />
                <polygon points="248,10 435,38 335,210" />
                <polygon points="380,118 565,88 472,268" />
            </g>

            {{-- Meio: espalhados, invadindo --}}
            <g class="qg-splash__wire-tri qg-splash__wire-tri--mid">
                <polygon points="15,210 185,178 98,372" />
                <polygon points="335,160 535,135 435,335" />
                <polygon points="485,30 685,72 585,235" />
                <polygon points="210,310 398,272 305,485" />
                <polygon points="560,235 745,205 655,410" />
                <polygon points="95,480 255,445 175,640" />
                <polygon points="620,355 820,325 720,520" />
            </g>

            {{-- Longe: falhados, invadindo o centro --}}
            <g class="qg-splash__wire-tri qg-splash__wire-tri--far">
                <polygon points="35,455 235,422 138,660" />
                <polygon points="410,385 615,352 512,585" />
                <polygon points="660,110 860,145 765,322" />
                <polygon points="610,460 820,432 715,685" />
                <polygon points="272,560 455,525 365,785" />
                <polygon points="735,360 935,392 835,565" />
                <polygon points="520,545 710,515 615,755" />
                <polygon points="125,695 305,662 215,880" />
                <polygon points="780,580 980,548 885,780" />
            </g>
        </g>
    </svg>
</div>