// Contact — dark teal section with copy/contact details on the left and
// an inline Calendly embed on the right (replacing the previous static form).

function CalendlyInline({ 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 Contact({ calendlyUrl = 'https://calendly.com/chekbooks-schedule/bookkeeping-discovery-call-zoom-meeting-clone?hide_event_type_details=1' }) {
  return (
    <section id="contact" style={{ background: '#163F34', color: '#faf9f6', padding: '100px 32px', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', bottom: -200, left: -100, width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(56,111,102,0.18), transparent 70%)',
        pointerEvents: 'none',
      }}/>
      <div className="ck-contact-grid" style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, position: 'relative', alignItems: 'center' }}>
        <div>
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#cce0de', marginBottom: 14,
          }}>READY FOR CLEAN BOOKS &amp; A BOOKKEEPER YOU CAN COUNT ON?</div>
          <h2 style={{ fontSize: 'clamp(2rem, 2.8vw, 2.75rem)', fontWeight: 700, color: '#faf9f6', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            Your books should give you confidence, <em style={{ color: '#ddb06e', fontStyle: 'italic', fontWeight: 700 }}>not questions.</em>
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', marginTop: 18, lineHeight: 1.6 }}>
            Book a free 30-minute call. We'll talk through your business, your books, and the support you need.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Phone /><span style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.85)' }}>(559) 909-3596</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Mail /><span style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.85)' }}>macen@chekbooks.com</span>
            </div>
          </div>
        </div>
        <CalendlyInline url={calendlyUrl} />
      </div>
      <style>{`
        @media (max-width: 900px) {
          #contact .ck-contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
          #contact .ck-contact-grid > div:first-child { position: static !important; text-align: center !important; }
          #contact .ck-contact-grid > div:first-child > div { justify-content: center !important; align-items: center !important; }
        }
      `}</style>
    </section>
  );
}
Object.assign(window, { Contact });