// Visitor guide — practical info for Thai community travelling to the temple
function VisitorGuide({ t, setPage }) {
  const lang = t.locale;
  const ui = t.templeActivities.visitor;
  const c = window.WTN_COMMUNITY || {};

  return (
    <TempleSection id="visitor-guide" eyebrow={ui.eyebrow} title={ui.title} intro={ui.intro}>
      <div className="wn-visitor-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "16px" }}>
        {ui.tips.map(function (tip, i) {
          return (
            <TempleCard key={i} style={{ background: i === 1 ? "var(--nordic-soft)" : "var(--bg)" }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent-deep)", marginBottom: "10px" }}>
                {tip.label}
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(16px, 3.2vw, 17px)", lineHeight: 1.75, color: "var(--ink)", margin: 0 }}>
                {tip.body}
              </p>
            </TempleCard>
          );
        })}
      </div>
      <div style={{ marginTop: "20px", display: "flex", flexWrap: "wrap", gap: "12px" }}>
        <TemplePrimaryButton href={c.maps} external>{ui.directionsCta}</TemplePrimaryButton>
        <TempleGhostButton href={"tel:" + c.phones.office}>{ui.callCta} · {c.phones.display.office}</TempleGhostButton>
        {setPage && (
          <TempleGhostButton onClick={function () { setPage("contact"); }}>{ui.contactCta}</TempleGhostButton>
        )}
      </div>
    </TempleSection>
  );
}