import { __ } from '@wordpress/i18n';

/**
 * Static step-by-step guidance for placing Gift Wrap on the storefront.
 * Classic checkout needs no action (it's hooked in automatically); the
 * block checkout requires the merchant to manually insert the block via
 * the editor's inserter, since WooCommerce doesn't auto-place third-party
 * blocks inside the Checkout block. Comes before Diagnostics below so a
 * merchant knows what to *do* before troubleshooting why it isn't showing.
 */
export default function HowToPanel() {
	return (
		<div className="rtgw-howto">
			<div className="rtgw-howto__group">
				<h3 className="rtgw-howto__group-title">
					{ __( 'Classic checkout', 'rt-gift-wrap-for-woocommerce' ) }
					<span className="rtgw-howto__badge rtgw-howto__badge--auto">{ __( 'Automatic', 'rt-gift-wrap-for-woocommerce' ) }</span>
				</h3>
				<p className="rtgw-howto__text">
					{ __( 'Nothing to add. Once "Show the gift wrap option at checkout" is turned on below, it appears automatically above the payment section — no block or shortcode needed.', 'rt-gift-wrap-for-woocommerce' ) }
				</p>
			</div>

			<div className="rtgw-howto__group">
				<h3 className="rtgw-howto__group-title">
					{ __( 'Block checkout (Checkout block)', 'rt-gift-wrap-for-woocommerce' ) }
					<span className="rtgw-howto__badge rtgw-howto__badge--manual">{ __( 'Manual — one time', 'rt-gift-wrap-for-woocommerce' ) }</span>
				</h3>
				<p className="rtgw-howto__text">
					{ __( 'WooCommerce doesn\u2019t auto-place third-party blocks, so add it once in the page editor:', 'rt-gift-wrap-for-woocommerce' ) }
				</p>
				<ol className="rtgw-howto__steps">
					<li>
						<strong>{ __( 'Open your Checkout page for editing.', 'rt-gift-wrap-for-woocommerce' ) }</strong>
						<span>{ __( 'The compatibility check below has a direct link once it finishes running.', 'rt-gift-wrap-for-woocommerce' ) }</span>
					</li>
					<li>
						<strong>{ __( 'Click inside the checkout form, then click the + (Add block) icon.', 'rt-gift-wrap-for-woocommerce' ) }</strong>
						<span>{ __( 'Click anywhere among the existing fields — Contact information, Address, Shipping, etc. — so the new block lands in the same area.', 'rt-gift-wrap-for-woocommerce' ) }</span>
					</li>
					<li>
						<strong>{ __( 'Search for "Gift Wrap" and select it.', 'rt-gift-wrap-for-woocommerce' ) }</strong>
						<span>{ __( 'It\u2019s a real, movable block — drag it to wherever you\u2019d like it to sit among the other fields.', 'rt-gift-wrap-for-woocommerce' ) }</span>
					</li>
					<li>
						<strong>{ __( 'Update/publish the page.', 'rt-gift-wrap-for-woocommerce' ) }</strong>
						<span>{ __( 'Appearance (label, colour, layout) is controlled entirely from the settings below — the block itself has nothing to configure.', 'rt-gift-wrap-for-woocommerce' ) }</span>
					</li>
				</ol>
			</div>
		</div>
	);
}