// Slim page hero used at the top of every subpage.
// Dark teal anchor band, eyebrow + h1 + subhead, optional CTA row.
function PageHero({ eyebrow, title, italic, subhead, detail, ctas, primaryGold }) {
  return (
    <section style={{
      background: '#163F34', color: '#faf9f6', position: 'relative',
      padding: '88px 32px', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -80, right: -80, width: 480, height: 480,
        background: 'radial-gradient(circle, rgba(56,111,102,0.20), transparent 70%)',
        pointerEvents: 'none',
      }}/>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        {eyebrow && (
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: '#cce0de', marginBottom: 16,
          }}>{eyebrow}</div>
        )}
        <h1 style={{
          fontSize: 'clamp(2.25rem, 4vw, 3.75rem)', fontWeight: 800,
          letterSpacing: '-0.03em', lineHeight: 1.08, margin: 0, color: '#faf9f6',
        }}>
          {title}
          {italic && <> <em style={{ color: '#ddb06e', fontStyle: 'italic', fontWeight: 800 }}>{italic}</em></>}
        </h1>
        {subhead && (
          <p style={{
            color: 'rgba(255,255,255,0.72)', fontSize: 17, lineHeight: 1.65,
            maxWidth: 720, margin: '20px auto 0',
          }}>{subhead}</p>
        )}
        {detail && (
          <p style={{
            color: 'rgba(255,255,255,0.5)', fontSize: 14.5, lineHeight: 1.6,
            maxWidth: 600, margin: '12px auto 0', fontStyle: 'italic',
          }}>{detail}</p>
        )}
        {ctas && ctas.length > 0 && (
          <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap', justifyContent: 'center' }}>
            {ctas.map((c, i) => {
              const primary = c.variant !== 'outline';
              const gold = primary && primaryGold;
              return (
                <a key={i} href={c.href} className={primary ? 'ck-btn-primary' : ''} style={{
                  background: gold ? '#C4924A' : primary ? '#faf9f6' : 'transparent',
                  color: gold ? '#fff' : primary ? '#163F34' : '#faf9f6',
                  border: gold ? '1.5px solid #C4924A' : primary ? '1.5px solid #faf9f6' : '1.5px solid rgba(255,255,255,0.4)',
                  textDecoration: 'none',
                  padding: '11px 28px', borderRadius: 10, fontWeight: 700, fontSize: 14.5,
                  transition: 'background .2s, color .2s, border-color .2s',
                }}
                  onMouseEnter={e => {
                    if (gold) { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = '#3F8074'; e.currentTarget.style.borderColor = '#fff'; }
                    else if (primary) { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }
                    else { e.currentTarget.style.background = '#faf9f6'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#faf9f6'; }
                  }}
                  onMouseLeave={e => {
                    if (gold) { e.currentTarget.style.background = '#C4924A'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#C4924A'; }
                    else if (primary) { e.currentTarget.style.background = '#faf9f6'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#faf9f6'; }
                    else { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#faf9f6'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.4)'; }
                  }}
                >{c.label}</a>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
}

// Calendly inline embed used inside CTABand when calendar=true.
function CTABandCalendly({ url }) {
  const ref = React.useRef(null);
  const [height, setHeight] = React.useState(660);
  React.useEffect(() => {
    if (!url || !ref.current) return;
    const existing = document.querySelector('script[data-calendly]');
    if (!existing) {
      const s = document.createElement('script');
      s.src = 'https://assets.calendly.com/assets/external/widget.js';
      s.async = true;
      s.setAttribute('data-calendly', 'true');
      document.body.appendChild(s);
    } else if (window.Calendly && window.Calendly.initInlineWidget) {
      window.Calendly.initInlineWidget({ url, parentElement: ref.current });
    }
  }, [url]);
  React.useEffect(() => {
    if (document.querySelector('link[data-calendly-css]')) return;
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://assets.calendly.com/assets/external/widget.css';
    link.setAttribute('data-calendly-css', 'true');
    document.head.appendChild(link);
  }, []);
  // Snap container to the height Calendly's iframe actually needs.
  React.useEffect(() => {
    function onMessage(e) {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.event === 'calendly.page_height') {
        const raw = e.data.payload && e.data.payload.height;
        const h = typeof raw === 'number' ? raw : parseInt(raw, 10);
        if (h > 100) setHeight(h);
      }
    }
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, []);
  return (
    <div
      ref={ref}
      className="calendly-inline-widget"
      data-url={url}
      style={{
        minWidth: 320, width: '100%', height,
        borderRadius: 18, overflow: 'hidden', background: '#faf9f6',
        boxShadow: '0 20px 50px rgba(0,0,0,0.25)',
      }}
    />
  );
}

function CTABand({ eyebrow, title, italic, body, primaryHref = 'contact.html', primaryLabel = 'Book A Free Call', secondaryHref, secondaryLabel, calendar = false, calendlyUrl = 'https://calendly.com/chekbooks-schedule/30min' }) {
  return (
    <section style={{
      background: '#163F34', color: '#faf9f6', padding: '88px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', bottom: -160, left: -100, width: 500, height: 500,
        background: 'radial-gradient(circle, rgba(56,111,102,0.18), transparent 70%)',
        pointerEvents: 'none',
      }}/>
      <div style={{ maxWidth: 880, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        {eyebrow && <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#cce0de', marginBottom: 14 }}>{eyebrow}</div>}
        <h2 style={{ fontSize: 'clamp(2rem, 3vw, 2.75rem)', fontWeight: 800, color: '#faf9f6', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
          {title}{italic && <> <em style={{ color: '#ddb06e', fontStyle: 'italic', fontWeight: 800 }}>{italic}</em></>}
        </h2>
        {body && <p style={{ fontSize: 16.5, color: 'rgba(255,255,255,0.72)', marginTop: 18, lineHeight: 1.6, maxWidth: 660, margin: '18px auto 0' }}>{body}</p>}
        <div style={{ display: 'flex', gap: 12, marginTop: 30, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={primaryHref} className="ck-btn-primary" style={{
            background: '#3F8074', color: '#fff', border: '1.5px solid #3F8074',
            textDecoration: 'none', padding: '12px 30px', borderRadius: 10, fontWeight: 700, fontSize: 14.5,
            transition: 'background .2s, color .2s, border-color .2s',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#fff'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }}
          >{primaryLabel}</a>
          {secondaryHref && <a href={secondaryHref} style={{
            background: 'transparent', color: '#faf9f6', border: '1.5px solid rgba(255,255,255,0.4)',
            textDecoration: 'none', padding: '12px 28px', borderRadius: 10, fontWeight: 700, fontSize: 14.5,
          }}
            onMouseEnter={e => { e.currentTarget.style.background = '#faf9f6'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#faf9f6'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#faf9f6'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.4)'; }}
          >{secondaryLabel}</a>}
        </div>
      </div>
    </section>
  );
}

// Generic section heading block used inside content sections.
function SectionHeading({ eyebrow, title, subhead, align = 'center' }) {
  return (
    <div style={{ textAlign: align, marginBottom: 48, maxWidth: 760, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>
      {eyebrow && <div style={{
        fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: '#3F8074', marginBottom: 14,
      }}>{eyebrow}</div>}
      <h2 style={{ fontSize: 'clamp(2rem, 2.8vw, 2.75rem)', fontWeight: 800, color: '#163F34', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>{title}</h2>
      {subhead && <p style={{ fontSize: 16, color: '#3F8074', marginTop: 16, lineHeight: 1.55, fontWeight: 500 }}>{subhead}</p>}
    </div>
  );
}

Object.assign(window, { PageHero, CTABand, SectionHeading });