file_path = r'c:\MyCode\MyLaravel\tatabatubelitung\resources\views\home.blade.php'

with open(file_path, 'r', encoding='utf-8') as f:
    content = f.read()

# Replace tab content wrapper and transitions in About Us section
old_about_tabs_start = '''            <!-- OUR HISTORY -->
            <div x-show="tab === 'history'" x-transition class="flex flex-col md:flex-row items-center justify-between gap-10 lg:gap-16">'''

new_about_tabs_start = '''            <!-- TAB CONTENT CONTAINER WITH SMOOTH STABLE HEIGHT -->
            <div class="relative min-h-[440px] md:min-h-[480px]">

                <!-- OUR HISTORY -->
                <div x-show="tab === 'history'"
                     x-cloak
                     x-transition:enter="transition ease-out duration-500 delay-150 transform"
                     x-transition:enter-start="opacity-0 translate-y-4 scale-[0.99]"
                     x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-200 transform absolute inset-x-0 top-0 pointer-events-none"
                     x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                     x-transition:leave-end="opacity-0 -translate-y-3 scale-[0.99]"
                     class="flex flex-col md:flex-row items-center justify-between gap-10 lg:gap-16">'''

old_team = '''            <!-- OUR TEAM -->
            <div x-show="tab === 'team'" x-cloak x-transition class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-center">'''

new_team = '''                <!-- OUR TEAM -->
                <div x-show="tab === 'team'"
                     x-cloak
                     x-transition:enter="transition ease-out duration-500 delay-150 transform"
                     x-transition:enter-start="opacity-0 translate-y-4 scale-[0.99]"
                     x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-200 transform absolute inset-x-0 top-0 pointer-events-none"
                     x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                     x-transition:leave-end="opacity-0 -translate-y-3 scale-[0.99]"
                     class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-center">'''

old_values = '''            <!-- OUR VALUES -->
            <div x-show="tab === 'values'" x-cloak x-transition class="space-y-10">'''

new_values = '''                <!-- OUR VALUES -->
                <div x-show="tab === 'values'"
                     x-cloak
                     x-transition:enter="transition ease-out duration-500 delay-150 transform"
                     x-transition:enter-start="opacity-0 translate-y-4 scale-[0.99]"
                     x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-200 transform absolute inset-x-0 top-0 pointer-events-none"
                     x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                     x-transition:leave-end="opacity-0 -translate-y-3 scale-[0.99]"
                     class="space-y-10">'''

old_vision = '''            <!-- OUR VISION -->
            <div x-show="tab === 'vision'" x-cloak x-transition class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-center">'''

new_vision = '''                <!-- OUR VISION -->
                <div x-show="tab === 'vision'"
                     x-cloak
                     x-transition:enter="transition ease-out duration-500 delay-150 transform"
                     x-transition:enter-start="opacity-0 translate-y-4 scale-[0.99]"
                     x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-200 transform absolute inset-x-0 top-0 pointer-events-none"
                     x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                     x-transition:leave-end="opacity-0 -translate-y-3 scale-[0.99]"
                     class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-center">'''

if old_about_tabs_start in content:
    content = content.replace(old_about_tabs_start, new_about_tabs_start)
    print("Replaced History tab start")

if old_team in content:
    content = content.replace(old_team, new_team)
    print("Replaced Team tab")

if old_values in content:
    content = content.replace(old_values, new_values)
    print("Replaced Values tab")

if old_vision in content:
    content = content.replace(old_vision, new_vision)
    print("Replaced Vision tab")

# Close the new relative container wrapper at end of About section (before section close)
old_about_end = '''            </div>

        </div>
        </div>
    </section>'''

new_about_end = '''            </div>

        </div>
        </div>
        </div>
    </section>'''

# Let's check end of vision div
old_vision_end = '''                </div>
            </div>

        </div>
        </div>
    </section>'''

new_vision_end = '''                </div>
            </div>

            </div>
        </div>
    </section>'''

if old_vision_end in content:
    content = content.replace(old_vision_end, new_vision_end)
    print("Replaced vision end wrapper closing tag")

with open(file_path, 'w', encoding='utf-8') as f:
    f.write(content)