@extends('website.layout.main')

@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="{{ __('messages.support') }}" bgImage="assets/images/backgrounds/page-header-bg.png"
        homeLink="{{ url('/') }}" />
    <!--Page Header End-->

    @php
        $ctaBgUrl = $donate->cta_background_image
            ? asset('storage/' . $donate->cta_background_image)
            : 'https://placehold.co/1920x520';
    @endphp

    {{-- Introduction (from dashboard) --}}
    @if($donate->introduction)
    <section class="who-we-are">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10 col-lg-10">
                    <div class="who-we-are__left text-center">
                        <div class="who-we-are__text">
                            @php
                                // Split introduction into paragraphs on blank lines
                                $introParagraphs = preg_split("/\r\n\r\n|\n\n|\r\r/", trim($donate->introduction));
                            @endphp
                            @foreach($introParagraphs as $paragraph)
                                @php $paragraph = trim($paragraph); @endphp
                                @if($paragraph !== '')
                                    <p>{!! nl2br(e($paragraph)) !!}</p>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- Ways to get involved – carousel (donation-carousel style, no progress/raised/goal) --}}
    @if($donate->ways->isNotEmpty())
    <section class="donation-carousel-page">
        <div class="container">
            <div class="donation-carousel-style owl-carousel owl-theme carousel-dot-style">
                @foreach($donate->ways as $way)
                    @php
                        $wayImg = $way->image
                            ? asset('storage/' . $way->image)
                            : 'https://placehold.co/410x258';
                    @endphp
                    <div class="item">
                        <div class="donate-three__single">
                            <div class="donate-three__img-box">
                                <div class="donate-three__img">
                                    <img src="{{ $wayImg }}" alt="{{ $way->title }}">
                                    <img src="{{ $wayImg }}" alt="{{ $way->title }}">
                                </div>
                            </div>
                            <div class="donate-three__content">
                                <h3 class="donate-three__title">{{ $way->title }}</h3>
                                @if($way->description)
                                    <p class="donate-three__text">{!! nl2br(e($way->description)) !!}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- Call to action (reuse index CTA, data from dashboard) --}}
    <section class="cta-one">
        <div class="cta-one__bg" style="background-image: url('{{ $ctaBgUrl }}');"></div>
        <div class="container">
            <div class="cta-one__inner">
                <div class="cta-one__title-box sec-title-animation animation-style1">
                    <h2 class="cta-one__title title-animation">
                        @if($donate->cta_title)
                            {!! nl2br(e($donate->cta_title)) !!}
                        @else
                            {{ __('messages.joinusnow') }}
                        @endif
                    </h2>
                </div>
                <div class="cta-one__btn-box">
                    <a href="{{ route('get-involved') }}" class="cta-one__btn-1 thm-btn">{{ __('messages.contactus') }}<span><i class="icon-arrow-right"></i></span></a>
                    <a href="{{ route('get-involved') }}" class="cta-one__btn-2 thm-btn">{{ __('messages.getinvolved') }}<span><i class="icon-arrow-right"></i></span></a>
                </div>
            </div>
        </div>
    </section>
@endsection