// Quick community connect bar — Facebook, Messenger, phone, directions
function CommunityBar({ t, setPage }) {
  const lang = t.locale;
  const ui = t.communityBar;
  const c = window.WTN_COMMUNITY || {
    facebook: "https://www.facebook.com/watthainorway",
    messenger: "https://m.me/watthainorway",
    whatsapp: "https://wa.me/4791746685",
    phones: { office: "+4763820103" },
    maps: "https://www.google.com/maps/search/?api=1&query=Wat+Thai+Norway+Trondheimsvegen+582+2016+Frogner",
  };

  const links = [
    { id: "facebook", label: ui.facebook, href: c.facebook, external: true, icon: "f", tone: "nordic" },
    { id: "messenger", label: ui.messenger, href: c.messenger, external: true, icon: "✉", tone: "sakura" },
    { id: "whatsapp", label: ui.whatsapp, href: c.whatsapp, external: true, icon: "W", tone: "forest" },
    { id: "phone", label: ui.call, href: "tel:" + c.phones.office, external: false, icon: "☎", tone: "gold" },
    { id: "maps", label: ui.directions, href: c.maps, external: true, icon: "⌖", tone: "ink" },
    { id: "dhamma", label: ui.dhamma, action: function () { setPage("dailyDhamma"); }, icon: "☽", tone: "gold" },
  ];

  const tones = {
    nordic: { bg: "var(--nordic-soft)", border: "rgba(49,90,115,0.18)", ink: "var(--nordic)" },
    sakura: { bg: "var(--sakura-soft)", border: "rgba(185,111,127,0.2)", ink: "var(--sakura)" },
    forest: { bg: "var(--forest-soft)", border: "rgba(82,98,70,0.18)", ink: "var(--forest)" },
    gold: { bg: "var(--gold-soft)", border: "rgba(198,154,43,0.24)", ink: "var(--accent-deep)" },
    ink: { bg: "rgba(43,33,24,0.06)", border: "rgba(43,33,24,0.12)", ink: "var(--ink)" },
  };

  return (
    <section aria-label={ui.ariaLabel} style={{ background: "var(--bg)", borderBottom: "1px solid var(--line)", paddingTop: "20px", paddingBottom: "20px" }}>
      <div className="wn-container">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", flexWrap: "wrap", marginBottom: "14px" }}>
          <div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)" }}>
              {ui.eyebrow}
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 3.5vw, 26px)", color: "var(--ink)", marginTop: "4px" }}>
              {ui.title}
            </div>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.6, color: "var(--muted)", margin: 0, maxWidth: "420px" }}>
            {ui.body}
          </p>
        </div>
        <div className="wn-community-bar" style={{ display: "grid", gridTemplateColumns: "repeat(6, minmax(0, 1fr))", gap: "10px" }}>
          {links.map(function (link) {
            var tone = tones[link.tone] || tones.gold;
            var inner = (
              <>
                <span aria-hidden="true" style={{ fontSize: "18px", lineHeight: 1, color: tone.ink }}>{link.icon}</span>
                <span style={{ fontFamily: "var(--font-body)", fontSize: "12px", lineHeight: 1.35, color: "var(--ink)", textAlign: "center" }}>{link.label}</span>
              </>
            );
            var style = {
              minHeight: "76px",
              padding: "12px 8px",
              borderRadius: "18px",
              border: "1px solid " + tone.border,
              background: tone.bg,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              gap: "8px",
              cursor: "pointer",
              textDecoration: "none",
              WebkitTapHighlightColor: "transparent",
            };
            if (link.action) {
              return <button key={link.id} type="button" onClick={link.action} style={{ ...style, font: "inherit" }}>{inner}</button>;
            }
            return (
              <a key={link.id} href={link.href} target={link.external ? "_blank" : undefined} rel={link.external ? "noopener noreferrer" : undefined} style={style}>
                {inner}
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}