<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="max-w-2xl mx-auto p-4">

    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/stepper', ['doneSteps' => [1]]) ?>

    <div class="flex items-center justify-center gap-3 mb-2">
        <img src="<?php echo esc_url(\RistrettoApps\Spawnster\Base\Constants::logo()); ?>" alt="Spawnster Logo" class="w-12 h-12">
        <span class="block text-sm font-medium tracking-widest text-center uppercase dark:text-violet-600 pt-5">SPAWNSTER</span>
    </div>
    <h2 class="text-3xl font-bold text-center dark:text-gray-900 pt-5">Let's create your website!</h2>
    <div class="zw-base-normal text-sm text-app-body-text-2 mt-3 text-gray-500 text-center pb-10">Please share some basic details of the website to get started.</div>
    <form method="POST" action="<?php echo esc_url ( admin_url('admin-post.php') ); ?>">
        <input type="hidden" name="action" value="setup_website_form_submit">
        <?php wp_nonce_field('spawnster-nonce'); ?>
        <div class="mb-6">
            <label for="title" class="block text-lg font-medium text-gray-800 mb-1">What is your website name?</label>
            <input value="<?php echo esc_attr($data['website_name']); ?>" type="text" id="website_name" name="website_name" class="required w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500 text-base" required>
        </div>

        <div class="mb-6">
            <label for="content" class="block text-lg font-medium text-gray-800 mb-1">Tell us about your website!</label>
            <div class="zw-base-normal text-sm text-app-body-text-2 text-gray-500 mb-2">
                Please be as descriptive as you can. Share details such services, products, goal, etc.
            </div>
            <textarea id="website_description" name="website_description" class="w-full text-base px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" rows="8" required><?php echo esc_textarea(stripcslashes($data['website_description'] ?? '')); ?></textarea>
            <div class="flex justify-between w-full">
                <div class="flex gap-2">
                    <a href="#" id="ai_generate_description" class="outline-none inline-flex items-center font-medium text-indigo-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 pe-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                        </svg>
                        Write using AI
                    </a>
                </div>
                <div class="flex gap-2 items-center cursor-default hidden ai-small-loader">
                    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/small_loader', []) ?>
                </div>
            </div>
        </div>

        <div class="pb-[26px]"><div class="relative"><div class="absolute inset-0 flex items-center" aria-hidden="true"><div class="w-full border-t border-light-border-primary"></div></div></div></div>

        <div class="flex justify-start">
            <button type="submit" class="px-6 py-2 bg-green-500 text-white font-semibold rounded-md hover:bg-green-600 focus:outline-none">Next</button>
        </div>
    </form>
</div>
