// Pretty Rare Boutique — Final CTA

function SiteCTA({ onBook }) {
  const mobile = useMobile();
  return (
    <section data-screen-label="cta" style={{
      position: 'relative',
      minHeight: mobile ? 420 : 540,
      backgroundImage: `linear-gradient(rgba(11, 11, 11, 0.42), rgba(11, 11, 11, 0.58)), url('assets/imagery/interior-03.jpg')`,
      backgroundSize: 'cover', backgroundPosition: 'center',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: mobile ? '80px 24px' : '120px 32px',
      textAlign: 'center',
      overflow: 'hidden',
    }}>
      {/* Blush halo glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, rgba(220, 156, 173, 0.12) 0%, transparent 65%)',
        pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 780, position: 'relative', zIndex: 1 }}>
        {/* Script accent above headline */}
        <div style={{
          fontFamily: 'var(--font-script)',
          fontSize: mobile ? 40 : 56,
          color: 'rgba(248, 220, 225, 0.7)',
          lineHeight: 1.1,
          marginBottom: 4,
        }}>
          Whenever you are ready
        </div>

        <h2 className="h-display" style={{ color: 'var(--pr-off-100)' }}>
          We would love<br/>
          <span className="thin" style={{ color: 'var(--pr-blush-300)' }}>to meet you.</span>
        </h2>

        <p style={{
          fontFamily: 'var(--font-sans)', fontWeight: 300,
          fontSize: mobile ? 15 : 17, lineHeight: 1.75,
          color: 'rgba(248, 245, 244, 0.8)',
          maxWidth: 460, margin: mobile ? '20px auto 0' : '28px auto 0',
        }}>
          Start with a complimentary 20-minute consultation. No commitment, no pressure. Just a conversation.
        </p>

        <div style={{ marginTop: mobile ? 36 : 44, display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: 16, justifyContent: 'center', alignItems: 'center' }}>
          <a href="https://prettyrareboutique.gettimely.com" target="_blank" rel="noopener noreferrer"
            className="btn btn--cream"
            style={{ textDecoration: 'none', boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}>
            Book a complimentary consultation
          </a>
          <a href="sms:+61450466052" style={{
            fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.22em',
            textTransform: 'uppercase', fontWeight: 500,
            color: 'rgba(248, 245, 244, 0.65)',
            paddingBottom: 3, borderBottom: '1px solid rgba(248, 245, 244, 0.3)',
            textDecoration: 'none',
            transition: 'color 220ms, border-color 220ms',
          }}>Or text us · 0450 466 052</a>
        </div>

        {/* Trust micro-strip */}
        <div style={{
          marginTop: 40,
          display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap',
          fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: 'rgba(248, 245, 244, 0.45)',
          fontWeight: 500,
        }}>
          {['Registered Nurse', 'Complimentary consultation', 'Palm Beach GC'].map((t, i) => (
            <React.Fragment key={t}>
              {i > 0 && <span style={{ opacity: 0.4 }}>·</span>}
              <span>{t}</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteCTA = SiteCTA;