<script setup>
import { Head, Link } from '@inertiajs/vue3';
import PublicLayout from '@/Layouts/PublicLayout.vue';
import { ref } from 'vue';

const faqs = [
  { q: 'How does the license work?', a: 'Each license key activates StoreSight AI on one WordPress website. When you enter your key in the plugin settings, it binds to your domain automatically. You can manage your activation from your account dashboard.' },
  { q: 'Can I use one license on multiple sites?', a: 'Each license is restricted to one website. If you have multiple WooCommerce stores, you will need a separate license for each. You can purchase additional licenses from your dashboard.' },
  { q: 'What AI model powers the assistant?', a: 'StoreSight AI uses OpenAI models. All AI requests are routed securely through our servers so your API key is never exposed in your WordPress installation.' },
  { q: 'Is there a free trial?', a: 'Yes! Every new account gets a 14-day free trial with full access to all features. No credit card is required to start your trial.' },
  { q: 'Can I cancel anytime?', a: 'Absolutely. There are no long-term contracts. You can cancel your subscription at any time from your account settings, and your access will continue until the end of your billing period.' },
];

const openFaq = ref(null);
const toggleFaq = (i) => { openFaq.value = openFaq.value === i ? null : i; };
</script>

<template>
  <PublicLayout>
    <Head title="Pricing" />

    <section class="bg-gradient-to-br from-primary via-secondary to-accent py-16 md:py-20">
      <div class="max-w-4xl mx-auto px-4 text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-white">Simple, transparent pricing</h1>
        <p class="mt-4 text-lg text-indigo-100">One plan. Everything included. No hidden fees.</p>
      </div>
    </section>

    <section class="py-16 md:py-24">
      <div class="max-w-lg mx-auto px-4">
        <div class="bg-white rounded-xl p-10 shadow-lg border-2 border-primary text-center">
          <h3 class="text-2xl font-bold text-gray-900">StoreSight AI License</h3>
          <p class="text-gray-500 mt-2">1 license per website</p>
          <div class="mt-6 mb-8">
            <span class="text-5xl font-bold text-gray-900">&pound;29</span>
            <span class="text-gray-500">/month</span>
          </div>
          <ul class="space-y-3 text-gray-600 mb-8 text-left">
            <li v-for="f in ['1 Website per License','AI-Powered Analytics Dashboard','AI Store Assistant (ask questions in plain English)','AI-Generated Reports with charts','Secure API Proxy (key never exposed)','200 AI requests per day','Signed JWT token authentication','Domain-locked activation','14-day free trial','Email Support','Cancel anytime']" :key="f" class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
              {{ f }}
            </li>
          </ul>
          <Link :href="$url('/register')" class="block w-full bg-primary text-white font-semibold py-3 rounded-lg hover:bg-primary-dark transition">Start Free Trial</Link>
          <p class="text-gray-400 text-sm mt-4">No credit card required</p>
        </div>
      </div>
    </section>

    <section class="py-16 md:py-24 bg-white">
      <div class="max-w-3xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-gray-900 text-center mb-12">Frequently Asked Questions</h2>
        <div class="space-y-4">
          <div v-for="(faq, i) in faqs" :key="i" class="border border-gray-200 rounded-xl overflow-hidden">
            <button @click="toggleFaq(i)" class="w-full flex items-center justify-between px-6 py-4 text-left font-medium text-gray-900 hover:bg-gray-50 transition">
              {{ faq.q }}
              <svg :class="{'rotate-180': openFaq === i}" class="w-5 h-5 text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div v-if="openFaq === i" class="px-6 pb-4 text-gray-600">{{ faq.a }}</div>
          </div>
        </div>
      </div>
    </section>
  </PublicLayout>
</template>
