/* CX-Feedback — Book a thirty-minute call. */

function App() {
  useReveal();
  return (
    <>
      <Header />
      <main id="main" className="bg-white">
        <section className="pt-32 lg:pt-40 pb-16 lg:pb-24">
          <div className="max-w-container mx-auto px-5 sm:px-8">
            <div className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start">
              <div className="lg:col-span-7">
                <p className="eyebrow reveal mb-5">Book a thirty-minute call</p>
                <h1 className="h1 reveal" style={{ transitionDelay: '60ms' }}>Tell us who you are.</h1>
                <p className="mt-7 body-lg text-slate-600 max-w-[640px] reveal" style={{ transitionDelay: '120ms' }}>
                  We will reply the same working day with a few times that suit you. The call is thirty minutes. We will show you the platform, talk through your TP01 or ARC numbers, and answer anything you want to ask. No slides, no pressure.
                </p>
                <div className="mt-10 reveal" style={{ transitionDelay: '180ms' }}>
                  <LeadForm buttonLabel="Send my details" />
                </div>
                <div className="mt-10 pt-8 border-t border-slate-200 reveal">
                  <p className="text-[15px] text-slate-600 mb-4">Or call us directly. The sales line goes straight to a person, not a hold queue.</p>
                  <a href="tel:+441418102599" className="inline-flex items-center gap-3 text-slate-900 hover:text-blue-700">
                    <span className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600"><IconPhoneCall size={20} /></span>
                    <span>
                      <span className="block text-[13px] text-slate-500">Sales</span>
                      <span className="block text-[22px] font-bold tracking-tight">0141 810 2599</span>
                    </span>
                  </a>
                  <p className="mt-3 text-[13px] text-slate-500">Monday to Friday, 9am to 5pm UK time. Out of hours: voicemail, with a same-working-day callback.</p>
                </div>
              </div>
              <aside className="lg:col-span-5 lg:sticky lg:top-28 reveal" style={{ transitionDelay: '240ms' }}>
                <div className="rounded-2xl border border-slate-200 bg-slate-50 p-7 sm:p-8">
                  <h2 className="text-[22px] font-bold text-slate-900 mb-5 tracking-tight">What to expect on the call</h2>
                  <ul className="space-y-4">
                    {[
                      'A demonstration of CX-Feedback running on a tenant base shaped like yours.',
                      'A walk through your current TP01 or ARC numbers, and where the lift comes from.',
                      'Honest answers on integration with your housing management system.',
                      'A clear written quote within one working day of the call.',
                    ].map((line, i) => (
                      <li key={i} className="flex items-start gap-3">
                        <IconCheck size={18} className="text-blue-600 mt-1 shrink-0" />
                        <span className="text-[15px] text-slate-700 leading-relaxed">{line}</span>
                      </li>
                    ))}
                  </ul>
                  <hr className="border-slate-200 my-7" />
                  <p className="text-[13px] uppercase tracking-wider font-semibold text-slate-500 mb-4">You will speak to</p>
                  <div className="space-y-5">
                    <div className="flex items-center gap-3">
                      <img src="assets/Johnathan_profile100.jpg" alt="Johnathan Briggs" className="h-12 w-12 rounded-full object-cover" />
                      <div>
                        <div className="font-semibold text-slate-900">Johnathan Briggs</div>
                        <div className="text-[13px] text-slate-600">CEO, Target Applications</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-blue-700"><IconUsers size={20} /></span>
                      <div>
                        <div className="font-semibold text-slate-900">A specialist from the sales team</div>
                        <div className="text-[13px] text-slate-600">Two people, eighteen years in housing between them</div>
                      </div>
                    </div>
                  </div>
                </div>
                <figure className="mt-6 rounded-2xl border border-blue-200 bg-blue-50 p-7">
                  <blockquote className="text-[15px] text-slate-700 italic leading-relaxed">
                    &ldquo;Partnering with CX-Feedback has been the single most important ingredient in our transformation journey in terms of customer communication and engagement.&rdquo;
                  </blockquote>
                  <figcaption className="mt-4 text-[13px] font-semibold text-slate-700">
                    Charmaine Simei<span className="font-normal text-slate-600"> · CEO, Tuntum Housing Association</span>
                  </figcaption>
                </figure>
              </aside>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

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