import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { CtaBanner } from "@/components/sections/cta-banner";
import { JsonLd } from "@/components/seo/json-ld";
import {
  Printer, Wifi, Settings, CheckCircle2, ChevronRight,
  AlertCircle, Zap, FileText, ChefHat, Receipt, BarChart3, Smartphone,
} from "lucide-react";

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://meezi.ir";

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "meta" });
  return {
    title: t("printerGuideTitle"),
    description: t("printerGuideDesc"),
    alternates: {
      canonical: `${BASE_URL}/${locale}/printer-guide`,
      languages: { fa: `${BASE_URL}/fa/printer-guide`, en: `${BASE_URL}/en/printer-guide` },
    },
    openGraph: { title: t("printerGuideTitle"), description: t("printerGuideDesc"), url: `${BASE_URL}/${locale}/printer-guide` },
  };
}

// ── Receipt Mockups ──────────────────────────────────────────────────────────

function CustomerReceiptMockup({ locale }: { locale: string }) {
  const isEn = locale === "en";
  return (
    <div className="mx-auto w-52 rounded-lg border border-gray-300 bg-white font-mono shadow-lg">
      {/* Tear edge */}
      <div className="h-3 w-full rounded-t-lg bg-gray-100" style={{
        backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 6px, #d1d5db 6px, #d1d5db 8px)"
      }} />
      <div className="p-3 text-center">
        <p className="text-[11px] font-bold text-gray-900">{isEn ? "☕ Café Dorná" : "☕ کافه درنا"}</p>
        <p className="text-[9px] text-gray-500">{isEn ? "Tehran, Valiasr St." : "تهران، خ ولیعصر"}</p>
        <p className="text-[9px] text-gray-500">{isEn ? "021-88001234" : "۰۲۱-۸۸۰۰۱۲۳۴"}</p>
        <div className="my-2 border-t border-dashed border-gray-300" />
        <p className="text-[9px] text-gray-500">
          {isEn ? "Table 7 · Order #1042" : "میز ۷ · سفارش #۱۰۴۲"}
        </p>
        <p className="text-[9px] text-gray-500">
          {isEn ? "14 Oct 2025 · 15:32" : "۱۴۰۴/۰۷/۲۲ · ۱۵:۳۲"}
        </p>
        <div className="my-2 border-t border-dashed border-gray-300" />
        <div className="space-y-1 text-start">
          <div className="flex justify-between text-[10px]">
            <span>{isEn ? "Double Espresso ×2" : "اسپرسو دوبل ×۲"}</span>
            <span>{isEn ? "90,000" : "۹۰,۰۰۰"}</span>
          </div>
          <div className="flex justify-between text-[10px]">
            <span>{isEn ? "Chocolate Cake ×1" : "کیک شکلاتی ×۱"}</span>
            <span>{isEn ? "58,000" : "۵۸,۰۰۰"}</span>
          </div>
          <div className="flex justify-between text-[10px]">
            <span>{isEn ? "Caramel Latte ×1" : "لاته کارامل ×۱"}</span>
            <span>{isEn ? "65,000" : "۶۵,۰۰۰"}</span>
          </div>
        </div>
        <div className="my-2 border-t border-dashed border-gray-300" />
        <div className="flex justify-between text-[10px]">
          <span>{isEn ? "Subtotal" : "جمع"}</span>
          <span>{isEn ? "213,000" : "۲۱۳,۰۰۰"}</span>
        </div>
        <div className="flex justify-between text-[10px]">
          <span>{isEn ? "Tax (9%)" : "مالیات (۹٪)"}</span>
          <span>{isEn ? "19,170" : "۱۹,۱۷۰"}</span>
        </div>
        <div className="flex justify-between text-[10px] font-bold">
          <span>{isEn ? "TOTAL" : "مجموع"}</span>
          <span>{isEn ? "232,170 T" : "۲۳۲,۱۷۰ ت"}</span>
        </div>
        <div className="my-2 border-t border-dashed border-gray-300" />
        <p className="text-[10px] font-semibold">{isEn ? "💳 Card Payment" : "💳 پرداخت کارتی"}</p>
        <div className="my-2 border-t border-dashed border-gray-300" />
        {/* WiFi QR placeholder */}
        <div className="mx-auto mb-1 flex h-12 w-12 items-center justify-center rounded border border-gray-200 bg-gray-50">
          <Wifi className="h-6 w-6 text-gray-400" />
        </div>
        <p className="text-[9px] text-gray-500">{isEn ? "📶 WiFi: Cafe_Dorna" : "📶 WiFi: Cafe_Dorna"}</p>
        <p className="text-[9px] text-gray-500">{isEn ? "Pass: 12345678" : "پسورد: ۱۲۳۴۵۶۷۸"}</p>
        <div className="my-2 border-t border-dashed border-gray-300" />
        <p className="text-[9px] text-gray-500">{isEn ? "Thank you! Visit again 🙏" : "ممنون از انتخاب شما 🙏"}</p>
        <p className="mt-1 text-[9px] text-gray-400">meezi.ir</p>
      </div>
      <div className="h-3 w-full rounded-b-lg bg-gray-100" style={{
        backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 6px, #d1d5db 6px, #d1d5db 8px)"
      }} />
    </div>
  );
}

