import { FeedbackForm } from "@/components/feedback/feedback-form";
import { InfoPageShell } from "@/components/info/info-page-layout";

const notes = [
  { title: "处理时间", text: "一般问题将在 1–3 个工作日内查看。" },
  { title: "紧急问题", text: "账号安全或付费异常，请在描述中注明。" },
];

export function FeedbackPage({ gmailAddr }: { gmailAddr?: string | null }) {
  const email = gmailAddr?.trim();

  return (
    <InfoPageShell data-component="feedback-page" title="问题反馈" subtitle="告诉我们您遇到的问题或建议">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:gap-6">
        <FeedbackForm />
        <aside className="flex flex-col gap-[5px] rounded-2xl bg-[#13111C] px-4 py-3 lg:w-80 lg:shrink-0 lg:gap-[18px] lg:bg-[#0E0D17] lg:p-[22px] lg:outline lg:outline-1 lg:-outline-offset-1 lg:outline-[#2E293D]">
          <h2 className="text-sm leading-5 font-bold text-[#FAF7FF] lg:text-xl lg:leading-[26px] lg:font-semibold lg:text-[#F5F2FC]">
            反馈说明
          </h2>
          {notes.map((note) => (
            <div key={note.title} className="flex flex-col lg:gap-1.5">
              <h3 className="hidden text-sm leading-5 text-[#F5F2FC] lg:block">{note.title}</h3>
              <p className="text-xs leading-[18px] text-[#9E94AD] lg:text-sm lg:leading-5 lg:text-[#948CA8]">
                <span className="lg:hidden">{note.title}：</span>
                {note.text}
              </p>
            </div>
          ))}
          {email ? (
            <a href={`mailto:${email}`} className="text-xs leading-[18px] text-[#F12B9E]">
              联系邮箱：{email}
            </a>
          ) : null}
        </aside>
      </div>
    </InfoPageShell>
  );
}