<?php
/**
 * Preciousuite support view.
 *
 * @package Preciousuite
 */

if (!defined('ABSPATH')) {
	exit;
}
$preciousuite_modules = PreciousSuite_Registry::instance()->all();

if (isset($preciousuite_modules['buyback-calculator'])) {
	$preciousuite_buybackfaqs = array(
		array(
			'title' => __('What does the Preciousuite Gold Buyback Quote Calculator do?', 'preciousuite-metal-rate-charts'),
			'answer' => __('This plugin allows your customers to calculate an instant cash offer for their gold items based on weight and purity. If they like the offer, they can "lock in" the price by submitting their email, which saves the lead into your WordPress dashboard and emails them a unique Quote ID to bring to your store.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('How is the customer payout calculated?', 'preciousuite-metal-rate-charts'),
			'answer' => __('The payout is calculated using a 3-step formula:<br>1. It takes the base 24K gold rate (set in the admin panel).<br>2. It adjusts for the selected purity (e.g., 18K gold is calculated as 75% of the 24K price).<br>3. It applies your shop\'s customizable "Buyback Margin" (e.g., if you set a 5% profit margin, the customer receives 95% of the raw gold value).', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Where do I view the leads and submitted quotes?', 'preciousuite-metal-rate-charts'),
			'answer' => __('All submitted quotes are stored securely in your WordPress database. You can view, search, and manage them by going to the "Quotes" section in your WordPress admin menu. You can search for specific quotes using either the customer\'s email address or their unique alphanumeric Quote ID.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Does this plugin integrate with WhatsApp?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Yes! You can enable WhatsApp integration in the settings. When a customer locks in a price, they can click a button that opens a pre-filled WhatsApp message containing their Quote ID, weight, karat, and locked value, allowing them to chat with your sales team instantly.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Are the gold rates updated automatically?', 'preciousuite-metal-rate-charts'),
			'answer' => __('The base 24K gold rate is controlled by an admin option (`preciousuite_manual_gold_rate`). You can update this rate manually from the plugin\'s settings page based on daily market fluctuations.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('I have issues with WordPress emails going to spam. Will customers receive their quotes?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Yes. The plugin includes a built-in Custom SMTP configuration panel. This allows you to securely route your confirmation emails through dedicated mail servers (using TLS/SSL) rather than relying on your web host\'s standard mailer, significantly improving deliverability.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Can anyone create quotes manually from the WordPress dashboard?', 'preciousuite-metal-rate-charts'),
			'answer' => __('No, the quotes database acts as a read-only CRM for your staff. New quotes can only be generated legitimately by customers using the frontend calculator form.', 'preciousuite-metal-rate-charts'),
		),
	);
}

if (isset($preciousuite_modules['invoice-generator'])) {
	$preciousuite_invoicefaqs = array(
		array(
			'title' => __('How do I customize invoices and certificates?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: HTML opening tag for settings link, 2: HTML closing tag. */
				__('Go to the %1$sInvoices & Certificates Settings%2$s page to customize the templates, colors, and layouts.', 'preciousuite-metal-rate-charts'),
				'<a href="' . esc_url(admin_url('admin.php?page=jicg-settings')) . '">',
				'</a>'
			),
		),
		array(
			'title' => __('How does the plugin calculate GST/VAT taxes?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: HTML opening tag for settings link, 2: HTML closing tag. */
				__('Navigate to the %1$sTax Settings%2$s tab to configure specific regional GST rules or international tax engines, and the plugin will automatically apply compliant tax calculations.', 'preciousuite-metal-rate-charts'),
				'<a href="' . esc_url(admin_url('admin.php?page=jicg-settings&tab=tax')) . '">',
				'</a>'
			),
		),
		array(
			'title' => __('Can I configure multi-currency support?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: HTML opening tag for settings link, 2: HTML closing tag. */
				__('Yes, go to the %1$sCurrency Settings%2$s tab to enable global market support and configure multiple currencies for your jewelry pricing.', 'preciousuite-metal-rate-charts'),
				'<a href="' . esc_url(admin_url('admin.php?page=jicg-settings&tab=currency')) . '">',
				'</a>'
			),
		),
		array(
			'title' => __('How do I send invoices via WhatsApp?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: HTML opening tag for settings link, 2: HTML closing tag. */
				__('In the %1$sWhatsApp Settings%2$s tab, you can set up automated message templates to send PDFs directly to customers via WhatsApp.', 'preciousuite-metal-rate-charts'),
				'<a href="' . esc_url(admin_url('admin.php?page=jicg-settings&tab=whatsapp')) . '">',
				'</a>'
			),
		),
		array(
			'title' => __('How are metal weights and hallmarks displayed?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: HTML opening tag for settings link, 2: HTML closing tag. */
				__('You can configure metal purity, weights, and hallmark standards in the %1$sMetal Settings%2$s tab. These details will automatically be included in your detailed purchase certificates.', 'preciousuite-metal-rate-charts'),
				'<a href="' . esc_url(admin_url('admin.php?page=jicg-settings&tab=metal')) . '">',
				'</a>'
			),
		),
	);
}

if (isset($preciousuite_modules['gold-savings-scheme'])) {
	$preciousuite_gssfaqs = array(
		array(
			'title' => __('How do I create a new Gold Savings Scheme?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: opening anchor tag, 2: closing anchor tag */
				__('Go to the %1$sSchemes%2$s page, click "Add New Scheme", configure the duration, installment amounts, and bonus rules, then save to make it available for customers.', 'preciousuite-metal-rate-charts'),
				'<a href="' . esc_url(admin_url('admin.php?page=ps-gs-schemes')) . '">',
				'</a>'
			),
		),
		array(
			'title' => __('How is the gold weight calculated for each installment?', 'preciousuite-metal-rate-charts'),
			'answer' => __('The gold weight is calculated automatically when a payment is recorded. It divides the paid amount by the live gold price for the scheme\'s specified purity (24K, 22K, or 18K).', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('How do customers redeem their matured schemes?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Once all installments are paid and the scheme matures, customers can click "Redeem" from their My Account dashboard. The system will automatically generate a WooCommerce discount coupon for them to use at checkout.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('How do I configure online payments for installments?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: opening anchor tag, 2: closing anchor tag */
				__('Navigate to the %1$sSettings%2$s page to enter your Razorpay API keys. If left blank, the system will operate in simulation mode for testing purposes.', 'preciousuite-metal-rate-charts'),
				'<a href="' . esc_url(admin_url('admin.php?page=ps-gs-settings')) . '">',
				'</a>'
			),
		),
		array(
			'title' => __('How do I get help without sharing private store data?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				/* translators: 1: opening anchor tag, 2: closing anchor tag */
				__('Use the %1$sWordPress.org Support Forum%2$s to ask questions and get help from our team without exposing your store\'s private data.', 'preciousuite-metal-rate-charts'),
				'<a href="https://wordpress.org/support/plugin/preciousuite-gold-savings-scheme/" target="_blank" rel="noopener noreferrer">',
				'</a>'
			),
		),
	);
}

if (isset($preciousuite_modules['gold-price'])) {
	$preciousuite_goldfaqs = array(
		array(
			'title' => __('What does this plugin do?', 'preciousuite-metal-rate-charts'),
			'answer' => __('It automatically calculates WooCommerce product prices based on a globally set price per gram for Gold, Silver, or Platinum, multiplied by the weight of each product. It\'s ideal for stores selling jewelry, bullion, crafts, or other precious metals.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Can I set different metal types for different products?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Yes. You can select Gold, Silver, or Platinum for each individual product or variation.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Does the plugin support variable products with different weights?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Yes. It works with both simple and variable products. Each variation can have its own weight and its pricing will be calculated accordingly.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('How do I update metal prices?', 'preciousuite-metal-rate-charts'),
			'answer' => __('You can define and update the current price per gram for Gold, Silver, and Platinum globally via the plugin\'s settings page.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Will product prices update automatically when metal prices change?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Yes. When you update the global metal prices in the settings, product prices are automatically recalculated using the new rates.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Does the free version automatically fetch live metal prices from the internet?', 'preciousuite-metal-rate-charts'),
			'answer' => __('No, the free version requires you to manually enter the global metal prices. Live Metal Price Integration (fetching rates via APIs) is available in the Premium version.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Is the plugin compatible with the latest WooCommerce versions?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Yes, it is regularly tested and updated for compatibility with the latest WooCommerce and WordPress versions. (Requires at least WordPress 5.7 and PHP 7.4).', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Is there a Premium version available and what does it include?', 'preciousuite-metal-rate-charts'),
			'answer' => __('Yes, the Premium version includes advanced automation and pricing features such as:<br><br>Live Metal Price Integration: Automatically fetch Gold, Silver, and Platinum rates using APIs.<br>Custom Margin Settings: Add profit margins to metal pricing calculations.<br>Making Charges: Apply fixed or percentage-based making charges.<br>Custom Metal Types: Add additional metals or materials.<br>Price History: Track and analyze historical metal price trends.', 'preciousuite-metal-rate-charts'),
		),
		array(
			'title' => __('Can I get custom features like GST calculation or stone weight support?', 'preciousuite-metal-rate-charts'),
			'answer' => sprintf(
				// translators: 1: email link opening, 2: email link closing
				__('Yes, the plugin author offers custom development services for specific business requirements like making/wastage charges, tax calculations, stone weight/price support, and custom pricing formulas. You can contact them at %1$skavavimal@gmail.com%2$s.', 'preciousuite-metal-rate-charts'),
				'<a href="mailto:kavavimal@gmail.com">',
				'</a>'
			),
		),
	);
}

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$faqs = array(
	array(
		'title' => __('How do I configure the API key to get live metal rates?', 'preciousuite-metal-rate-charts'),
		'answer' => __('You don\'t need to configure one! The plugin comes with a pre-configured, hardcoded API key provided directly by Preciousuite. Once you activate the plugin, it automatically connects to the Preciousuite Portal API and starts fetching rates immediately.', 'preciousuite-metal-rate-charts'),
	),
	array(
		'title' => __('How do I display the metal rate charts on my website?', 'preciousuite-metal-rate-charts'),
		'answer' => __('The plugin provides four distinct shortcodes: [pmrcgold_widget1] (header/footer bar), [pmrcgold_widget2] (tabular spot prices), [pmrcgold_widget3] (historical chart), and [pmrcgold_widget4] (purity table). You can place them anywhere on your pages, posts, or sidebars.', 'preciousuite-metal-rate-charts'),
	),
	array(
		'title' => __('Why is my historical chart (Widget 3) empty or not displaying properly?', 'preciousuite-metal-rate-charts'),
		'answer' => __('Widget 3 relies on the plugin\'s internal "Daily Price Logs" to build the historical graph. If you just installed the plugin, it only has one day of data. Please allow the plugin to run and successfully fetch daily prices for at least a few days so it has enough historical data points.', 'preciousuite-metal-rate-charts'),
	),
	array(
		'title' => __('How often are the metal prices updated?', 'preciousuite-metal-rate-charts'),
		'answer' => __('The prices are updated once a day. The plugin sets up a background task (a WordPress Daily Cron job) that runs at 01:00:00 every day to fetch the latest rates and save them to your database.', 'preciousuite-metal-rate-charts'),
	),
	array(
		'title' => __('Can I see the history of the API prices being fetched?', 'preciousuite-metal-rate-charts'),
		'answer' => __('Yes, there is a built-in "Price Log" page in your WordPress admin dashboard that stores up to 50 of the most recent daily API responses.', 'preciousuite-metal-rate-charts'),
	),
	array(
		'title' => __('Can I customize which metals and currencies are displayed?', 'preciousuite-metal-rate-charts'),
		'answer' => __('Absolutely. Under Preciousuite > Widget Settings, there are dedicated configuration tabs for each widget. You can select specific metals (Gold, Silver, Platinum) and target currencies for each one.', 'preciousuite-metal-rate-charts'),
	),
	array(
		'title' => __('Where can I find all Preciousuite shortcodes?', 'preciousuite-metal-rate-charts'),
		'answer' => sprintf(
			// translators: 1: documentation opening link, 2: closing link.
			__('You can find all available shortcodes in our %1$sdocumentation%2$s.', 'preciousuite-metal-rate-charts'),
			'<a href="https://www.preciousuite.com/docs/#preciousuite-metal-rate-charts" target="_blank" rel="noopener noreferrer">',
			'</a>'
		),
	),
	array(
		'title' => __('How do I get help without sharing private store data?', 'preciousuite-metal-rate-charts'),
		'answer' => sprintf(
			// translators: 1: WordPress.org Support Forum opening link, 2: closing link.
			__('Use the %1$sWordPress.org Support Forum%2$s to ask questions and get help from our team without exposing your store\'s private data.', 'preciousuite-metal-rate-charts'),
			'<a href="https://wordpress.org/support/plugin/preciousuite-metal-rate-charts/" target="_blank" rel="noopener noreferrer">',
			'</a>'
		),
	),
);
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$resources = array(
	array(
		'title' => __('Preciousuite documentation', 'preciousuite-metal-rate-charts'),
		'description' => __('Setup guides for pricing, buyback quotes, invoices, certificates, and shortcodes.', 'preciousuite-metal-rate-charts'),
		'url' => 'https://www.preciousuite.com/docs/#preciousuite-metal-rate-charts',
		'label' => __('Open docs', 'preciousuite-metal-rate-charts'),
		'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>',
	),
	array(
		'title' => __('Tutorial library', 'preciousuite-metal-rate-charts'),
		'description' => __('Step-by-step walkthroughs for common jewelry store workflows and frontend setup.', 'preciousuite-metal-rate-charts'),
		'url' => 'https://www.youtube.com/@preciousuite',
		'label' => __('View tutorials', 'preciousuite-metal-rate-charts'),
		'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>',
	),
	array(
		'title' => __('WordPress.org support', 'preciousuite-metal-rate-charts'),
		'description' => __('Ask product questions, report issues, and follow public support replies from the plugin team.', 'preciousuite-metal-rate-charts'),
		'url' => 'https://wordpress.org/support/plugin/preciousuite-metal-rate-charts/',
		'label' => __('Visit forum', 'preciousuite-metal-rate-charts'),
		'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>',
	),
);
?>

<div class="wrap precioussuite-wrap preciousuite-wrap preciousuite-support-page">
	<div class="preciousuite-support-shell">
		<main class="preciousuite-support-main">
			<section class="preciousuite-support-hero"
				style="display: flex; justify-content: space-between; align-items: center; gap: 20px;">
				<div class="preciousuite-support-hero-text">
					<h1><?php esc_html_e('Support', 'preciousuite-metal-rate-charts'); ?></h1>
					<p><?php esc_html_e('Find setup answers, learn the recommended jewelry business workflow, and open the right resource for each Preciousuite tool.', 'preciousuite-metal-rate-charts'); ?>
					</p>
				</div>
				<div class="preciousuite-support-hero-image">
					<img src="<?php echo esc_url(PMRCGOLD_URL . 'includes/precioussuite/assets/' . 'uploads/support-illustration.png'); ?>"
						alt="<?php esc_attr_e('Support Illustration', 'preciousuite-metal-rate-charts'); ?>"
						style="max-width: 150px; height: auto; border-radius: 8px;" />
				</div>
			</section>

			<section class="preciousuite-support-section preciousuite-faq-section">
				<div class="preciousuite-support-intro">
					<h2><?php esc_html_e('Frequently Asked Questions: Metal Rate Charts', 'preciousuite-metal-rate-charts'); ?>
					</h2>
					<p><?php esc_html_e('Start here when you need help with rates, widgets, quotes, invoices, certificates, or shortcodes.', 'preciousuite-metal-rate-charts'); ?>
					</p>
				</div>

				<div class="preciousuite-faq-list">
					<?php foreach ($faqs as $faq): ?>
						<div class="preciousuite-faq-item">
							<a href="#" class="preciousuite-faq-toggle" aria-expanded="false">
								<?php echo esc_html($faq['title']); ?>
								<span aria-hidden="true">-&gt;</span>
							</a>
							<div class="preciousuite-faq-content" style="display: none;">
								<p><?php echo wp_kses_post($faq['answer']); ?></p>
							</div>
						</div>
					<?php endforeach; ?>
				</div>

				<?php if (isset($preciousuite_modules['gold-price'])) { ?>
					<div class="preciousuite-support-intro other-plugin-support-faq">
						<h2><?php esc_html_e('Frequently Asked Questions: Gold Price Based on Weight', 'preciousuite-metal-rate-charts'); ?>
						</h2>
						<p><?php esc_html_e('Here are some common questions and answers about the Gold Price Based on Weight WooCommerce plugin:', 'preciousuite-metal-rate-charts'); ?>
						</p>
					</div>
					<div class="preciousuite-faq-list">
						<?php foreach ($preciousuite_goldfaqs as $faq): ?>
							<div class="preciousuite-faq-item">
								<a href="#" class="preciousuite-faq-toggle" aria-expanded="false">
									<?php echo esc_html($faq['title']); ?>
									<span aria-hidden="true">-&gt;</span>
								</a>
								<div class="preciousuite-faq-content" style="display: none;">
									<p><?php echo wp_kses_post($faq['answer']); ?></p>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				<?php } ?>

				<?php if (isset($preciousuite_modules['buyback-calculator'])) { ?>
					<div class="preciousuite-support-intro other-plugin-support-faq other-plugin-support-faq">
						<h2><?php esc_html_e('Frequently Asked Questions: Gold BuyBack Quote Calculator', 'preciousuite-metal-rate-charts'); ?>
						</h2>
						<p><?php esc_html_e('Here are some common questions and answers about the Gold BuyBack Quote Calculator WooCommerce plugin:', 'preciousuite-metal-rate-charts'); ?>
						</p>
					</div>
					<div class="preciousuite-faq-list">
						<?php foreach ($preciousuite_buybackfaqs as $faq): ?>
							<div class="preciousuite-faq-item">
								<a href="#" class="preciousuite-faq-toggle" aria-expanded="false">
									<?php echo esc_html($faq['title']); ?>
									<span aria-hidden="true">-&gt;</span>
								</a>
								<div class="preciousuite-faq-content" style="display: none;">
									<p><?php echo wp_kses_post($faq['answer']); ?></p>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				<?php } ?>

				<?php if (isset($preciousuite_modules['invoice-generator'])) { ?>
					<div class="preciousuite-support-intro other-plugin-support-faq other-plugin-support-faq">
						<h2><?php esc_html_e('Frequently Asked Questions: Jewelry Invoice & Certificate Generator', 'preciousuite-metal-rate-charts'); ?>
						</h2>
						<p><?php esc_html_e('Here are some common questions and answers about the Jewelry Invoice & Certificate Generator WooCommerce plugin:', 'preciousuite-metal-rate-charts'); ?>
						</p>
					</div>
					<div class="preciousuite-faq-list">
						<?php foreach ($preciousuite_invoicefaqs as $faq): ?>
							<div class="preciousuite-faq-item">
								<a href="#" class="preciousuite-faq-toggle" aria-expanded="false">
									<?php echo esc_html($faq['title']); ?>
									<span aria-hidden="true">-&gt;</span>
								</a>
								<div class="preciousuite-faq-content" style="display: none;">
									<p><?php echo wp_kses_post($faq['answer']); ?></p>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				<?php } ?>

				<?php if (isset($preciousuite_modules['gold-savings-scheme'])) { ?>
					<div class="preciousuite-support-intro other-plugin-support-faq other-plugin-support-faq">
						<h2><?php esc_html_e('Frequently Asked Questions: Gold Savings Scheme', 'preciousuite-metal-rate-charts'); ?>
						</h2>
						<p><?php esc_html_e('Here are some common questions and answers about the Gold Savings Scheme WooCommerce plugin:', 'preciousuite-metal-rate-charts'); ?>
						</p>
					</div>
					<div class="preciousuite-faq-list">
						<?php foreach ($preciousuite_gssfaqs as $faq): ?>
							<div class="preciousuite-faq-item">
								<a href="#" class="preciousuite-faq-toggle" aria-expanded="false">
									<?php echo esc_html($faq['title']); ?>
									<span aria-hidden="true">-&gt;</span>
								</a>
								<div class="preciousuite-faq-content" style="display: none;">
									<p><?php echo wp_kses_post($faq['answer']); ?></p>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				<?php } ?>

				<script>
					document.addEventListener('DOMContentLoaded', function () {
						const toggles = document.querySelectorAll('.preciousuite-faq-toggle');
						toggles.forEach(toggle => {
							toggle.addEventListener('click', function (e) {
								e.preventDefault();
								const content = this.nextElementSibling;
								const isExpanded = this.getAttribute('aria-expanded') === 'true';

								// Close all others
								toggles.forEach(t => {
									if (t !== this) {
										t.setAttribute('aria-expanded', 'false');
										t.classList.remove('active');
										t.nextElementSibling.style.display = 'none';
									}
								});

								// Toggle current
								this.setAttribute('aria-expanded', !isExpanded);
								this.classList.add('active');
								content.style.display = isExpanded ? 'none' : 'block';
							});
						});
					});
				</script>
			</section>

			<section class="preciousuite-support-section">
				<div class="preciousuite-support-intro">
					<h2><?php esc_html_e('Additional resources', 'preciousuite-metal-rate-charts'); ?></h2>
					<p><?php esc_html_e('Use these resources to finish setup, troubleshoot safely, and learn the full Preciousuite workflow.', 'preciousuite-metal-rate-charts'); ?>
					</p>
				</div>

				<div class="preciousuite-resource-grid">
					<?php
					// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
					foreach ($resources as $resource): ?>
						<article class="preciousuite-resource-card">
							<div class="preciousuite-resource-art" aria-hidden="true">
								<?php
								// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
								echo $resource['icon'];
								?>
							</div>
							<div>
								<h3><?php echo esc_html($resource['title']); ?></h3>
								<p><?php echo esc_html($resource['description']); ?></p>
								<a href="<?php echo esc_url($resource['url']); ?>" target="_blank"
									rel="noopener noreferrer">
									<?php echo esc_html($resource['label']); ?>
								</a>
							</div>
						</article>
					<?php endforeach; ?>
				</div>
			</section>

			<section class="preciousuite-support-section preciousuite-contact-panel">
				<div>
					<h2><?php esc_html_e('Contact support', 'preciousuite-metal-rate-charts'); ?></h2>
					<p><?php esc_html_e('For setup questions, include the plugin name, the admin page you are using, and what you expected to happen. Please avoid sharing API keys, passwords, or customer data.', 'preciousuite-metal-rate-charts'); ?>
					</p>
				</div>
				<a class="button button-primary"
					href="https://wordpress.org/support/plugin/preciousuite-metal-rate-charts/" target="_blank"
					rel="noopener noreferrer"><?php esc_html_e('Open Support Forum', 'preciousuite-metal-rate-charts'); ?></a>
			</section>
		</main>

		<aside class="preciousuite-dashboard-sidebar preciousuite-support-sidebar">
			<section class="preciousuite-sidebar-card preciousuite-pro-card">
				<h2>
					<?php esc_html_e('Preciousuite Pro Bundle', 'preciousuite-metal-rate-charts'); ?>
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2"
						stroke-linecap="round" stroke-linejoin="round">
						<path d="M6 3h12l4 6-10 12L2 9l4-6z"></path>
						<path d="M2 9h20"></path>
						<path d="M12 21L8 9"></path>
						<path d="M12 21l4-12"></path>
						<path d="M6 3l2 6"></path>
						<path d="M18 3l-2 6"></path>
					</svg>
				</h2>
				<p class="plugin-left-side-card-desc">
					<?php esc_html_e('Grow your jewelry store with advanced pricing, premium templates, and priority support.', 'preciousuite-metal-rate-charts'); ?>
				</p>
				<div class="preciousuite-pro-features">
					<div class="preciousuite-pro-feature">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="#10b981" stroke="#ffffff"
							stroke-width="2">
							<circle cx="12" cy="12" r="11" stroke="none" />
							<path d="M8 12.5l3 3 5-6" />
						</svg>
						<span><?php esc_html_e('Advanced product pricing workflows', 'preciousuite-metal-rate-charts'); ?></span>
					</div>
					<div class="preciousuite-pro-feature">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="#10b981" stroke="#ffffff"
							stroke-width="2">
							<circle cx="12" cy="12" r="11" stroke="none" />
							<path d="M8 12.5l3 3 5-6" />
						</svg>
						<span><?php esc_html_e('Professional invoice and certificate templates', 'preciousuite-metal-rate-charts'); ?></span>
					</div>
					<div class="preciousuite-pro-feature">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="#10b981" stroke="#ffffff"
							stroke-width="2">
							<circle cx="12" cy="12" r="11" stroke="none" />
							<path d="M8 12.5l3 3 5-6" />
						</svg>
						<span><?php esc_html_e('Priority support for setup questions', 'preciousuite-metal-rate-charts'); ?></span>
					</div>
				</div>
				<a class="button button-primary" href="https://preciousuite.com/products"
					target="_blank"><?php esc_html_e('View Upgrade', 'preciousuite-metal-rate-charts'); ?></a>
				<small><?php esc_html_e('Optional bundle features. No forced upsells.', 'preciousuite-metal-rate-charts'); ?></small>
			</section>

			<section class="preciousuite-sidebar-card preciousuite-quick-actions">
				<h2>
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2"
						stroke-linecap="round" stroke-linejoin="round">
						<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
						<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
					</svg>
					<?php esc_html_e('Quick Actions', 'preciousuite-metal-rate-charts'); ?>
				</h2>
				<div class="preciousuite-action-list">
					<a href="https://www.preciousuite.com/docs/#preciousuite-metal-rate-charts" target="_blank"
						rel="noopener noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
							<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
						</svg>
						<?php esc_html_e('Documentation', 'preciousuite-metal-rate-charts'); ?>
					</a>
					<a href="https://www.youtube.com/@preciousuite" target="_blank" rel="noopener noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<circle cx="12" cy="12" r="10"></circle>
							<polygon points="10 8 16 12 10 16 10 8"></polygon>
						</svg>
						<?php esc_html_e('Tutorials', 'preciousuite-metal-rate-charts'); ?>
					</a>
					<a href="https://wordpress.org/support/plugin/preciousuite-metal-rate-charts/" target="_blank"
						rel="noopener noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<path
								d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
							</path>
						</svg>
						<?php esc_html_e('Support Forum', 'preciousuite-metal-rate-charts'); ?>
					</a>
					<a href="https://wordpress.org/support/plugin/preciousuite-metal-rate-charts/reviews/"
						target="_blank" rel="noopener noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<polygon
								points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
							</polygon>
						</svg>
						<?php esc_html_e('Leave Review', 'preciousuite-metal-rate-charts'); ?>
					</a>
				</div>
			</section>

			<section class="preciousuite-sidebar-card preciousuite-learn-card">
				<h2>
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2"
						stroke-linecap="round" stroke-linejoin="round">
						<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
						<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
					</svg>
					<?php esc_html_e('Learn Preciousuite', 'preciousuite-metal-rate-charts'); ?>
				</h2>
				<p><?php esc_html_e('Connect pricing, buyback quotes, invoices, and certificates into one clean jewelry store workflow.', 'preciousuite-metal-rate-charts'); ?>
				</p>
				<a href="https://www.preciousuite.com/docs/#preciousuite-metal-rate-charts" target="_blank"
					rel="noopener noreferrer"
					class="preciousuite-link"><?php esc_html_e('View documentation', 'preciousuite-metal-rate-charts'); ?>
					&rarr;</a>
			</section>
		</aside>
	</div>
</div>
<?php
// phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound