@extends('frontend.main')
@section('content')
    <section class="w-full hero pt-5 pb-8 mx-auto">
        <div class="header__section">
            <h1>{{ @$content['h1']['value'] ?? 'Humanizador' }}</h1>
            <p>{{ @$content['slogan']['value'] ?? 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nemo temporibus quis eum sint officiis quibusdam.' }}
            </p>
        </div>
        <div class="tool mt-5 rounded-xl relative bg-white max-w-[1600px]">
            <div class="tool__bar p-2">
                <div class=" w-fit p-1 rounded flex gap-2 modes">
                    <button class="p-1 px-8 rounded active" data-mode="1">Básico</button>
                    <button class="p-1 px-8 rounded" data-mode="2">Medio</button>
                    <button class="p-1 px-8 rounded" data-mode="3">Rápido</button>
                    <button class="p-1 px-8 rounded" data-mode="4">Formal</button>
                    <button class="p-1 px-8 rounded" data-mode="5">Creativo</button>
                </div>
            </div>
            <div class="flex relative overflow-hidden tool__inner__wrapper">
                <div class="input__wrapper flex-1 border-r border-r-gray-200 relative">
                    <textarea class="h-[380px] w-full outline-none border-none p-3 resize-none custom-scrollbar" name=""
                        id="input" cols="30" rows="10" placeholder="Sube o pega tu texto generado por IA aquí..."></textarea>
                    <div class="border-t border-t-gray-200 mt-[-6px] flex justify-between items-center px-5 h-[56.8px]">
                        <div>
                            <span class="inputCounter d-none">Palabras: <span>32</span></span>
                            <label for="upload_file" class="cursor-pointer flex items-center uploadButton"
                                id="uploadButton">
                                <input type="file" hidden id="upload_file" accept=".pdf, .doc, .docx, .txt">
                                <img class="w-10 mr-2" style="width: 20px"
                                    src="{{ asset('asset_files/frontend/images/upload-icon.svg') }}" alt="">
                                <span style="color:#737373" class="text-lg">Subir</span>
                            </label>

                            {{-- <div class="flex gap-2 items-center uploadButton">
                                <img width="20px" src="{{ asset('asset_files/frontend/images/upload-icon.svg') }}"
                                    alt="">
                                <span class="text-[#737373]">Subir</span>
                            </div> --}}
                        </div>
                        <button
                            class="inline-flex text-white items-center border-0  focus:outline-none  rounded text-base bg-primary py-2 px-4"
                            id="humanizeBtn">Humanizar Texto</button>
                    </div>
                </div>
                <div class="output__wrapper flex-1 hide__output">
                    <div id="output"
                        class="h-[380px] w-full outline-none border-none p-3 custom-scrollbar overflow-y-auto"
                        contenteditable="">
                    </div>
                    <div
                        class="border-t border-t-gray-200  flex justify-between items-center px-5 h-[56.8px] output__options d-none">
                        <div class=" output_counter">
                            <p style="color: #737373;font-size: 16px !important">Palabras: <span class="outputCount"></span>
                            </p>
                        </div>
                        <div class="flex items-center divide-x-2">
                            <button id="copyButton" class="px-3">
                                <img class="w-5 cursor-pointer"
                                    src="{{ asset('asset_files/frontend/images/copy-icon.svg') }}" alt="">
                            </button>
                            <button id="trashButton" class="px-3">
                                <img class="w-5 cursor-pointer"
                                    src="{{ asset('asset_files/frontend/images/trash-img.svg') }}" alt="">
                            </button>
                            <button id="downloadButton" class="px-3">
                                <img class="w-5 cursor-pointer"
                                    src="{{ asset('asset_files/frontend/images/download-icon.svg') }}" alt="">
                            </button>
                        </div>
                    </div>
                </div>
                <div
                    class="tool__loader absolute flex justify-center items-center left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] gap-2 w-full h-full rounded d-none">
                    <div>
                        <img class="loader__rotate" src="{{ asset('asset_files/frontend/images/loader-inner.svg') }}"
                            alt="">
                        <img style="height: 49px" src="{{ asset('asset_files/frontend/images/loader-outer.svg') }}"
                            alt="">
                    </div>
                    <div>
                        <span class="text-lg">{{ @$content['loader_text']['value'] ?? 'Humanizando IA...' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>


    {{-- <section class="container__custom mt-14 mx-auto max-w-[80vw]">
        <div class="ai_companies">
            <div>
                <img src="{{ asset('asset_files/frontend/images/company/zero-gpt.png?v1.0') }}" alt="">
                <span>ZeroGPT</span>
            </div>
            <div>
                <img src="{{ asset('asset_files/frontend/images/company/gpt-zero.png?v1.0') }}" alt="">
                <span>GPTzero</span>
            </div>
            <div>
                <img src="{{ asset('asset_files/frontend/images/company/grammarly.png?v1.0') }}" alt="">
                <span>Grammarly</span>
            </div>
            <div>
                <img src="{{ asset('asset_files/frontend/images/company/quillbot.png?v1.0') }}" alt="">
                <span>Quillbot</span>
            </div>
            <div>
                <img src="{{ asset('asset_files/frontend/images/company/sapling.png?v1.0') }}" alt="">
                <span>Sapling</span>
            </div>
            <div>
                <img src="{{ asset('asset_files/frontend/images/company/writer-ai.png?v1.0') }}" alt="">
                <span>Writer</span>
            </div>

            <div>
                <img src="{{ asset('asset_files/frontend/images/company/copy-leaks.png?v1.0') }}" alt="">
                <span>Copyleaks</span>
            </div>
            <div>
                <img src="{{ asset('asset_files/frontend/images/company/cross-plug.png?v1.0') }}" alt="">
                <span>Crossplag</span>
            </div>
        </div>
    </section> --}}

    <section class="mt-20 mx-auto max-w-[1600px]">
        <div class="header__section">
            <h2>{{ @$content['use_heading']['value'] ?? '¿Cómo utilizar Humanizar Texto?' }}</h2>
            <p>{{ @$content['use_slogan']['value'] ??
                'Humanizar Texto es un humanizador de texto de IA gratis que te ayuda a eliminar la detección de IA de tu contenido generado por ChatGPT, Gemini, Claude, etc.' }}
            </p>
        </div>
        <div class="w-[90vw] m-auto mt-10 flex gap-8 uses__cards max-w-[1600px]">
            <div class="flex flex-1 flex-col text-center items-center gap-5 bg-light px-5 py-10 rounded-lg">
                <img width="60px" src="{{ asset('asset_files/frontend/images/paste-or-upload.png?v1.0') }}"
                    alt="Escribe, Pega o Carga">
                <div>
                    <h3>{{ @$content['use_heading_1']['value'] ?? '1. Pegar o Subir' }}</h3>
                    <p>{{ @$content['use_detail_1']['value'] ?? 'Pegue o cargue el texto generado por IA en el cuadro de entrada provisto.' }}
                    </p>
                </div>
            </div>
            <div class="flex flex-1 flex-col text-center items-center gap-5 bg-light px-5 py-10 rounded-lg">
                <img width="60px" src="{{ asset('asset_files/frontend/images/analyze-and-humanize.png?v1.0') }}"
                    alt="Seleccionar modo">
                <div>
                    <h3>{{ @$content['use_heading_2']['value'] ?? '1. Pegar o Subir' }}</h3>
                    <p>{{ @$content['use_detail_2']['value'] ?? 'Pegue o cargue el texto generado por IA en el cuadro de entrada provisto.' }}
                    </p>
                </div>
            </div>
            <div class="flex flex-1 flex-col text-center items-center gap-5 bg-light px-5 py-10 rounded-lg">
                <img width="60px" src="{{ asset('asset_files/frontend/images/click-button.png?v1.0') }}"
                    alt="Clic en Humanizar Texto">
                <div>
                    <h3>{{ @$content['use_heading_3']['value'] ?? '1. Pegar o Subir' }}</h3>
                    <p>{{ @$content['use_detail_3']['value'] ?? 'Pegue o cargue el texto generado por IA en el cuadro de entrada provisto.' }}
                    </p>
                </div>
            </div>
            <div class="flex flex-1 flex-col text-center items-center gap-5 bg-light px-5 py-10 rounded-lg">
                <img width="60px" src="{{ asset('asset_files/frontend/images/copy-or-download.png?v1.0') }}"
                    alt="Copiar y Descargar">
                <div>
                    <h3>{{ @$content['use_heading_4']['value'] ?? '1. Pegar o Subir' }}</h3>
                    <p>{{ @$content['use_detail_4']['value'] ?? 'Pegue o cargue el texto generado por IA en el cuadro de entrada provisto.' }}
                    </p>
                </div>
            </div>
        </div>
    </section>


    <section class="w-[90vw] m-auto">
        <div class="header__section mt-20 mb-8">
            <h2>{{ @$content['feature_heading']['value'] ?? 'AI Text Humanizer Features' }}</h2>
            <p>{{ @$content['feature_slogan']['value'] ?? 'Our humanizer also verifies and modifies the text to remove unintentional similarities with existing content to ensure that your content is unique and plagiarism-free.' }}
            </p>
        </div>
        <div class="feature_cards flex flex-wrap gap-8 p-2  md:p-10 rounded-xl">
            <div class="min-w-[100%]  sm:min-w-[320px] bg-white flex-1 p-5 rounded-lg">
                <h3 class="font-[500] mb-2">{{ @$content['feature_heading_1']['value'] ?? 'Remove AI Detection' }}</h3>
                <p>{{ @$content['feature_detail_1']['value'] ?? 'Our text humanizer uses ML to understand AI writing pattern and NLP to naturally write human-like text and eliminate AI detection.' }}
                </p>
            </div>
            <div class="min-w-[100%]  sm:min-w-[320px] bg-white flex-1 p-5 rounded-lg">
                <h3 class="font-[500] mb-2">{{ @$content['feature_heading_2']['value'] ?? 'Remove AI Detection' }}</h3>
                <p>{{ @$content['feature_detail_2']['value'] ?? 'Our text humanizer uses ML to understand AI writing pattern and NLP to naturally write human-like text and eliminate AI detection.' }}
                </p>
            </div>
            <div class="min-w-[100%]  sm:min-w-[320px] bg-white flex-1 p-5 rounded-lg">
                <h3 class="font-[500] mb-2">{{ @$content['feature_heading_3']['value'] ?? 'Remove AI Detection' }}</h3>
                <p>{{ @$content['feature_detail_3']['value'] ?? 'Our text humanizer uses ML to understand AI writing pattern and NLP to naturally write human-like text and eliminate AI detection.' }}
                </p>
            </div>
            <div class="min-w-[100%]  sm:min-w-[320px] bg-white flex-1 p-5 rounded-lg">
                <h3 class="font-[500] mb-2">{{ @$content['feature_heading_4']['value'] ?? 'Remove AI Detection' }}</h3>
                <p>{{ @$content['feature_detail_4']['value'] ?? 'Our text humanizer uses ML to understand AI writing pattern and NLP to naturally write human-like text and eliminate AI detection.' }}
                </p>
            </div>
            <div class="min-w-[100%]  sm:min-w-[320px] bg-white flex-1 p-5 rounded-lg">
                <h3 class="font-[500] mb-2">{{ @$content['feature_heading_5']['value'] ?? 'Remove AI Detection' }}</h3>
                <p>{{ @$content['feature_detail_5']['value'] ?? 'Our text humanizer uses ML to understand AI writing pattern and NLP to naturally write human-like text and eliminate AI detection.' }}
                </p>
            </div>
            <div class="min-w-[100%]  sm:min-w-[320px] bg-white flex-1 p-5 rounded-lg">
                <h3 class="font-[500] mb-2">{{ @$content['feature_heading_6']['value'] ?? 'Remove AI Detection' }}</h3>
                <p>{{ @$content['feature_detail_6']['value'] ?? 'Our text humanizer uses ML to understand AI writing pattern and NLP to naturally write human-like text and eliminate AI detection.' }}
                </p>
            </div>
        </div>
    </section>
    <section class="w-[90vw] m-auto">
        <div class="header__section mt-20 mb-8">
            <h2>{{ @$content['users_heading']['value'] ?? 'Beneficial Users of Humanize Text' }}</h2>
            <p>{{ @$content['users_slogan']['value'] ?? 'Humanize Text is beneficial for anyone who generates content with AI and wants to eliminate AI detection, some of the users are mentioned below:' }}
            </p>
        </div>
        <div>
            <ul class="users__list">
                <li>
                    <img src="{{ asset('asset_files/frontend/images/users/educator-user.png?v1.0') }}"
                        alt="Escritura académica">
                    <div>
                        <h3>{{ @$content['users_heading_1']['value'] ?? 'Students' }}</h3>
                        <p>{{ @$content['users_detail_1']['value'] ?? 'Students can transform their AI-detected assignments, papers, or essays into human-like content using our free online text humanizer to avoid detection by AI detectors and plagiarism checkers.' }}
                        </p>
                    </div>
                </li>
                <li>
                    <img src="{{ asset('asset_files/frontend/images/users/writer-user.png?v1.0') }}"
                        alt="Blog y creación de contenido">
                    <div>
                        <h3>{{ @$content['users_heading_2']['value'] ?? 'Writers and bloggers' }}</h3>
                        <p>{{ @$content['users_detail_2']['value'] ?? 'Students can transform their AI-detected assignments, papers, or essays into human-like content using our free online text humanizer to avoid detection by AI detectors and plagiarism checkers.' }}
                        </p>
                    </div>
                </li>
                <li>
                    <img src="{{ asset('asset_files/frontend/images/users/e-commerce-user.png?v1.0') }}"
                        alt="Comercio electrónico">
                    <div>
                        <h3>{{ @$content['users_heading_3']['value'] ?? 'Writers and bloggers' }}</h3>
                        <p>{{ @$content['users_detail_3']['value'] ?? 'Students can transform their AI-detected assignments, papers, or essays into human-like content using our free online text humanizer to avoid detection by AI detectors and plagiarism checkers.' }}
                        </p>
                    </div>
                </li>
                <li>
                    <img src="{{ asset('asset_files/frontend/images/users/journalist-user.png?v1.0') }}"
                        alt="Periodismo">
                    <div>
                        <h3>{{ @$content['users_heading_4']['value'] ?? 'Writers and bloggers' }}</h3>
                        <p>{{ @$content['users_detail_4']['value'] ?? 'Students can transform their AI-detected assignments, papers, or essays into human-like content using our free online text humanizer to avoid detection by AI detectors and plagiarism checkers.' }}
                        </p>
                    </div>
                </li>
                <li>
                    <img src="{{ asset('asset_files/frontend/images/users/business-user.png?v1.0') }}"
                        alt="Escribir correos electrónicos">
                    <div>
                        <h3>{{ @$content['users_heading_5']['value'] ?? 'Writers and bloggers' }}</h3>
                        <p>{{ @$content['users_detail_5']['value'] ?? 'Students can transform their AI-detected assignments, papers, or essays into human-like content using our free online text humanizer to avoid detection by AI detectors and plagiarism checkers.' }}
                        </p>
                    </div>
                </li>
                <li>
                    <img src="{{ asset('asset_files/frontend/images/users/research-user.png?v1.0') }}"
                        alt="Copia de marketing y publicidad">
                    <div>
                        <h3>{{ @$content['users_heading_6']['value'] ?? 'Writers and bloggers' }}</h3>
                        <p>{{ @$content['users_detail_6']['value'] ?? 'Students can transform their AI-detected assignments, papers, or essays into human-like content using our free online text humanizer to avoid detection by AI detectors and plagiarism checkers.' }}
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </section>

    <section class="w-[90vw] m-auto">
        <div class="header__section mt-20 mb-8">
            <h2>{{ @$content['faq_heading']['value'] ?? 'Preguntas frecuentes' }}</h2>
        </div>
        <div class="faqs">
            <div>
                <div>
                    <h3>{{ @$content['faq_heading_1']['value'] ?? 'Como humanizar texto de ChatGPT grátis?' }}</h3>
                    <img src="{{ asset('asset_files/frontend/images/caret-icon.svg?v1.0') }}" alt="">
                </div>
                <p>{{ @$content['faq_detail_1']['value'] ?? 'Você pode humanizar texto do ChatGPT grátis usando nossa ferramenta. Basta visitar Humanizar-texto.net e transformar seu texto em conteúdo semelhante ao humano.' }}
                </p>
            </div>
            <div>
                <div>
                    <h3>{{ @$content['faq_heading_2']['value'] ?? 'Como humanizar texto de ChatGPT grátis?' }}</h3>
                    <img src="{{ asset('asset_files/frontend/images/caret-icon.svg?v1.0') }}" alt="">
                </div>
                <p>{{ @$content['faq_detail_2']['value'] ?? 'Você pode humanizar texto do ChatGPT grátis usando nossa ferramenta. Basta visitar Humanizar-texto.net e transformar seu texto em conteúdo semelhante ao humano.' }}
                </p>
            </div>
            <div>
                <div>
                    <h3>{{ @$content['faq_heading_3']['value'] ?? 'Como humanizar texto de ChatGPT grátis?' }}</h3>
                    <img src="{{ asset('asset_files/frontend/images/caret-icon.svg?v1.0') }}" alt="">
                </div>
                <p>{{ @$content['faq_detail_3']['value'] ?? 'Você pode humanizar texto do ChatGPT grátis usando nossa ferramenta. Basta visitar Humanizar-texto.net e transformar seu texto em conteúdo semelhante ao humano.' }}
                </p>
            </div>
            <div>
                <div>
                    <h3>{{ @$content['faq_heading_4']['value'] ?? 'Como humanizar texto de ChatGPT grátis?' }}</h3>
                    <img src="{{ asset('asset_files/frontend/images/caret-icon.svg?v1.0') }}" alt="">
                </div>
                <p>{{ @$content['faq_detail_4']['value'] ?? 'Você pode humanizar texto do ChatGPT grátis usando nossa ferramenta. Basta visitar Humanizar-texto.net e transformar seu texto em conteúdo semelhante ao humano.' }}
                </p>
            </div>
        </div>
    </section>
    <script>
        const rephreaseURL = "{{ route('rephrase') }}";
    </script>
@endsection