// Bergen branch page — connected to the main Wat Thai Norway site.
function BergenPage({ t }) {
  const b = t.bergen;
  const facebookUrl = "https://www.facebook.com/profile.php?id=100064747836523";
  const facebookEmbed = "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100064747836523&tabs=timeline&width=500&height=650&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false";
  const mapUrl = "https://www.google.com/maps/search/?api=1&query=Bj%C3%B8rndalstj%C3%B8rnet+20+B+5171+Loddefjord";

  return (
    <div>
      <section style={{ paddingTop: "54px", paddingBottom: "42px", background: "linear-gradient(180deg, var(--bg) 0%, var(--nordic-soft) 100%)" }}>
        <div className="wn-container">
          <PageHeading eyebrow={b.eyebrow} title={b.title} intro={b.intro} />
          <div className="wn-r2" style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: "46px", alignItems: "center" }}>
            <div>
              <div style={{ display: "inline-flex", alignItems: "center", gap: "8px", padding: "8px 13px", border: "1px solid rgba(49,90,115,0.22)", borderRadius: "999px", background: "rgba(255,255,255,0.54)", fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--nordic)", marginBottom: "22px" }}>
                <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--accent)" }} />
                {b.badge}
              </div>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(34px, 4vw, 58px)", fontWeight: 400, lineHeight: 1.08, color: "var(--ink)", margin: 0 }}>
                {b.leadTitle}
              </h2>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.75, color: "var(--muted)", marginTop: "22px", maxWidth: "620px" }}>
                {b.leadBody}
              </p>
              <a href={facebookUrl} target="_blank" rel="noopener noreferrer" style={{ marginTop: "26px", background: "var(--nordic)", color: "var(--bg)", border: "1px solid var(--nordic)", padding: "14px 22px", borderRadius: "999px", fontFamily: "var(--font-body)", fontSize: "13px", letterSpacing: "0.04em", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "8px" }}>
                <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--accent)" }} />
                {b.openFacebook} →
              </a>
            </div>

            <div style={{ position: "relative" }}>
              <img
                src="/assets/life/group-grass.jpg"
                alt={b.title}
                loading="lazy"
                style={{ display: "block", width: "100%", aspectRatio: "4 / 3", objectFit: "cover", border: "1px solid var(--line)" }}
              />
              <div style={{ position: "absolute", bottom: "18px", left: "18px", right: "18px", padding: "16px 18px", background: "rgba(43,33,24,0.78)", color: "var(--bg)", backdropFilter: "blur(6px)" }}>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "5px" }}>
                  Bergen
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", lineHeight: 1.2 }}>
                  {b.badge}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: "72px", paddingBottom: "28px" }}>
        <div className="wn-container">
          <div className="wn-r2" style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: "18px", alignItems: "stretch" }}>
            <article style={{ border: "1px solid rgba(49,90,115,0.18)", background: "var(--nordic-soft)", padding: "28px", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: "26px" }}>
              <div>
                <Eyebrow>{b.addressTitle}</Eyebrow>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3vw, 42px)", fontWeight: 400, color: "var(--ink)", lineHeight: 1.12, margin: 0 }}>
                  {b.addressTitle}
                </h3>
                <address style={{ marginTop: "22px", fontStyle: "normal", fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.65, color: "var(--ink)" }}>
                  {b.addressLines.map((line) => (
                    <div key={line}>{line}</div>
                  ))}
                </address>
              </div>
              <a href={mapUrl} target="_blank" rel="noopener noreferrer" style={{ alignSelf: "flex-start", background: "var(--nordic)", color: "var(--bg)", border: "1px solid var(--nordic)", padding: "14px 22px", borderRadius: "999px", fontFamily: "var(--font-body)", fontSize: "13px", letterSpacing: "0.04em", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "8px" }}>
                <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--accent)" }} />
                {b.directionsLabel} →
              </a>
            </article>

            <article style={{ border: "1px solid var(--line)", background: "var(--bg)", padding: "28px" }}>
              <Eyebrow>{b.contactTitle}</Eyebrow>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3vw, 42px)", fontWeight: 400, color: "var(--ink)", lineHeight: 1.12, margin: 0 }}>
                {b.contactTitle}
              </h3>
              <div style={{ marginTop: "22px", display: "grid", gap: "10px" }}>
                {b.contacts.map((person) => (
                  <a key={person.phone} href={"tel:" + person.phone.replace(/\s/g, "")} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", padding: "15px 16px", border: "1px solid var(--line)", background: "var(--bg-deep)", textDecoration: "none", color: "var(--ink)" }}>
                    <span>
                      <span style={{ display: "block", fontFamily: "var(--font-display)", fontSize: "22px", lineHeight: 1.2 }}>{person.displayName}</span>
                      <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: "12px", color: "var(--muted)", marginTop: "4px", letterSpacing: "0.04em" }}>{person.name}</span>
                    </span>
                    <span style={{ flexShrink: 0, display: "inline-flex", alignItems: "center", gap: "8px", fontFamily: "var(--font-body)", fontSize: "13px", color: "var(--nordic)", whiteSpace: "nowrap" }}>
                      {b.callLabel} {person.phone} →
                    </span>
                  </a>
                ))}
              </div>
            </article>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: "34px", paddingBottom: "34px", background: "var(--bg)" }}>
        <div className="wn-container">
          <div style={{ border: "1px solid var(--line)", background: "var(--bg-deep)", padding: "28px" }}>
            <div style={{ maxWidth: "780px", marginBottom: "26px" }}>
              <Eyebrow>{b.committeeTitle}</Eyebrow>
              <SectionTitle size="sm">{b.committeeTitle}</SectionTitle>
            </div>
            <div className="wn-r3" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "12px" }}>
              {b.committee.map((member) => (
                <article key={member.role + member.name} style={{ border: "1px solid var(--line)", background: "var(--bg)", padding: "18px 18px 20px" }}>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)", lineHeight: 1.5 }}>
                    {member.role}
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "23px", lineHeight: 1.2, color: "var(--ink)", marginTop: "10px" }}>
                    {member.name}
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: "34px", paddingBottom: "96px", background: "var(--bg-deep)" }}>
        <div className="wn-container wn-r2" style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "36px", alignItems: "start" }}>
          <div style={{ padding: "28px", border: "1px solid var(--line)", background: "var(--bg)" }}>
            <Eyebrow>{b.facebookTitle}</Eyebrow>
            <SectionTitle size="sm">{b.facebookTitle}</SectionTitle>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.7, color: "var(--muted)", marginTop: "18px" }}>
              {b.facebookBody}
            </p>
            <div style={{ marginTop: "28px", paddingTop: "22px", borderTop: "1px solid var(--line)" }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "8px" }}>
                {b.noteTitle}
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "13px", lineHeight: 1.65, color: "var(--muted)", margin: 0 }}>
                {b.noteBody}
              </p>
            </div>
          </div>

          <div style={{ border: "1px solid var(--line)", background: "var(--bg)", padding: "14px", boxShadow: "0 18px 48px rgba(43,33,24,0.08)" }}>
            <div style={{ width: "100%", overflow: "hidden", background: "var(--bg-deep)" }}>
              <iframe
                title="Facebook — Wat Thai Bergen"
                src={facebookEmbed}
                width="500"
                height="650"
                style={{ display: "block", border: "none", width: "100%", maxWidth: "500px", margin: "0 auto" }}
                scrolling="no"
                frameBorder="0"
                allowFullScreen={true}
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
                loading="lazy"
              ></iframe>
            </div>
            <a href={facebookUrl} target="_blank" rel="noopener noreferrer" style={{ marginTop: "12px", color: "var(--nordic)", fontFamily: "var(--font-body)", fontSize: "13px", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "6px" }}>
              {b.openFacebook} →
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.BergenPage = BergenPage;