/* global React */
function CTABanner({ onQuote, heading, body, cta }) {
  const { Button } = window.VailuxuryGlassDesignSystem_8a37c5;
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1800&q=80)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        filter: 'saturate(0.82) brightness(0.5)',
      }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(12,23,25,0.78), rgba(12,23,25,0.86))' }} />
      <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '1px', background: 'var(--lit-edge-h)', opacity: 0.7 }} />

      <div style={{
        position: 'relative', maxWidth: 'var(--content-max)', margin: '0 auto',
        padding: 'clamp(4rem, 9vw, 7rem) var(--gutter)', textAlign: 'center',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '22px',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em',
          fontSize: 'var(--fs-h2)', color: 'var(--text-inv)', margin: 0, lineHeight: 1.08, maxWidth: '18ch',
        }}>{heading || 'Ready to Transform Your Space?'}</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body-l)', lineHeight: 1.6, color: 'var(--text-inv)', opacity: 0.9, margin: 0, maxWidth: '52ch' }}>
          {body || 'Discover how custom glasswork can redefine the beauty and value of your home or business.'}
        </p>
        <Button variant="primary" size="lg" withArrow onClick={onQuote}>{cta || 'Get Your Free Quote Today'}</Button>
      </div>
    </section>
  );
}
window.CTABanner = CTABanner;