New export

app/arak/page.tsx

@@ -113,6 +113,28 @@ export default function PricingPage() {
     const expressInfoPozsony = expressInfoText("23.500 HUF")
     const expressInfoBudapestBecs = expressInfoText("50.000 HUF")
 
+    const districtSurcharge = language === "hu"
+        ? {
+            label: "Kerületi felárak – részletek",
+            title: "Budapesti kerületi felárak",
+            description: "Az alábbi díjak a táblázatban szereplő alapárakon felül fizetendők Budapesten, kerületi címek esetén:",
+            items: [
+                "2.000 Ft / út: II., III., X., XII., XIII., XIV. kerület",
+                "3.500 Ft / út: IV., XV., XVI., XVII. kerület"
+            ],
+            closeLabel: "Bezár"
+        }
+        : {
+            label: "District surcharges – details",
+            title: "Budapest district surcharges",
+            description: "The following fees apply in Budapest for district addresses, in addition to the base fares shown in the tables:",
+            items: [
+                "2,000 HUF / trip: districts II, III, X, XII, XIII, XIV",
+                "3,500 HUF / trip: districts IV, XV, XVI, XVII"
+            ],
+            closeLabel: "Close"
+        }
+
     const routeNav = [
         {
             id: "gyor-becs",
@@ -230,6 +252,7 @@ export default function PricingPage() {
                             vipInfo={vipInfo}
                             effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                             expressInfo={expressInfoBudapest}
+                            districtSurcharge={districtSurcharge}
                         />
                     </div>
 
@@ -254,6 +277,7 @@ export default function PricingPage() {
                             vipInfo={vipInfoBudapestVienna}
                             effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                             expressInfo={expressInfoBudapestBecs}
+                            districtSurcharge={districtSurcharge}
                         />
                     </div>
                     {/* Additional Info Cards */}

components/pricing-table.tsx

@@ -1,8 +1,9 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Info, Tag, Check, Shield } from "lucide-react"
+import { Info, Tag, Check, Shield, CircleHelp } from "lucide-react"
 import { useLanguage } from "@/lib/language-context"
+import { useState } from "react"
 
 interface PricingRow {
     persons: string
@@ -24,6 +25,13 @@ interface PricingTableProps {
     vipInfo?: string[]
     effectiveFrom?: string
     expressInfo?: string
+    districtSurcharge?: {
+        label: string
+        title: string
+        description: string
+        items: string[]
+        closeLabel: string
+    }
 }
 
 const PricingTable = ({
@@ -32,9 +40,11 @@ const PricingTable = ({
     specials,
     vipInfo,
     effectiveFrom,
-    expressInfo
+    expressInfo,
+    districtSurcharge
 }: PricingTableProps) => {
     const { t } = useLanguage()
+    const [isSurchargeOpen, setIsSurchargeOpen] = useState(false)
 
     return (
         <div className="w-full space-y-8 mb-24">
@@ -50,6 +60,16 @@ const PricingTable = ({
                 <h2 className="text-2xl md:text-3xl font-black tracking-tight -mt-8 md:-mt-10 ml-1 text-slate-900 max-w-2xl uppercase">
                     {route}
                 </h2>
+                {districtSurcharge && (
+                    <button
+                        type="button"
+                        onClick={() => setIsSurchargeOpen(true)}
+                        className="inline-flex items-center gap-2 rounded-full border border-secondary/40 bg-secondary/10 px-4 py-2 text-[11px] font-black uppercase tracking-[0.25em] text-secondary transition-colors hover:border-secondary hover:bg-secondary/20"
+                    >
+                        <CircleHelp className="h-4 w-4" />
+                        {districtSurcharge.label}
+                    </button>
+                )}
             </div>
 
             <div className="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 overflow-hidden">
@@ -201,6 +221,54 @@ const PricingTable = ({
                     {effectiveFrom}
                 </div>
             )}
+
+            {districtSurcharge && isSurchargeOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 px-4">
+                    <div className="w-full max-w-2xl overflow-hidden rounded-[2rem] border border-slate-800/80 bg-slate-900 text-white shadow-[0_30px_80px_rgba(15,23,42,0.6)]">
+                        <div className="relative px-8 py-6">
+                            <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-900 to-slate-800 opacity-90" />
+                            <div className="relative flex items-center justify-between">
+                                <div>
+                                    <p className="text-[10px] uppercase tracking-[0.35em] text-secondary/80">
+                                        {districtSurcharge.label}
+                                    </p>
+                                    <h4 className="text-lg font-black uppercase tracking-tight text-white">
+                                        {districtSurcharge.title}
+                                    </h4>
+                                </div>
+                                <button
+                                    type="button"
+                                    onClick={() => setIsSurchargeOpen(false)}
+                                    className="h-9 w-9 rounded-full border border-white/10 bg-white/5 text-white/70 transition-colors hover:bg-white/10 hover:text-white"
+                                    aria-label={districtSurcharge.closeLabel}
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        </div>
+                        <div className="space-y-5 px-8 pb-8 pt-2 text-sm text-white/85">
+                            <p className="leading-relaxed">{districtSurcharge.description}</p>
+                            <div className="space-y-3">
+                                {districtSurcharge.items.map((item, idx) => (
+                                    <div key={idx} className="flex items-start gap-3 rounded-xl border border-white/5 bg-white/5 px-4 py-3">
+                                        <span className="mt-0.5 h-2 w-2 flex-shrink-0 rounded-full bg-secondary shadow-[0_0_10px_rgba(217,163,33,0.6)]" />
+                                        <span className="font-semibold text-white/90">{item}</span>
+                                    </div>
+                                ))}
+                            </div>
+                            <div className="flex justify-end pt-2">
+                                <button
+                                    type="button"
+                                    onClick={() => setIsSurchargeOpen(false)}
+                                    className="rounded-full bg-secondary px-6 py-2 text-[11px] font-black uppercase tracking-[0.25em] text-white hover:bg-secondary/90"
+                                >
+                                    {districtSurcharge.closeLabel}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     )
 }