// contact-page.jsx — ayrı İletişim sayfası (header'daki "İletişim" linki artık
// anasayfa footer'ına kaymak yerine buraya yönlendirir)
const { useEffect: useEffectContact } = React;

function ContactPage({ lang, setLang }) {
  const c = window.CONTENT[lang];
  useEffectContact(() => { window.scrollTo(0, 0); }, []);

  const waText = lang === "tr"
    ? "Merhaba, Elfinrose ürünleri hakkında bilgi almak istiyorum."
    : "Hello, I'd like to learn more about Elfinrose products.";

  const cards = [
    {
      icon: "mapPin",
      title: lang === "tr" ? "Adres" : "Address",
      body: c.footer.address,
      href: window.MAP_PLACE_URL,
      cta: lang === "tr" ? "Haritada göster" : "Show on map",
    },
    {
      icon: "phone",
      title: lang === "tr" ? "Telefon" : "Phone",
      body: c.footer.phone,
      href: `tel:${c.footer.phone.replace(/\s/g, "")}`,
      cta: lang === "tr" ? "Ara" : "Call",
    },
    {
      icon: "mail",
      title: "E-posta",
      body: c.footer.email,
      href: `mailto:${c.footer.email}`,
      cta: lang === "tr" ? "E-posta gönder" : "Send email",
    },
  ];

  return (
    <div style={{ backgroundColor: "#faf7f2" }}>
      <Nav c={c} lang={lang} setLang={setLang} />
      <main className="pt-[110px] lg:pt-[128px] pb-28">
        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 pb-10">
          <nav className="flex items-center gap-2 text-ink/45" style={{ fontSize: 13 }}>
            <a href="/" className="hover:text-ink transition-colors">{c.pdp.home}</a>
            <span>/</span>
            <span className="text-ink/70">{c.nav.contact}</span>
          </nav>
          <Eyebrow className="mt-8">{lang === "tr" ? "Bize Ulaşın" : "Get in Touch"}</Eyebrow>
          <h1 className="font-serif text-ink mt-5" style={{ fontSize: "clamp(30px,4vw,52px)", lineHeight: 1.08, letterSpacing: "-0.01em", textWrap: "balance" }}>
            {lang === "tr" ? "Sorularınız için buradayız." : "We're here for your questions."}
          </h1>
          <p className="text-ink/60 mt-5 max-w-xl" style={{ fontSize: 15.5, lineHeight: 1.7 }}>
            {lang === "tr"
              ? "Ürünlerimiz, siparişiniz ya da bahçemizi ziyaret etmek isterseniz — aşağıdaki kanallardan bize ulaşabilirsiniz."
              : "Whether it's about our products, your order, or visiting the garden — reach us through any of the channels below."}
          </p>
        </section>

        <section className="mx-auto max-w-[1240px] px-6 lg:px-10">
          <div className="grid lg:grid-cols-12 gap-10">
            <div className="lg:col-span-5 space-y-4">
              {cards.map((card) => (
                <a key={card.title} href={card.href} target={card.icon === "mapPin" ? "_blank" : undefined} rel="noopener noreferrer"
                  className="group flex items-start gap-4 rounded-[18px] bg-white p-6 transition-shadow duration-300 hover:shadow-lg"
                  style={{ boxShadow: "0 16px 40px -28px rgba(45,55,72,0.25)" }}>
                  <span className="flex items-center justify-center rounded-full shrink-0"
                    style={{ width: 46, height: 46, backgroundColor: "rgba(155,170,144,0.16)" }}>
                    <Icon name={card.icon} size={20} className="text-sage-deep" />
                  </span>
                  <div>
                    <h3 className="text-ink" style={{ fontSize: 15.5, fontWeight: 600 }}>{card.title}</h3>
                    <p className="text-ink/65 mt-1" style={{ fontSize: 14.5, lineHeight: 1.6 }}>{card.body}</p>
                    <span className="inline-flex items-center gap-1.5 mt-2 text-ink/50 group-hover:text-ink transition-colors" style={{ fontSize: 13 }}>
                      {card.cta}<Icon name="arrowRight" size={13} />
                    </span>
                  </div>
                </a>
              ))}

              <a href={waLink(waText)} target="_blank" rel="noopener noreferrer"
                className="flex items-center justify-center gap-2.5 rounded-full px-7 py-4 text-cream transition-all duration-300 hover:gap-3.5"
                style={{ backgroundColor: "#25D366", fontSize: 15.5, boxShadow: "0 16px 34px -16px rgba(37,211,102,0.55)" }}>
                <WhatsAppGlyph size={20} />{lang === "tr" ? "WhatsApp'tan Yazın" : "Message on WhatsApp"}
              </a>

              <div className="flex items-center gap-3 pt-2">
                {[
                  { icon: "instagram", href: "https://www.instagram.com/elfinrose/", label: "Instagram" },
                  { icon: "facebook", href: "https://www.facebook.com/elfin.gulbahcesi.9", label: "Facebook" },
                ].map((s) => (
                  <a key={s.icon} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                    className="flex items-center justify-center rounded-full text-ink/70 hover:text-ink hover:border-ink/30 transition-colors duration-300"
                    style={{ width: 44, height: 44, border: "1px solid rgba(45,55,72,0.14)" }}>
                    <Icon name={s.icon} size={19} />
                  </a>
                ))}
              </div>
            </div>

            <div className="lg:col-span-7">
              <div className="w-full h-full overflow-hidden rounded-[20px]" style={{ minHeight: 340, border: "1px solid rgba(45,55,72,0.10)" }}>
                <iframe title="Elfin Gül Bahçesi — Google Maps" src={window.MAP_EMBED_URL}
                  width="100%" height="100%" style={{ border: 0, display: "block", minHeight: 340 }}
                  loading="lazy" allowFullScreen referrerPolicy="no-referrer-when-downgrade" />
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer c={c} />
    </div>
  );
}

Object.assign(window, { ContactPage });