import type { Metadata } from "next";
import Link from "next/link";

const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "https://www.adultworld.ai";

export const metadata: Metadata = {
  title: "Install the AdultWorld App",
  description:
    "Install AdultWorld on your phone or desktop for a faster, full-screen experience with push notifications and offline access.",
  alternates: { canonical: `${baseUrl}/install` },
  robots: { index: false, follow: true },
};

export default function InstallPage() {
  return (
    <div className="max-w-3xl mx-auto py-8 space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-text">Install AdultWorld</h1>
        <p className="text-text-muted mt-2">
          Get a faster, full-screen experience with push notifications and offline access. No App
          Store needed — installs straight from your browser.
        </p>
      </div>

      <div className="bg-surface rounded-xl border border-surface-light p-6 space-y-3">
        <h2 className="text-xl font-semibold text-text">📱 iPhone &amp; iPad (Safari)</h2>
        <ol className="list-decimal pl-6 space-y-2 text-text-muted">
          <li>
            Tap the <strong>Share</strong> button in Safari&apos;s toolbar — the square with an
            up-arrow.
          </li>
          <li>
            Scroll down and tap <strong>Add to Home Screen</strong>.
          </li>
          <li>Tap <strong>Add</strong> in the top-right.</li>
          <li>Open AdultWorld from your home screen — it runs full-screen, no Safari chrome.</li>
        </ol>
        <p className="text-text-muted text-sm pt-2">
          Push notifications need iOS 16.4 or later. Run a quick Settings → General → Software
          Update if alerts don&apos;t arrive.
        </p>
      </div>

      <div className="bg-surface rounded-xl border border-surface-light p-6 space-y-3">
        <h2 className="text-xl font-semibold text-text">🤖 Android (Chrome)</h2>
        <ol className="list-decimal pl-6 space-y-2 text-text-muted">
          <li>
            Open AdultWorld in Chrome. You&apos;ll see an{" "}
            <strong>Install app</strong> button in the address bar or via the ⋮ menu.
          </li>
          <li>Tap it. Confirm in the dialog.</li>
          <li>The app is added to your home screen and app drawer.</li>
        </ol>
      </div>

      <div className="bg-surface rounded-xl border border-surface-light p-6 space-y-3">
        <h2 className="text-xl font-semibold text-text">💻 Desktop (Chrome / Edge)</h2>
        <ol className="list-decimal pl-6 space-y-2 text-text-muted">
          <li>
            Click the install icon (⊕ or 🖥️) at the right edge of the address bar.
          </li>
          <li>Click <strong>Install</strong>.</li>
          <li>Pin the app to your taskbar/dock for one-click access.</li>
        </ol>
      </div>

      <div className="bg-surface rounded-xl border border-surface-light p-6 space-y-3">
        <h2 className="text-xl font-semibold text-text">Why install?</h2>
        <ul className="space-y-1 text-text-muted">
          <li>⚡ Faster — assets are cached for instant launches</li>
          <li>📶 Works offline — your favourites are still browsable</li>
          <li>🔔 Push notifications for messages, bookings, and tips</li>
          <li>🪟 Full-screen — no browser bars eating your viewport</li>
          <li>🔒 Same security as the website; no app store, no data sharing</li>
        </ul>
      </div>

      <div className="text-center">
        <Link
          href="/"
          className="inline-flex items-center gap-2 text-primary hover:text-primary-dark"
        >
          ← Back to AdultWorld
        </Link>
      </div>
    </div>
  );
}