<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import {
  BarChart3,
  Star,
  Zap,
  Shield,
  TrendingUp,
  Award,
  Crown,
  FileText,
} from 'lucide-vue-next'
import {
  getI18n,
} from '@/helper'
import { getSavetoWishlistObj, savetoWishlistSiteURL } from '@/config'

/**
 * Generates a UTM-tracked URL for external links to SaveTo Wishlist website
 * @param urlPath - The path to append to the base URL (e.g., 'pricing')
 * @param utmSource - UTM source parameter (default: 'stwlite')
 * @param utmMedium - UTM medium parameter (default: 'action')  
 * @param utmCampaign - UTM campaign parameter (default: 'default')
 * @returns Full URL with UTM parameters appended
 */
const getUtmUrl = (urlPath: string, utmSource: string = 'stwlite', utmMedium: string = 'action', utmCampaign: string = 'default') => {
  const siteUrl = savetoWishlistSiteURL
  const baseUrl = siteUrl.endsWith('/') ? siteUrl : siteUrl + '/'
  const fullUrl = baseUrl + urlPath
  const utmContent = getSavetoWishlistObj?.stwInstalledBy || false

  const params = new URLSearchParams({
    utm_source: utmSource,
    utm_medium: utmMedium,
    utm_campaign: utmCampaign,
  })

  if (utmContent) {
    params.append('utm_content', utmContent)
  }

  return `${fullUrl}?${params.toString()}`
}

// Pro features grid (5 features)
const proFeatures = [
  {
    icon: BarChart3,
    title: getI18n('pro_grid_analytics', __('Advanced Analytics', 'saveto-wishlist-lite-for-woocommerce')),
    description: getI18n('pro_grid_analytics_desc', __('Track wishlist performance, conversion rates, and customer behavior with detailed analytics.', 'saveto-wishlist-lite-for-woocommerce')),
    benefit: getI18n('pro_grid_analytics_benefit', __('Increase sales by 35%', 'saveto-wishlist-lite-for-woocommerce')),
  },
  {
    icon: Zap,
    title: getI18n('pro_grid_automations', __('Wishlist Automations', 'saveto-wishlist-lite-for-woocommerce')),
    description: getI18n('pro_grid_automations_desc', __('Automate workflows with email notifications and webhook actions to streamline your wishlist management.', 'saveto-wishlist-lite-for-woocommerce')),
    benefit: getI18n('pro_grid_automations_benefit', __('Save time and boost efficiency', 'saveto-wishlist-lite-for-woocommerce')),
  },
  {
    icon: FileText,
    title: getI18n('pro_grid_notes', __('Notes/Descriptions', 'saveto-wishlist-lite-for-woocommerce')),
    description: getI18n('pro_grid_notes_desc', __('Display notes per wishlist items for better organization and customer experience.', 'saveto-wishlist-lite-for-woocommerce')),
    benefit: getI18n('pro_grid_notes_benefit', __('Improve organization', 'saveto-wishlist-lite-for-woocommerce')),
  },
  {
    icon: Shield,
    title: getI18n('pro_grid_role_restrictions', __('Role Restrictions', 'saveto-wishlist-lite-for-woocommerce')),
    description: getI18n('pro_grid_role_restrictions_desc', __('Global settings to exclude roles/guests from wishlist features for better control.', 'saveto-wishlist-lite-for-woocommerce')),
    benefit: getI18n('pro_grid_role_restrictions_benefit', __('Enhanced access control', 'saveto-wishlist-lite-for-woocommerce')),
  },
  {
    icon: Award,
    title: getI18n('pro_grid_support', __('Priority Support', 'saveto-wishlist-lite-for-woocommerce')),
    description: getI18n('pro_grid_support_desc', __('Get priority support with faster response times and dedicated assistance.', 'saveto-wishlist-lite-for-woocommerce')),
    benefit: getI18n('pro_grid_support_benefit', __('24/7 expert help', 'saveto-wishlist-lite-for-woocommerce')),
  },
]

const upgradeUrl = getUtmUrl('pricing', 'stwlite', 'profeaturesbanner', 'upgrade')
</script>