function KitchenSlipMockup({ locale }: { locale: string }) {
  const isEn = locale === "en";
  return (
    <div className="mx-auto w-52 rounded-lg border border-gray-300 bg-white font-mono shadow-lg">
      <div className="h-3 w-full rounded-t-lg bg-gray-100" style={{
        backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 6px, #d1d5db 6px, #d1d5db 8px)"
      }} />
      <div className="p-3">
        <p className="text-center text-[10px] font-bold text-gray-900">
          {isEn ? "— KITCHEN —" : "— آشپزخانه —"}
        </p>
        <div className="my-1 border-t border-gray-300" />
        <div className="flex justify-between text-[11px] font-bold text-gray-900">
          <span>{isEn ? "Table 7" : "میز ۷"}</span>
          <span>#۱۰۴۲</span>
        </div>
        <p className="text-[9px] text-gray-500">
          {isEn ? "15:32:44" : "۱۵:۳۲:۴۴"}
        </p>
        <div className="my-2 border-t border-dashed border-gray-300" />
        <div className="space-y-1.5">
          <div className="text-[11px] font-bold text-gray-900">
            {isEn ? "2× Double Espresso" : "۲× اسپرسو دوبل"}
          </div>
          <div className="text-[11px] font-bold text-gray-900">
            {isEn ? "1× Chocolate Cake" : "۱× کیک شکلاتی"}
          </div>
          <div className="text-[11px] font-bold text-gray-900">
            {isEn ? "1× Caramel Latte" : "۱× لاته کارامل"}
            <div className="text-[9px] font-normal text-gray-600">
              {isEn ? " ↳ less sugar" : " ↳ کم‌شیرین"}
            </div>
          </div>
        </div>
        <div className="my-2 border-t border-dashed border-gray-300" />
        <p className="text-[9px] text-gray-500 text-center">
          {isEn ? "Printed by Meezi POS" : "چاپ شده توسط میزی"}
        </p>
      </div>
      <div className="h-3 w-full rounded-b-lg bg-gray-100" style={{
        backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 6px, #d1d5db 6px, #d1d5db 8px)"
      }} />
    </div>
  );
}

// ── Feature cards ────────────────────────────────────────────────────────────

const PRINT_FEATURES = [
  {
    icon: Zap,
    titleFa: "چاپ خودکار سفارش",
    titleEn: "Auto-Print on Order",
    descFa: "به محض ثبت سفارش، فیش آشپزخانه بدون دخالت کسی به پرینتر ارسال می‌شود. صفر تأخیر، صفر خطا.",
    descEn: "The moment an order is placed, the kitchen slip auto-prints with zero intervention. Zero delay, zero errors.",
    color: "bg-brand-50 text-brand-700",
  },
  {
    icon: ChefHat,
    titleFa: "پرینتر KDS آشپزخانه",
    titleEn: "Kitchen Station Printer",
    descFa: "چند ایستگاه آشپزخانه؟ هر ایستگاه پرینتر جداگانه می‌تواند داشته باشد. نوشیدنی به بار، غذای گرم به گریل.",
    descEn: "Multiple kitchen stations? Each station gets its own printer. Drinks to bar, hot food to grill.",
    color: "bg-orange-50 text-orange-700",
  },
  {
    icon: Receipt,
    titleFa: "فیش مشتری سفارشی",
    titleEn: "Customizable Customer Receipt",
    descFa: "لوگو، سرتیتر، پاورقی، پسورد WiFi، لینک نظرسنجی و پیام‌های دلخواه را روی فیش مشتری قرار دهید.",
    descEn: "Logo, header, footer, WiFi password, survey link, and custom messages on the customer receipt.",
    color: "bg-blue-50 text-blue-700",
  },
  {
    icon: FileText,
    titleFa: "تقسیم صورت‌حساب",
    titleEn: "Bill Splitting",
    descFa: "صورت‌حساب را بین مشتریان تقسیم کنید. هر بخش فیش جداگانه دارد — نقد، کارت یا ترکیبی.",
    descEn: "Split the bill among guests. Each portion prints separately — cash, card, or mixed payment.",
    color: "bg-purple-50 text-purple-700",
  },
  {
    icon: BarChart3,
    titleFa: "گزارش پایان شیفت",
    titleEn: "End-of-Shift Report",
    descFa: "با بستن شیفت، خلاصه فروش نقد/کارت و جمع سفارش‌ها به‌صورت خودکار چاپ می‌شود.",
    descEn: "When a shift closes, a summary of cash/card sales and total orders prints automatically.",
    color: "bg-amber-50 text-amber-700",
  },
  {
    icon: Smartphone,
    titleFa: "چاپ دستی از اپ گارسون",
    titleEn: "Manual Print from Waiter App",
    descFa: "گارسون می‌تواند در هر لحظه از اپ موبایل فیش مشتری یا فیش آشپزخانه را برای یک سفارش مجدداً چاپ کند.",
    descEn: "The waiter can reprint the customer receipt or kitchen slip for any order directly from the mobile app.",
    color: "bg-teal-50 text-teal-700",
  },
];

const CONNECTION_STEPS_FA = [
  {
    step: "۱",
    title: "اتصال پرینتر به شبکه WiFi",
    desc: "پرینتر را به همان WiFi کافه وصل کنید. از دکمه Feed روی پرینتر برای چاپ صفحه تنظیمات استفاده کنید — آدرس IP در آن چاپ شده.",
    note: "پرینترهای رایج: Epson TM-T88, XPrinter XP-58, Bixolon SRP-350",
  },
  {
    step: "۲",
    title: "وارد کردن IP و پورت در میزی",
    desc: "در داشبورد میزی، بخش تنظیمات → پرینتر را باز کنید. آدرس IP (مثلاً 192.168.1.105) و پورت (معمولاً 9100) را وارد کنید.",
    note: "پورت پیش‌فرض اکثر پرینترهای ESC/POS از جمله Epson و XPrinter برابر ۹۱۰۰ است.",
  },
  {
    step: "۳",
    title: "تست چاپ",
    desc: "دکمه «چاپ تست» را بزنید. یک صفحه تست با عنوان «میزی» چاپ می‌شود و اتصال تأیید می‌شود.",
    note: "در صورت عدم چاپ: مطمئن شوید پرینتر و دستگاهی که داشبورد روی آن باز است روی یک شبکه هستند.",
  },
  {
    step: "۴",
    title: "تنظیم عرض کاغذ و قالب",
    desc: "عرض کاغذ (۵۸ یا ۸۰ میلی‌متر)، سرتیتر، پاورقی، پسورد WiFi و برش خودکار را از همان صفحه تنظیم کنید.",
    note: "در صورت داشتن پرینتر آشپزخانه جداگانه، برای هر ایستگاه IP جداگانه وارد کنید.",
  },
];

const CONNECTION_STEPS_EN = [
  {
    step: "1",
    title: "Connect the printer to WiFi",
    desc: "Connect the printer to the same WiFi as your cafe. Press the Feed button to print a self-test page — the IP address is printed on it.",
    note: "Common printers: Epson TM-T88, XPrinter XP-58, Bixolon SRP-350",
  },
  {
    step: "2",
    title: "Enter IP and port in Meezi",
    desc: "In the Meezi dashboard, go to Settings → Printer. Enter the IP address (e.g. 192.168.1.105) and port (usually 9100).",
    note: "Default port for most ESC/POS printers including Epson and XPrinter is 9100.",
  },
  {
    step: "3",
    title: "Test print",
    desc: "Click the 'Test Print' button. A test page with the 'Meezi' header will print, confirming the connection.",
    note: "If nothing prints: make sure the printer and the device running the dashboard are on the same network.",
  },
  {
    step: "4",
    title: "Configure paper width and template",
    desc: "Set paper width (58mm or 80mm), header, footer, WiFi password, and auto-cut from the same settings page.",
    note: "For a separate kitchen printer, enter a separate IP for each station.",
  },
];

