/**
 * # 路由 联系页 /contact-us/
 * 有 Elementor 内容则渲染；否则标准布局：联系方式卡片 + 询盘表单。
 */
import { createFileRoute } from "@tanstack/react-router";
import { getLayoutData, Layout } from "~/components/website/Layout";
import { ElementorRenderer, extractElementor } from "~/components/elementor/Renderer";
import { InquiryForm } from "~/components/website/InquiryForm";
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "~/components/ui/breadcrumb";
import { getPublishedContent } from "~/server/data";

export const Route = createFileRoute("/contact-us")({
  loader: async () => {
    const [layout, page] = await Promise.all([
      getLayoutData(),
      getPublishedContent("contact-us", "page").catch(() => null),
    ]);
    const meta = (page?.meta ?? null) as Record<string, unknown> | null;
    return { layout, page, meta };
  },
  head: ({ loaderData }) => ({
    meta: [
      { title: loaderData?.page?.seoTitle || "Contact Us | Dusun IoT" },
      { name: "description", content: loaderData?.page?.seoDescription || "Contact Dusun IoT for IoT gateway solutions, OEM/ODM customization and technical support. Email sales@dusuniot.com." },
    ],
  }),
  component: ContactPage,
});

/** # 组件 联系页 */
function ContactPage() {
  const data = Route.useLoaderData();
  const elementor = extractElementor(data.meta);
  return (
    <Layout layout={data.layout}>
      <div className="site-container">
        {elementor ? (
          <ElementorRenderer doc={elementor} />
        ) : (
          <>
            <Breadcrumb className="pt-6" aria-label="Breadcrumb">
              <BreadcrumbList>
                <BreadcrumbItem><BreadcrumbLink to="/">Home</BreadcrumbLink></BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem><BreadcrumbPage>Contact Us</BreadcrumbPage></BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
            <h1 className="mt-0 text-[28px]">Contact Us</h1>
            <div className="mb-8 grid grid-cols-1 gap-[18px] min-[800px]:grid-cols-3">
              <div className="rounded-lg border border-line bg-soft p-5">
                <h3 className="mt-0">Sales & Inquiries</h3>
                <p>
                  Email: <a href="mailto:sales@dusuniot.com">sales@dusuniot.com</a>
                  <br />
                  Tel: +86 755 2643 0850
                </p>
              </div>
              <div className="rounded-lg border border-line bg-soft p-5">
                <h3 className="mt-0">Visit Us</h3>
                <p>
                  5F, Building B, Henglong Industrial Park,
                  <br />
                  Xili, Nanshan District, Shenzhen, Guangdong, China
                </p>
              </div>
              <div className="rounded-lg border border-line bg-soft p-5">
                <h3 className="mt-0">Support</h3>
                <p>24/7 technical support for OEM/ODM partners. Response within 24 hours on business days.</p>
              </div>
            </div>
          </>
        )}
        {/* Elementor 版页面（hero 内已含询盘表单）不再追加表单；标准布局才补一个询盘表单 */}
        {!elementor ? (
          <section className="mt-4 mb-14">
            <InquiryForm formKey="contact-us-form" title="Get a Quote" />
          </section>
        ) : null}
      </div>
    </Layout>
  );
}