<div {{ $attributes->class('space-y-32 pt-20 mx-auto w-full max-w-screen-lg px-5') }}>
    <div class="text-center">
        <div class="font-medium text-dolphin">
            Why would I use it?
        </div>
        <div class="pt-2 text-2xl sm:text-3xl">
            <span class="inline-block">What is </span>
            <span class="inline-block font-black">MagicExtract</span>
            <span class="inline-block">?</span>
        </div>
    </div>

    <div x-ref="feature_1"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -left-10 top-40 hidden lg:block">
            <img x-ref="geometric_shape_1"
                 src="https://filamentphp.com/build/assets/geometric-shape-1-abf4e8ef.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(0%, -82.5351%) translate3d(0px, 0px, 0px) rotate(82.5351deg);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/action-modals-d076c147.webp"
                     alt="Action modals" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/handpoint-6f296a2f.webp"
                     alt="Hand pointing" class="w-12">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-sm pt-5 text-2xl font-bold">
                Data extraction from PDFs, images and documents
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                MagicExtract makes extracting structured data from PDFs, images and documents incredibly easy.
            </div>
        </div>
    </div>
    <div x-ref="feature_2"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -right-16 top-40 hidden lg:block">
            <img x-ref="geometric_shape_2"
                 src="https://filamentphp.com/build/assets/geometric-shape-2-f701d3d8.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(-9.902%, -19.804%) translate3d(0px, 0px, 0px) rotate(35.6471deg);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/table-report-01a18999.webp"
                     alt="Table report" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/report-ff5ee8e2.webp" alt="Report"
                     class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-sm pt-5 text-2xl font-bold">
                A JSON schema is all you need
            </div>


            <div class="max-w-sm pt-3 font-medium text-dolphin">
                Your JSON schema will be used to infer the data structure as well as to automatically build useful review forms for editing your data.
            </div>
        </div>
    </div>
    <div x-ref="feature_3"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -left-5 top-40 hidden lg:block">
            <img x-ref="geometric_shape_3"
                 src="https://filamentphp.com/build/assets/geometric-shape-3-51c5af35.webp" alt="Shape"
                 class="block w-16"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/tenancy-d26f0ae0.webp"
                     alt="Tenant switcher" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/cloud-33cbe35b.webp" alt="Cloud"
                     class="w-20">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-sm pt-5 text-2xl font-bold">
                Built-in document preparation for optimized LLM input
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                Texts, images, tables and other artifacts will be read and extracted from your files in the background, so they can be universally consumed by all LLMs.
            </div>
        </div>
    </div>


    <div x-ref="feature_4"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -right-10 top-40 hidden lg:block">
            <img x-ref="geometric_shape_4"
                 src="https://filamentphp.com/build/assets/geometric-shape-4-f47ecdf0.webp" alt="Shape"
                 class="block w-12"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/infolist-23d932e6.webp" alt="Infolist"
                     class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/featherpaper-549c635a.webp"
                     alt="Quill on paper" class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-sm pt-5 text-2xl font-bold">
                Automatic web form UIs for the data from your JSON Schema
            </div>


            <div class="max-w-sm pt-3 font-medium text-dolphin">
                Before being sent to your application, your data can be reviewed and fixed in easy-to-use, beautiful UIs generated from the same JSON schema you needed for extraction anyway.
            </div>
        </div>
    </div>


    <div x-ref="feature_5"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute bottom-0 left-0 hidden lg:block">
            <img x-ref="geometric_shape_5"
                 src="https://filamentphp.com/build/assets/geometric-shape-5-7bcaeaa9.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/panels-2e83a5af.webp"
                     alt="Multiple panels" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/infinity-3ae41d3c.webp" alt="Infinity"
                     class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-sm pt-5 text-2xl font-bold">
                Optimized for quick integration into your existing application
            </div>


            <div class="max-w-sm pt-3 font-medium text-dolphin">
                With a focus on user and developer experience, integrate MagicExtract into your application quickly by redirecting to it or by embedding it in your website/application using our iFrame SDK.
            </div>
        </div>
    </div>


    <div x-ref="feature_6"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -bottom-20 -right-10 hidden lg:block">
            <img x-ref="geometric_shape_6"
                 src="https://filamentphp.com/build/assets/geometric-shape-6-221ff95a.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/theme-409be2ea.webp" alt="Theme"
                     class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/colorpalette-266f08e7.webp"
                     alt="Color palette" class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-sm pt-5 text-2xl font-bold">
                LLM-agnostic and highly customizable extraction strategies
            </div>


            <div class="max-w-sm pt-3 font-medium text-dolphin">
                MagicExtract is built on top of <a class="inline-block font-semibold text-primary-600 hover:text-primary-400" href="#">MagicLLM</a>, a PHP SDK offering a universal API interface for multiple LLMs and providers.
                It comes out of the box with optimized extraction strategies (simple, sequential and parallel), but custom strategies can be quickly implemented using strongly-typed PHP.
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/colorpalette-266f08e7.webp"
                     alt="Color palette" class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-sm pt-5 text-2xl font-bold">
                BYOLLM – Bring your own LLMs
            </div>


            <div class="max-w-sm pt-3 font-medium text-dolphin">
                To use MagicExtract, you need to bring your own API keys for the LLM providers you want to use. Configure as many or as few as you want, depending on your compliance needs.
            </div>
        </div>
    </div>
</div>
