// Guarantee — black ink-block with big red type

function Guarantee(){
  return (
    <section className="sec ink-block guarantee">
      <div className="wrap">
        <div className="grt reveal">
          <div className="grt-seal" aria-hidden="true">
            <svg viewBox="0 0 100 100" width="100" height="100">
              <defs>
                <path id="circlePath" d="M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0"/>
              </defs>
              <circle cx="50" cy="50" r="46" fill="none" stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 4"/>
              <circle cx="50" cy="50" r="36" fill="none" stroke="var(--accent)" strokeOpacity=".4"/>
              <text fontFamily="JetBrains Mono, monospace" fontSize="7" fill="var(--accent)" letterSpacing="2">
                <textPath href="#circlePath" startOffset="0">100% RESULT GUARANTEE · MONEY BACK · 90 DAYS · </textPath>
              </text>
              <g transform="translate(50,50)">
                <path d="M-12,-2 L-4,6 L12,-10" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
              </g>
            </svg>
          </div>

          <div className="grt-body">
            <span className="eyebrow">Гарантия</span>
            <h2 className="grt-h">
              Нет результата<br/>за 3 месяца —<br/>
              <span className="em-red">вернём деньги.</span>
            </h2>
            <p className="lead" style={{maxWidth:560,color:'var(--fg-2)'}}>
              Если за 90 дней вы не увидите результата — возвращаем 100% стоимости.
              Условия фиксируются в договоре, никаких звёздочек и скрытых пунктов.
            </p>
            <div className="grt-cta">
              <a href="#cta" className="btn primary">Получить договор-оферту <Arrow/></a>
              <a href="#faq" className="btn ghost">Подробнее об условиях</a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .guarantee{background:var(--bg)}
        .grt{
          position:relative;overflow:hidden;
          background:
            radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 50%),
            var(--surface);
          border:1px solid var(--line-2);border-radius:28px;padding:56px 48px;
          display:grid;grid-template-columns:1fr;gap:32px;
        }
        @media (min-width:780px){
          .grt{padding:72px 80px;grid-template-columns:1fr auto;align-items:center;gap:64px}
        }
        .grt-seal{display:flex;justify-content:center;order:-1}
        @media (min-width:780px){.grt-seal{order:2}}
        .grt-seal svg{
          width:220px;height:220px;animation:spin 28s linear infinite;
        }
        .grt-h{margin:18px 0 24px;font-size:clamp(36px,5.5vw,68px);color:var(--fg)}
        .grt-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
      `}</style>
    </section>
  );
}

window.Guarantee = Guarantee;