/* Takotasks — Contact page (tasker application + reassurance) */

function ContactPage() {
  return (
    <PageFade>
      <CursorHalo />
      <TopNav current="contact" />

      <section className="tt-contact-hero">
        <div className="tt-container">
          <Reveal><Eyebrow>Join our database</Eyebrow></Reveal>
          <Reveal delay={60}>
            <h1 className="tt-hero-display" style={{ fontSize: "clamp(40px, 6vw, 80px)", marginTop: 16 }}>
              Tell us a bit<br /><em>about you.</em>
            </h1>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 19, marginTop: 16, maxWidth: "56ch", color: "var(--tt-body)" }}>
              A real person reads every application and reaches out when a role matches your skills.
              No platforms, no pitching — just one form.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="tt-band tt-band--sky" style={{ paddingTop: 32 }}>
        <div className="tt-container">

          <div className="tt-contact-grid" style={{ marginTop: 0 }}>
            <Reveal>
              <a
                className="tt-airtable-cta"
                href="https://airtable.com/app26Sr4fDUy7hBiF/pagmofM0JSTi8kZOl/form"
                target="_blank"
                rel="noopener noreferrer">
                <span className="tt-airtable-cta__icon" aria-hidden="true">
                  <Icon name="file-text" size={22} />
                </span>
                <span className="tt-airtable-cta__body">
                  <span className="tt-airtable-cta__label">To join our database</span>
                  <span className="tt-airtable-cta__title">Fill in our application form</span>
                  <span className="tt-airtable-cta__hint">Work history, values, the kind of work you actually want. Takes about 10 minutes — we read every one.</span>
                </span>
                <span className="tt-airtable-cta__arrow" aria-hidden="true">
                  <Icon name="arrow-up-right" size={20} />
                </span>
              </a>
            </Reveal>

            <Reveal delay={140}>
              <aside className="tt-reassurance">
                <div className="tt-reassurance__item">
                  <span className="tt-reassurance__icon"><Icon name="clock" /></span>
                  <div>
                    <h4>One business day</h4>
                    <p>A real person reads every message. We aim to reply within 24 working hours.</p>
                  </div>
                </div>
                <div className="tt-reassurance__item">
                  <span className="tt-reassurance__icon"><Icon name="shield" /></span>
                  <div>
                    <h4>Your details stay with us</h4>
                    <p>We never sell or share applicant info. We don't ask for IDs or financial details here — that comes later, in a secure place.</p>
                  </div>
                </div>
                <div className="tt-reassurance__item">
                  <span className="tt-reassurance__icon"><Icon name="check" /></span>
                  <div>
                    <h4>No "we'll be in touch" black holes</h4>
                    <p>If we can't help, we say so. If a role isn't right yet, we keep you in mind and reach back out.</p>
                  </div>
                </div>
              </aside>
            </Reveal>
          </div>

        </div>
      </section>

      <Footer />
    </PageFade>
  );
}

window.ContactPage = ContactPage;