<?php
get_header();
?>
<!-- Hero Section -->
<section class="relative overflow-hidden py-16 lg:pt-18 lg:pb-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="flex flex-col gap-8">
                <div class="space-y-4">
                    <span
                        class="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider"><?php echo safly_token_value('home', 'home_hero_badge', 'TEXT'); ?></span>
                    <h1
                        class="text-4xl md:text-5xl lg:text-7xl font-black leading-tight tracking-tight text-slate-900 dark:text-white">
                        <?php echo safly_token_value('home', 'home_hero_title_line1', 'TEXT'); ?><br /><span
                            class="text-primary"><?php echo safly_token_value('home', 'home_hero_title_highlight', 'TEXT'); ?></span>
                    </h1>
                    <p class="text-lg lg:text-xl text-slate-600 dark:text-slate-400 max-w-lg leading-relaxed">
                        <?php echo safly_token_value('home', 'home_hero_description', 'TEXT'); ?></p>
                </div>
                <div class="flex flex-wrap gap-4">
                    <a href="<?php echo home_url('/abonament-dla-jdg/') ?>"
                        class="inline-block bg-primary text-white px-8 py-4 rounded-xl text-base font-bold hover:scale-105 transition-transform shadow-xl shadow-primary/25"><?php echo safly_token_value('home', 'home_hero_primary_label', 'TEXT'); ?></a>
                </div>
                <div class="flex items-center gap-4 text-sm text-slate-500">
                    <div class="flex -space-x-2">
                        <div class="w-8 h-8 rounded-full border-2 border-white bg-slate-200"></div>
                        <div class="w-8 h-8 rounded-full border-2 border-white bg-slate-300"></div>
                        <div class="w-8 h-8 rounded-full border-2 border-white bg-slate-400"></div>
                    </div>
                    <span>Doświadczenie zdobyte przy pracy z ponad 500 klientami</span>
                </div>
            </div>
            <div class="relative">
                <div class="aspect-square rounded-3xl overflow-hidden shadow-2xl relative group bg-white">
                    <img alt="<?php echo safly_token_value('home', 'home_hero_image_alt', 'TEXT'); ?>"
                        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                        src="<?php echo safly_token_value('home', 'home_hero_image', 'IMG'); ?>" />
                    <div class="absolute inset-0 bg-gradient-to-t from-primary/5 to-transparent"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Background Glow -->
    <div
        class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl -z-10">
    </div>
</section>
<!-- Value Proposition Section -->
<section class="py-24 bg-white dark:bg-slate-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <!-- Left Column: Emotional Message -->
            <div class="space-y-8">
                <div class="space-y-6">
                    <h2 class="text-4xl lg:text-5xl font-black text-slate-900 dark:text-white leading-tight">
                        <?php echo safly_token_value('home', 'home_problem_title_line1', 'TEXT'); ?><br />
                        <span
                            class="text-primary"><?php echo safly_token_value('home', 'home_problem_title_highlight', 'TEXT'); ?></span>
                    </h2>
                    <p class="text-xl text-slate-600 dark:text-slate-400 leading-relaxed font-medium">
                        <?php echo safly_token_value('home', 'home_problem_intro', 'TEXT'); ?></p>
                </div>
                <div
                    class="p-8 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50">
                    <h4 class="text-lg font-bold mb-4 text-slate-900 dark:text-white">
                        <?php echo safly_token_value('home', 'home_problem_box_title', 'TEXT'); ?></h4>
                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed">
                        <?php echo safly_token_value('home', 'home_problem_box_text', 'TEXT'); ?></p>
                </div>
            </div>
            <!-- Right Column: Reasons/Logical Benefits -->
            <div class="relative">
                <div
                    class="bg-white dark:bg-slate-800 p-8 lg:p-12 rounded-3xl shadow-2xl shadow-primary/15 border border-slate-100 dark:border-slate-700 relative z-10">
                    <div class="space-y-8">
                        <div>
                            <span class="text-sm font-bold uppercase tracking-widest text-primary mb-6 block">Powody
                                mogą być różne:</span>
                            <ul class="space-y-6">
                                <?php echo safly_token_value('home', 'home_problem_reasons_html', 'HTML'); ?></ul>
                        </div>
                        <div class="pt-8 border-t border-slate-100 dark:border-slate-700">
                            <a href="<?php echo home_url('/abonament-dla-jdg/') ?>"
                                class="inline-block w-full bg-primary text-white px-4 py-4 rounded-xl font-bold hover:shadow-lg hover:shadow-primary/30 transition-all flex items-center justify-center gap-2"><?php echo safly_token_value('home', 'home_problem_cta_label', 'TEXT'); ?></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- How It Works Section -->
