/**
 * LOCATIONS PAGE
 * 
 * Dedicated page for the restaurant's two physical branches.
 * 
 * ARCHITECTURE:
 * - Two branches are modeled as distinct concepts:
 *     1. Shahi Kitchen Askim (Sisjön) → Full restaurant + famous lunch buffet
 *     2. Shahi Sweets Backaplan       → Sweets, snacks, café, halwa puri etc.
 * - Both are operated by the same team (explicitly stated at the bottom)
 * - Google Maps embeds are intentionally simple (lazy loaded)
 * 
 * FUTURE:
 * - When real online ordering launches, this page could show "Order from Askim"
 *   vs "Order from Backaplan" with different delivery radii.
 * - Both branches now have the same opening hours.
 */

'use client';

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useLanguage } from "@/lib/language-context";
import { getTranslation } from "@/lib/translations";

export default function LocationsPage() {
  const { language } = useLanguage();
  const t = getTranslation(language);
  return (
    <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
      <Navbar />

      <div className="max-w-5xl mx-auto px-6 pt-20 pb-16">
        <div className="text-center mb-12">
          <div className="text-[#B38B4D] text-xs tracking-[3px] mb-3">WHERE TO FIND US</div>
          <h1 className="text-6xl md:text-7xl tracking-[-2.5px] leading-none mb-4">{language === 'sv' ? 'Våra Platser' : 'Our Locations'}</h1>
          <p className="text-xl text-[#6B665F] max-w-md mx-auto">
            {language === 'sv' ? 'Två restauranger i Göteborg — båda serverar autentiska smaker med samma shahi gästfrihet.' : 'Two branches in Gothenburg — both serving authentic flavors with the same Shahi hospitality.'}
          </p>
        </div>

        <div className="flex justify-center mb-8">
          <a href="/#contact" className="btn-primary px-8 py-3 rounded-full text-sm tracking-[0.5px]">
            {t.reserve}
          </a>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {/* Branch 1: Askim */}
          <div className="bg-white border border-[#EDE6D9] rounded-2xl p-8">
            <div className="uppercase text-[#B38B4D] text-xs tracking-[2px] mb-2">RESTAURANT &amp; BUFFET</div>
            <h2 className="text-4xl tracking-[-1.5px] mb-4">Shahi Kitchen – Askim (Sisjön)</h2>

            <div className="space-y-5 text-[15px]">
              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">ADDRESS</div>
                <div>Datavägen 10A<br />436 32 Askim, Gothenburg</div>
              </div>

              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">PHONE</div>
                <a href="tel:031288910" className="block hover:text-[#B38B4D]">031-28 89 10</a>
                <a href="tel:0739381089" className="block hover:text-[#B38B4D]">0739-381089</a>
              </div>

              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">OPENING HOURS</div>
                <div>Monday – Sunday • 11:00 – 21:00</div>
              </div>

              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">WHAT TO EXPECT</div>
                <div className="text-[#6B665F]">Full restaurant experience with our popular lunch buffet, à la carte, and traditional Pakistani &amp; Indian dishes.</div>
              </div>
            </div>

            <div className="mt-8 aspect-video rounded-xl overflow-hidden border border-[#EDE6D9]">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2130.5!2d11.95!3d57.65!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x464ff3c8b8b8b8b8%3A0x1234567890abcdef!2sDatav%C3%A4gen%2010A%2C%20436%2032%20Askim!5e0!3m2!1sen!2sse!4v1700000000000"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
              />
            </div>
          </div>

          {/* Branch 2: Backaplan */}
          <div className="bg-white border border-[#EDE6D9] rounded-2xl p-8">
            <div className="uppercase text-[#B38B4D] text-xs tracking-[2px] mb-2">SWEETS, SNACKS &amp; CAFÉ</div>
            <h2 className="text-4xl tracking-[-1.5px] mb-4">Shahi Sweets – Backaplan</h2>

            <div className="space-y-5 text-[15px]">
              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">ADDRESS</div>
                <div>Krokegårdsgatan 5<br />417 30 Göteborg (Backaplan)</div>
              </div>

              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">PHONE</div>
                <a href="tel:0739381089" className="block hover:text-[#B38B4D]">0739-381089</a>
              </div>

              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">OPENING HOURS</div>
                <div>Monday – Sunday • 11:00 – 21:00</div>
              </div>

              <div>
                <div className="text-[#B38B4D] text-xs tracking-widest mb-1">WHAT TO EXPECT</div>
                <div className="text-[#6B665F]">Fresh mithai (sweets), savory snacks, halwa puri, biryani, nihari, and café-style seating.</div>
              </div>
            </div>

            <div className="mt-8 aspect-video rounded-xl overflow-hidden border border-[#EDE6D9]">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2130!2d11.92!3d57.72!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x464ff3c8b8b8b8b8%3A0x1234567890abcdef!2sKrokeg%C3%A5rdsgatan%205%2C%20417%2030%20G%C3%B6teborg!5e0!3m2!1sen!2sse!4v1700000000000"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
              />
            </div>
          </div>

        </div>

        <div className="mt-12 text-center text-sm text-[#6B665F]">
          Both branches are operated by the same team and share the same passion for authentic flavors.
        </div>
      </div>

      <Footer />
    </div>
  );
}