// Contact page for Blue North Accounting

function ContactHero() {
  return (
    <section className="hero-stage">
      <HeroBG />
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="contact-grid">
          <div>
            <span className="eyebrow reveal">Contact</span>
            <h1 className="reveal" style={{ marginTop: 24, fontSize: 'clamp(44px, 6.5vw, 88px)', letterSpacing: '-0.035em' }}>
              Let's talk<br />
              <span className="hs-em">about your books.</span>
            </h1>
            <p className="lead reveal" style={{ marginTop: 32, maxWidth: '46ch' }}>
              Book a free 30-minute discovery call below, or reach us directly —
              we respond within one business day.
            </p>
          </div>

          <div>
            <div className="contact-info reveal">
              <div className="contact-info-row">
                <span className="numlabel">EMAIL</span>
                <a href="mailto:info@bluenorthaccounting.ca">info@bluenorthaccounting.ca</a>
              </div>
              <div className="contact-info-row">
                <span className="numlabel">OFFICE</span>
                <span>Cloud-first · Serving all of Canada</span>
              </div>
              <div className="contact-info-row">
                <span className="numlabel">HOURS</span>
                <span>Mon–Fri · 8:30 — 17:00 ET</span>
              </div>
            </div>

            <a href="#book" className="btn reveal" style={{ marginTop: 36 }}>
              Book a 30-minute call <span className="arrow">↓</span>
            </a>
          </div>
        </div>
      </div>
      <style>{`
        .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
        @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
        .contact-info { padding-top: 24px; border-top: 1px solid rgba(140,175,255,0.18); display: flex; flex-direction: column; gap: 14px; }
        .contact-info-row { display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: center; font-size: 15.5px; color: rgba(224,233,255,0.85); }
        .contact-info-row a { color: #eef2fb; border-bottom: 1px solid rgba(140,175,255,0.32); }
        .contact-info-row a:hover { border-color: #6d8bff; color: #a9c1ff; }
        @media (min-width: 901px) { .contact-grid > div:last-child { margin-top: 72px; } }
      `}</style>
    </section>
  );
}

const CALENDLY_URL = 'https://calendly.com/bluenorthaccounting/30min';

function CalendlyBand() {
  const holder = React.useRef(null);

  React.useEffect(() => {
    let timer = null;
    const init = () => {
      if (window.Calendly && holder.current && !holder.current.firstChild) {
        window.Calendly.initInlineWidget({
          url: `${CALENDLY_URL}?hide_gdpr_banner=1`,
          parentElement: holder.current,
        });
      }
      return !!(holder.current && holder.current.firstChild);
    };
    // widget.js loads async — poll until Calendly is available
    if (!init()) timer = setInterval(() => { if (init()) clearInterval(timer); }, 150);
    return () => { if (timer) clearInterval(timer); };
  }, []);

  return (
    <section id="book">
      <div className="wrap">
        <span className="eyebrow reveal">Book a call</span>
        <h2 className="reveal" style={{ marginTop: 16, fontSize: 'clamp(32px, 4vw, 48px)' }}>
          Grab a time<br />
          <span style={{ fontStyle: 'italic', color: 'var(--ink-3)', fontWeight: 400 }}>that works for you.</span>
        </h2>
        <p className="reveal" style={{ marginTop: 20, color: 'var(--ink-2)', maxWidth: '52ch' }}>
          Pick a slot below for a free 30-minute discovery call. It books straight
          into our calendar and you'll get a confirmation email right away.
        </p>

        <div className="calendly-card reveal">
          <div ref={holder} className="calendly-holder" />
        </div>
        <p className="numlabel" style={{ marginTop: 16, textAlign: 'center', opacity: 0.7 }}>
          Calendar not loading?{' '}
          <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" style={{ borderBottom: '1px solid var(--rust)' }}>
            Open the booking page in a new tab ↗
          </a>
        </p>
      </div>
      <style>{`
        .calendly-card {
          margin-top: 40px; background: var(--paper); border: 1px solid var(--line);
          border-radius: 22px; overflow: hidden;
        }
        .calendly-holder { width: 100%; height: 720px; }
        .calendly-holder iframe { display: block; }
        @media (max-width: 640px) { .calendly-holder { height: 900px; } }
      `}</style>
    </section>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav active="contact" />
      <main>
        <ContactHero />
        <CalendlyBand />
      </main>
      <Footer />
      <TweaksHost />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);