<?php
/**
 * Render callback for the 404 Page block.
 *
 * @package Author_Website_Templates
 */

// Attributes
$heading = isset($attributes['heading']) ? $attributes['heading'] : 'Where did the story go?';
$description = isset($attributes['description']) ? $attributes['description'] : 'It looks like this page got lost in the Whispering Woods! Even our bravest explorers can\'t find it.';
$badge_text = isset($attributes['badgeText']) ? $attributes['badgeText'] : 'Uh-oh!';
$big_number = isset($attributes['bigNumber']) ? $attributes['bigNumber'] : '404';
$btn_home_label = isset($attributes['btnHomeLabel']) ? $attributes['btnHomeLabel'] : 'Go Back Home';
$btn_books_label = isset($attributes['btnBooksLabel']) ? $attributes['btnBooksLabel'] : 'Read a Book Instead';
$btn_contact_label = isset($attributes['btnContactLabel']) ? $attributes['btnContactLabel'] : 'Report a Problem';

?>
<main class="flex-grow flex items-center relative overflow-hidden bg-blue-sky/10" style="min-height: 80vh;">
    <div class="absolute bottom-0 left-0 w-full z-0">
        <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 100H1440V0C1192.5 49.497 919.5 74.497 720 74.497C520.5 74.497 247.5 49.497 0 0V100Z"
                fill="#FFFDF5" />
        </svg>
    </div>

    <div class="container mx-auto px-6 py-20 relative z-10 text-center">
        <div class="mb-8 relative inline-block">
            <h1
                class="text-[150px] md:text-[200px] leading-none font-black text-yellow-sun drop-shadow-lg rotate-2 select-none">
                <?php echo esc_html($big_number); ?>
            </h1>
            <div
                class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-6 py-2 rounded-full shadow-xl rotate-[-5deg] border-2 border-navy">
                <span class="text-2xl md:text-3xl font-black text-coral-pop uppercase tracking-wider">
                    <?php echo esc_html($badge_text); ?>
                </span>
            </div>
        </div>

        <h2 class="text-4xl md:text-5xl font-black text-navy mb-6">
            <?php echo esc_html($heading); ?>
        </h2>
        <p class="text-xl text-navy/80 max-w-lg mx-auto mb-10">
            <?php echo esc_html($description); ?>
        </p>

        <div class="max-w-md mx-auto mb-12">
            <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="relative">
                <input type="search" name="s"
                    placeholder="<?php esc_attr_e('Try searching for a book...', 'author-website-templates'); ?>"
                    class="w-full pl-6 pr-14 py-4 rounded-full bg-white border-2 border-transparent text-navy placeholder:text-navy/50 focus:outline-none focus:ring-2 focus:ring-blue-sky shadow-lg transition-all text-lg">
                <button type="submit"
                    class="absolute top-2 right-2 p-2 bg-yellow-sun rounded-full text-navy hover:bg-yellow-400 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </form>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="btn-fun btn-yellow">
                <?php echo esc_html($btn_home_label); ?>
            </a>
            <a href="<?php echo esc_url(get_post_type_archive_link('book')); ?>" class="btn-fun btn-white">
                <?php echo esc_html($btn_books_label); ?>
            </a>
            <a href="<?php echo esc_url(home_url('/contact')); ?>"
                class="font-bold text-navy/70 hover:text-blue-sky mt-4 sm:mt-0 sm:ml-4 underline decoration-2 underline-offset-4">
                <?php echo esc_html($btn_contact_label); ?>
            </a>
        </div>
    </div>
</main>