import { Button } from '@wordpress/components';

export default function HeroCard(): JSX.Element {
	const productsUrl = window.mintallKeep?.adminUrl
		? `${window.mintallKeep.adminUrl}edit.php?post_type=product`
		: '/wp-admin/edit.php?post_type=product';

	return (
		<div className="mintall-card">
			<h2>Protect Your Products</h2>
			<p style={{ color: '#50575e', marginBottom: 16 }}>
				Add C2PA credentials and protect your product photos for complete protection. Protected images get
				embedded digital provenance that AI shopping agents can discover and verify.
			</p>
			<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
				<a href={productsUrl}>
					<Button variant="primary">Protect product images</Button>
				</a>
			</div>
		</div>
	);
}