@php
    $d = $templateData ?? [];
    $primary = $d['primary_color'] ?? '#65971e';
    $heroBg = $d['hero_bg'] ?? '#0b6019';
    $contentBg = $d['content_bg'] ?? '#0a4b02';
    $heroText = $d['hero_text_color'] ?? '#fafafa';
    $heroVideo = \App\Services\LandingPageTemplateService::youtubeEmbedUrl($d['hero_video'] ?? '');
    $reviewVideos = collect($d['review_videos'] ?? [])
        ->map(fn ($u) => \App\Services\LandingPageTemplateService::youtubeEmbedUrl($u))
        ->filter()
        ->values();
    $galleryImages = collect($d['gallery_images'] ?? [])
        ->map(fn ($u) => \App\Services\LandingPageTemplateService::mediaUrl($u))
        ->filter()
        ->values();
    $promoImage = \App\Services\LandingPageTemplateService::mediaUrl($d['promo_image'] ?? '')
        ?: ($linkedProduct['image'] ?? null);

    $formatBoldLine = function (string $line): string {
        if (preg_match('/^(.+?):\s*(.+)$/u', $line, $m)) {
            return '<strong>' . e($m[1]) . ':</strong> ' . e($m[2]);
        }

        return e($line);
    };
@endphp

<div class="lp1" style="--lp1-primary: {{ $primary }}; --lp1-primary-d: {{ $primary }}; --lp1-hero-bg: {{ $heroBg }}; --lp1-content-bg: {{ $contentBg }}; --lp1-hero-text: {{ $heroText }};">

    {{-- Row 1: green hero + main video --}}
    <section class="lp1-hero-band">
        <div class="lp1-container">
            <div class="lp1-heading lp1-heading-lg lp-anim lp-anim-fade-up">
                <h2>{{ $d['hero_title'] ?? '' }}</h2>
            </div>
            @if($heroVideo)
            <div class="lp1-video-wrap lp-anim lp-anim-zoom-in">
                <iframe src="{{ $heroVideo }}?rel=0&modestbranding=1" title="Product video" loading="lazy"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen></iframe>
            </div>
            @endif
        </div>
    </section>

    {{-- Row 2: green content — subtitle, CTA, compare, promo --}}
    <section class="lp1-content-band">
        <div class="lp1-container">
            @if(!empty($d['hero_subtitle']))
            <div class="lp1-heading lp1-heading-md lp-anim lp-anim-fade-up">
                <h2 class="heading-animation-border-wave">{{ $d['hero_subtitle'] }}</h2>
            </div>
            @endif

            <div class="lp1-order-wrap lp-anim lp-anim-bounce-in">
                <button type="button" class="btn btn-primary btn-lg lp1-order-btn lp-scroll-order">{{ $d['hero_cta'] ?? 'অর্ডার করুন' }}</button>
            </div>

            @if(!empty($d['compare_rows']))
            <div class="lp1-compare-wrap lp-anim lp-anim-fade-up">
                <table class="lp1-compare lp1-compare-band">
                    <thead>
                        <tr>
                            <th>বৈশিষ্ট্য</th>
                            <th>{{ $d['compare_left'] ?? 'সাধারণ' }}</th>
                            <th>{{ $d['compare_right'] ?? 'আমাদের পণ্য' }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($d['compare_rows'] as $row)
                        <tr>
                            <td>{{ $row['feature'] ?? '' }}</td>
                            <td>{{ $row['left'] ?? '' }}</td>
                            <td class="lp1-good"><strong>{{ $row['right'] ?? '' }}</strong></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            @if($promoImage)
            <div class="lp1-promo-image lp-anim lp-anim-zoom-in">
                <img src="{{ $promoImage }}" alt="{{ $linkedProduct['name'] ?? 'Product' }}" class="img-fluid">
            </div>
            @endif
        </div>
    </section>

    {{-- Row 3: benefits --}}
    @if(!empty($d['benefits']))
    <section class="lp1-row">
        <div class="lp1-container">
            <div class="lp1-summernote lp-anim lp-anim-fade-up">
                <p class="lp1-sn-title">{{ $d['benefits_title'] ?? '' }}</p>
                <ul class="lp1-sn-list">
                    @foreach($d['benefits'] as $benefit)
                    <li>✅ {!! $formatBoldLine($benefit) !!}</li>
                    @endforeach
                </ul>
            </div>
            <div class="lp1-order-wrap">
                <button type="button" class="btn btn-primary btn-lg lp1-order-btn lp-scroll-order">{{ $d['cta_button'] ?? 'Order Now' }}</button>
            </div>
        </div>
    </section>
    @endif

    {{-- Row 4: how it works --}}
    @if(!empty($d['how_items']))
    <section class="lp1-row">
        <div class="lp1-container">
            <div class="lp1-summernote lp-anim lp-anim-fade-up">
                <p class="lp1-sn-title">{{ $d['how_title'] ?? '' }}</p>
                <ul class="lp1-sn-list lp1-sn-list-plain">
                    @foreach($d['how_items'] as $item)
                    <li>{!! $formatBoldLine($item) !!}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>
    @endif

    {{-- Row 5: review videos --}}
    @if($reviewVideos->isNotEmpty())
    <section class="lp1-row">
        <div class="lp1-container">
            <div class="lp1-heading lp1-heading-sm lp-anim lp-anim-fade-up">
                <h2>{{ $d['reviews_title'] ?? 'কাস্টমার রিভিউ' }}</h2>
            </div>
            <div class="lp1-video-stack">
                @foreach($reviewVideos as $i => $embed)
                <div class="lp1-video-wrap lp-anim lp-anim-fade-up lp-anim-delay-{{ min($i + 1, 3) }}">
                    <iframe src="{{ $embed }}?rel=0&modestbranding=1" title="Customer review {{ $i + 1 }}" loading="lazy"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen></iframe>
                </div>
                @endforeach
            </div>
            <div class="lp1-order-wrap">
                <button type="button" class="btn btn-primary btn-lg lp1-order-btn lp-scroll-order">{{ $d['cta_button'] ?? 'Order Now' }}</button>
            </div>
        </div>
    </section>
    @elseif(!empty($d['reviews']))
    <section class="lp1-row">
        <div class="lp1-container">
            <div class="lp1-heading lp1-heading-sm lp-anim lp-anim-fade-up">
                <h2>{{ $d['reviews_title'] ?? '' }}</h2>
            </div>
            <div id="lp1ReviewCarousel" class="carousel slide lp1-reviews lp-anim lp-anim-zoom-in" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @foreach($d['reviews'] as $i => $review)
                    <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                        <div class="lp1-review-card mx-auto" style="max-width:640px">
                            <div class="lp1-stars">
                                @for($s = 1; $s <= 5; $s++)
                                <i class="fas fa-star{{ $s > ($review['rating'] ?? 5) ? '-o' : '' }}"></i>
                                @endfor
                            </div>
                            <p class="lp1-review-text">"{{ $review['text'] ?? '' }}"</p>
                            <strong>— {{ $review['name'] ?? '' }}</strong>
                        </div>
                    </div>
                    @endforeach
                </div>
                @if(count($d['reviews']) > 1)
                <button class="carousel-control-prev" type="button" data-bs-target="#lp1ReviewCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#lp1ReviewCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
                @endif
            </div>
            <div class="lp1-order-wrap">
                <button type="button" class="btn btn-primary btn-lg lp1-order-btn lp-scroll-order">{{ $d['cta_button'] ?? 'Order Now' }}</button>
            </div>
        </div>
    </section>
    @endif

    {{-- Row 6: photo slider --}}
    @if($galleryImages->isNotEmpty())
    <section class="lp1-row">
        <div class="lp1-container">
            <div id="lp1GalleryCarousel" class="carousel slide lp1-gallery lp-anim lp-anim-zoom-in" data-bs-ride="carousel" data-bs-interval="4500">
                <div class="carousel-inner">
                    @foreach($galleryImages as $i => $img)
                    <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                        <img src="{{ $img }}" class="d-block w-100" alt="Gallery {{ $i + 1 }}">
                    </div>
                    @endforeach
                </div>
                @if($galleryImages->count() > 1)
                <button class="carousel-control-prev" type="button" data-bs-target="#lp1GalleryCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#lp1GalleryCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                    <span class="visually-hidden">Next</span>
                </button>
                @endif
            </div>
            <div class="lp1-order-wrap">
                <button type="button" class="btn btn-primary btn-lg lp1-order-btn lp-scroll-order">{{ $d['cta_button'] ?? 'Order Now' }}</button>
            </div>
        </div>
    </section>
    @endif

    {{-- Row 7: FAQ accordion --}}
    @if(!empty($d['faqs']))
    <section class="lp1-row">
        <div class="lp1-container">
            <div class="lp1-faq-accordion accordion" id="lp1FaqAccordion">
                @foreach($d['faqs'] as $i => $faq)
                <div class="accordion-item mb-2">
                    <h2 class="accordion-header" id="lp1FaqHead{{ $i }}">
                        <button class="accordion-button collapsed fw-bold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#lp1FaqBody{{ $i }}"
                                aria-expanded="false" aria-controls="lp1FaqBody{{ $i }}">
                            {{ $faq['q'] ?? '' }}
                        </button>
                    </h2>
                    <div id="lp1FaqBody{{ $i }}" class="accordion-collapse collapse" aria-labelledby="lp1FaqHead{{ $i }}" data-bs-parent="#lp1FaqAccordion">
                        <div class="accordion-body">{{ $faq['a'] ?? '' }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- Row 8: final CTA heading --}}
    <section class="lp1-row lp1-final-cta lp-anim lp-anim-fade-up">
        <div class="lp1-container">
            <div class="lp1-heading lp1-heading-lg">
                <h2>{{ $d['cta_title'] ?? 'আর দেরi কেন? আজই অর্ডার করুন!' }}</h2>
            </div>
        </div>
    </section>

    @include('frontEnd.landing.partials.checkout-form', [
        'linkedProduct' => $linkedProduct ?? null,
        'lpProduct' => $lpProduct ?? null,
        'showQty' => true,
        'districts' => $districts ?? collect(),
        'shippingMode' => $shippingMode ?? 'district_wise',
        'districtChargeMap' => $districtChargeMap ?? [],
        'defaultShippingFee' => $defaultShippingFee ?? 80,
        'insideDhakaFee' => $insideDhakaFee ?? 60,
        'outsideDhakaFee' => $outsideDhakaFee ?? 120,
    ])

    <button type="button" class="lp1-scroll-top" id="lpScrollTop" aria-label="Scroll to top">
        <i class="fas fa-arrow-up"></i>
    </button>
</div>