// Pretty Rare Boutique — Final CTA + Footer (clean)

function SiteCTA({ onBook }) {
  return (
    <section data-screen-label="cta" style={{
      position: 'relative',
      minHeight: 480,
      backgroundImage: `linear-gradient(rgba(11, 11, 11, 0.45), rgba(11, 11, 11, 0.6)), url('assets/imagery/interior-03.jpg')`,
      backgroundSize: 'cover', backgroundPosition: 'center',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '120px 32px', textAlign: 'center',
      color: 'var(--pr-off-100)',
    }}>
      <div style={{ maxWidth: 820, position: 'relative' }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 11,
          letterSpacing: '0.34em', textTransform: 'uppercase',
          fontWeight: 500, color: 'rgba(248, 245, 244, 0.92)',
          marginBottom: 32,
        }}>The Pretty Rare experience awaits</div>

        <h2 className="h-display" style={{ color: 'var(--pr-off-100)' }}>
          Begin your <span className="thin" style={{ color: 'var(--pr-blush-200)' }}>Pretty Rare</span><br/>
          experience.
        </h2>

        <div style={{ marginTop: 44 }}>
          <button className="btn btn--cream" onClick={onBook}>Book a consultation</button>
        </div>
      </div>
    </section>
  );
}

function SiteFooter({ onJump }) {
  return (
    <footer data-screen-label="footer" style={{
      background: 'var(--bg)',
      padding: '72px 0 36px 0',
    }}>
      <div className="wrap">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          flexWrap: 'wrap', gap: 32, paddingBottom: 40,
          borderBottom: '1px solid var(--border)',
        }}>
          <div style={{ maxWidth: 280 }}>
            <div style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700,
              fontSize: 18, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'var(--fg)', marginBottom: 6,
            }}>Pretty Rare</div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18,
            }}>
              <span style={{ width: 16, height: 1, background: 'var(--fg)' }} />
              <span style={{
                fontFamily: 'var(--font-sans)', fontSize: 9,
                letterSpacing: '0.4em', textTransform: 'uppercase', fontWeight: 500,
                color: 'var(--fg)',
              }}>Boutique</span>
              <span style={{ width: 16, height: 1, background: 'var(--fg)' }} />
            </div>
            <p className="body body--sm" style={{ color: 'var(--fg-muted)' }}>
              A boutique cosmetic clinic in Paddington, Sydney.
            </p>
          </div>

          <FooterCol title="Discover" items={['Treatments', 'Experience', 'About', 'Visit']} onJump={onJump} />
          <FooterCol title="Contact"  items={['hello@prettyrare.com', '+61 0 0000 0000', 'Tue to Sat']} />
          <FooterCol title="Follow"   items={['Instagram', 'TikTok', 'Newsletter']} />
        </div>

        <div style={{
          marginTop: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16,
          fontFamily: 'var(--font-sans)', fontSize: 11,
          letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-muted)',
        }}>
          <div>© 2026 Pretty Rare Boutique</div>
          <div>Privacy · Terms</div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, onJump }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontWeight: 500,
        fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase',
        color: 'var(--accent)', marginBottom: 18,
      }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {items.map((l, i) => (
          <li key={i} style={{
            fontFamily: 'var(--font-sans)', fontWeight: 400,
            fontSize: 14, color: 'var(--fg)', lineHeight: 2.1,
            cursor: onJump ? 'pointer' : 'default',
          }}
          onClick={() => onJump && onJump(l.toLowerCase())}
          >{l}</li>
        ))}
      </ul>
    </div>
  );
}

window.SiteCTA = SiteCTA;
window.SiteFooter = SiteFooter;