"use client";

import { useEffect } from "react";

/* Lead-path protection: a crashed demo page must still convert. */
export default function RequestDemoError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[request-demo-error]", error.digest ?? error.message);
  }, [error]);

  return (
    <section className="bg-navy py-16 text-white max-md:py-12">
      <div className="mx-container max-w-[600px] text-center">
        <span className="inline-flex items-center gap-2.5 rounded-full border border-white/20 px-3.5 py-1.5 font-mono text-[10.5px] font-medium tracking-[0.12em] text-herosub">
          <span className="size-[7px] rounded-full bg-accent" aria-hidden="true" />
          TEMPORARILY UNAVAILABLE
        </span>
        <h1 className="mt-3.5 font-display text-[clamp(28px,3.2vw,40px)] font-bold leading-tight">
          The demo form couldn&apos;t load.
        </h1>
        <p className="mx-auto mt-3 max-w-[480px] text-[15px] leading-relaxed text-herosub">
          Please try again — or skip the form and reach us directly. We respond
          within business hours.
        </p>
        <div className="mt-7 flex flex-wrap justify-center gap-3">
          <button
            type="button"
            onClick={() => reset()}
            className="inline-flex min-h-[48px] items-center rounded-lg bg-brand px-6 text-[15px] font-semibold text-white hover:bg-brand-dark"
          >
            Try again
          </button>
          <a
            href="tel:+919818993537"
            className="inline-flex min-h-[48px] items-center rounded-lg border border-white/35 bg-white/[0.06] px-6 text-[15px] font-semibold text-white hover:bg-white/[0.12]"
          >
            Call sales: +91-9818993537
          </a>
          <a
            href="tel:+919899745220"
            className="inline-flex min-h-[48px] items-center rounded-lg border border-white/35 bg-white/[0.06] px-6 text-[15px] font-semibold text-white hover:bg-white/[0.12]"
          >
            Call support: +91-9899745220
          </a>
        </div>
      </div>
    </section>
  );
}