<?php
/**
 * Чек-лист готовности к школе (микро-коммитмент)
 * .bento .pksh-section .bento-card--checklist
 *
 * @package Dekart
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<section class="bento pksh-section" aria-label="Скачать чек-лист">
	<div class="bento__full bento-card bento-card--checklist">
		<div class="micro-commit">
			<div class="micro-commit__content">
				<span class="bento-label">Бесплатно</span>
				<h2 class="bento-h2">Скачайте чек-лист готовности к школе</h2>
				<p class="bento-p">10 признаков, что ваш ребёнок готов к 1-му классу. Проверьте за 5 минут — и узнайте, на какие навыки обратить внимание.</p>
				<div class="micro-commit__action">
					<button class="btn-primary btn-write micro-commit__btn">Получить чек-лист бесплатно</button>
				</div>
			</div>
			<div class="micro-commit__visual">
				<svg class="micro-commit__svg" viewBox="0 0 130 170" fill="none" aria-hidden="true">
					<rect x="8" y="4" width="114" height="162" rx="8" fill="white" stroke="#DED3C0" stroke-width="1.2"/>
					<rect x="24" y="20" width="82" height="4" rx="2" fill="#7C3AED" opacity="0.15"/>
					<rect x="24" y="38" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
					<path d="M26 44l3 3 5-5" stroke="#7C3AED" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
					<rect x="44" y="40" width="50" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>
					<rect x="24" y="62" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
					<path d="M26 68l3 3 5-5" stroke="#7C3AED" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
					<rect x="44" y="64" width="62" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>
					<rect x="24" y="86" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
					<rect x="44" y="88" width="42" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>
					<rect x="24" y="110" width="12" height="12" rx="3" fill="#7C3AED" opacity="0.15"/>
					<rect x="44" y="112" width="56" height="3" rx="1.5" fill="#DED3C0" opacity="0.6"/>
					<g transform="translate(92, 130) rotate(-30)">
						<rect x="0" y="0" width="6" height="28" rx="1" fill="#7C3AED" opacity="0.12"/>
						<polygon points="0,0 6,0 3,-6" fill="#7C3AED" opacity="0.15"/>
					</g>
				</svg>
			</div>
		</div>
	</div>
</section>
