// site/page-contact.jsx, Book a demo / contact page
// The form is the real fairs.com JotForm (id 250585220308047) embedded
// via iframe. JotForm's embed handler auto-resizes the iframe to the
// form's content height.

const JOTFORM_ID = '250585220308047';

function JotFormEmbed() {
  React.useEffect(() => {
    // Inject JotForm's iframe handler once, then wire it to our iframe.
    const id = 'jotform-iframe-handler';
    const init = () => {
      if (window.jotformEmbedHandler) {
        window.jotformEmbedHandler(
          `iframe[id='JotFormIFrame-${JOTFORM_ID}']`,
          'https://www.jotform.com'
        );
      }
    };
    if (document.getElementById(id)) { init(); return; }
    const s = document.createElement('script');
    s.id = id;
    s.src = 'https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js';
    s.async = true;
    s.onload = init;
    document.body.appendChild(s);
  }, []);

  return (
    <iframe
      id={`JotFormIFrame-${JOTFORM_ID}`}
      title="Book a demo, Fairs.com"
      src={`https://form.jotform.com/${JOTFORM_ID}`}
      allow="geolocation; microphone; camera; fullscreen"
      allowtransparency="true"
      scrolling="no"
      style={{
        width: '100%',
        minHeight: 900,
        border: 'none',
        borderRadius: 12,
        display: 'block',
        background: 'transparent',
      }}
    />
  );
}

function PageContact({ onNav }) {
  return (
    <div>
      {/* Hero + form */}
      <section style={{ padding: '88px 64px 64px', position: 'relative', overflow: 'hidden' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />

        {/* Ticket-buyer triage: pull "where are my tickets?" visitors out of
            the sales funnel before they reach the demo form. */}
        <div style={{
          position: 'relative', maxWidth: 1320, margin: '0 auto 48px',
          background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 14,
          boxShadow: `5px 5px 0 0 ${S.ink}`, padding: '22px 28px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, flex: '1 1 420px' }}>
            <div style={{ flexShrink: 0, width: 44, height: 44, borderRadius: 12, background: S.red, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Ico name="ticket" size={22} color={S.ink} strokeWidth={1.8} />
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, letterSpacing: '-0.02em' }}>
                Here for your tickets?
              </div>
              <div style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.75, marginTop: 4, maxWidth: 560 }}>
                If you bought tickets to a fair, resend them to yourself right now — just your email and the last four digits of the card you used. No waiting on support.
              </div>
            </div>
          </div>
          <StubBtn size="md" href={TICKET_LOOKUP_URL} target="_blank">Find my tickets</StubBtn>
        </div>

        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
          <div>
            <SectionEyebrow>Book a demo</SectionEyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.035em', color: S.ink, margin: '20px 0 16px' }}>
              Speak to one of our<br /><em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>fair experts today.</em>
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.78, maxWidth: 520, margin: '0 0 32px' }}>
              Book a 30-minute consultation with one of our fair experts and see the platform in action.
            </p>

            {/* Contact details */}
            <div style={{ marginTop: 40, paddingTop: 24, borderTop: `1px dashed ${S.border}` }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>Or reach us directly</div>
              <div style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.78, marginBottom: 16 }}>
                Can&apos;t find your tickets? <a href={TICKET_LOOKUP_URL} target="_blank" rel="noopener" style={{ color: S.red, fontWeight: 700 }}>Use our lookup tool</a>.
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                <div>
                  <div style={{ fontSize: 12, color: S.mute }}>Email</div>
                  <a href="mailto:support@fairs.com" style={{ fontSize: 16, color: S.ink, fontWeight: 600, textDecoration: 'none' }}>support@fairs.com</a>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: S.mute }}>Office</div>
                  <div style={{ fontSize: 16, color: S.ink, fontWeight: 500, lineHeight: 1.45 }}>3737 Easton Market #1043<br />Columbus, OH 43219</div>
                </div>
              </div>
            </div>
          </div>

          {/* JotForm embed card */}
          <div style={{ position: 'relative' }}>
            <div style={{
              background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 18, padding: 20,
              boxShadow: `8px 8px 0 0 ${S.red}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, padding: '0 12px' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                  ★ Admit one · Demo request
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.14em' }}>№ 0151</div>
              </div>
              <JotFormEmbed />
            </div>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section style={{ background: S.cream2, padding: '64px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 24 }}>
            ★ Trusted by 180+ fairs nationwide ★
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px 48px', justifyContent: 'center' }}>
            {REAL_FAIRS.slice(0, 8).map((f, i) => (
              <div key={i} style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 16, color: S.ink, opacity: 0.55, letterSpacing: '-0.01em' }}>{f}</div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageContact });