@php
    use Illuminate\Support\Str;

    $sponsorLabel = $chrome['hero.cta_sponsor'];
    // Social share targets (prefer the short link when the fundraiser has one).
    $sUrl = $shortUrl ?: $shareUrl;
    $enc = rawurlencode($sUrl);
    $socials = [
        ['fb', 'fa-brands fa-facebook-f', 'Facebook', 'https://www.facebook.com/sharer/sharer.php?u='.$enc],
        ['wa', 'fa-brands fa-whatsapp', 'WhatsApp', 'https://wa.me/?text='.$enc],
        ['x', 'fa-brands fa-x-twitter', 'X', 'https://twitter.com/intent/tweet?url='.$enc],
        ['li', 'fa-brands fa-linkedin-in', 'LinkedIn', 'https://www.linkedin.com/sharing/share-offsite/?url='.$enc],
        ['tg', 'fa-brands fa-telegram', 'Telegram', 'https://t.me/share/url?url='.$enc],
        ['em', 'fa-light fa-envelope', 'Email', 'mailto:?subject='.rawurlencode($fullName.' — '.$eventName).'&body='.$enc],
    ];
@endphp

<x-public.layout :title="$fullName.'’s '.$eventName" :description="'Support '.$fullName.'’s '.$eventName.' fundraiser for Youth Suicide Prevention Ireland.'">
    <x-slot:head>
        @php
            $ogImageUrl = $ogImage ? (Str::startsWith($ogImage, 'http') ? $ogImage : url(Str::start($ogImage, '/'))) : null;
        @endphp
        <meta property="og:type" content="website">
        <meta property="og:title" content="{{ $fullName }} — {{ $eventName }}">
        <meta property="og:description" content="Support {{ $fullName }}’s {{ $eventName }} fundraiser for Youth Suicide Prevention Ireland.">
        <meta property="og:url" content="{{ $shareUrl }}">
        @if ($ogImageUrl)
            <meta property="og:image" content="{{ $ogImageUrl }}">
            <meta name="twitter:card" content="summary_large_image">
            <meta name="twitter:image" content="{{ $ogImageUrl }}">
        @endif
    </x-slot:head>

    <div class="sfl-campaign">

        {{-- ===================== HERO ===================== --}}
        <section class="hero">
            <div class="hero-bg"></div>
            <div class="hero-scrim"></div>
            <div class="hero-inner mx-auto w-full max-w-[1180px] px-4 sm:px-6 py-12">
                <div class="hero-col">
                    @if ($authorised)
                        <span class="badge-auth" style="margin-bottom:1rem;"><i class="{{ $chrome['hero.badge.icon'] }}"></i> {{ $fullName }} · {{ $uIdent }}</span>
                    @endif
                    <h1 style="margin-bottom:1rem;">{{ $firstName }} {{ $chrome['hero.headline'] }} <span class="accent">{{ $chrome['hero.headline_accent'] }}</span></h1>
                    <p class="hero-lead" style="margin-bottom:1.5rem;">{{ $chrome['hero.lead'] }}</p>

                    <div class="thermo-card" style="margin-bottom:1.5rem;">
                        <div class="flex justify-between items-end" style="margin-bottom:.5rem;">
                            <div>
                                <div class="stat-num raised" style="font-size:2rem;" data-countup>€{{ number_format($raised, 0) }}</div>
                                <div class="goal-muted text-sm">raised of €{{ number_format($goal, 0) }} goal</div>
                            </div>
                            <div class="text-right">
                                <div class="stat-num raised" style="font-size:1.4rem;" data-countup>{{ $pct }}%</div>
                                <div class="goal-muted text-sm"><i class="fa-light fa-users"></i> <span data-countup>{{ $donors }}</span> {{ Str::plural('donor', $donors) }}</div>
                            </div>
                        </div>
                        <div class="thermo"><div class="thermo-fill {{ $overGoal ? 'over' : '' }}" data-fill="{{ $pct }}"></div></div>
                    </div>

                    <div class="hero-cta flex flex-wrap gap-4">
                        <a href="{{ $collectorSponsorUrl ?: '#donate' }}" @unless ($collectorSponsorUrl) data-sponsor @endunless class="btn btn-donate btn-lg" style="padding-inline:1.5rem;"><i class="{{ $chrome['hero.cta_sponsor.icon'] }}"></i>&nbsp; {{ $sponsorLabel }}</a>
                        <a href="#share" class="btn btn-ghost-light btn-lg" style="padding-inline:1.5rem;"><i class="{{ $chrome['hero.cta_share.icon'] }}"></i>&nbsp; {{ $chrome['hero.cta_share'] }}</a>
                    </div>
                </div>
            </div>
        </section>

        <div class="campaign-body mx-auto w-full max-w-[1180px] px-4 sm:px-6">

            {{-- ===================== DONATE ===================== --}}
            <section id="donate" class="panel panel-pad reveal text-center" style="margin:0 0 2rem;">
                <span class="eyebrow"><span class="ico"><i class="{{ $chrome['donate.eyebrow.icon'] }}"></i></span> {{ $chrome['donate.eyebrow'] }}</span>
                <h2 class="section-title text-2xl sm:text-3xl" style="margin:.5rem 0;">{{ $chrome['donate.heading'] }}</h2>
                <p class="lede mx-auto" style="max-width:42rem; margin-bottom:1.5rem;">{{ $chrome['donate.lede'] }}</p>

                @if ($collectorSponsorUrl)
                    <a href="{{ $collectorSponsorUrl }}" class="btn btn-donate btn-lg" style="padding-inline:2.5rem;"><i class="fa-light fa-credit-card"></i>&nbsp; {{ $chrome['donate.submit'] }}</a>
                @else
                    <button type="button" class="btn btn-donate btn-lg" style="padding-inline:2.5rem;" data-sponsor><i class="fa-light fa-credit-card"></i>&nbsp; {{ $chrome['donate.submit'] }}</button>
                @endif

                <div class="flex flex-wrap items-center justify-center gap-3 text-center" style="margin-top:1.25rem; color:var(--ink-soft); font-size:.88rem;">
                    <span>Secured by <a href="https://stripe.com" target="_blank" rel="noopener">Stripe</a></span>
                    <span class="flex gap-2">
                        @foreach ($trustIcons as $icon)<i class="{{ $icon }} pay-ico-dark"></i>@endforeach
                    </span>
                    <span><i class="fa-light fa-lock"></i> {{ $chrome['donate.trust'] }}</span>
                </div>
            </section>

            {{-- ===================== STORY ===================== --}}
            <section id="message" class="panel panel-pad reveal" style="margin-bottom:2rem;">
                <span class="eyebrow" style="margin-bottom:1.25rem;"><span class="ico"><i class="{{ $chrome['story.eyebrow.icon'] }}"></i></span> {{ $chrome['story.eyebrow'] }}</span>
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6 lg:gap-10 items-center" style="margin-top:1rem;">
                    @if ($storyPhoto)
                        <div class="md:col-span-4"><img src="{{ $storyPhoto }}" alt="{{ $firstName }}" class="story-photo" loading="lazy"></div>
                        <div class="md:col-span-8">
                    @else
                        <div class="md:col-span-12">
                    @endif
                        <div class="card-text">
                            @if ($storyHtml !== '')
                                {!! $storyHtml !!}
                            @else
                                <p>Thank you for supporting my {{ $eventName }} — together we’re funding youth mental health awareness and suicide prevention.</p>
                            @endif
                        </div>
                        <p style="margin:1.25rem 0 1.5rem;">{{ $signoff }}<br><strong class="section-title" style="font-size:1.15rem;">{{ $firstName }}</strong></p>
                        <a href="{{ $collectorSponsorUrl ?: '#donate' }}" @unless ($collectorSponsorUrl) data-sponsor @endunless class="btn btn-donate btn-lg" style="padding-inline:1.5rem;"><i class="fa-light fa-credit-card"></i>&nbsp; {{ $sponsorLabel }}</a>
                    </div>
                </div>
            </section>

            {{-- ===================== SHARE (directly under story) ===================== --}}
            <section id="share" class="panel panel-pad reveal" style="margin-bottom:2rem;">
                <span class="eyebrow" style="margin-bottom:1.25rem;"><span class="ico"><i class="{{ $chrome['share.eyebrow.icon'] }}"></i></span> {{ $chrome['share.eyebrow'] }}</span>
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-center" style="margin-top:1rem;">
                    <div class="lg:col-span-5">
                        <p class="lede" style="margin-bottom:1rem;">{{ $chrome['share.lede'] }}</p>
                        <div class="copy-field" style="margin-bottom:.6rem;">
                            <code>{{ $displayUrl }}</code>
                            <button type="button" class="copy-btn" data-copy="{{ $shareUrl }}" title="Copy link" aria-label="Copy link"><i class="fa-light fa-copy"></i></button>
                        </div>
                        @if ($shortUrl)
                            <div class="copy-field">
                                <code>{{ $shortDisplay }}</code>
                                <button type="button" class="copy-btn" data-copy="{{ $shortUrl }}" title="Copy short link" aria-label="Copy short link"><i class="fa-light fa-copy"></i></button>
                            </div>
                        @endif
                    </div>
                    <div class="lg:col-span-4">
                        <div class="share-grid">
                            @foreach ($socials as [$cls, $icon, $label, $href])
                                <a class="share-btn {{ $cls }}" title="{{ $label }}" href="{{ $href }}" target="_blank" rel="noopener"><i class="{{ $icon }}"></i></a>
                            @endforeach
                        </div>
                    </div>
                    @if ($qrSvg !== '')
                        <div class="lg:col-span-3 text-center lg:text-right">
                            <div class="qr-box">{!! $qrSvg !!}</div>
                            <div class="form-text" style="margin-top:.5rem; font-size:.85rem;">{{ $chrome['share.qr_caption'] }}</div>
                        </div>
                    @endif
                </div>
            </section>

            {{-- ===================== PROGRESS + DETAILS ===================== --}}
            <section id="target" class="grid grid-cols-1 lg:grid-cols-12 gap-6" style="margin-bottom:2rem;">
                <div class="lg:col-span-7">
                    <div class="panel panel-pad reveal" style="height:100%;">
                        <div class="flex justify-between items-start" style="margin-bottom:1rem;">
                            <span class="eyebrow"><span class="ico"><i class="{{ $chrome['progress.eyebrow.icon'] }}"></i></span> {{ $chrome['progress.eyebrow'] }}</span>
                            @if ($overGoal)
                                <span class="badge-goal"><i class="fa-light fa-trophy"></i> Goal smashed</span>
                            @else
                                <span class="badge-prog">{{ $pct }}% there</span>
                            @endif
                        </div>
                        <div class="grid grid-cols-3 gap-3 text-center" style="margin-bottom:1.25rem;">
                            <div class="stat-tile"><div class="v" data-countup>€{{ number_format($raised, 0) }}</div><div class="k">Raised</div></div>
                            <div class="stat-tile"><div class="v" data-countup>€{{ number_format($toGo, 0) }}</div><div class="k">To go</div></div>
                            <div class="stat-tile"><div class="v" data-countup>€{{ number_format($goal, 0) }}</div><div class="k">Goal</div></div>
                        </div>
                        <div class="lite-thermo" style="margin-bottom:.5rem;"><div class="lite-thermo-fill {{ $overGoal ? 'over' : '' }}" data-fill="{{ $pct }}"></div></div>
                        <div class="flex justify-between form-text" style="font-size:.82rem; margin-bottom:1.25rem;"><span>€0</span><span>€{{ number_format($goal, 0) }}</span></div>
                        <div class="bar-compare">
                            <div class="bar-row"><div class="bar-label">Goal</div><div class="bar-track"><div class="bar-fill goal" data-fill="100"><span>€{{ number_format($goal, 0) }}</span></div></div></div>
                            <div class="bar-row"><div class="bar-label">Raised</div><div class="bar-track"><div class="bar-fill raised {{ $overGoal ? 'over' : '' }}" data-fill="{{ $pct }}"><span>€{{ number_format($raised, 0) }}</span></div></div></div>
                        </div>
                    </div>
                </div>
                <div class="lg:col-span-5">
                    <div class="panel panel-pad reveal" style="height:100%;">
                        <span class="eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="{{ $chrome['details.eyebrow.icon'] }}"></i></span> {{ $chrome['details.eyebrow'] }}</span>
                        <ul class="info-list" style="margin-top:1rem;">
                            <li><span class="lbl">My goal</span><span class="val">€{{ number_format($goal, 2) }}</span></li>
                            <li><span class="lbl">Donations received</span><span class="val">€{{ number_format($raised, 2) }}</span></li>
                            <li><span class="lbl">Still to raise</span><span class="val" style="color:var(--coral);">€{{ number_format($toGo, 2) }}</span></li>
                            <li><span class="lbl">Donors</span><span class="val">{{ $donors }} {{ Str::plural('person', $donors) }}</span></li>
                            <li><span class="lbl">Event</span><span class="val">{{ $eventName }}</span></li>
                            @if ($authorised)
                                <li><span class="lbl">Status</span><span class="val" style="color:var(--success);"><i class="fa-light fa-shield-check"></i> Authorised</span></li>
                            @endif
                            <li><span class="lbl">Authorisation</span><span class="val">{{ $authCode }}</span></li>
                        </ul>
                    </div>
                </div>
            </section>

            {{-- ===================== SPONSOR MESSAGES ===================== --}}
            <section id="donations" class="panel panel-pad reveal" style="margin-bottom:2rem;">
                <span class="eyebrow" style="margin-bottom:1.25rem;"><span class="ico"><i class="{{ $chrome['messages.eyebrow.icon'] }}"></i></span> {{ $chrome['messages.eyebrow'] }}</span>
                @if ($wall->isNotEmpty())
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4" style="margin-top:1rem;" data-stagger>
                        @foreach ($wall as $msg)
                            <div class="msg">
                                <div class="av"><i class="fa-light fa-comment"></i></div>
                                <div style="min-width:0;">
                                    <div class="flex justify-between items-center gap-2">
                                        <span class="nm">{{ $msg->donorName }}</span>
                                        @if ($msg->occurredAt)<span class="dt">{{ $msg->occurredAt->format('j M Y') }}</span>@endif
                                    </div>
                                    <p class="tx">{{ $msg->message }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="msg-empty" style="margin-top:1rem;"><i class="fa-light fa-comment-dots fa-2x" style="color:var(--sky); margin-bottom:.5rem;"></i><p>{{ $chrome['messages.empty'] }}</p></div>
                @endif
            </section>

        </div>

        {{-- ===================== DONATE BAND ===================== --}}
        <div class="mx-auto w-full max-w-[1180px] px-4 sm:px-6">
            <section class="donate-band panel-pad reveal" style="margin-bottom:2rem;">
                <div class="inner grid grid-cols-1 lg:grid-cols-12 gap-6 items-center text-center lg:text-left">
                    <div class="lg:col-span-8">
                        <h2 class="text-white text-2xl sm:text-3xl" style="margin-bottom:.5rem;">{{ $chrome['band.heading'] }}</h2>
                        <p style="color:#cfe3f3; margin-bottom:1rem;">{{ $chrome['band.lede'] }}</p>
                        <div class="flex flex-wrap items-center justify-center lg:justify-start gap-3">
                            @foreach ($trustIcons as $icon)<i class="{{ $icon }} pay-ico"></i>@endforeach
                            <span style="color:#aecbe6; font-size:.85rem;">Secured by Stripe</span>
                        </div>
                    </div>
                    <div class="lg:col-span-4 text-center lg:text-right">
                        <a href="{{ $collectorSponsorUrl ?: '#donate' }}" @unless ($collectorSponsorUrl) data-sponsor @endunless class="btn btn-donate btn-lg" style="padding-inline:1.75rem;"><i class="fa-light fa-credit-card"></i>&nbsp; {{ $chrome['band.cta'] }}</a>
                    </div>
                </div>
            </section>
        </div>

        {{-- ===================== SPONSOR MODAL (D3 pre-checkout form) =====================
             D88: not rendered at all once the central Collector is switched on — the Sponsor
             buttons link straight to it, so this site's own checkout is unreachable. --}}
        @unless ($collectorSponsorUrl)
        <dialog id="sponsorModal" class="sponsor-modal" aria-labelledby="sponsorTitle">
            <div class="sm-head">
                <span class="eyebrow"><span class="ico"><i class="{{ $chrome['modal.eyebrow.icon'] }}"></i></span> {{ $chrome['modal.eyebrow'] }}</span>
                <button type="button" class="sm-close" data-sponsor-close aria-label="Close"><i class="fa-light fa-xmark"></i></button>
            </div>
            <form class="sm-form" method="POST" action="{{ route('donate.store', $user->username) }}"
                  data-sponsor-form @if ($errors->any()) data-has-errors @endif novalidate
                  data-impact-enabled="{{ $impactEnabled ? '1' : '0' }}" data-impact-bands='@json($impactBands)'>
                @csrf
                <div class="sm-body">
                    <h3 id="sponsorTitle" class="section-title sm-title">{{ $chrome['modal.title'] }}</h3>
                    <p class="sm-explainer">{{ $chrome['modal.explainer'] }}</p>

                    @if (session('error'))
                        <div class="form-status err" style="margin-bottom:.8rem;">{{ session('error') }}</div>
                    @endif

                    {{-- AMOUNT FIRST: preset chips → input → live impact hint --}}
                    <div>
                        <label class="form-label req" for="d_amount">Your donation <span class="form-text">· whole euros, min €{{ $minDonation }}</span></label>
                        @if ($amountChips !== [])
                            <div class="sm-presets" data-sponsor-presets role="group" aria-label="Quick amounts">
                                @foreach ($amountChips as $chipAmount)
                                    <button type="button" data-amt="{{ $chipAmount }}">€{{ $chipAmount }}</button>
                                @endforeach
                            </div>
                        @endif
                        <div class="input-group has-suffix"><span class="input-group-text"><i class="fa-light fa-euro-sign"></i></span>
                            <input class="form-control" id="d_amount" type="number" name="amount" value="{{ old('amount') }}" min="{{ $minDonation }}" step="1" inputmode="numeric" placeholder="0" autocomplete="off" required>
                            <span class="input-group-text suffix" aria-hidden="true">.00</span></div>
                        <div class="form-status @error('amount') err @enderror" data-status="amount">@error('amount'){{ $message }}@enderror</div>
                        @if ($impactEnabled && $impactBands !== [])
                            <div class="sm-impact" data-sponsor-impact hidden><i class="fa-light fa-heart"></i> <span data-impact-text></span></div>
                        @endif
                    </div>

                    {{-- WHO --}}
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4" style="margin-top:.9rem;">
                        <div>
                            <label class="form-label req" for="d_first">First name</label>
                            <div class="input-group"><span class="input-group-text"><i class="fa-light fa-user"></i></span>
                                <input class="form-control" id="d_first" type="text" name="first_name" value="{{ old('first_name') }}" autocomplete="given-name" required></div>
                            <div class="form-status @error('first_name') err @enderror" data-status="first_name">@error('first_name'){{ $message }}@enderror</div>
                        </div>
                        <div>
                            <label class="form-label req" for="d_last">Last name</label>
                            <div class="input-group"><span class="input-group-text"><i class="fa-light fa-user"></i></span>
                                <input class="form-control" id="d_last" type="text" name="last_name" value="{{ old('last_name') }}" autocomplete="family-name" required></div>
                            <div class="form-status @error('last_name') err @enderror" data-status="last_name">@error('last_name'){{ $message }}@enderror</div>
                        </div>
                    </div>

                    <div style="margin-top:.4rem;">
                        <label class="form-label req" for="d_email">Email address <span class="form-text">· for your receipt</span></label>
                        <div class="input-group"><span class="input-group-text"><i class="fa-light fa-envelope"></i></span>
                            <input class="form-control" id="d_email" type="email" name="email" value="{{ old('email') }}" autocomplete="email" inputmode="email" required></div>
                        <div class="form-status @error('email') err @enderror" data-status="email">@error('email'){{ $message }}@enderror</div>
                    </div>

                    <div style="margin-top:.4rem;">
                        <label class="form-label" for="d_message">Message <span class="form-text">· optional, shown on the page</span></label>
                        <textarea class="form-control" id="d_message" name="message" rows="3" maxlength="500" placeholder="Leave {{ $firstName }} a message of support">{{ old('message') }}</textarea>
                    </div>

                    <label class="sm-check" style="margin-top:.7rem;">
                        <input type="checkbox" name="anonymous" value="1" {{ old('anonymous') ? 'checked' : '' }}> Make my donation anonymous
                    </label>

                    <div style="margin-top:.7rem; max-width:18rem;">
                        <label class="form-label req" for="d_math">Quick check: what is {{ $math['a'] }} + {{ $math['b'] }}?</label>
                        <div class="input-group"><span class="input-group-text"><i class="fa-light fa-calculator"></i></span>
                            <input class="form-control" id="d_math" type="text" name="math_answer" inputmode="numeric" autocomplete="off" required></div>
                        <div class="form-status @error('math_answer') err @enderror" data-status="math_answer">@error('math_answer'){{ $message }}@enderror</div>
                    </div>

                    {{-- Honeypot: hidden from humans, left empty by real browsers. --}}
                    <div style="position:absolute; left:-9999px; top:-9999px;" aria-hidden="true">
                        <label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
                    </div>
                </div>

                {{-- Sticky footer: CTA (with the live amount) + trust signals always visible --}}
                <div class="sm-foot">
                    <button type="submit" class="btn btn-donate btn-lg" style="width:100%; padding-block:.9rem;"><i class="fa-light fa-credit-card"></i>&nbsp; <span data-cta-base>{{ $chrome['donate.submit'] }}</span><span data-cta-amt></span></button>
                    <div class="sm-trust">
                        @foreach ($trustIcons as $icon)<i class="{{ $icon }}"></i>@endforeach
                        <span><i class="fa-light fa-lock"></i> {{ $chrome['modal.trust'] }}</span>
                    </div>
                </div>
            </form>
        </dialog>
        @endunless

        {{-- ===================== STICKY MOBILE TABS ===================== --}}
        <nav class="mobile-tabs" aria-label="Campaign sections">
            <a href="{{ $collectorSponsorUrl ?: '#donate' }}" @unless ($collectorSponsorUrl) data-sponsor @endunless class="is-donate"><i class="fa-light fa-credit-card"></i>Sponsor</a>
            <a href="#share"><i class="fa-light fa-share-nodes"></i>Share</a>
            <a href="#message"><i class="fa-light fa-user"></i>Story</a>
            <a href="#target"><i class="fa-light fa-chart-column"></i>Stats</a>
            <a href="#donations"><i class="fa-light fa-comments"></i>Messages</a>
        </nav>

    </div>
</x-public.layout>