export default async function PrinterGuidePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const isEn = locale === "en";
  const base = `/${locale}`;
  const steps = isEn ? CONNECTION_STEPS_EN : CONNECTION_STEPS_FA;

  return (
    <>
      <JsonLd type="SoftwareApplication" locale={locale} />
      <Navbar />
      <main className="pt-16">
        {/* Hero */}
        <div className="bg-gradient-to-br from-brand-900 to-brand-700 py-20 text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold text-white/80">
            {isEn ? "Printer Guide" : "راهنمای پرینتر"}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl">
            {isEn ? "Connect your printer in 4 steps" : "پرینتر را در ۴ مرحله وصل کنید"}
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-white/60">
            {isEn
              ? "Meezi supports any ESC/POS thermal printer over WiFi. No drivers, no USB — just the IP address and you're done."
              : "میزی با هر پرینتر حرارتی ESC/POS از طریق WiFi کار می‌کند. بدون درایور، بدون USB — فقط آدرس IP وارد کنید."}
          </p>
        </div>

        {/* Connection Steps */}
        <section className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="mb-12 text-center">
            <h2 className="text-2xl font-bold text-gray-900">
              {isEn ? "Setup in 4 steps" : "راه‌اندازی در ۴ مرحله"}
            </h2>
          </div>

          <div className="relative space-y-0">
            {/* Vertical connector line */}
            <div className="absolute start-7 top-8 bottom-8 w-0.5 bg-brand-100 sm:start-8" />

            {steps.map((s, i) => (
              <div key={i} className="relative flex gap-5 pb-10 last:pb-0">
                {/* Step bubble */}
                <div className="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-700 text-sm font-bold text-white shadow-md">
                  {s.step}
                </div>
                <div className="flex-1 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
                  <h3 className="mb-2 text-base font-semibold text-gray-900">{s.title}</h3>
                  <p className="text-sm leading-relaxed text-gray-600">{s.desc}</p>
                  <div className="mt-3 flex items-start gap-2 rounded-xl bg-brand-50 p-3">
                    <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-brand-600" />
                    <p className="text-xs text-brand-800">{s.note}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Receipt examples */}
        <section className="bg-gray-50 py-16">
          <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <div className="mb-10 text-center">
              <h2 className="text-2xl font-bold text-gray-900">
                {isEn ? "Receipt examples" : "نمونه فیش‌های چاپی"}
              </h2>
              <p className="mt-2 text-gray-500">
                {isEn
                  ? "This is what your receipts will look like — fully customizable."
                  : "این شکل فیش‌های شما خواهد بود — کاملاً قابل سفارشی‌سازی."}
              </p>
            </div>

            <div className="grid gap-12 md:grid-cols-2">
              {/* Customer receipt */}
              <div>
                <div className="mb-5 flex items-center gap-2">
                  <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-brand-50">
                    <Receipt className="h-4 w-4 text-brand-700" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-gray-900">
                      {isEn ? "Customer receipt" : "فیش مشتری"}
                    </p>
                    <p className="text-xs text-gray-400">
                      {isEn ? "80mm · ESC/POS" : "۸۰ میلیمتر · ESC/POS"}
                    </p>
                  </div>
                </div>
                <CustomerReceiptMockup locale={locale} />
                <ul className="mt-5 space-y-1.5">
                  {(isEn ? [
                    "Cafe name, address, phone",
                    "Table number and order ID",
                    "All items with quantity and price",
                    "Subtotal, tax, total",
                    "Payment method (cash/card/mixed)",
                    "WiFi password QR code",
                    "Custom footer message",
                    "Meezi.ir branding (optional)",
                  ] : [
                    "نام کافه، آدرس، تلفن",
                    "شماره میز و شناسه سفارش",
                    "تمام آیتم‌ها با تعداد و قیمت",
                    "جمع جزء، مالیات، مجموع",
                    "روش پرداخت (نقد/کارت/ترکیبی)",
                    "QR کد پسورد WiFi",
                    "پیام پاورقی دلخواه",
                    "برندینگ میزی (اختیاری)",
                  ]).map((item) => (
                    <li key={item} className="flex items-start gap-1.5 text-xs text-gray-600">
                      <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-brand-600" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>

              {/* Kitchen slip */}
              <div>
                <div className="mb-5 flex items-center gap-2">
                  <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-orange-50">
                    <ChefHat className="h-4 w-4 text-orange-700" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-gray-900">
                      {isEn ? "Kitchen slip" : "فیش آشپزخانه"}
                    </p>
                    <p className="text-xs text-gray-400">
                      {isEn ? "58mm or 80mm · Large bold font" : "۵۸ یا ۸۰ میلیمتر · فونت درشت"}
                    </p>
                  </div>
                </div>
                <KitchenSlipMockup locale={locale} />
                <ul className="mt-5 space-y-1.5">
                  {(isEn ? [
                    "Table number prominent at top",
                    "Exact order time (hh:mm:ss)",
                    "All items in large bold font",
                    "Per-item notes (less sugar, no onion…)",
                    "Order ID for tracking",
                    "Separate slip per kitchen station",
                    "Auto-print on order confirmation",
                    "Reprint via waiter app anytime",
                  ] : [
                    "شماره میز برجسته در بالا",
                    "زمان دقیق سفارش (ثانیه:دقیقه:ساعت)",
                    "تمام آیتم‌ها با فونت درشت",
                    "یادداشت هر آیتم (کم‌شیرین، بدون پیاز…)",
                    "شناسه سفارش برای پیگیری",
                    "فیش جداگانه برای هر ایستگاه",
                    "چاپ خودکار پس از تأیید سفارش",
                    "چاپ مجدد از اپ گارسون در هر زمان",
                  ]).map((item) => (
                    <li key={item} className="flex items-start gap-1.5 text-xs text-gray-600">
                      <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-orange-600" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* All printing features */}
        <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="mb-10 text-center">
            <h2 className="text-2xl font-bold text-gray-900">
              {isEn ? "All printing features" : "تمام ویژگی‌های چاپ"}
            </h2>
            <p className="mt-2 text-gray-500">
              {isEn
                ? "Everything you need for a paperless-by-choice, not paperless-by-force cafe."
                : "همه‌چیزی که برای یک کافه با مدیریت کاغذی کارآمد نیاز دارید."}
            </p>
          </div>

          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {PRINT_FEATURES.map((f) => (
              <div
                key={f.titleFa}
                className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm hover:-translate-y-0.5 hover:shadow-md transition-all duration-200"
              >
                <div className={`mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl ${f.color}`}>
                  <f.icon className="h-5 w-5" />
                </div>
                <h3 className="mb-2 text-base font-semibold text-gray-900">
                  {isEn ? f.titleEn : f.titleFa}
                </h3>
                <p className="text-sm leading-relaxed text-gray-500">
                  {isEn ? f.descEn : f.descFa}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* Supported printers table */}
        <section className="bg-gray-50 py-14">
          <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-6 text-center text-xl font-bold text-gray-900">
              {isEn ? "Supported printers" : "پرینترهای پشتیبانی‌شده"}
            </h2>
            <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-100 bg-gray-50/60">
                    <th className="px-4 py-3 text-start text-xs font-semibold text-gray-500">
                      {isEn ? "Model" : "مدل"}
                    </th>
                    <th className="px-4 py-3 text-start text-xs font-semibold text-gray-500">
                      {isEn ? "Width" : "عرض"}
                    </th>
                    <th className="px-4 py-3 text-start text-xs font-semibold text-gray-500">
                      {isEn ? "Connection" : "اتصال"}
                    </th>
                    <th className="px-4 py-3 text-start text-xs font-semibold text-gray-500">
                      {isEn ? "Status" : "وضعیت"}
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {[
                    { model: "Epson TM-T88VI/VII", width: "80mm", conn: "WiFi / LAN", status: "✅" },
                    { model: "Epson TM-T20III", width: "80mm", conn: "WiFi / LAN", status: "✅" },
                    { model: "XPrinter XP-58IIH", width: "58mm", conn: "WiFi", status: "✅" },
                    { model: "XPrinter XP-80C", width: "80mm", conn: "WiFi / LAN", status: "✅" },
                    { model: "Bixolon SRP-350plusV", width: "80mm", conn: "LAN", status: "✅" },
                    { model: "Star TSP143IV", width: "80mm", conn: "LAN / CloudPRNT", status: "✅" },
                    { model: isEn ? "Any ESC/POS (port 9100)" : "هر ESC/POS (پورت ۹۱۰۰)", width: "58 / 80mm", conn: "WiFi / LAN", status: isEn ? "✅ Compatible" : "✅ سازگار" },
                  ].map((row) => (
                    <tr key={row.model} className="hover:bg-gray-50/60">
                      <td className="px-4 py-3 font-medium text-gray-800">{row.model}</td>
                      <td className="px-4 py-3 text-gray-600">{row.width}</td>
                      <td className="px-4 py-3 text-gray-600">{row.conn}</td>
                      <td className="px-4 py-3 text-green-600 font-medium">{row.status}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="mt-4 text-center text-xs text-gray-400">
              {isEn
                ? "USB printing requires the device running the dashboard to have the printer driver installed."
                : "چاپ USB نیاز به نصب درایور روی دستگاهی دارد که داشبورد روی آن اجرا می‌شود."}
            </p>
          </div>
        </section>

        {/* Dashboard settings screenshot guide */}
        <section className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="rounded-2xl border border-brand-100 bg-brand-50 p-8">
            <div className="flex items-start gap-4">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-brand-700">
                <Settings className="h-6 w-6 text-white" />
              </div>
              <div>
                <h3 className="mb-2 text-lg font-bold text-gray-900">
                  {isEn ? "Where to find printer settings" : "کجا تنظیمات پرینتر را پیدا کنم؟"}
                </h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  {isEn
                    ? "In your Meezi dashboard: Settings (تنظیمات) → Printer (پرینتر). You'll find sections for: Receipt Printer, Kitchen Printer, Paper Width, Auto Cut, Receipt Header, Receipt Footer, WiFi on Receipt, and Test Print."
                    : "در داشبورد میزی: تنظیمات → پرینتر. بخش‌های زیر را پیدا می‌کنید: پرینتر رسید، پرینتر آشپزخانه، عرض کاغذ، برش خودکار، سرتیتر رسید، پاورقی رسید، رمز WiFi روی رسید و تست پرینت."}
                </p>
                <div className="mt-4 grid gap-2 sm:grid-cols-2">
                  {(isEn ? [
                    "Receipt Printer IP + Port",
                    "Kitchen Printer IP + Port",
                    "Paper Width: 58mm / 80mm",
                    "Auto-cut after each receipt",
                    "Header text (cafe name, address)",
                    "Footer text (thank you message)",
                    "WiFi SSID + password on receipt",
                    "Test print button",
                  ] : [
                    "IP + پورت پرینتر رسید",
                    "IP + پورت پرینتر آشپزخانه",
                    "عرض کاغذ: ۵۸ یا ۸۰ میلیمتر",
                    "برش خودکار پس از هر فیش",
                    "سرتیتر (نام کافه، آدرس)",
                    "پاورقی (پیام تشکر)",
                    "SSID + پسورد WiFi روی فیش",
                    "دکمه تست پرینت",
                  ]).map((item) => (
                    <div key={item} className="flex items-center gap-2 text-sm text-gray-700">
                      <Printer className="h-3.5 w-3.5 text-brand-600" />
                      {item}
                    </div>
                  ))}
                </div>
                <a
                  href="https://app.meezi.ir/fa/settings"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mt-5 inline-flex items-center gap-2 rounded-xl bg-brand-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-800 transition-colors"
                >
                  {isEn ? "Open Printer Settings" : "باز کردن تنظیمات پرینتر"}
                  <ChevronRight className="h-4 w-4" />
                </a>
              </div>
            </div>
          </div>
        </section>

        <CtaBanner />
      </main>
      <Footer />
    </>
  );
}