/* Book a demo page. */


function BookFormBlock() {
  return (
    <section id="form" className="pt-32 lg:pt-40 pb-16 sm:pb-24 lg:pb-32 bg-white" aria-labelledby="form-h">
      <div className="max-w-container mx-auto px-5 sm:px-8">
        <div className="grid lg:grid-cols-2 gap-10 sm:gap-12 lg:gap-16 items-start">
          <div className="reveal">
            <h2 id="form-h" className="h2">Share your challenges with us, and let us see if we can help you.</h2>
            <p className="mt-6 body-lg">
              The form goes to the Glasgow office. If you would rather phone, a colleague from our team will answer between 9am and 5pm, Monday to Friday.
            </p>
            <p className="mt-6 italic text-slate-700 body-md">
              We pick up the phone because that is how we have always done it.
            </p>

            <div className="mt-8 sm:mt-10 rounded-xl bg-blue-50 border border-blue-100 p-5 sm:p-6">
              <h3 className="text-[17px] font-semibold text-slate-900 mb-3">If you would prefer to keep it informal</h3>
              <ul className="space-y-2.5 text-[15px] text-slate-700">
                <li className="flex items-start gap-2.5">
                  <IconPhoneCall size={16} className="text-blue-600 shrink-0 mt-1" />
                  <span>
                    <a href="tel:+441418102599" className="font-medium text-slate-900 hover:text-blue-700">0141 810 2599</a>
                    <span className="block text-slate-600">Glasgow office, Monday to Friday, 9am to 5pm UK time</span>
                  </span>
                </li>
                <li className="flex items-start gap-2.5">
                  <IconSend size={16} className="text-blue-600 shrink-0 mt-1" />
                  <span className="break-all">info@colleaguepulse.co.uk</span>
                </li>
              </ul>
            </div>

            <div className="mt-8 flex items-center gap-5 text-[13px] text-slate-500">
              <div className="flex items-center gap-1.5">
                <IconLock size={14} className="text-slate-400" />
                <span>UK-built, EU-hosted</span>
              </div>
              <div className="hidden sm:flex items-center gap-1.5">
                <IconShield size={14} className="text-slate-400" />
                <span>UK GDPR compliant</span>
              </div>
            </div>
          </div>

          <div className="reveal" style={{ transitionDelay: '80ms' }}>
            <DemoForm />
          </div>
        </div>
      </div>
    </section>
  );
}

const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

function App() {
  useReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <Header />
      <main id="main">
        <BookFormBlock />
      </main>
      <Footer />

      <TweaksPanel>
      </TweaksPanel>
    </>
  );
}

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