// Pretty Rare — "Not sure what to book?" consultation block (distinct dark band)

const INCLUDES = [
  'Your goals and relevant medical history',
  'A proper look at your skin and features',
  'Honest advice on your options, including none',
  'Clear pricing before anything is booked',
];

function SiteConsult({ onBook }) {
  return (
    <section data-screen-label="consult" style={{
      background: 'var(--bg-ink)', color: 'var(--fg-on-dark)',
      padding: '104px 0',
    }}>
      <div className="wrap" style={{
        display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 88, alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 12, letterSpacing: '0.2em',
            textTransform: 'uppercase', color: 'var(--pr-blush-300)', marginBottom: 26,
            display: 'inline-flex', alignItems: 'center', gap: 11,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--pr-blush-400)' }} />
            Where to start
          </div>

          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(34px, 4vw, 58px)', lineHeight: 1.05,
            letterSpacing: '-0.016em', color: 'var(--pr-white)', margin: 0, textWrap: 'balance',
          }}>
            Not sure{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--pr-blush-300)' }}>where to start?</span>
          </h2>

          <p style={{
            fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 17,
            lineHeight: 1.7, color: 'rgba(252,245,249,0.82)', margin: '24px 0 0 0', maxWidth: 480,
          }}>
            If you’re unsure which appointment is right for you, start with a consultation.
            We’ll discuss your concerns, assess suitability, and guide you through your
            options in a calm, no-pressure setting.
          </p>

          <div style={{ marginTop: 38, display: 'flex', gap: 22, alignItems: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn--cream-fill btn--lg" onClick={onBook}>Book a Consultation</button>
            <span style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 19,
              color: 'var(--pr-blush-300)',
            }}>we’ll never rush you</span>
          </div>
        </div>

        <div style={{
          borderLeft: '1px solid rgba(252,245,249,0.18)', paddingLeft: 48,
        }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 12.5, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'rgba(252,245,249,0.6)', marginBottom: 22,
          }}>In your consultation</div>
          {INCLUDES.map((x, i) => (
            <div key={i} style={{
              display: 'flex', gap: 14, alignItems: 'flex-start',
              padding: '15px 0',
              borderBottom: i < INCLUDES.length - 1 ? '1px solid rgba(252,245,249,0.12)' : 'none',
            }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 15,
                color: 'var(--pr-blush-300)', flexShrink: 0, width: 22,
              }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{
                fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.45,
                color: 'rgba(252,245,249,0.92)',
              }}>{x}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteConsult = SiteConsult;