<template>
  <div class="stwlite-tw-max-w-7xl stwlite-tw-mx-auto stwlite-tw-px-4 sm:stwlite-tw-px-6 lg:stwlite-tw-px-8 stwlite-tw-py-8">
    <div class="stwlite-pro-features-banner stwlite-tw-mt-8">

      <div class="stwlite-tw-space-y-8">
        <!-- Pro Features Grid -->
        <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-2 lg:stwlite-tw-grid-cols-3 stwlite-tw-gap-6">
          <a
            v-for="feature in proFeatures"
            :key="feature.title"
            :href="upgradeUrl"
            target="_blank"
            class="stwlite-tw-bg-white stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-shadow-sm hover:stwlite-tw-shadow-lg stwlite-tw-transition-all stwlite-tw-relative stwlite-tw-cursor-pointer stwlite-tw-block stwlite-tw-no-underline hover:stwlite-tw-transform hover:stwlite-tw-scale-105"
          >
            <!-- PRO Badge -->
            <div class="stwlite-tw-absolute stwlite-tw-top-4 stwlite-tw-right-4">
              <span class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-2 stwlite-tw-py-1 stwlite-tw-rounded-full stwlite-tw-text-xs stwlite-tw-font-semibold stwlite-brand-bg-pro-gold-light stwlite-brand-text-pro-gold-dark">
                PRO
              </span>
            </div>

            <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
              <div class="stwlite-tw-flex-shrink-0">
                <div class="stwlite-tw-w-12 stwlite-tw-h-12 stwlite-brand-bg-pink-light stwlite-tw-rounded-lg stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center">
                  <component
                    :is="feature.icon"
                    class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-brand-text-pink"
                  />
                </div>
              </div>
              <div class="stwlite-tw-flex-1 stwlite-tw-min-w-0">
                <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-brand-text-dark stwlite-tw-mb-2 stwlite-tw-pr-8 stwlite-tw-m-0">
                  {{ feature.title }}
                </h4>
                <p class="stwlite-tw-text-sm stwlite-brand-text-gray stwlite-tw-mb-4">
                  {{ feature.description }}
                </p>
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-text-sm stwlite-tw-font-medium stwlite-brand-text-pink">
                  <TrendingUp class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                  {{ feature.benefit }}
                </div>
              </div>
            </div>
          </a>
        </div>

        <!-- Join Happy Store Owners Section -->
        <div class="stwlite-tw-bg-gradient-to-br stwlite-brand-bg-section stwlite-tw-border-2 stwlite-brand-border-brown stwlite-tw-rounded-lg stwlite-tw-p-8 stwlite-tw-shadow-lg">
          <div class="stwlite-tw-text-center">
            <!-- Star Rating -->
            <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-mb-4">
              <Star
                v-for="i in 5"
                :key="i"
                class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-brand-text-pro-gold stwlite-brand-fill-pro-gold stwlite-tw-mx-0.5"
              />
            </div>
            
            <!-- Headline -->
            <h3 class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-brand-text-dark stwlite-tw-mb-3">
              {{ getI18n('cta_header', __('Stop Leaving Money on the Table', 'saveto-wishlist-lite-for-woocommerce')) }}
            </h3>
            
            <!-- Description -->
            <p class="stwlite-brand-text-gray stwlite-tw-mb-6 stwlite-tw-text-lg stwlite-tw-font-medium">
              {{ getI18n('cta_description', __('Your free version is great, but Pro is a game-changer. Unlock the full potential of your store and start converting wishlists into completed orders today.', 'saveto-wishlist-lite-for-woocommerce')) }}
            </p>
            
            <!-- CTA Button -->
            <a
              :href="upgradeUrl"
              target="_blank"
              class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-10 stwlite-tw-py-5 stwlite-brand-gradient-button stwlite-tw-text-white stwlite-tw-font-bold stwlite-tw-rounded-lg stwlite-tw-transition-all stwlite-tw-shadow-xl hover:stwlite-tw-shadow-2xl stwlite-tw-text-xl stwlite-tw-no-underline hover:stwlite-tw-text-white stwlite-tw-transform hover:stwlite-tw-scale-110"
            >
              <Crown class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-mr-2 stwlite-tw-text-white" />
              {{ getI18n('unlock_pro_tools', __('Unlock Pro Tools', 'saveto-wishlist-lite-for-woocommerce')) }}
              <TrendingUp class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-ml-2" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.stwlite-pro-features-banner {
  max-width: 100%;
}

/* Brand color classes */
.stwlite-brand-gradient-header {
  background: linear-gradient(to right, #FF4D6D, #2C3E50);
}

.stwlite-brand-gradient-button {
  background: linear-gradient(to right, #FF4D6D, #2C3E50);
}

.stwlite-brand-gradient-button-hover {
  background: linear-gradient(to right, #E63950, #1A252F);
}

.stwlite-brand-text-pink {
  color: #FF4D6D !important;
}

.stwlite-brand-text-dark {
  color: #333333 !important;
}

.stwlite-brand-text-gray {
  color: #666666 !important;
}

.stwlite-brand-text-pro-gold {
  color: #FFC107 !important;
}

.stwlite-brand-text-pro-gold-dark {
  color: #FFB300 !important;
}

.stwlite-brand-bg-pink-light {
  background-color: rgba(255, 77, 109, 0.1) !important;
}

.stwlite-brand-bg-pro-gold-light {
  background-color: rgba(255, 193, 7, 0.2) !important;
}

.stwlite-brand-bg-section {
  background: linear-gradient(to bottom right, rgba(255, 77, 109, 0.05), rgba(141, 110, 99, 0.05));
}

.stwlite-brand-border-pink {
  border-color: #FF4D6D !important;
}

.stwlite-brand-border-brown {
  border-color: rgba(141, 110, 99, 0.3) !important;
}

.stwlite-brand-fill-pro-gold {
  fill: #FFC107 !important;
}

.stwlite-brand-pro-gold {
  color: #FFC107 !important;
}
</style>
