@model OnlyOneAccessTemplate.Models.ContentBlock

<section class="cta-section py-5 bg-gradient-primary text-white"
         style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <div data-aos="fade-up">
                    @if (!string.IsNullOrEmpty(Model?.Properties.GetValueOrDefault("urgency_badge")?.ToString()))
                    {
                        <span class="badge bg-warning text-dark mb-3 px-3 py-2 rounded-pill fw-bold">
                            @Model.Properties["urgency_badge"]
                        </span>
                    }

                    <h2 class="display-5 fw-bold mb-4">
                        @Html.Raw(Model?.Title ?? ViewBag.DefaultCtaTitle)
                    </h2>

                    <p class="lead mb-4 opacity-90">
                        @Html.Raw(Model?.Content ?? ViewBag.DefaultCtaSubtitle)
                    </p>

                    @if (Model?.Properties.ContainsKey("countdown") == true && Model.Properties["countdown"] is string countdownDate)
                    {
                        <div class="countdown-timer mb-4" data-countdown="@countdownDate">
                            <div class="d-flex justify-content-center gap-3">
                                <div class="countdown-item">
                                    <div class="countdown-number bg-white text-primary rounded p-2 fw-bold fs-4" data-days>00</div>
                                    <small class="d-block mt-1">@ViewBag.DaysText</small>
                                </div>
                                <div class="countdown-item">
                                    <div class="countdown-number bg-white text-primary rounded p-2 fw-bold fs-4" data-hours>00</div>
                                    <small class="d-block mt-1">@ViewBag.HoursText</small>
                                </div>
                                <div class="countdown-item">
                                    <div class="countdown-number bg-white text-primary rounded p-2 fw-bold fs-4" data-minutes>00</div>
                                    <small class="d-block mt-1">@ViewBag.MinutesText</small>
                                </div>
                                <div class="countdown-item">
                                    <div class="countdown-number bg-white text-primary rounded p-2 fw-bold fs-4" data-seconds>00</div>
                                    <small class="d-block mt-1">@ViewBag.SecondsText</small>
                                </div>
                            </div>
                        </div>
                    }

                    <div class="cta-buttons">
                        <a href="#conversion-form" class="btn btn-light btn-lg me-3 scroll-to-form">
                            <i class="fas fa-rocket me-2"></i>
                            @(Model?.ButtonText ?? ViewBag.DefaultCtaButtonText)
                        </a>

                        @if (!string.IsNullOrEmpty(Model?.Properties.GetValueOrDefault("secondary_button_text")?.ToString()))
                        {
                            <a href="@Model.Properties.GetValueOrDefault("secondary_button_url")"
                               class="btn btn-outline-light btn-lg">
                                @Model.Properties["secondary_button_text"]
                            </a>
                        }
                    </div>

                    @if (Model?.Properties.ContainsKey("guarantee") == true)
                    {
                        <div class="guarantee-badge mt-4 pt-4 border-top border-light border-opacity-25">
                            <i class="fas fa-shield-alt fa-2x mb-2"></i>
                            <p class="mb-0">
                                <strong>@Model.Properties["guarantee"]</strong>
                            </p>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</section>