// ============================================================
// autoclient.io — THANK YOU (form-submit landing)
// ============================================================
const { useEffect: useTyE } = React;

function ThankYouPage() {
  useReveal();
  useTyE(() => {
    const prevTitle = document.title;
    document.title = "Thank You | AutoClient";
    let robots = document.querySelector('meta[name="robots"]');
    const created = !robots;
    if (!robots) {
      robots = document.createElement("meta");
      robots.setAttribute("name", "robots");
      document.head.appendChild(robots);
    }
    const prevRobots = robots.getAttribute("content");
    robots.setAttribute("content", "noindex, nofollow");
    return () => {
      document.title = prevTitle;
      if (created && robots.parentNode) robots.parentNode.removeChild(robots);
      else if (prevRobots != null) robots.setAttribute("content", prevRobots);
      else robots.removeAttribute("content");
    };
  }, []);

  return (
    <main>
      <section style={{ position: "relative", overflow: "hidden", padding: "172px 0 120px", minHeight: "70vh", display: "flex", alignItems: "center" }}>
        <Aura color="#8784FD" size={520} top={-200} left={"34%"} opacity={0.38} drift={1} />
        <Aura color="#FF6666" size={400} top={40} right={-150} opacity={0.26} drift={2} />
        <div className="wrap" style={{ position: "relative", zIndex: 1, maxWidth: 720, textAlign: "center" }}>
          <span className="overline-grad fade-up">Thank you</span>
          <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.4rem,5vw,3.8rem)", lineHeight: 1.08, letterSpacing: "-0.03em", margin: "20px 0 0" }}>
            Thanks, we got your <span className="gt" style={{ fontWeight: 300 }}>message.</span>
          </h1>
          <p className="fade-up" style={{ fontSize: 18, lineHeight: 1.7, color: "var(--fg-on-dark-2)", margin: "26px auto 0", maxWidth: 480 }}>
            Someone from our team will reach out within 48 hours.
          </p>
          <div className="fade-up" style={{ marginTop: 40 }}>
            <Button variant="primary" size="lg" icon="arrow-right" href="/">Back to home</Button>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ThankYouPage });