/* burp.agency homepage — Hero (Section 01)
   Headline + buttons. A small orange-circle mascot sits at the top-right
   corner of the "See what we do" button, slightly tilted — single use,
   small enough to be a punctuation mark, not the headline. */

const Hero = () => {
  return (
    <section data-screen-label="01 Hero" id="top"
             style={{
               background: 'var(--color-cream)',
               paddingTop: 80, paddingBottom: 56,
             }}>
      <Container>
        {/* SEO H1 — visually hidden */}
        <h1 style={{
          position: 'absolute', width: 1, height: 1, padding: 0,
          margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)',
          whiteSpace: 'nowrap', borderWidth: 0,
        }}>B2B SaaS Marketing Agency</h1>

        <h2 style={{
          fontFamily: 'Georgia, serif',
          fontWeight: 400,
          fontSize: 'clamp(36px, 7.2vw, 92px)',
          lineHeight: 1.04,
          letterSpacing: '-0.025em',
          color: 'var(--color-ink)',
          margin: 0,
        }}>
          <Reveal as="span" delay={0}   style={{ display: 'block' }}>Full-funnel B2B SaaS</Reveal>
          <Reveal as="span" delay={120} style={{ display: 'block' }}>marketing for companies</Reveal>
          <Reveal as="span" delay={240} style={{ display: 'block' }}>that can’t afford to guess.</Reveal>
        </h2>

        <Reveal delay={560} style={{ marginTop: 48, display: 'inline-flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
          <Btn onClick={() => bookAudit()}>Book a free 30-min audit  →</Btn>
          <Btn href="offerings.html" variant="ghost">See what we do</Btn>

          {/* Mascot — sibling element, not overlapping. Pale-orange so it
              reads as a quiet punctuation mark beside the CTAs, not an alarm. */}
          <a href="offerings.html"
             aria-hidden="true"
             tabIndex={-1}
             style={{ display: 'inline-flex', textDecoration: 'none' }}>
            <Mascot shape="circle" bg="paleOrange" color="ink" size={44} rotate={-4} border={false} />
          </a>
        </Reveal>
      </Container>
    </section>
  );
};

Object.assign(window, { Hero });