// Kotleto · LOCATION — map placeholder + hours + contact

function Location({ accent = "#D9461E" }) {
  const { lang } = useLang();

  return (
    <section id="visit" style={{ padding: "100px 0" }}>
      <Wrap className="wrap-pad">
        <SectionTitle
          eyebrow={{ fa: "سر بزن", en: "Visit" }}
          title={{ fa: "بیا حضوری ببین", en: "Drop by, in person" }}
          sub={{ fa: "شیراز، بلوار سرباز. یه چای، یه کتلت، یه گپ.", en: "Shiraz, Sarbaz Boulevard. Tea, cutlets, conversation." }}
          accent={accent}
        />

        <div className="grid grid-loc" style={{ marginTop: 40, gap: 22 }}>
          {/* Map illustration */}
          <div style={{
            background: "var(--paper)", border: "1.5px solid var(--ink)",
            borderRadius: 28, overflow: "hidden", boxShadow: "0 8px 0 var(--ink)",
            position: "relative", minHeight: 480,
          }}>
            <ShirazMap accent={accent} />
            <div style={{
              position: "absolute", bottom: 18, insetInlineStart: 18, insetInlineEnd: 18,
              display: "flex", gap: 10, flexWrap: "wrap",
            }}>
              <a className="btn btn-dark" href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent("شیراز، بلوار سرباز")}`} target="_blank" rel="noopener noreferrer"><Ico.Pin /> {lang === "fa" ? "مسیریابی" : "Directions"}</a>
              <a className="btn btn-ghost" href="tel:071300000000" style={{ background: "var(--paper)" }}><Ico.Phone /> {lang === "fa" ? "تماس" : "Call"}</a>
            </div>
          </div>

          {/* Info card */}
          <div style={{
            background: accent, color: "#fff",
            borderRadius: 28, padding: 30,
            border: "1.5px solid var(--ink)", boxShadow: "0 8px 0 var(--ink)",
            display: "flex", flexDirection: "column", gap: 24,
          }}>
            <div>
              <span className="chip" style={{ background: "rgba(0,0,0,0.2)", color: "#fff", border: "1px solid rgba(255,255,255,0.3)" }}>
                <Ico.Dot/>&nbsp;{lang === "fa" ? "شعبه اصلی" : "Main branch"}
              </span>
              <h3 className="display" style={{ margin: "14px 0 4px", fontSize: 36, lineHeight: 1 }}>
                {lang === "fa" ? "بلوار سرباز" : "Sarbaz Boulevard"}
              </h3>
              <p style={{ margin: 0, fontSize: 15, opacity: 0.9 }}>
                {lang === "fa" ? "شیراز، بلوار سرباز" : "Shiraz, Sarbaz Boulevard"}
              </p>
            </div>

            <div style={{ borderTop: "1px dashed rgba(255,255,255,0.3)", paddingTop: 20 }}>
              <div style={{ fontSize: 11, opacity: 0.7, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 10 }}>{lang === "fa" ? "ساعت کاری" : "Hours"}</div>
              {HOURS.map((h, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", fontSize: 15, borderBottom: i < HOURS.length - 1 ? "1px dashed rgba(255,255,255,0.2)" : "none" }}>
                  <span style={{ fontWeight: 600 }}>{h[lang]}</span>
                  <span className="tnum" style={{ fontWeight: 700 }}>{lang === "fa" ? toFa(h.time) : h.time}</span>
                </div>
              ))}
            </div>

            <div style={{ borderTop: "1px dashed rgba(255,255,255,0.3)", paddingTop: 20, display: "flex", flexDirection: "column", gap: 10 }}>
              <Contact icon={<Ico.Phone />} label={lang === "fa" ? "تلفن ثابت" : "Landline"} value={lang === "fa" ? toFa("071300000000") : "071300000000"} href="tel:071300000000" />
              <Contact icon={<Ico.Phone />} label={lang === "fa" ? "موبایل سفارش" : "Order mobile"} value={lang === "fa" ? toFa("091234567890") : "091234567890"} href="tel:091234567890" />
              <Contact icon={<Ico.Clock />} label={lang === "fa" ? "آماده‌سازی" : "Prep time"} value={lang === "fa" ? `${toFa("۱۵")}–${toFa("۲۰")} دقیقه` : "15–20 min"} />
              <Contact icon={<Ico.Truck />} label={lang === "fa" ? "محدودهٔ ارسال" : "Delivery zone"} value={lang === "fa" ? "کل شهر شیراز" : "All of Shiraz"} />
            </div>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

function Contact({ icon, label, value, href }) {
  const Element = href ? "a" : "div";
  return (
    <Element href={href} style={{ display: "flex", alignItems: "center", gap: 12, borderRadius: 12 }}>
      <div style={{ width: 36, height: 36, borderRadius: 999, background: "rgba(0,0,0,0.2)", display: "grid", placeItems: "center" }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, opacity: 0.7, textTransform: "uppercase", letterSpacing: "0.1em" }}>{label}</div>
        <div dir={href ? "ltr" : undefined} style={{ fontSize: 15, fontWeight: 700, textAlign: href ? "start" : undefined }}>{value}</div>
      </div>
    </Element>
  );
}

function ShirazMap({ accent }) {
  const { lang } = useLang();
  // stylized illustrated map of Shiraz with our pin
  return (
    <svg viewBox="0 0 600 480" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <pattern id="dotsm" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1" fill="rgba(26,20,16,0.18)"/>
        </pattern>
        <linearGradient id="lakeg" x1="0" x2="1">
          <stop offset="0%" stopColor="#9BB5C8"/>
          <stop offset="100%" stopColor="#6B92AB"/>
        </linearGradient>
      </defs>
      <rect width="600" height="480" fill="#EEDCB6"/>
      <rect width="600" height="480" fill="url(#dotsm)"/>

      {/* parks */}
      <path d="M50 90 Q120 60 200 110 Q230 180 150 200 Q70 200 50 130 Z" fill="#9CB073" opacity="0.6"/>
      <path d="M380 300 Q450 280 510 320 Q520 380 460 400 Q400 400 380 360 Z" fill="#9CB073" opacity="0.6"/>

      {/* Dorudgaran river */}
      <path d="M0 240 Q150 200 300 260 Q450 320 600 270" stroke="url(#lakeg)" strokeWidth="22" fill="none" strokeLinecap="round" opacity="0.85"/>

      {/* roads */}
      <path d="M0 150 L600 130" stroke="#FFF" strokeWidth="8"/>
      <path d="M0 350 L600 380" stroke="#FFF" strokeWidth="8"/>
      <path d="M180 0 L220 480" stroke="#FFF" strokeWidth="8"/>
      <path d="M400 0 L420 480" stroke="#FFF" strokeWidth="8"/>
      <path d="M0 150 L600 130" stroke="#1A1410" strokeWidth="1" strokeDasharray="2 6"/>
      <path d="M0 350 L600 380" stroke="#1A1410" strokeWidth="1" strokeDasharray="2 6"/>

      {/* labels */}
      <text x="80" y="80" fontFamily="var(--display)" fontSize="14" fill="#1A1410" opacity="0.6">{lang === "fa" ? "باغ ارم" : "Eram Garden"}</text>
      <text x="380" y="280" fontFamily="var(--display)" fontSize="14" fill="#1A1410" opacity="0.6">{lang === "fa" ? "حافظیه" : "Hafezieh"}</text>
      <text x="100" y="430" fontFamily="var(--display)" fontSize="14" fill="#1A1410" opacity="0.4">{lang === "fa" ? "بلوار سرباز" : "Sarbaz Boulevard"}</text>

      {/* our pin */}
      <g transform="translate(290 200)">
        <ellipse cx="0" cy="50" rx="32" ry="6" fill="rgba(0,0,0,0.25)"/>
        <path d="M0 50 L-26 -8 A26 26 0 1 1 26 -8 Z" fill={accent} stroke="#1A1410" strokeWidth="2.5"/>
        <circle cx="0" cy="-8" r="14" fill="#1A1410"/>
        <text textAnchor="middle" y="-3" fontFamily="var(--display)" fontSize="14" fill={accent}>K</text>
        <g transform="translate(20 -50)">
          <rect x="0" y="0" width="100" height="34" rx="8" fill="#1A1410"/>
          <text x="50" y="22" textAnchor="middle" fontFamily="var(--display)" fontSize="14" fill="#FFF4E2">{lang === "fa" ? "اینجاییم!" : "WE'RE HERE!"}</text>
        </g>
      </g>
    </svg>
  );
}

window.Location = Location;