import { ContactTemplate } from "@/components/ui/contact-template"

const nav = (current: string) =>
  [
    { label: "Product", href: "#product" },
    { label: "Customers", href: "#customers" },
    { label: "Blog", href: "#blog" },
    { label: "About", href: "#about" },
    { label: "Contact", href: "#contact" },
  ].map((link) => ({ ...link, current: link.label.toLowerCase() === current }));

const signIn = { label: "Sign in", href: "#" };

const frame = "h-[720px] w-full overflow-auto rounded-[14px] shadow-[0_0_0_1px_var(--border)]";

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

export function ContactDemo() {
  return (
    <div className={frame}>
      <ContactTemplate
        brand="Halden"
        nav={nav("contact")}
        signIn={signIn}
        primary={heroes.primary!}
        intro={{ eyebrow: "Contact", title: "Talk to a person", lead: "Choose what it is about and we will say who answers and how soon. Type “fail” in the message to see a failed send." }}
        topics={[
          { value: "sales", label: "Pricing and plans", response: "The sales team replies within one working day.", email: "sales@halden.app" },
          { value: "support", label: "Help with my account", response: "Support replies within four working hours, 8:00–18:00 Lisbon time.", email: "help@halden.app" },
          { value: "security", label: "Security or compliance", response: "Our security lead replies within two working days. For an urgent issue, write to security@halden.app.", email: "security@halden.app" },
          { value: "press", label: "Press", response: "Joana Reis replies within two working days.", email: "press@halden.app" },
        ]}
        offices={[
          { city: "Lisbon", address: "Rua do Ouro 120, 3º, 1100-063 Lisboa", hours: "Mon–Fri 9:00–18:00", timezone: "WET", mapHref: "#lisbon" },
          { city: "London", address: "71 Leonard Street, London EC2A 4QS", hours: "Mon–Thu 9:00–18:00", timezone: "GMT", mapHref: "#london" },
        ]}
        faq={{ ...faqs, title: "Before you write", items: faqs.items.slice(0, 4) }}
        onSubmit={async (message) => {
          await wait(800);
          if (message.message.toLowerCase().includes("fail")) throw new Error("Our mail server did not answer.");
        }}
        footer={footers}
      />
    </div>
  );
}