import type { Metadata } from "next";
import { PageShell } from "@/components/PageShell";
import { DownloadButtons } from "@/components/DownloadButtons";

export const metadata: Metadata = {
  title: "دانلود و نصب",
  description:
    "برگ وسط را روی اندروید (کافه‌بازار، مایکت)، آیفون (نصب وب/PWA) یا مستقیماً در مرورگر اجرا کن. راهنمای گام‌به‌گام نصب.",
  alternates: { canonical: "/download" },
};

function Steps({ items }: { items: string[] }) {
  return (
    <ol className="space-y-3">
      {items.map((s, i) => (
        <li key={i} className="flex gap-3">
          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full btn-gold text-sm font-black">
            {i + 1}
          </span>
          <span className="pt-0.5 text-cream/80">{s}</span>
        </li>
      ))}
    </ol>
  );
}

export default function DownloadPage() {
  return (
    <PageShell title="دانلود و نصب" subtitle="هر طور که دوست داری بازی کن — روی گوشی نصب کن یا مستقیم در مرورگر اجرا کن.">
      <div className="mb-8">
        <DownloadButtons variant="full" />
      </div>

      {/* Web */}
      <div className="glass rounded-2xl p-6">
        <h2 className="text-xl font-bold text-cream">🌐 بازی در مرورگر (بدون نصب)</h2>
        <p className="mt-2 text-cream/70">
          سریع‌ترین راه: کافی است آدرس بازی را در مرورگر باز کنی و وارد شوی. هیچ نصبی لازم نیست و روی هر دستگاهی کار می‌کند.
        </p>
      </div>

      {/* Android */}
      <div id="android" className="glass rounded-2xl p-6">
        <h2 className="text-xl font-bold text-cream">🤖 اندروید</h2>
        <p className="mt-2 mb-4 text-cream/70">از کافه‌بازار یا مایکت نصب کن، یا اپ وب را به صفحهٔ اصلی اضافه کن:</p>
        <Steps
          items={[
            "آدرس بازی را در مرورگر کروم باز کن.",
            "روی منوی سه‌نقطهٔ بالا-راست بزن.",
            "گزینهٔ «افزودن به صفحهٔ اصلی / Install app» را انتخاب کن.",
            "آیکن برگ وسط مثل یک اپ روی گوشی‌ات می‌نشیند.",
          ]}
        />
      </div>

      {/* iOS */}
      <div id="ios" className="glass rounded-2xl p-6">
        <h2 className="text-xl font-bold text-cream">🍏 آیفون و آیپد (iOS)</h2>
        <p className="mt-2 mb-4 text-cream/70">
          روی iOS بازی را به‌صورت وب‌اپ (PWA) نصب کن — درست مثل یک اپ واقعی، با آیکن روی صفحهٔ اصلی:
        </p>
        <Steps
          items={[
            "آدرس بازی را در مرورگر Safari باز کن.",
            "روی دکمهٔ «اشتراک‌گذاری» (مربع با فلش رو به بالا) بزن.",
            "کمی پایین برو و «Add to Home Screen / افزودن به صفحهٔ اصلی» را انتخاب کن.",
            "روی «Add» بزن — آیکن برگ وسط روی صفحهٔ اصلی اضافه می‌شود و تمام‌صفحه اجرا می‌شود.",
          ]}
        />
        <p className="mt-4 text-sm text-cream/55">
          نکته: روی آیفون حتماً از مرورگر Safari استفاده کن؛ افزودن به صفحهٔ اصلی فقط در Safari کار می‌کند.
        </p>
      </div>
    </PageShell>
  );
}