// Kotleto · FOOTER + bottom CTA banner

function FooterCTA({ accent = "#D9461E", onOrder }) {
  const { lang } = useLang();
  return (
    <section style={{ padding: "60px 0", background: accent, color: "#fff", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", insetInlineStart: "-3vw", top: "-8vh", zIndex: 0,
        fontFamily: "var(--display)", fontSize: "clamp(220px, 36vw, 600px)",
        color: "rgba(0,0,0,0.06)", lineHeight: 1, pointerEvents: "none",
      }}>K</div>
      <Wrap className="wrap-pad" style={{ position: "relative", zIndex: 1 }}>
        <div className="grid grid-cta" style={{ gap: 30, alignItems: "center" }}>
          <h2 className="display display-h2" style={{
            margin: 0, fontSize: "clamp(44px, 7vw, 100px)", lineHeight: 0.92, color: "#fff",
          }}>
            {lang === "fa" ? <>گرسنه‌ای؟<br /><span style={{ color: "var(--ink)" }}>الان سفارش بده.</span></>
              : <>Hungry?<br /><span style={{ color: "var(--ink)" }}>Order now.</span></>}
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <p style={{ margin: 0, fontSize: 17, opacity: 0.95, lineHeight: 1.5 }}>
              {lang === "fa" ? "۲۰ دقیقه از تپ تا تحویل. توی شیراز سریع‌ترین."
                : "20 minutes from tap to delivery. Fastest in Shiraz."}
            </p>
            <button className="btn btn-dark btn-lg" onClick={onOrder} style={{ alignSelf: "flex-start" }}>
              <L {...COPY.nav.order} /> <Ico.Arrow />
            </button>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

function Footer({ accent = "#D9461E", onAdmin }) {
  const { lang } = useLang();

  const cols = [
    {
      title: lang === "fa" ? "منو" : "Menu",
      links: CATEGORIES.map(c => ({ label: c[lang], href: "#menu" })),
    },
    {
      title: lang === "fa" ? "ما" : "About",
      links: [
        { label: lang === "fa" ? "داستان ما" : "Our story", href: "#story" },
        { label: lang === "fa" ? "موقعیت" : "Location", href: "#visit" },
        { label: lang === "fa" ? "تماس" : "Contact", href: "#visit" },
        { label: lang === "fa" ? "همکاری" : "Careers", href: "mailto:jobs@kotleto.ir" },
      ],
    },
    {
      title: lang === "fa" ? "مدیریت" : "Operations",
      links: [
        { label: lang === "fa" ? "پنل ادمین" : "Admin panel", onClick: onAdmin },
        { label: lang === "fa" ? "ثبت شکایت" : "Complaints", href: "mailto:support@kotleto.ir" },
        { label: lang === "fa" ? "قرارداد فرنچایز" : "Franchise", href: "mailto:franchise@kotleto.ir" },
      ],
    },
  ];

  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)", padding: "70px 0 0" }}>
      <Wrap className="wrap-pad">
        <div className="grid grid-footer" style={{ gap: 30, paddingBottom: 60, borderBottom: "1px solid rgba(255,244,226,0.15)" }}>
          <div>
            <KotletoMark light />
            <p style={{ margin: "20px 0", fontSize: 14, opacity: 0.75, lineHeight: 1.7, maxWidth: 320 }}>
              {lang === "fa" ? "کتلتُ، طعمی که از مامان‌بزرگ به نسل تو رسیده. شیراز، بلوار سرباز، از ۱۳۹۰."
                : "Kotleto, the flavor passed down from grandma to your generation. Shiraz, Sarbaz Boulevard, since 2011."}
            </p>
            <div dir="ltr" style={{ display: "flex", flexDirection: "column", alignItems: lang === "fa" ? "flex-end" : "flex-start", gap: 5, marginBottom: 18, fontSize: 13, fontWeight: 700 }}>
              <a href="tel:071300000000">071300000000</a>
              <a href="tel:091234567890">091234567890</a>
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              {[
                { label: "Instagram", href: "https://instagram.com/kotleto" },
                { label: "Telegram", href: "https://t.me/kotleto" },
                { label: "WhatsApp", href: "https://wa.me/9891234567890" },
              ].map(s => (
                <a key={s.label} href={s.href} target="_blank" rel="noreferrer" style={{
                  padding: "8px 14px", borderRadius: 999,
                  border: "1px solid rgba(255,244,226,0.2)", fontSize: 12, fontWeight: 600, opacity: 0.85,
                }}>{s.label}</a>
              ))}
            </div>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div className="display" style={{ fontSize: 18, marginBottom: 14, color: accent }}>{c.title}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map((l, j) => (
                  <li key={j}>
                    {l.onClick ? (
                      <button onClick={l.onClick} style={{ color: "rgba(255,244,226,0.7)", fontSize: 14, textAlign: "start" }}>{l.label}</button>
                    ) : (
                      <a href={l.href} style={{ color: "rgba(255,244,226,0.7)", fontSize: 14 }}>{l.label}</a>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ padding: "24px 0", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
          <div style={{ fontSize: 12, opacity: 0.55 }}>
            © {lang === "fa" ? toFa("۱۴۰۴") : "2026"} {lang === "fa" ? "کتلتُ — تمامی حقوق محفوظ است." : "Kotleto — All rights reserved."}
          </div>
          <div style={{ fontSize: 12, opacity: 0.55, display: "flex", gap: 18 }}>
            <button onClick={() => notify(lang === "fa" ? "اطلاعات شما فقط در مرورگر خودتان ذخیره می‌شود." : "Your data is stored only in your browser.")} style={{ color: "inherit", fontSize: 12 }}>{lang === "fa" ? "حریم خصوصی" : "Privacy"}</button>
            <button onClick={() => notify(lang === "fa" ? "این نسخه آزمایشی است و پرداخت واقعی ندارد." : "This is a demo and does not process real payments.")} style={{ color: "inherit", fontSize: 12 }}>{lang === "fa" ? "قوانین" : "Terms"}</button>
            <button onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} style={{ color: "inherit", fontSize: 12 }}>{lang === "fa" ? "بالای صفحه" : "Back to top"}</button>
          </div>
        </div>
      </Wrap>
    </footer>
  );
}

window.FooterCTA = FooterCTA;
window.Footer = Footer;