@aware(['page'])

<div class="px-4 py-4 md:py-8" x-data="{
        showModal: false,
        modalContent: '',
    }">
    <div class="max-w-5xl mx-auto flex flex-col items-center">
        <h1 class="text-3xl font-bold text-center mb-2"> {{$heading}} </h1>
        <h2 class="text-xl text-gray-600 text-center mb-8"> {{$subheading}} </h2>

        <div class="flex flex-col w-full space-y-8">
            <!-- Row 1 -->
            @php
                define("WORD_LIMIT", 100);
            @endphp
            @foreach ($content as $item)
            <div class="p-8 bg-white/70 border rounded-lg space-y-4">
                <h1 class="text-2xl font-semibold">{{$item['heading']}}</h1>
                <h3 class="text-lg font-light text-gray-600">{{$item['subheading']}}</h3>
                <div class="grid grid-cols-1 gap-8 lg:grid-cols-2 items-center">
                    <div class="space-y-4">
                        <div>
                            @php
                                $words = explode(' ', $item['content']);
                                $wordCount = count($words);
                                $excerpt = $wordCount > WORD_LIMIT 
                                    ? implode(' ', array_slice($words, 0, WORD_LIMIT)) . '...'
                                    : $item['content'];
                            @endphp

                            <p>{{ $excerpt }}</p>

                            @if ($wordCount > WORD_LIMIT)
                                <button x-on:click="showModal = true; modalContent = @js($item['content'])" class="bg-primary hover:bg-tertiary text-white font-bold py-2 px-4 rounded mt-4">See More</button>
                            @endif
                        </div>
                    </div>
                    <div class="order-first lg:order-last">
                        <div class="aspect-[4/3] w-full">
                            @if ($item['image'])
                                <img src="{{asset('storage/'.$item['image'])}}" alt="{{$item['heading']}}" class=" rounded-lg object-contain shadow-md">
                            @else
                               <img src="{{ asset('img/blue-alt-logo.webp') }}" alt="Descriptive Alt Text" class=" rounded-md object-contain ">
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <!-- Add more rows as needed -->
        </div>
    </div>

    <div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-900 bg-opacity-50 flex items-center justify-center p-4 md:p-8">
        <div x-on:click.away="showModal = false" class="bg-white w-4/5 h-4/5 overflow-y-auto rounded-lg shadow-lg  flex flex-col relative">
            <p class="flex-1 p-8" x-html="modalContent"></p>
            <div class="bg-white border-y sticky bottom-0 p-8 py-4">
                <button @click="showModal = false" class="bg-primary hover:bg-tertiary text-white font-bold py-2 px-4 rounded">Close</button>
            </div>
        </div>
    </div>
</div>