import type { Metadata } from "next";

export const metadata: Metadata = {
  title: { absolute: "由点笔迹 - 技术支持" },
  description:
    "由点笔迹是一款离线笔记/日记 App，无需登录即可使用。本页提供常见问题与技术支持联系方式。",
  openGraph: {
    title: "由点笔迹 - 技术支持",
    description:
      "由点笔迹是一款离线 App，无需登录即可使用。这里提供使用帮助与技术支持联系方式。",
  },
};

const SUPPORT_EMAIL = "lanmu1818@gmail.com";
const SUPPORT_SUBJECT = encodeURIComponent("由点笔迹 技术支持");
const SUPPORT_MAILTO = `mailto:${SUPPORT_EMAIL}?subject=${SUPPORT_SUBJECT}`;

export default function YoudianBijIAppSupportPage() {
  return (
    <main
      className="min-h-dvh text-foreground"
      style={{
        background:
          "radial-gradient(1200px 600px at 20% -10%, rgba(124, 92, 255, 0.22), transparent 55%), radial-gradient(900px 520px at 90% 10%, rgba(45, 212, 191, 0.18), transparent 50%), linear-gradient(180deg, var(--background), var(--background))",
      }}
    >
      <div className="mx-auto max-w-[980px] px-5 py-8 pb-16">
        <header className="mb-7 flex items-center justify-between gap-4">
          <div className="flex min-w-0 items-center gap-3">
            <div
              aria-hidden="true"
              className="relative h-10 w-10 shrink-0 rounded-xl bg-gradient-to-br from-violet-500 to-teal-400 shadow-2xl"
            >
              <div className="absolute inset-2.5 rounded-lg border border-white/20 bg-white/15" />
            </div>
            <div className="min-w-0">
              <p className="truncate text-sm font-semibold tracking-tight">
                由点笔迹
              </p>
              <p className="text-xs text-muted-foreground">
                离线笔记 · 无需登录 · 打开即用
              </p>
            </div>
          </div>
        </header>

        <section className="relative overflow-hidden rounded-3xl border border-border bg-card/60 p-7 shadow-2xl backdrop-blur">
          <p className="mb-4 inline-flex items-center rounded-full border border-violet-500/25 bg-violet-500/10 px-3 py-1 text-xs font-semibold tracking-wide">
            App 技术支持 · App Support
          </p>
          <h1 className="mb-3 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
            由点笔迹 — 离线笔记/日记
          </h1>
          <p className="max-w-[70ch] text-pretty text-base leading-relaxed text-muted-foreground">
            由点笔迹是一款离线 App，无需登录即可使用。若你在使用过程中遇到问题，可以先查看下方常见问题，
            或通过邮件联系我们获取技术支持。
          </p>
        </section>

        <section className="mt-8">
          <h2 className="mb-3 text-base font-semibold tracking-tight">核心特点</h2>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            <Card
              title="离线可用"
              body="没有网络也能记录，内容默认保存在设备本地。"
              className="lg:col-span-2"
            />
            <Card
              title="无需登录"
              body="不需要注册/登录账号，安装后即可使用。"
            />
            <Card
              title="轻量记录"
              body="专注写作与日常记录，减少干扰。"
            />
            <Card
              title="本地数据"
              body="你的内容由你掌控；如启用系统备份，数据由 iOS 备份机制管理。"
            />
            <Card
              title="迁移建议"
              body="更换设备时，可通过 iOS 系统备份/迁移保留数据（以系统能力为准）。"
            />
          </div>
        </section>

        <section className="mt-8">
          <h2 className="mb-3 text-base font-semibold tracking-tight">常见问题</h2>
          <div className="space-y-3">
            <FaqItem
              q="是否需要注册/登录？"
              a="不需要。由点笔迹是一款离线应用，下载后打开即可使用。"
            />
            <FaqItem
              q="数据会上传到服务器吗？"
              a="由点笔迹默认离线运行，你的内容保存在设备本地。如你开启 iOS 系统备份/换机迁移，数据可能随系统备份进入你的 iCloud 设备备份（由 Apple 负责）。"
            />
            <FaqItem
              q="遇到闪退/无法保存/显示异常怎么办？"
              a="建议先重启 App 或重启手机；确认 iOS 系统版本与存储空间正常；如仍无法解决，请邮件联系我们并附上设备型号、iOS 版本、App 版本与问题截图/录屏。"
            />
            <FaqItem
              q="如何联系技术支持？"
              a={`请发送邮件至 ${SUPPORT_EMAIL}（建议在标题注明“由点笔迹 技术支持”）。`}
            />
          </div>
        </section>

        <section className="mt-8">
          <h2 className="mb-3 text-base font-semibold tracking-tight">联系我们</h2>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <Card
              title="支持邮箱"
              body={SUPPORT_EMAIL}
              className="sm:col-span-1"
            />
            <Card
              title="邮件建议包含"
              body="设备型号 / iOS 版本 / App 版本 / 问题描述 / 截图或录屏"
              className="sm:col-span-1"
            />
            <div className="sm:col-span-2">
              <a
                className="inline-flex items-center justify-center rounded-xl border border-border bg-card/60 px-4 py-3 text-sm font-semibold shadow-sm transition hover:bg-card"
                href={SUPPORT_MAILTO}
              >
                发送邮件获取支持
              </a>
              <div className="mt-3 text-xs text-muted-foreground">
                <a className="underline-offset-4 hover:underline" href="/riji/privacy">
                  隐私政策 / Privacy Policy
                </a>
              </div>
              <p className="mt-2 text-xs text-muted-foreground">
                如果你是 App Store 审核人员：由点笔迹为离线 App，无需登录即可使用。
              </p>
            </div>
          </div>
        </section>

        <footer className="mt-10 flex flex-wrap items-center justify-between gap-3 border-t border-border pt-5 text-xs text-muted-foreground">
          <span>由点笔迹 · 技术支持</span>
          <span>Public support page (no login required)</span>
        </footer>
      </div>
    </main>
  );
}

function Card({
  title,
  body,
  className,
}: {
  title: string;
  body: string;
  className?: string;
}) {
  return (
    <article
      className={[
        "rounded-2xl border border-border bg-card/50 p-5 shadow-sm",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      <h3 className="mb-1 text-sm font-semibold tracking-tight">{title}</h3>
      <p className="text-sm leading-relaxed text-muted-foreground">{body}</p>
    </article>
  );
}

function FaqItem({ q, a }: { q: string; a: string }) {
  return (
    <details className="group rounded-2xl border border-border bg-card/50 p-5 shadow-sm">
      <summary className="cursor-pointer list-none text-sm font-semibold tracking-tight">
        <span className="select-none">{q}</span>
        <span className="ml-2 text-muted-foreground group-open:hidden">+</span>
        <span className="ml-2 hidden text-muted-foreground group-open:inline">−</span>
      </summary>
      <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{a}</p>
    </details>
  );
}