<?php
namespace Components\Ui;

use Components\Base;
use Components\Common\Request;
use Components\Button;

class PromoPage extends Base
{
    /**
     * Localized default strings for the component.
     */
    private static $translations = [
        'en' => [
            'title' => 'Unlock Pro Features',
            'subtitle' => 'Use multi-step workflows, advanced segmentation, coupons and recurring campaigns to drive more revenue and reduce manual work.',
            'btnUpgrade' => 'Upgrade to Pro now',
            'btnConsulting' => 'Book free consulting',
            'urlUpgrade' => 'https://apps.mailbeez.com/plans',
            'urlConsulting' => 'https://www.mailbeez.com/support/book-15-min',
            'proFeatureLabel' => 'Pro Feature',
            'upgradeRequiredLabel' => 'Upgrade required',
            'footer' => 'Best used directly at the locked feature.',
            'trustpilotRating' => '4.9/5 on Trustpilot',
            'cancelAnytime' => 'More Revenue &nbsp;&middot;&nbsp;  Cancel anytime',
        ],
        'de' => [
            'title' => 'Automationen mit Pro freischalten',
            'subtitle' => 'Nutzen Sie mehrstufige Workflows, erweiterte Segmentierung, Gutscheine und wiederkehrende Kampagnen, um mehr Umsatz zu erzielen und manuelle Arbeit zu reduzieren.',
            'btnUpgrade' => 'Jetzt auf Pro upgraden',
            'btnConsulting' => 'Kostenlose Beratung buchen',
            'urlUpgrade' => 'https://apps.mailbeez.de/plans',
            'urlConsulting' => 'https://www.mailbeez.de/support/15-Minuten-kostenlose-Beratung',
            'proFeatureLabel' => 'Pro Feature',
            'upgradeRequiredLabel' => 'Upgrade erforderlich',
            'footer' => 'Keine Verpflichtung · sofort einsatzbereit · jederzeit kündbar',
            'trustpilotRating' => '4.9/5 auf Trustpilot',
            'cancelAnytime' => 'für mehr Umsatz  &nbsp;&middot;&nbsp;  jederzeit kündbar',
        ],
    ];

