/* Resolv website — interactive app shell.
   Composes the sections and wires the "Book a discovery call" flow:
   a modal form that, on submit, shows a confirmation state. */
const { Button, Input, Textarea, Checkbox, IconButton, Badge } =
  window.ResolvDesignSystem_a08a6d;
const { Navbar, Hero, AgentGrid, HowItWorks, CTASection, Footer } = window;

function BookModal({ open, onClose }) {
  const [submitted, setSubmitted] = React.useState(false);
  React.useEffect(() => {
    if (!open) setSubmitted(false);
  }, [open]);
  if (!open) return null;
  return (
    <div className="rw-modal" role="dialog" aria-modal="true" onClick={onClose}>
      <div className="rw-modal__panel" onClick={(e) => e.stopPropagation()}>
        <div className="rw-modal__head">
          <div>
            <Badge variant="blue" icon="calendar_today">Discovery call</Badge>
            <h3>{submitted ? "You're booked in" : "Book a discovery call"}</h3>
          </div>
          <IconButton icon="close" label="Close" onClick={onClose} />
        </div>
        {submitted ? (
          <div className="rw-modal__done">
            <span className="rw-modal__check material-symbols-rounded">check_circle</span>
            <p>Thanks, we'll email you within one business day to confirm a time. In the
              meantime, no infrastructure changes are needed on your end.</p>
            <Button onClick={onClose}>Done</Button>
          </div>
        ) : (
          <form
            className="rw-form"
            onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
          >
            <Input label="Full name" required placeholder="Alex Kelly" />
            <Input label="Work email" type="email" required placeholder="you@company.com.au" />
            <Input label="Company" placeholder="Acme Pty Ltd" hint="Optional" />
            <Textarea label="What would you like to automate?" rows={3} placeholder="Tell us about the workflow…" />
            <Checkbox label="Keep me posted on new agents and deployment strategies." defaultChecked />
            <Button type="submit" block size="lg" iconRight="arrow_forward">Book my call</Button>
            <p className="rw-form__fine">Prefer email? Reach us at hello@resolv.com.au</p>
          </form>
        )}
      </div>
    </div>
  );
}

function App() {
  const [booking, setBooking] = React.useState(false);
  const open = () => setBooking(true);
  return (
    <div className="rw-app">
      <Navbar onBook={open} page="home" />
      <main>
        <Hero onBook={open} />
        <AgentGrid onBook={open} />
        <HowItWorks onBook={open} />
        <CTASection onBook={open} />
      </main>
      <Footer />
      <BookModal open={booking} onClose={() => setBooking(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);