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

const features = [
  { title: 'Real-Time Dashboard', desc: 'Revenue, orders, customers, and products at a glance. Customisable widgets you can arrange to suit your workflow.', icon: 'chart' },
  { title: 'AI Store Assistant', desc: 'Ask questions in plain English. "What were my top products last month?" and get instant, accurate answers.', icon: 'chat' },
  { title: 'AI-Generated Reports', desc: 'One-click analytical reports with charts and written commentary. Print-ready and shareable with your team.', icon: 'report' },
  { title: 'Secure API Proxy', desc: 'Your AI API key never touches WordPress. All requests routed securely through our servers with rate limiting and logging.', icon: 'lock' },
  { title: 'License Protected', desc: 'One license per site with signed token authentication. Manage activations and monitor usage from your account.', icon: 'key' },
  { title: 'Lightning Fast', desc: 'Optimised server-side data queries with intelligent caching. No bloated client-side requests slowing your store.', icon: 'bolt' },
];

const steps = [
  { num: '1', title: 'Purchase a License', desc: 'One license, one website. Get your license key instantly after checkout.' },
  { num: '2', title: 'Install & Activate', desc: 'Upload the plugin to WordPress and enter your license key. Your domain is verified automatically.' },
  { num: '3', title: 'Get Insights', desc: 'Open your dashboard, ask questions, generate reports. Your AI-powered analytics are ready.' },
];

const pricingFeatures = [
  '1 Website per License',
  'AI-Powered Dashboard',
  'AI Store Assistant',
  'AI-Generated Reports',
  'Secure API Proxy',
  'Email Support',
];

const iconPaths = {
  chart: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
  chat: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z',
  report: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
  lock: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
  key: 'M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z',
  bolt: 'M13 10V3L4 14h7v7l9-11h-7z',
};
</script>

<template>
  <PublicLayout>
    <Head title="AI-Powered WooCommerce Analytics Dashboard" />

    <!-- Hero -->
    <section class="bg-gradient-to-br from-primary via-secondary to-accent relative overflow-hidden">
      <div class="absolute inset-0 opacity-10">
        <div class="absolute top-20 left-10 w-72 h-72 bg-white rounded-full blur-3xl"></div>
        <div class="absolute bottom-10 right-20 w-96 h-96 bg-white rounded-full blur-3xl"></div>
      </div>
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 relative">
        <div class="text-center max-w-3xl mx-auto">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight">AI-Powered Analytics for Your WooCommerce Store</h1>
          <p class="mt-6 text-lg md:text-xl text-indigo-100 leading-relaxed">Get instant insights, AI-generated reports, and a smart assistant that understands your store data. Make smarter decisions without leaving WordPress.</p>
          <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link :href="$url('/pricing')" class="w-full sm:w-auto bg-white text-primary font-semibold px-8 py-3 rounded-lg hover:bg-gray-50 transition shadow-lg">View Pricing</Link>
            <Link :href="$url('/register')" class="w-full sm:w-auto bg-white/10 backdrop-blur border border-white/20 text-white font-semibold px-8 py-3 rounded-lg hover:bg-white/20 transition">Start Free Trial</Link>
          </div>
          <p class="mt-4 text-indigo-200 text-sm">No credit card required. 14-day free trial.</p>
        </div>
      </div>
    </section>

    <!-- Features -->
    <section class="py-20 md:py-28">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Everything you need to understand your store</h2>
          <p class="mt-4 text-lg text-gray-600">Powerful analytics and AI insights built directly into your WordPress dashboard.</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="f in features" :key="f.title" class="bg-white rounded-xl p-8 shadow-sm border border-gray-100 hover:shadow-md transition">
            <div class="w-12 h-12 rounded-lg bg-indigo-50 flex items-center justify-center mb-5">
              <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="iconPaths[f.icon]"/></svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ f.title }}</h3>
            <p class="text-gray-600">{{ f.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- How It Works -->
    <section class="py-20 md:py-28 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Up and running in minutes</h2>
          <p class="mt-4 text-lg text-gray-600">Three simple steps to unlock powerful analytics for your WooCommerce store.</p>
        </div>
        <div class="grid md:grid-cols-3 gap-12">
          <div v-for="s in steps" :key="s.num" class="text-center">
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary via-secondary to-accent text-white text-2xl font-bold flex items-center justify-center mx-auto mb-6">{{ s.num }}</div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ s.title }}</h3>
            <p class="text-gray-600">{{ s.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Pricing Preview -->
    <section class="py-20 md:py-28">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Simple, transparent pricing</h2>
          <p class="mt-4 text-lg text-gray-600">No hidden fees. Cancel anytime.</p>
        </div>
        <div class="max-w-lg mx-auto">
          <div class="bg-white rounded-xl p-10 shadow-lg border-2 border-primary relative hover:shadow-xl transition 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 max-w-xs mx-auto">
              <li v-for="feat in pricingFeatures" :key="feat" class="flex items-center">
                <svg class="w-5 h-5 text-green-500 mr-2 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>
                {{ feat }}
              </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">Get Started</Link>
            <p class="text-gray-400 text-sm mt-4">Need multiple sites? Purchase additional licenses.</p>
          </div>
        </div>
        <div class="text-center mt-10">
          <Link :href="$url('/pricing')" class="text-primary font-medium hover:underline">Learn more about what's included &rarr;</Link>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="bg-gradient-to-br from-primary via-secondary to-accent relative overflow-hidden">
      <div class="absolute inset-0 opacity-10">
        <div class="absolute top-10 right-10 w-72 h-72 bg-white rounded-full blur-3xl"></div>
      </div>
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-24 text-center relative">
        <h2 class="text-3xl md:text-4xl font-bold text-white">Ready to unlock smarter analytics?</h2>
        <p class="mt-4 text-lg text-indigo-100">Join store owners using AI to make better business decisions every day.</p>
        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link :href="$url('/register')" class="w-full sm:w-auto bg-white text-primary font-semibold px-8 py-3 rounded-lg hover:bg-gray-50 transition shadow-lg">Start Your Free Trial</Link>
          <Link :href="$url('/pricing')" class="w-full sm:w-auto bg-white/10 backdrop-blur border border-white/20 text-white font-semibold px-8 py-3 rounded-lg hover:bg-white/20 transition">View Pricing</Link>
        </div>
      </div>
    </section>
  </PublicLayout>
</template>