    /**
     * Render a promotion page with localized content.
     *
     * @param array $options An array of localized options, e.g.
     * [
     *   'en' => [
     *     'title' => '...',
     *     'subtitle' => '...',
     *     'benefits' => ['...', '...'],
     *     'footer' => '...'
     *   ],
     *   'de' => [...]
     * ]
     * @return string
     */
    public static function render(array $options = []): string
    {
        $lang = Request::session('language', 'english');
        $langCode = (strpos(strtolower($lang), 'german') !== false || $lang === 'de') ? 'de' : 'en';

        $content = $options[$langCode] ?? $options['en'] ?? reset($options);

        $title = $content['title'] ?? self::$translations[$langCode]['title'];
        $subtitle = $content['subtitle'] ?? self::$translations[$langCode]['subtitle'];
        $benefits = $content['benefits'] ?? [];
        $footer = $content['footer'] ?? $content['footer_override'] ?? self::$translations[$langCode]['footer'];

        $btnUpgrade = $content['btnUpgrade'] ?? self::$translations[$langCode]['btnUpgrade'];
        $btnConsulting = $content['btnConsulting'] ?? $content['btnFeatures'] ?? self::$translations[$langCode]['btnConsulting'];
        $urlUpgrade = $content['urlUpgrade'] ?? self::$translations[$langCode]['urlUpgrade'];
        $urlConsulting = $content['urlConsulting'] ?? self::$translations[$langCode]['urlConsulting'];
        $proFeatureLabel = $content['proFeatureLabel'] ?? self::$translations[$langCode]['proFeatureLabel'];
        $upgradeRequiredLabel = $content['upgradeRequiredLabel'] ?? self::$translations[$langCode]['upgradeRequiredLabel'];
        $trustpilotRating = self::$translations[$langCode]['trustpilotRating'];
        $cancelAnytime = self::$translations[$langCode]['cancelAnytime'];

        ob_start();
        ?>
        <div class="relative min-h-full pb-16 flex flex-col ">
            <!-- Skeleton Background -->
            <div class="pointer-events-none select-none flex-1 overflow-hidden opacity-50">
                <div class="border-b border-zinc-200 bg-zinc-50/80 px-5 py-4">
                    <div class="flex items-center justify-between gap-4">
                        <div>
                            <div class="h-4 w-40 rounded bg-zinc-200"></div>
                            <div class="mt-2 h-3 w-64 rounded bg-zinc-100"></div>
                        </div>
                        <div class="h-8 w-24 rounded-xl bg-zinc-200"></div>
                    </div>
                </div>

                <div class="p-5 sm:p-6">
                    <div class="grid gap-4 lg:grid-cols-3">
                        <?php for($i=0; $i<9; $i++): ?>
                        <div class="rounded-2xl border border-zinc-200 bg-white p-4">
                            <div class="h-4 w-24 rounded bg-zinc-200"></div>
                            <div class="mt-4 h-8 w-20 rounded bg-zinc-100"></div>
                            <div class="mt-3 h-3 w-28 rounded bg-zinc-100"></div>
                        </div>
                        <?php endfor; ?>
                    </div>

                    <div class="mt-4 rounded-2xl border border-zinc-200 bg-white p-4">
                        <div class="h-4 w-36 rounded bg-zinc-200"></div>
                        <div class="mt-4 space-y-3">
                            <div class="h-3 w-full rounded bg-zinc-100"></div>
                            <div class="h-3 w-11/12 rounded bg-zinc-100"></div>
                            <div class="h-3 w-9/12 rounded bg-zinc-100"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Blur overlay -->
            <div class="absolute inset-0  backdrop-blur-[2px]"></div>

            <!-- Upsell overlay -->
            <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
                <div class="flex min-h-full items-center justify-center p-4 sm:p-6 pb-12!">
                    <div class="w-full max-w-2xl overflow-hidden rounded-2xl border border-zinc-200 bg-white/95 shadow-xl ring-1 ring-black/5 backdrop-blur">
                        <div class="relative overflow-hidden">
                        <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-fuchsia-500 via-pink-500 to-purple-600"></div>

                        <div class="p-6 sm:p-8">
                            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-fuchsia-600 to-purple-600 text-white shadow-lg">
                                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.75 14.25a2.5 2.5 0 010-5h.43a7 7 0 0113.64 1.75A3.75 3.75 0 0119 18.5h-3.25" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75v8.5m0 0l-3-3m3 3l3-3" />
                                </svg>
                            </div>

                            <div class="mt-5 text-center">
                                <div class="flex flex-wrap items-center justify-center gap-2">
                                    <span class="inline-flex items-center rounded-full border border-fuchsia-200 bg-fuchsia-50 px-3 py-1 text-xs font-semibold text-fuchsia-700">
                                        <?= self::h($proFeatureLabel) ?>
                                    </span>
                                    <span class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700">
                                        <?= self::h($upgradeRequiredLabel) ?>
                                    </span>
                                </div>

                                <h3 class="mt-8 text-2xl font-semibold tracking-tight text-primary/90 sm:text-3xl">
                                    <?= self::h($title) ?>
                                </h3>

                                <p class="mx-auto mt-3 max-w-xl text-sm leading-6 text-secondary sm:text-base">
                                    <?= self::h($subtitle) ?>
                                </p>
                            </div>

                            <?php if (!empty($benefits)): ?>
                            <div class="mt-8 grid gap-3 text-left sm:grid-cols-2">
                                <?php foreach ($benefits as $benefit): ?>
                                    <?php 
                                        $benefitTitle = $benefit;
                                        $benefitDesc = '';
                                        // Simple split logic if colon is present, or just use as title
                                        if (strpos($benefit, ':') !== false) {
                                            [$benefitTitle, $benefitDesc] = explode(':', $benefit, 2);
                                        }
                                    ?>
                                    <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 shadow-xs">
                                        <div class="text-sm font-medium text-center text-primary/90"><?= self::h(trim($benefitTitle)) ?></div>
                                        <?php if ($benefitDesc): ?>
                                            <div class="mt-1 text-sm leading-6 text-secondary"><?= self::h(trim($benefitDesc)) ?></div>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            <?php endif; ?>

                            <div class="mt-12 flex flex-col gap-3 sm:flex-row sm:justify-center">
                                <?= Button::render($btnUpgrade, [
                                    'as' => 'a',
                                    'href' => $urlUpgrade . mh_cfg('MH_LINKID_1') ,
                                    'attrs' => ['target' => '_blank'],
                                    'size' => 'lg',
//                                    'rounded' => '2xl',
                                    'class' => 'bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white shadow-sm transition hover:opacity-95'
                                ]) ?>

                                <?= Button::render($btnConsulting, [
                                    'as' => 'a',
                                    'href' => $urlConsulting . mh_cfg('MH_LINKID_1') ,
                                    'attrs' => ['target' => '_blank'],
                                    'variant' => 'outline',
                                    'size' => 'lg',
//                                    'rounded' => '2xl',
                                    'class' => 'border-zinc-300 text-zinc-700 transition hover:bg-zinc-50'
                                ]) ?>
                            </div>

                            <?php if ($footer): ?>
                                <div class="mt-8 text-center text-sm text-secondary">
                                    <?= self::h($footer) ?>
                                </div>
                                <div class="mt-4 flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-xs text-zinc-500">
                                    <a href="<?= ($langCode === 'de' ? 'https://de.trustpilot.com/review/www.mailbeez.com' : 'https://uk.trustpilot.com/review/www.mailbeez.com') ?>" target="_blank" class="inline-flex items-center gap-2 hover:text-zinc-900 opacity-75 hover:opacity-100 transition-opacity">
                                        <span class="flex items-center gap-1 text-green-600" aria-hidden="true"><img src="<?= (defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : '') . 'public/assets/stars-5.svg' ?>" alt="Trustpilot Stars" class="h-3 mx-auto"></span>
                                        <span class="font-medium text-zinc-700"><?= self::h($trustpilotRating) ?></span>
                                    </a>
                                    <span>&middot;</span>
                                    <span><?= self::h($cancelAnytime) ?></span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
        return ob_get_clean();
    }
}
