import React from 'react';
import { Link } from 'react-router-dom';

export default function Setup() {
    return (
        <div className="p-6">
            <h1 className="text-3xl font-bold mb-6">Setup Instructions</h1>
            <div className="bg-card p-6 border rounded-xl shadow-sm space-y-6">
                <div>
                    <h2 className="text-xl font-semibold mb-2">1. Connect Your Payment Gateway</h2>
                    <p className="text-gray-600">Navigate to the <strong>Settings</strong> page to enter your Stripe (and PayPal) API keys. The plugin supports Test and Live modes, allowing you to simulate subscription flows safely.</p>
                </div>
                <div>
                    <h2 className="text-xl font-semibold mb-2">2. Set Up Webhooks</h2>
                    <p className="text-gray-600 mb-2">Webhooks are required so Invizo can process background recurring payments automatically. Under <strong>Settings</strong> &rarr; <strong>Stripe Configuration</strong>, use the <em>Auto-Setup Webhook</em> button to instantly configure your Stripe account.</p>
                </div>
                <div>
                    <h2 className="text-xl font-semibold mb-2">3. Define Subscription Plans</h2>
                    <p className="text-gray-600">Go to the <strong>Plans</strong> page to build your product tiers. Invizo automatically maps these directly into Stripe Products! You can control billing intervals, prices, and limits.</p>
                </div>
                <div>
                    <h2 className="text-xl font-semibold mb-2">4. Standalone shop &amp; checkout</h2>
                    <p className="text-gray-600 mb-2">
                        <strong>Shop page (all plans):</strong> create a page (e.g. &quot;Plans&quot; or &quot;Subscribe&quot;) and add:
                    </p>
                    <code className="bg-gray-100 px-3 py-2 rounded-md font-mono text-sm border text-gray-800 block w-fit mb-2">[invizo_store]</code>
                    <p className="text-gray-600 mb-2">
                        This lists every published plan like a small catalog. The plan <strong>title</strong> and <strong>image</strong> open a detail view on the same store page (
                        <code className="text-xs bg-gray-100 px-1 rounded">?invizo_plan=ID</code>
                        ). The <strong>Subscribe</strong> button goes to checkout with{' '}
                        <code className="text-xs bg-gray-100 px-1 rounded">?plan=ID</code>. Set your <strong>Store</strong> and <strong>Checkout</strong> pages in{' '}
                        <strong>Settings → General</strong>, or use <code className="text-xs bg-gray-100 px-1 rounded">store_url</code> /{' '}
                        <code className="text-xs bg-gray-100 px-1 rounded">checkout_url</code> on the shortcode.
                    </p>
                    <p className="text-gray-600 mb-2">Optional attributes: <code className="text-xs bg-gray-100 px-1 rounded">columns=&quot;2&quot;</code> (1–4), <code className="text-xs bg-gray-100 px-1 rounded">show_description=&quot;no&quot;</code>, <code className="text-xs bg-gray-100 px-1 rounded">button_text=&quot;Choose plan&quot;</code>. Alias: <code className="text-xs bg-gray-100 px-1 rounded">[invizo_plans]</code>.</p>
                    <p className="text-gray-600 mb-2"><strong>Single-plan checkout:</strong> embed checkout on its own page (often your checkout page) with an optional default plan:</p>
                    <code className="bg-gray-100 px-3 py-2 rounded-md font-mono text-sm border text-gray-800 block w-fit">[invizo_checkout plan="123"]</code>
                    <p className="text-gray-600 mt-2">Visitors can still switch plans on the checkout page if you show all plans there.</p>
                </div>
                <div>
                    <h2 className="text-xl font-semibold mb-2">5. Customer account &amp; auth (Standalone)</h2>
                    <p className="text-gray-600 mb-2">
                        Under <strong>Settings → General</strong>, use <strong>Generate default pages</strong> (standalone mode) to create store, checkout, my account, login, and register pages with the right shortcodes, or assign existing pages manually.
                    </p>
                    <ul className="list-disc ml-5 text-gray-600 space-y-2 mb-2">
                        <li>
                            <strong>Dashboard:</strong>{' '}
                            <code className="text-xs bg-gray-100 px-1 rounded">[invizo_account]</code> — subscriptions, profile, Stripe payment methods.
                        </li>
                        <li>
                            <strong>Simple list only:</strong>{' '}
                            <code className="text-xs bg-gray-100 px-1 rounded">[invizo_subscriptions]</code> — same detail URL{' '}
                            <code className="text-xs bg-gray-100 px-1 rounded">?invizo_subscription=ID</code>.
                        </li>
                        <li>
                            <strong>Login / register:</strong>{' '}
                            <code className="text-xs bg-gray-100 px-1 rounded">[invizo_auth view=&quot;login&quot;]</code> and{' '}
                            <code className="text-xs bg-gray-100 px-1 rounded">[invizo_auth view=&quot;register&quot;]</code>, or{' '}
                            <code className="text-xs bg-gray-100 px-1 rounded">[invizo_auth]</code> for both on one page.
                        </li>
                    </ul>
                </div>
                <div>
                    <h2 className="text-xl font-semibold mb-2">6. WooCommerce Integration Setup</h2>
                    <p className="text-gray-600 mb-2">If you are using <strong>WooCommerce Mode</strong>, navigate to <strong>Products &rarr; Add New</strong> in your WordPress admin menu.</p>
                    <ul className="list-disc ml-5 text-gray-600 space-y-1">
                        <li>Under <em>Product Data</em>, select the novel <strong>"Invizo Subscription"</strong> product type.</li>
                        <li>An intuitive "Subscription Details" configuration tab will appear automatically.</li>
                        <li>Configure the Price and Recurring Interval.</li>
                        <li>Publish the product! Custom WooCommerce bridging handles the rest natively within the WooCommerce Cart.</li>
                    </ul>
                </div>
            </div>
        </div>
    );
}
