// footer.jsx — map, contact, social

const MAP_PLACE_URL = "https://www.google.com/maps/place/Elfin+G%C3%BCl+Bah%C3%A7esi/@37.8544234,30.967128,17z/data=!3m1!4b1!4m6!3m5!1s0x14c50b5c202b28f3:0xa8b48464dbf2011f!8m2!3d37.8544234!4d30.967128?hl=tr";
const MAP_EMBED_URL = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d45000!2d30.967128!3d37.8544234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14c50b5c202b28f3%3A0xa8b48464dbf2011f!2zRWxmaW4gR8O8bCBCYWjDp2VzaQ!5e0!3m2!1str!2str!4v1780331216295!5m2!1str!2str";

function Footer({ c }) {
  const socials = [
    { icon: "instagram", href: "https://www.instagram.com/elfinrose/", label: "Instagram" },
    { icon: "facebook", href: "https://www.facebook.com/elfin.gulbahcesi.9", label: "Facebook" },
    { icon: "mail", href: `mailto:${c.footer.email}`, label: c.footer.email },
  ];
  return (
    <footer id="iletisim" style={{ backgroundColor: "#2d3748", color: "#faf7f2" }}>
      {/* Map band */}
      <div className="mx-auto max-w-[1240px] px-6 lg:px-10">
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-start py-14 border-b" style={{ borderColor: "rgba(250,247,242,0.12)" }}>
          <div className="lg:py-4">
            <h2 className="font-serif" style={{ fontSize: "clamp(28px,3.4vw,42px)", lineHeight: 1.12, letterSpacing: "-0.01em", textWrap: "balance" }}>
              {c.footer.mapTitle}
            </h2>
            <p className="mt-4" style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(250,247,242,0.62)", maxWidth: 420 }}>{c.footer.mapSub}</p>
            <a href={MAP_PLACE_URL} target="_blank" rel="noopener noreferrer"
              className="mt-7 inline-flex items-center gap-2 rounded-full px-6 py-3 transition-all duration-300 hover:gap-3"
              style={{ backgroundColor: "#faf7f2", color: "#2d3748", fontSize: 14.5, fontWeight: 500 }}>
              <Icon name="mapPin" size={16} />{c.footer.mapBtn}
            </a>
          </div>
          <div className="w-full overflow-hidden rounded-2xl" style={{ border: "1px solid rgba(250,247,242,0.16)" }}>
            <iframe title="Elfin Gül Bahçesi — Google Maps" src={MAP_EMBED_URL}
              width="100%" height="320" style={{ border: 0, display: "block", filter: "grayscale(0.15)" }}
              loading="lazy" allowFullScreen referrerPolicy="no-referrer-when-downgrade" />
          </div>
        </div>

        {/* Links + contact */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-12 gap-10 py-16">
          <div className="lg:col-span-5">
            <a href="/" className="inline-flex items-center rounded-2xl px-5 py-4"
              style={{ backgroundColor: "#faf7f2", boxShadow: "0 8px 24px rgba(0,0,0,0.18)" }}>
              <LogoImg height={64} />
            </a>
            <p className="mt-5" style={{ fontSize: 14.5, lineHeight: 1.75, color: "rgba(250,247,242,0.6)", maxWidth: 320 }}>{c.footer.about}</p>
            <div className="mt-6 flex items-center gap-3">
              {socials.map((s) => (
                <a key={s.icon} href={s.href} target={s.icon === "mail" ? undefined : "_blank"} rel="noopener noreferrer"
                  className="flex items-center justify-center rounded-full transition-all duration-300 hover:bg-cream hover:text-ink"
                  style={{ width: 42, height: 42, border: "1px solid rgba(250,247,242,0.18)", color: "#faf7f2" }} aria-label={s.label}>
                  <Icon name={s.icon} size={18} />
                </a>
              ))}
            </div>
          </div>

          <div className="lg:col-span-3 lg:col-start-7">
            <h4 className="uppercase" style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(250,247,242,0.5)" }}>{c.footer.navTitle}</h4>
            <ul className="mt-5 space-y-3">
              {c.footer.links.map((l) => (
                <li key={l.label}><a href={l.href} className="transition-colors duration-300 hover:text-rose-soft" style={{ fontSize: 15, color: "rgba(250,247,242,0.78)" }}>{l.label}</a></li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-3">
            <h4 className="uppercase" style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(250,247,242,0.5)" }}>{c.footer.contactTitle}</h4>
            <ul className="mt-5 space-y-4">
              <li className="flex items-start gap-3" style={{ color: "rgba(250,247,242,0.78)" }}>
                <Icon name="mapPin" size={17} className="mt-0.5 shrink-0 text-rose-soft" />
                <span style={{ fontSize: 14.5, lineHeight: 1.6 }}>{c.footer.address}</span>
              </li>
              <li className="flex items-center gap-3" style={{ color: "rgba(250,247,242,0.78)" }}>
                <Icon name="phone" size={17} className="shrink-0 text-rose-soft" />
                <span style={{ fontSize: 14.5 }}>{c.footer.phone}</span>
              </li>
              <li className="flex items-center gap-3" style={{ color: "rgba(250,247,242,0.78)" }}>
                <Icon name="mail" size={17} className="shrink-0 text-rose-soft" />
                <span style={{ fontSize: 14.5 }}>{c.footer.email}</span>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom bar — tek satır: telif (sol) + yasal linkler (sağ) */}
        <div className="flex flex-wrap items-center justify-center sm:justify-between gap-x-5 gap-y-3 py-7"
          style={{ borderTop: "1px solid rgba(250,247,242,0.12)" }}>
          <span style={{ fontSize: 12.5, color: "rgba(250,247,242,0.42)" }}>
            {(() => {
              const [before, after] = c.footer.copyright.split(c.footer.creditName);
              return (
                <>
                  {before}
                  <a href={c.footer.creditUrl} target="_blank" rel="noopener noreferrer"
                    className="transition-colors duration-300 hover:text-rose-soft"
                    style={{ color: "inherit" }}>{c.footer.creditName}</a>
                  {after}
                </>
              );
            })()}
          </span>
          <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2" style={{ fontSize: 12.5 }}>
            {[
              { label: c.footer.legalTerms, href: "/kullanim-sozlesmesi" },
              { label: c.footer.legalDistance, href: "/mesafeli-satis-sozlesmesi" },
              { label: c.footer.legalPreinfo, href: "/on-bilgilendirme-formu" },
              { label: c.footer.legalPrivacy, href: "/gizlilik" },
              { label: c.footer.legalKvkk, href: "/kvkk" },
            ].map((l, i, arr) => (
              <React.Fragment key={l.href}>
                <a href={l.href} className="transition-colors duration-300 hover:text-rose-soft" style={{ color: "rgba(250,247,242,0.55)" }}>{l.label}</a>
                {i < arr.length - 1 && <span className="opacity-30" style={{ color: "rgba(250,247,242,0.42)" }}>·</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

// Floating WhatsApp button — stays fixed while the page scrolls so visitors
// can reach us on WhatsApp from anywhere. Bottom-right (the tweaks panel only
// renders when activated by a design-tool host, so no real-visitor overlap).
function FloatingWhatsApp({ lang = "tr" }) {
  const label = lang === "tr" ? "WhatsApp ile yazın" : "Chat on WhatsApp";
  const text = lang === "tr"
    ? "Merhaba, Elfinrose ürünleri hakkında bilgi almak istiyorum."
    : "Hello, I'd like to learn more about Elfinrose products.";
  return (
    <a href={waLink(text)} target="_blank" rel="noopener noreferrer" aria-label={label} title={label}
      className="fixed bottom-5 right-5 z-[2147483645] flex items-center justify-center rounded-full transition-transform duration-300 hover:scale-105"
      style={{ width: 56, height: 56, backgroundColor: "#25D366", color: "#fff", boxShadow: "0 8px 26px rgba(37,211,102,0.45)" }}>
      <WhatsAppGlyph size={30} />
    </a>
  );
}

Object.assign(window, { Footer, FloatingWhatsApp, MAP_PLACE_URL, MAP_EMBED_URL });