import type { Metadata } from "next";
import StaticPageLayout from "@/components/layout/StaticPageLayout";

export const metadata: Metadata = {
  title: "Nasıl Çalışır? | yakınımda.tr",
  description:
    "yakınımda.tr nasıl kullanılır? 4 adımda konumunu paylaş, ara, en yakın sonuçları bul.",
};

const steps = [
  {
    step: "01",
    title: "Konumunu Paylaş",
    text: "Tarayıcıdan konum izni ver veya şehir/mahalle seç. GPS ile en doğru mesafe hesaplanır.",
  },
  {
    step: "02",
    title: "Kategori Seç veya Ara",
    text: "\"Yakınımda eczane\", \"nöbetçi eczane\" yaz veya 18 kategoriden birini seç.",
  },
  {
    step: "03",
    title: "En Yakınları İncele",
    text: "Mesafe, yürüme süresi, puan, açık/kapalı durumu ve telefon bilgisiyle karşılaştır.",
  },
  {
    step: "04",
    title: "Ara veya Yol Tarifi Al",
    text: "Tek tıkla telefon et veya Google Maps / Apple Maps ile yönlendirme al.",
  },
];

export default function NasilCalisirPage() {
  return (
    <StaticPageLayout
      badge="Rehber"
      title="4 Adımda En Yakın Sonuç"
      subtitle="Karmaşık uygulama yok. Web sitesini aç, konumunu ver, git."
      breadcrumbs={[{ label: "Nasıl Çalışır" }]}
    >
      <div className="space-y-6">
        {steps.map((s) => (
          <div key={s.step} className="content-card flex gap-5">
            <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-emerald-500/15 text-lg font-bold text-emerald-400">
              {s.step}
            </span>
            <div>
              <h2 className="text-lg font-bold text-white">{s.title}</h2>
              <p className="mt-2 text-slate-400">{s.text}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="prose-content mt-10">
        <h2>Sık Kullanılan Senaryolar</h2>
        <ul>
          <li>
            <strong>Gece nöbetçi eczane:</strong> /nobetci-eczane — 7/24 güncel liste
          </li>
          <li>
            <strong>Acil hastane:</strong> /hastane — acil servis etiketli sonuçlar
          </li>
          <li>
            <strong>Elektrik arızası:</strong> /elektrikci — acil servis filtresi
          </li>
          <li>
            <strong>Şehir bazlı arama:</strong> /sehir/istanbul/nobetci-eczane
          </li>
        </ul>
      </div>
    </StaticPageLayout>
  );
}