import { Smartphone } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Phrasebook } from "@/components/tools/Phrasebook";
import { TipCalculator } from "@/components/tools/TipCalculator";
import { SectionHeading } from "@/components/shared/SectionHeading";

export const metadata = {
  title: "實用工具",
  description: "夜遊必備 App、泰文常用語手冊與小費計算器。",
};

const apps = [
  {
    name: "Grab",
    desc: "泰國夜間叫車首選，支援現金與信用卡付款。",
  },
  {
    name: "Google Maps",
    desc: "確認場地位置與步行路線，避開偏僻巷道。",
  },
  {
    name: "Google 翻譯",
    desc: "即時翻譯泰文菜單與價目表，減少溝通誤會。",
  },
  {
    name: "LINE",
    desc: "泰國主流通訊 App，許多場所支援 LINE 預約。",
  },
  {
    name: "SuperRich",
    desc: "連鎖換匯店 App，查詢即時匯率。",
  },
  {
    name: "XE Currency",
    desc: "快速換算泰銖與台幣、港幣。",
  },
];

export default function ToolsPage() {
  return (
    <div className="py-12 sm:py-16">
      <div className="mx-auto max-w-7xl space-y-16 px-4 sm:px-6 lg:px-8">
        <SectionHeading
          title="實用工具"
          subtitle="出門前準備好這些，夜遊更從容"
        />

        <section>
          <h2 className="mb-6 flex items-center gap-2 text-xl font-bold">
            <Smartphone className="size-5 text-primary" />
            推薦 App
          </h2>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {apps.map((app) => (
              <Card key={app.name} className="border-border bg-card">
                <CardHeader className="pb-2">
                  <CardTitle className="text-base text-primary">
                    {app.name}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">{app.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        <section>
          <h2 className="mb-6 text-xl font-bold">夜生活常用語手冊</h2>
          <Phrasebook />
        </section>

        <section>
          <h2 className="mb-6 text-xl font-bold">小費計算器</h2>
          <TipCalculator />
        </section>
      </div>
    </div>
  );
}