// Slim final-CTA used on interior pages — dark slab, big text, one or two buttons.

function PageCTA({ kicker, title, primary = 'Start free', primaryHref = 'https://app.vantuz.co/login', secondary, secondaryHref = '/contact' }) {
  return (
    <section className="bg-ink" style={{position:'relative', padding:'140px 0 160px', borderTop:'1px solid var(--ink-line)', overflow:'hidden'}}>
      <div style={{
        position:'absolute', inset:0, opacity:.4,
        background:'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(74,109,245,.22), transparent 65%)',
        pointerEvents:'none',
      }}/>
      <div className="grid-fine" style={{position:'absolute', inset:0, opacity:.25, pointerEvents:'none'}}/>

      <div className="wrap" style={{position:'relative', textAlign:'center'}}>
        {kicker && (
          <div className="mono" style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--txt-3)', marginBottom:24}}>
            {kicker}
          </div>
        )}
        <h2 className="display" style={{
          fontSize:'clamp(48px, 6.8vw, 112px)', margin:'0 auto', maxWidth: 1100, color:'#fff',
          letterSpacing:'-.035em', fontWeight:700, lineHeight:.98,
        }}>
          {title}
        </h2>

        <div style={{display:'flex', gap:12, marginTop:48, justifyContent:'center', flexWrap:'wrap'}}>
          <a href={primaryHref} className="btn btn-lg btn-white">{primary} <span aria-hidden>→</span></a>
          {secondary && <a href={secondaryHref} className="btn btn-lg btn-outline-white">{secondary}</a>}
        </div>

        <div className="mono" style={{fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--txt-4)', marginTop:32}}>
          EU data residency · NIS2-ready · No agent on your network
        </div>
      </div>
    </section>
  );
}

window.PageCTA = PageCTA;