const { Button, Kicker } = window.GrupoHaykDesignSystem_364dc7;

const CTA_CSS = `
.cta-band{ padding:70px 28px; background:var(--surface-page); }
.cta-band__in{ position:relative; max-width:var(--container-max); margin:0 auto;
  background:var(--grad-navy-green); border-radius:var(--radius-2xl); overflow:hidden;
  padding:60px 56px; color:#fff; clip-path:polygon(0 0,100% 0,100% 100%,0 92%); }
.cta-band__in::before{ content:""; position:absolute; inset:0;
  background-image:url('assets/patterns/patron-verde.svg'); background-size:200px; opacity:.4; }
.cta-band__grid{ position:relative; display:grid; grid-template-columns:1.3fr auto; gap:30px; align-items:center; }
.cta-band h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2);
  letter-spacing:-.02em; color:#fff; margin:14px 0 10px; max-width:18ch; }
.cta-band p{ font-family:var(--font-body); font-size:var(--fs-body-lg); color:var(--navy-100); margin:0; max-width:42ch; }
@media(max-width:760px){ .cta-band__grid{ grid-template-columns:1fr; } }
`;
{
  const _p = document.getElementById('cta-css'); if (_p) _p.remove();
  const s = document.createElement('style'); s.id = 'cta-css'; s.textContent = CTA_CSS; document.head.appendChild(s);
}

function QuoteCTA({ onQuote }) {
  return (
    <section className="cta-band">
      <div className="cta-band__in">
        <div className="cta-band__grid">
          <div>
            <Kicker onNavy>Empieza hoy</Kicker>
            <h2>Tu próxima entrega, con la precisión Haykù.</h2>
            <p>Cuéntanos qué mueves y a dónde. Te enviamos una cotización a la medida en menos de 24 horas.</p>
          </div>
          <Button variant="cta" size="lg" arrow onClick={onQuote}>Cotiza tu envío</Button>
        </div>
      </div>
    </section>
  );
}
window.QuoteCTA = QuoteCTA;