/* burp.agency — AuditBanner
   Email + one-click open of the Calendly booker.
   Uses the global BookerModal (Booker.jsx) — this just collects email
   and calls `bookAudit(email)`. */

const AuditBanner = ({ depth = 0 }) => {
  const [email, setEmail] = React.useState('');
  const [focus, setFocus] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    bookAudit(email || undefined);
  };

  return (
    <section data-screen-label="Audit banner" id="audit"
             style={{
               background: 'var(--color-ink)',
               color: '#fff',
               paddingTop: 120, paddingBottom: 120,
               position: 'relative', overflow: 'hidden',
             }}>
      {/* Decorative orange edge */}
      <div style={{
        position: 'absolute', top: 0, left: 0, height: 3, width: 96,
        background: 'var(--color-orange)',
      }}/>

      <Container>
        <div className="banner-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr 1fr',
          gap: 80, alignItems: 'center',
        }}>
          <div>
            <Reveal>
              <Label style={{ color: 'var(--color-orange)' }}>
                FREE · 30 MIN · NO DECK
              </Label>
            </Reveal>
            <Reveal delay={100}>
              <h2 style={{
                fontFamily: 'Georgia, serif', fontWeight: 400,
                fontSize: 'clamp(40px, 5vw, 72px)',
                letterSpacing: '-0.02em', lineHeight: 1.04,
                color: '#fff', margin: '24px 0 0',
                maxWidth: '14ch', textWrap: 'balance',
              }}>Working on something? Let’s talk for thirty.</h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{
                marginTop: 24,
                fontFamily: 'Inter, sans-serif', fontSize: 16,
                lineHeight: 1.7, color: '#c4c4c4',
                margin: '24px 0 0', maxWidth: '46ch',
              }}>
                Drop your email and pick a time. We’ll spend thirty minutes telling you exactly what’s broken in your GTM — and what to fix first. No pitch.
              </p>
            </Reveal>
          </div>

          <Reveal delay={150}>
            <form onSubmit={handleSubmit}
                  style={{
                    background: 'var(--color-cream)',
                    color: 'var(--color-ink)',
                    padding: 28,
                    border: '1px solid var(--color-orange)',
                  }}>
              <label style={{
                display: 'block', marginBottom: 12,
                fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
                letterSpacing: '0.10em', textTransform: 'uppercase',
                color: 'var(--color-mid-gray)',
              }}>Your email (optional — we’ll pre-fill it)</label>

              <input
                type="email" value={email}
                onChange={e => setEmail(e.target.value)}
                onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
                placeholder="you@startup.com"
                style={{
                  width: '100%',
                  border: `1px solid ${focus ? 'var(--color-ink)' : 'var(--color-warm-gray)'}`,
                  background: '#fff', color: 'var(--color-ink)',
                  padding: '14px 16px',
                  fontFamily: 'Inter, sans-serif', fontSize: 16,
                  borderRadius: 0, outline: 'none',
                  transition: 'border-color .12s ease',
                }}
              />

              <button type="submit"
                      className="btn btn--accent"
                      style={{
                        width: '100%', justifyContent: 'center',
                        marginTop: 12, height: 56, fontSize: 15,
                      }}>
                Pick a time  →
              </button>

              <button type="button" onClick={() => bookAudit()}
                      style={{
                        marginTop: 10, width: '100%',
                        background: 'transparent', border: 0,
                        color: 'var(--color-mid-gray)',
                        fontFamily: 'Inter, sans-serif', fontSize: 13,
                        textDecoration: 'underline', textUnderlineOffset: 3,
                        cursor: 'pointer',
                      }}>
                Skip the email, take me straight to the calendar
              </button>
            </form>
          </Reveal>
        </div>

        <Reveal delay={300}>
          <div className="banner-news" style={{
            marginTop: 80,
            paddingTop: 32,
            borderTop: '1px solid #2a2a2a',
            display: 'grid',
            gridTemplateColumns: '1.1fr 1fr',
            gap: 80, alignItems: 'flex-start',
          }}>
            <div>
              <Label style={{ color: 'var(--color-orange)' }}>OR — THE BURP DISPATCH</Label>
              <p style={{
                marginTop: 12,
                fontFamily: 'Inter, sans-serif', fontSize: 15,
                lineHeight: 1.65, color: '#c4c4c4',
                margin: '12px 0 0', maxWidth: '42ch',
              }}>
                Not ready to talk yet? Get one short email every other Tuesday — the thing we shipped, the thing we read, the take we couldn’t post on LinkedIn.
              </p>
            </div>

            {/* Real Substack subscribe widget — lives on rohnx.substack.com */}
            <div style={{
              background: 'var(--color-cream)',
              border: '1px solid var(--color-orange)',
              padding: 4,
            }}>
              <iframe
                src="https://rohnx.substack.com/embed?transparent=1"
                width="100%" height="160"
                style={{ border: 0, background: 'transparent', display: 'block' }}
                title="Subscribe to The Burp Dispatch"
                loading="lazy"
              ></iframe>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
};

Object.assign(window, { AuditBanner });