{# app/templates/platform/homepage-wizamart.html #}
{# Wizamart Marketing Homepage - Letzshop OMS Platform #}
{% extends "platform/base.html" %}
{% from 'shared/macros/inputs.html' import toggle_switch %}

{% block title %}Wizamart - Order Management for Letzshop Sellers{% endblock %}
{% block meta_description %}Lightweight OMS for Letzshop vendors. Manage orders, inventory, and invoicing. Start your 30-day free trial today.{% endblock %}

{% block content %}
<div x-data="homepageData()" class="bg-gray-50 dark:bg-gray-900">

    {# =========================================================================
       HERO SECTION
    ========================================================================= #}
    <section class="relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
            <div class="text-center">
                {# Badge #}
                <div class="inline-flex items-center px-4 py-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-full text-indigo-700 dark:text-indigo-300 text-sm font-medium mb-6">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    {{ _("platform.hero.badge", trial_days=trial_days) }}
                </div>

                {# Headline #}
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 dark:text-white leading-tight mb-6">
                    {{ _("platform.hero.title") }}
                </h1>

                {# Subheadline #}
                <p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-10">
                    {{ _("platform.hero.subtitle") }}
                </p>

                {# CTA Buttons #}
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="/signup"
                       class="inline-flex items-center justify-center px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl shadow-lg shadow-indigo-500/30 transition-all hover:scale-105">
                        {{ _("platform.hero.cta_trial") }}
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                        </svg>
                    </a>
                    <a href="#find-shop"
                       class="inline-flex items-center justify-center px-8 py-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-semibold rounded-xl border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-500 transition-all">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        {{ _("platform.hero.cta_find_shop") }}
                    </a>
                </div>
            </div>
        </div>

        {# Background Decoration #}
        <div class="absolute inset-0 -z-10 overflow-hidden">
            <div class="absolute -top-1/2 -right-1/4 w-96 h-96 bg-indigo-200 dark:bg-indigo-900/20 rounded-full blur-3xl opacity-50"></div>
            <div class="absolute -bottom-1/2 -left-1/4 w-96 h-96 bg-purple-200 dark:bg-purple-900/20 rounded-full blur-3xl opacity-50"></div>
        </div>
    </section>

    {# =========================================================================
       PRICING SECTION
    ========================================================================= #}
    <section id="pricing" class="py-16 lg:py-24 bg-white dark:bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {# Section Header #}
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    {{ _("platform.pricing.title") }}
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    {{ _("platform.pricing.subtitle", trial_days=trial_days) }}
                </p>

                {# Billing Toggle #}
                <div class="flex justify-center mt-8">
                    {{ toggle_switch(
                        model='annual',
                        left_label=_("platform.pricing.monthly"),
                        right_label=_("platform.pricing.annual"),
                        right_badge=_("platform.pricing.save_months")
                    ) }}
                </div>
            </div>

            {# Pricing Cards Grid #}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                {% for tier in tiers %}
                <div class="relative bg-gray-50 dark:bg-gray-900 rounded-2xl p-6 border-2 transition-all hover:shadow-xl
                            {% if tier.is_popular %}border-indigo-500 shadow-lg{% else %}border-gray-200 dark:border-gray-700{% endif %}">

                    {# Popular Badge #}
                    {% if tier.is_popular %}
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2">
                        <span class="bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full">
                            {{ _("platform.pricing.most_popular") }}
                        </span>
                    </div>
                    {% endif %}

                    {# Tier Name #}
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ tier.name }}</h3>

                    {# Price #}
                    <div class="mb-6">
                        <template x-if="!annual">
                            <div>
                                <span class="text-4xl font-extrabold text-gray-900 dark:text-white">{{ tier.price_monthly|int }}€</span>
                                <span class="text-gray-500 dark:text-gray-400">{{ _("platform.pricing.per_month") }}</span>
                            </div>
                        </template>
                        <template x-if="annual">
                            <div>
                                {% if tier.price_annual %}
                                <span class="text-4xl font-extrabold text-gray-900 dark:text-white">{{ (tier.price_annual / 12)|round(0)|int }}€</span>
                                <span class="text-gray-500 dark:text-gray-400">{{ _("platform.pricing.per_month") }}</span>
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ tier.price_annual|int }}€ {{ _("platform.pricing.per_year") }}
                                </div>
                                {% else %}
                                <span class="text-2xl font-bold text-gray-900 dark:text-white">{{ _("platform.pricing.custom") }}</span>
                                {% endif %}
                            </div>
                        </template>
                    </div>

                    {# Features List - Show all features, grey out unavailable #}
                    <ul class="space-y-2 mb-8 text-sm">
                        {# Orders #}
                        <li class="flex items-center text-gray-700 dark:text-gray-300">
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {% if tier.orders_per_month %}{{ _("platform.pricing.orders_per_month", count=tier.orders_per_month) }}{% else %}{{ _("platform.pricing.unlimited_orders") }}{% endif %}
                        </li>
                        {# Products #}
                        <li class="flex items-center text-gray-700 dark:text-gray-300">
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {% if tier.products_limit %}{{ _("platform.pricing.products_limit", count=tier.products_limit) }}{% else %}{{ _("platform.pricing.unlimited_products") }}{% endif %}
                        </li>
                        {# Team Members #}
                        <li class="flex items-center text-gray-700 dark:text-gray-300">
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {% if tier.team_members %}{{ _("platform.pricing.team_members", count=tier.team_members) }}{% else %}{{ _("platform.pricing.unlimited_team") }}{% endif %}
                        </li>
                        {# Letzshop Sync - always included #}
                        <li class="flex items-center text-gray-700 dark:text-gray-300">
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {{ _("platform.pricing.letzshop_sync") }}
                        </li>
                        {# EU VAT Invoicing #}
                        <li class="flex items-center {% if 'invoice_eu_vat' in tier.features %}text-gray-700 dark:text-gray-300{% else %}text-gray-400 dark:text-gray-600{% endif %}">
                            {% if 'invoice_eu_vat' in tier.features %}
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {% else %}
                            <svg class="w-4 h-4 text-gray-300 dark:text-gray-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                            {% endif %}
                            {{ _("platform.pricing.eu_vat_invoicing") }}
                        </li>
                        {# Analytics Dashboard #}
                        <li class="flex items-center {% if 'analytics_dashboard' in tier.features %}text-gray-700 dark:text-gray-300{% else %}text-gray-400 dark:text-gray-600{% endif %}">
                            {% if 'analytics_dashboard' in tier.features %}
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {% else %}
                            <svg class="w-4 h-4 text-gray-300 dark:text-gray-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                            {% endif %}
                            {{ _("platform.pricing.analytics_dashboard") }}
                        </li>
                        {# API Access #}
                        <li class="flex items-center {% if 'api_access' in tier.features %}text-gray-700 dark:text-gray-300{% else %}text-gray-400 dark:text-gray-600{% endif %}">
                            {% if 'api_access' in tier.features %}
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {% else %}
                            <svg class="w-4 h-4 text-gray-300 dark:text-gray-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                            {% endif %}
                            {{ _("platform.pricing.api_access") }}
                        </li>
                        {# Multi-channel Integration - Enterprise only #}
                        <li class="flex items-center {% if tier.is_enterprise %}text-gray-700 dark:text-gray-300{% else %}text-gray-400 dark:text-gray-600{% endif %}">
                            {% if tier.is_enterprise %}
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            {% else %}
                            <svg class="w-4 h-4 text-gray-300 dark:text-gray-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                            {% endif %}
                            {{ _("platform.pricing.multi_channel") }}
                        </li>
                    </ul>

                    {# CTA Button #}
                    {% if tier.is_enterprise %}
                    <a href="mailto:sales@wizamart.com?subject=Enterprise%20Plan%20Inquiry"
                       class="block w-full py-3 px-4 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white font-semibold rounded-xl text-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                        {{ _("platform.pricing.contact_sales") }}
                    </a>
                    {% else %}
                    <a href="/signup?tier={{ tier.code }}"
                       :href="'/signup?tier={{ tier.code }}&annual=' + annual"
                       class="block w-full py-3 px-4 font-semibold rounded-xl text-center transition-colors
                              {% if tier.is_popular %}bg-indigo-600 hover:bg-indigo-700 text-white{% else %}bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-900/50{% endif %}">
                        {{ _("platform.pricing.start_trial") }}
                    </a>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </section>

    {# =========================================================================
       ADD-ONS SECTION
    ========================================================================= #}
    <section id="addons" class="py-16 lg:py-24 bg-gray-50 dark:bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {# Section Header #}
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    {{ _("platform.addons.title") }}
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    {{ _("platform.addons.subtitle") }}
                </p>
            </div>

            {# Add-ons Grid #}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                {% for addon in addons %}
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
                    {# Icon #}
                    <div class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center mb-6">
                        {% if addon.icon == 'globe' %}
                        <svg class="w-7 h-7 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                        </svg>
                        {% elif addon.icon == 'shield-check' %}
                        <svg class="w-7 h-7 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                        {% elif addon.icon == 'mail' %}
                        <svg class="w-7 h-7 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        {% endif %}
                    </div>

                    {# Name & Description #}
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ addon.name }}</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">{{ addon.description }}</p>

                    {# Price #}
                    <div class="flex items-baseline">
                        <span class="text-2xl font-bold text-gray-900 dark:text-white">{{ addon.price }}€</span>
                        <span class="text-gray-500 dark:text-gray-400 ml-1">/{{ addon.billing_period }}</span>
                    </div>

                    {# Options for email packages #}
                    {% if addon.options %}
                    <div class="mt-4 space-y-2">
                        {% for opt in addon.options %}
                        <div class="text-sm text-gray-600 dark:text-gray-400">
                            {{ opt.quantity }} addresses: {{ opt.price }}€/month
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </section>

    {# =========================================================================
       LETZSHOP VENDOR FINDER
    ========================================================================= #}
    <section id="find-shop" class="py-16 lg:py-24 bg-white dark:bg-gray-800">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            {# Section Header #}
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    {{ _("platform.find_shop.title") }}
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-400">
                    {{ _("platform.find_shop.subtitle") }}
                </p>
            </div>

            {# Search Form #}
            <div class="bg-gray-50 dark:bg-gray-900 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
                <div class="flex flex-col sm:flex-row gap-4">
                    <input
                        type="text"
                        x-model="shopUrl"
                        placeholder="{{ _('platform.find_shop.placeholder') }}"
                        class="flex-1 px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    />
                    <button
                        @click="lookupVendor()"
                        :disabled="loading"
                        class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl transition-colors disabled:opacity-50 flex items-center justify-center">
                        <template x-if="loading">
                            <svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                            </svg>
                        </template>
                        {{ _("platform.find_shop.button") }}
                    </button>
                </div>

                {# Result #}
                <template x-if="vendorResult">
                    <div class="mt-6 p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
                        <template x-if="vendorResult.found">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white" x-text="vendorResult.vendor.name"></h3>
                                    <a :href="vendorResult.vendor.letzshop_url" target="_blank" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline" x-text="vendorResult.vendor.letzshop_url"></a>
                                </div>
                                <template x-if="!vendorResult.vendor.is_claimed">
                                    <a :href="'/signup?letzshop=' + vendorResult.vendor.slug"
                                       class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors">
                                        {{ _("platform.find_shop.claim_shop") }}
                                    </a>
                                </template>
                                <template x-if="vendorResult.vendor.is_claimed">
                                    <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-lg">
                                        {{ _("platform.find_shop.already_claimed") }}
                                    </span>
                                </template>
                            </div>
                        </template>
                        <template x-if="!vendorResult.found">
                            <div class="text-center text-gray-600 dark:text-gray-400">
                                <p x-text="vendorResult.error || 'Shop not found. Please check your URL and try again.'"></p>
                            </div>
                        </template>
                    </div>
                </template>

                {# Help Text #}
                <p class="mt-4 text-sm text-gray-500 dark:text-gray-400 text-center">
                    {{ _("platform.find_shop.no_account") }} <a href="https://letzshop.lu" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ _("platform.find_shop.signup_letzshop") }}</a>{{ _("platform.find_shop.then_connect") }}
                </p>
            </div>
        </div>
    </section>

    {# =========================================================================
       FINAL CTA SECTION
    ========================================================================= #}
    <section class="py-16 lg:py-24 bg-gradient-to-r from-indigo-600 to-purple-600">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
                {{ _("platform.cta.title") }}
            </h2>
            <p class="text-xl text-indigo-100 mb-10">
                {{ _("platform.cta.subtitle", trial_days=trial_days) }}
            </p>
            <a href="/signup"
               class="inline-flex items-center px-10 py-4 bg-white text-indigo-600 font-bold rounded-xl shadow-lg hover:shadow-xl transition-all hover:scale-105">
                {{ _("platform.cta.button") }}
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                </svg>
            </a>
        </div>
    </section>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function homepageData() {
    return {
        annual: false,
        shopUrl: '',
        vendorResult: null,
        loading: false,

        async lookupVendor() {
            if (!this.shopUrl.trim()) return;

            this.loading = true;
            this.vendorResult = null;

            try {
                const response = await fetch('/api/v1/platform/letzshop-vendors/lookup', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ url: this.shopUrl })
                });

                this.vendorResult = await response.json();
            } catch (error) {
                console.error('Lookup error:', error);
                this.vendorResult = { found: false, error: 'Failed to lookup. Please try again.' };
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>
{% endblock %}