<section class="py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-3 gap-8"><?php echo safly_token_value('home', 'home_steps_html', 'HTML'); ?></div>
    </div>
</section>
<!-- Specific Audiences Section (JDG) -->
<section class="py-20 bg-slate-900 text-white overflow-hidden relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div class="space-y-8 relative z-10">
                <div class="space-y-4">
                    <h2 class="text-4xl font-black">
                        <?php echo safly_token_value('home', 'home_business_title_line1', 'TEXT'); ?><br /><span
                            class="text-primary"><?php echo safly_token_value('home', 'home_business_title_highlight', 'TEXT'); ?></span>
                    </h2>
                    <p class="text-slate-400 text-lg">
                        <?php echo safly_token_value('home', 'home_business_description', 'TEXT'); ?></p>
                </div>
                <ul class="space-y-4"><?php echo safly_token_value('home', 'home_business_list_html', 'HTML'); ?></ul>
                <a href="<?php echo home_url('/abonament-dla-jdg/'); ?>" class="inline-block bg-primary text-white px-8 py-3 rounded-lg font-bold hover:bg-primary/90 transition-all"><?php echo safly_token_value('home', 'home_business_cta_label', 'TEXT'); ?></a>
            </div>
            <div class="relative">
                <div class="aspect-video bg-slate-800 rounded-2xl overflow-hidden border border-slate-700">
                    <img alt="<?php echo safly_token_value('home', 'home_business_image_alt', 'TEXT'); ?>"
                        class="w-full h-full object-cover opacity-60"
                        src="<?php echo safly_token_value('home', 'home_business_image', 'IMG'); ?>" />
                </div>
            </div>
        </div>
    </div>
    <div
        class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-primary/5 to-transparent pointer-events-none">
    </div>
</section>
<!-- Comparison Section -->
<section class="py-24 bg-background-light">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl font-black mb-4"><?php echo safly_token_value('home', 'home_compare_title', 'TEXT'); ?>
            </h2>
            <p class="text-slate-600"><?php echo safly_token_value('home', 'home_compare_intro', 'TEXT'); ?></p>
        </div>
        <div class="max-w-4xl mx-auto overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl">
            <div class="w-full overflow-x-auto">
                <table class="w-full min-w-[600px] text-left"><?php echo safly_token_value('home', 'home_compare_table_html', 'HTML'); ?>
                </table>
            </div>
        </div>
    </div>
</section>
<!-- Three Pillars Section -->
<section class="py-20 bg-primary text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-black"><?php echo safly_token_value('home', 'home_pillars_title', 'TEXT'); ?></h2>
        </div>
        <div class="grid md:grid-cols-3 gap-12">
            <?php echo safly_token_value('home', 'home_pillars_cards_html', 'HTML'); ?></div>
    </div>
</section>
<!-- Final CTA Section -->
<section class="py-24">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-slate-900 rounded-3xl p-12 text-center relative overflow-hidden">
            <div class="relative z-10 space-y-8">
                <h2 class="text-4xl font-black text-white">
                    <?php echo safly_token_value('home', 'home_final_title', 'TEXT'); ?></h2>
                <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                    <?php echo safly_token_value('home', 'home_final_description', 'TEXT'); ?></p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href ="<?php echo home_url('/abonament-dla-jdg/') ?>"
                        class="inline-block bg-primary text-white px-10 py-4 rounded-xl font-bold text-lg hover:scale-105 transition-all"><?php echo safly_token_value('home', 'home_final_primary_label', 'TEXT'); ?></a>
                </div>
            </div>
            <!-- Abstract Design Background -->
            <div
                class="absolute top-0 left-0 w-64 h-64 bg-primary/20 rounded-full blur-[100px] -translate-x-1/2 -translate-y-1/2">
            </div>
            <div
                class="absolute bottom-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-[100px] translate-x-1/2 translate-y-1/2">
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>
