@extends('front.front_layouts')

@section('content')
    <!-- Breadcrumb Hero -->
    <section class="hero-section">
        <!-- Background Elements -->
        <div class="hero-bg-grid grid-background">
            <div class="hero-orb-primary"></div>
            <div class="hero-orb-secondary"></div>
        </div>

        <div class="hero-content">
            <h1 class="hero-heading animate-on-scroll">
                {{ $frontSetting->pricing_text ?? __('front.pricing') }}
            </h1>

            <div class="hero-divider animate-on-scroll">
                <span class="hero-divider-thin"></span>
                <span class="hero-divider-thick"></span>
                <span class="hero-divider-thin"></span>
            </div>

            <nav class="breadcrumb-pill animate-on-scroll" aria-label="Breadcrumb">
                <svg class="w-4 h-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
                <a href="{{ route('front.index') }}"
                    class="link-muted">{{ $frontSetting->home_text ?? 'Home' }}</a>
                <svg class="breadcrumb-separator" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
                <span class="text-foreground font-semibold">{{ $frontSetting->pricing_text ?? __('front.pricing') }}</span>
            </nav>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="content-section">
        <div class="max-w-7xl mx-auto">
            <!-- Section Header -->
            <div class="section-header animate-on-scroll">
                <div class="section-accent">
                    <span class="section-accent-dot"></span>
                    <span class="section-accent-line-right"></span>
                    <span class="section-accent-text">{{ $frontSetting->pricing_text ?? __('front.pricing') }}</span>
                    <span class="section-accent-line-left"></span>
                    <span class="section-accent-dot"></span>
                </div>
                <h2 class="section-title text-anime">
                    {{ isset($frontSetting->price_title) ? $frontSetting->price_title : __('front.choosePlan') }}
                </h2>
                <p class="section-subtitle">
                    {{ isset($frontSetting->price_description) ? $frontSetting->price_description : __('front.pricingSubtitle') }}
                </p>
            </div>

            <!-- Billing Toggle -->
            <div class="flex items-center justify-center gap-4 mb-14 animate-on-scroll">
                <span class="pricing-toggle-label active"
                    data-period="monthly">{{ isset($frontSetting->pricing_monthly_text) ? $frontSetting->pricing_monthly_text : __('front.monthly') }}</span>
                <button class="pricing-toggle" id="billingToggle" aria-label="Toggle billing period">
                    <span class="pricing-toggle-thumb"></span>
                </button>
                <span class="pricing-toggle-label" data-period="yearly">
                    {{ isset($frontSetting->pricing_yearly_text) ? $frontSetting->pricing_yearly_text : __('front.yearly') }}
                </span>
            </div>

            <!-- Pricing Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto">
                @if (isset($subscriptionPlans) && count($subscriptionPlans) > 0)
                    @foreach ($subscriptionPlans as $subscriptionPlan)
                        <div class="pricing-card {{ $subscriptionPlan->is_popular ? 'pricing-card--popular' : '' }} animate-on-scroll"
                            style="--delay: {{ $loop->index * 0.1 }}s">
                            @if ($subscriptionPlan->is_popular)
                                <div class="pricing-popular-badge">
                                    {{ $frontSetting->most_popular_text ?? __('front.mostPopular') }}
                                </div>
                            @endif
                            <div class="pricing-card-inner">
                                <div class="pricing-card-header">
                                    <div
                                        class="pricing-card-icon {{ $subscriptionPlan->is_popular ? 'pricing-card-icon--popular' : '' }}">
                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                            stroke-width="1.5">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0-2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
                                        </svg>
                                    </div>
                                    <h3 class="text-lg font-bold text-foreground">{{ $subscriptionPlan->name }}</h3>
                                    <p class="text-sm text-muted-foreground mt-1">{{ $subscriptionPlan->description }}</p>
                                </div>

                                <div class="pricing-card-price">
                                    @if ($subscriptionPlan->default == 'yes')
                                        <div class="pricing-amount">
                                            <span
                                                class="pricing-value">{{ $frontSetting->pricing_free_text ?? 'Free' }}</span>
                                        </div>
                                        <span
                                            class="pricing-period">{{ $frontSetting->pricing_no_card_text ?? 'No credit card required' }}</span>
                                    @else
                                        <div class="monthly_div">
                                            <div class="pricing-amount">
                                                <span
                                                    class="pricing-value">{{ \App\SuperAdmin\Classes\SuperAdminCommon::formatAmountCurrency($subscriptionPlan->monthly_price) }}</span>
                                            </div>
                                            <span
                                                class="pricing-period">/{{ $frontSetting->pricing_month_text ?? 'month' }}</span>
                                        </div>
                                        <div class="yearly_div" style="display: none;">
                                            <div class="pricing-amount">
                                                <span
                                                    class="pricing-value">{{ \App\SuperAdmin\Classes\SuperAdminCommon::formatAmountCurrency($subscriptionPlan->annual_price) }}</span>
                                            </div>
                                            <span
                                                class="pricing-period">/{{ $frontSetting->pricing_year_text ?? 'year' }}</span>
                                        </div>
                                        <p class="text-sm text-muted-foreground mt-1">
                                            <span
                                                class="monthly_div">{{ $frontSetting->pricing_billed_monthly_text ?? 'Billed Monthly' }}</span>
                                            <span class="yearly_div"
                                                style="display: none;">{{ $frontSetting->pricing_billed_yearly_text ?? 'Billed Yearly' }}</span>
                                        </p>
                                    @endif
                                </div>

                                <ul class="pricing-features">
                                    @foreach ($subscriptionPlan->features as $feature)
                                        <li>
                                            <svg class="w-4 h-4 text-emerald-400 flex-shrink-0" fill="none"
                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                            </svg>
                                            <span>{{ $feature }}</span>
                                        </li>
                                    @endforeach
                                </ul>

                                <div class="pricing-card-footer">
                                    <a href="{{ route('front.register') }}"
                                        class="{{ $subscriptionPlan->is_popular ? 'btn-primary' : 'btn-secondary' }} w-full inline-flex items-center justify-center gap-2 px-5 py-3 text-[15px] font-semibold rounded-xl">
                                        {{ isset($frontSetting->pricing_get_started_button_text)
                                            ? $frontSetting->pricing_get_started_button_text
                                            : __('front.getStarted') }}
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                            stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            {{-- Payment Cards Section --}}
            @if (isset($pricingCards) && count($pricingCards) > 0)
                <div class="mt-16 text-center animate-on-scroll">
                    <p class="mb-6 text-sm text-muted-foreground">
                        {{ isset($frontSetting->price_card_title) ? $frontSetting->price_card_title : 'Accepted Payment Methods' }}
                    </p>
                    <div class="flex flex-wrap justify-center items-center gap-4">
                        @foreach ($pricingCards as $pricingCard)
                            <img src="{{ $pricingCard->logo_url }}" alt="{{ $pricingCard->name }}"
                                class="h-8 opacity-70 hover:opacity-100 transition-opacity" />
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="content-section">
        <div class="max-w-3xl mx-auto">
            <!-- Section Header -->
            <div class="section-header animate-on-scroll">
                <div class="section-accent">
                    <span class="section-accent-dot"></span>
                    <span class="section-accent-line-right"></span>
                    <span class="section-accent-text">{{ isset($frontSetting->faq_sub_title) ? $frontSetting->faq_sub_title : __('front.faq') }}</span>
                    <span class="section-accent-line-left"></span>
                    <span class="section-accent-dot"></span>
                </div>
                <h2 class="section-title text-anime">
                    {{ isset($frontSetting->faq_title) ? $frontSetting->faq_title : __('front.faqTitle') }}
                </h2>
                <p class="section-subtitle">
                    {{ __('front.faqSubtitle') }}
                </p>
            </div>

            <!-- FAQ Accordion -->
            <div class="faq-accordion space-y-4">
                @if (isset($allFaqs) && count($allFaqs) > 0)
                    @foreach ($allFaqs as $allFaq)
                        <div class="faq-item animate-on-scroll" style="--delay: {{ $loop->index * 0.05 }}s">
                            <button class="faq-trigger" aria-expanded="false">
                                <span class="faq-question">{{ $allFaq->question }}</span>
                                <svg class="faq-chevron w-5 h-5 text-muted-foreground flex-shrink-0" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                </svg>
                            </button>
                            <div class="faq-content">
                                <p>{!! $allFaq->answer !!}</p>
                            </div>
                        </div>
                    @endforeach
                @else
                    {{-- Static Fallback FAQs --}}
                    <div class="faq-item animate-on-scroll" style="--delay: 0s">
                        <button class="faq-trigger" aria-expanded="false">
                            <span class="faq-question">Can I switch plans at any time?</span>
                            <svg class="faq-chevron w-5 h-5 text-muted-foreground flex-shrink-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div class="faq-content">
                            <p>Yes, you can upgrade or downgrade your plan at any time. When upgrading, you'll be charged
                                the prorated difference. When downgrading, the remaining balance will be credited to your
                                account.</p>
                        </div>
                    </div>

                    <div class="faq-item animate-on-scroll" style="--delay: 0.05s">
                        <button class="faq-trigger" aria-expanded="false">
                            <span class="faq-question">What happens when my AI generations run out?</span>
                            <svg class="faq-chevron w-5 h-5 text-muted-foreground flex-shrink-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div class="faq-content">
                            <p>On the Starter plan, you'll need to wait until the next billing cycle or upgrade to
                                Professional for unlimited generations. Your existing content and websites remain fully
                                accessible.</p>
                        </div>
                    </div>

                    <div class="faq-item animate-on-scroll" style="--delay: 0.1s">
                        <button class="faq-trigger" aria-expanded="false">
                            <span class="faq-question">Do you offer a free trial for paid plans?</span>
                            <svg class="faq-chevron w-5 h-5 text-muted-foreground flex-shrink-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div class="faq-content">
                            <p>Yes! All paid plans come with a 14-day free trial. No credit card required. You'll get full
                                access to all features during the trial period.</p>
                        </div>
                    </div>

                    <div class="faq-item animate-on-scroll" style="--delay: 0.15s">
                        <button class="faq-trigger" aria-expanded="false">
                            <span class="faq-question">Can I use my own custom domain?</span>
                            <svg class="faq-chevron w-5 h-5 text-muted-foreground flex-shrink-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div class="faq-content">
                            <p>Custom domains are available on the Professional and Enterprise plans. Simply connect your
                                domain in the settings, and we'll automatically provision a free SSL certificate for you.
                            </p>
                        </div>
                    </div>

                    <div class="faq-item animate-on-scroll" style="--delay: 0.2s">
                        <button class="faq-trigger" aria-expanded="false">
                            <span class="faq-question">What payment methods do you accept?</span>
                            <svg class="faq-chevron w-5 h-5 text-muted-foreground flex-shrink-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div class="faq-content">
                            <p>We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Stripe.
                                Enterprise customers can also pay via invoice with NET 30 terms.</p>
                        </div>
                    </div>

                    <div class="faq-item animate-on-scroll" style="--delay: 0.25s">
                        <button class="faq-trigger" aria-expanded="false">
                            <span class="faq-question">Is there a refund policy?</span>
                            <svg class="faq-chevron w-5 h-5 text-muted-foreground flex-shrink-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div class="faq-content">
                            <p>We offer a 30-day money-back guarantee on all paid plans. If you're not satisfied, simply
                                contact our support team within 30 days of purchase for a full refund.</p>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Still have questions? --}}
            @if (isset($frontSetting->faq_still_have_question_text) || isset($frontSetting->faq_contact_us_text))
                <p class="mt-12 text-center text-muted-foreground">
                    <span>{{ $frontSetting->faq_still_have_question_text ?? 'Still have questions?' }}</span>
                    <a class="font-semibold text-primary-500 hover:text-primary-600 ml-1"
                        href="{{ route('front.contact') }}">{{ $frontSetting->faq_contact_us_text ?? 'Contact us' }}</a>
                </p>
            @endif
        </div>
    </section>

    @include('front.sections.call_to_action')
@endsection

@section('scripts')
    <script>
        "use strict";

        // Billing toggle functionality for dynamic pricing
        const billingToggle = document.getElementById('billingToggle');
        if (billingToggle) {
            billingToggle.addEventListener('click', function() {
                const isYearly = this.classList.toggle('active');

                // Toggle monthly/yearly labels
                document.querySelectorAll('.pricing-toggle-label').forEach(label => {
                    if (label.dataset.period === 'yearly') {
                        label.classList.toggle('active', isYearly);
                    } else {
                        label.classList.toggle('active', !isYearly);
                    }
                });

                // Toggle monthly/yearly visibility
                document.querySelectorAll('.monthly_div').forEach(el => {
                    el.style.display = isYearly ? 'none' : '';
                });
                document.querySelectorAll('.yearly_div').forEach(el => {
                    el.style.display = isYearly ? '' : 'none';
                });
            });
        }
    </script>
@endsection