// Homepage content sections — calm, readable, trust-focused

function HomeSectionShell({ id, eyebrow, title, intro, alt, children }) {
  return (
    <section
      id={id}
      className="wn-home-section"
      aria-labelledby={id + "-title"}
      style={{
        padding: "clamp(56px, 8vw, 96px) 0",
        background: alt ? "var(--bg-deep)" : "var(--bg)",
        borderTop: alt ? "1px solid var(--line)" : "none",
      }}
    >
      <div className="wn-container">
        <header style={{ maxWidth: "720px", marginBottom: "clamp(28px, 4vw, 44px)" }}>
          {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
          {title && (
            <h2 id={id + "-title"} className="wn-h2" style={{ margin: "0 0 14px" }}>
              {title}
            </h2>
          )}
          {intro && <p className="wn-lead" style={{ margin: 0 }}>{intro}</p>}
        </header>
        {children}
      </div>
    </section>
  );
}

function HomeCard({ children, style = {}, className = "" }) {
  return (
    <div className={"wn-card " + className} style={style}>
      {children}
    </div>
  );
}

function HomeAbout({ t, setPage }) {
  const s = t.homeSections.about;
  return (
    <HomeSectionShell id="home-about" eyebrow={s.eyebrow} title={s.title} intro={s.body}>
      <div className="wn-r2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(24px, 4vw, 48px)", alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
          {s.points.map(function (p, i) {
            return (
              <HomeCard key={i}>
                <h3 className="wn-h3" style={{ margin: "0 0 8px" }}>{p.title}</h3>
                <p className="wn-body" style={{ margin: 0, color: "var(--muted)" }}>{p.body}</p>
              </HomeCard>
            );
          })}
        </div>
        <div>
          <img
            src="/assets/life/chanting.jpg"
            alt={s.imageAlt}
            loading="lazy"
            style={{ width: "100%", borderRadius: "20px", display: "block", aspectRatio: "4 / 3", objectFit: "cover", border: "1px solid var(--line)" }}
          />
          <div style={{ marginTop: "20px" }}>
            <BtnSecondary onClick={function () { setPage("about"); }}>{s.cta} →</BtnSecondary>
          </div>
        </div>
      </div>
    </HomeSectionShell>
  );
}

function HomePhotoGrid({ photos, columns }) {
  if (!photos || !photos.length) return null;
  return (
    <div style={{ marginTop: "28px", display: "grid", gridTemplateColumns: "repeat(" + (columns || photos.length) + ", minmax(0, 1fr))", gap: "14px" }}>
      {photos.map(function (photo, i) {
        return (
          <figure key={i} style={{ margin: 0, overflow: "hidden", borderRadius: "16px", aspectRatio: "4 / 3", border: "1px solid var(--line)" }}>
            <img src={photo.image} alt={photo.imageAlt || ""} width={800} height={600} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </figure>
        );
      })}
    </div>
  );
}

function HomePractice({ t, setPage }) {
  const s = t.homeSections.practice;
  return (
    <HomeSectionShell id="home-practice" eyebrow={s.eyebrow} title={s.title} intro={s.body} alt>
      <div className="wn-r3" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "clamp(14px, 2.5vw, 20px)" }}>
        {s.items.map(function (item, i) {
          return (
            <HomeCard key={i} style={{ padding: 0, overflow: "hidden", background: "var(--bg)" }}>
              {item.image && (
                <img
                  src={item.image}
                  alt={item.imageAlt || item.title}
                  width={800}
                  height={500}
                  loading="eager"
                  decoding="async"
                  style={{
                    width: "100%",
                    display: "block",
                    aspectRatio: "16 / 10",
                    minHeight: "160px",
                    objectFit: "cover",
                    objectPosition: "center",
                    borderBottom: "1px solid var(--line)",
                    background: "var(--gold-soft)",
                  }}
                />
              )}
              <div style={{ padding: "clamp(18px, 3vw, 24px)" }}>
                <h3 className="wn-h3" style={{ margin: "0 0 10px" }}>{item.title}</h3>
                <p className="wn-body" style={{ margin: 0, color: "var(--muted)" }}>{item.body}</p>
              </div>
            </HomeCard>
          );
        })}
      </div>
      <div style={{ marginTop: "24px", display: "flex", flexWrap: "wrap", gap: "12px" }}>
        <BtnPrimary onClick={function () { setPage("dailyDhamma"); }}>{s.cta}</BtnPrimary>
        <BtnGhost onClick={function () { setPage("calendar"); }}>{s.ctaEvents}</BtnGhost>
      </div>
    </HomeSectionShell>
  );
}

function HomeCommunity({ t, setPage }) {
  const s = t.homeSections.community;
  const c = window.WTN_COMMUNITY || {};
  return (
    <HomeSectionShell id="home-community" eyebrow={s.eyebrow} title={s.title} intro={s.body}>
      <div className="wn-r2" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(24px, 4vw, 40px)", alignItems: "start" }}>
        <div className="wn-r2 wn-community-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px" }}>
          {s.items.map(function (item, i) {
            return (
              <HomeCard key={i} className="wn-community-card">
                {item.img && (
                  <img
                    src={item.img.charAt(0) === "/" ? item.img : "/" + item.img}
                    alt={item.imageAlt || item.title}
                    width={144}
                    height={144}
                    loading="lazy"
                    decoding="async"
                    className="wn-community-thumb"
                    style={{
                      width: "72px",
                      height: "72px",
                      borderRadius: "14px",
                      objectFit: "cover",
                      display: "block",
                      flexShrink: 0,
                      border: "1px solid var(--line)",
                      background: "var(--bg-deep)",
                    }}
                  />
                )}
                <div style={{ minWidth: 0 }}>
                  <h3 className="wn-h3" style={{ margin: "0 0 8px" }}>{item.title}</h3>
                  <p className="wn-body" style={{ margin: 0, color: "var(--muted)" }}>{item.body}</p>
                </div>
              </HomeCard>
            );
          })}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "14px" }}>
          <HomeCard style={{ background: "var(--nordic-soft)", borderColor: "rgba(49,90,115,0.14)" }}>
            <p className="wn-body" style={{ margin: "0 0 14px", color: "var(--ink)" }}>{s.facebookNote}</p>
            <BtnGhost href={c.facebook || "https://www.facebook.com/watthainorway"} external>{s.facebookCta} →</BtnGhost>
          </HomeCard>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
            <BtnSecondary onClick={function () { setPage("people"); }}>{s.ctaPeople}</BtnSecondary>
            <BtnGhost onClick={function () { setPage("bergen"); }}>{s.ctaBergen}</BtnGhost>
          </div>
        </div>
      </div>
      {s.volunteerPhotos && s.volunteerPhotos.length > 0 && (
        <div style={{ marginTop: "32px" }}>
          <h3 className="wn-h3" style={{ margin: "0 0 14px", fontSize: "18px" }}>{s.volunteerPhotosHeading || "ภาพอาสาสมัคร"}</h3>
          <HomePhotoGrid photos={s.volunteerPhotos} columns={3} />
        </div>
      )}
    </HomeSectionShell>
  );
}

function HomeSupport({ t, setPage }) {
  const s = t.homeSections.support;
  return (
    <HomeSectionShell id="home-support" eyebrow={s.eyebrow} title={s.title} intro={s.body} alt>
      <div className="wn-card wn-support-card" style={{ background: "linear-gradient(135deg, rgba(198,154,43,0.10), var(--bg))", padding: "clamp(24px, 4vw, 36px)", display: "grid", gridTemplateColumns: "1fr auto", gap: "24px", alignItems: "center" }}>
        <div>
          <ul className="wn-body" style={{ margin: 0, paddingLeft: "1.2em", color: "var(--muted)", lineHeight: 1.8 }}>
            {s.uses.map(function (u, i) { return <li key={i}>{u}</li>; })}
          </ul>
        </div>
        <BtnPrimary onClick={function () { setPage("donate"); }}>{s.cta}</BtnPrimary>
      </div>
    </HomeSectionShell>
  );
}

function HomeContactVisit({ t, setPage }) {
  const s = t.homeSections.contact;
  const lang = t.locale;
  const c = window.WTN_COMMUNITY || {};
  const phones = c.phones || { office: "+4763820103", display: { office: "+47 63 82 01 03" } };
  const addressLines = (c.address && (c.address[lang] || c.address.en)) || ["Wat Thai Norway", "Trondheimsvegen 582", "2016 Frogner, Norway"];
  return (
    <HomeSectionShell id="home-contact" eyebrow={s.eyebrow} title={s.title} intro={s.body}>
      <div className="wn-r2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(20px, 4vw, 32px)" }}>
        <HomeCard>
          <h3 className="wn-h3" style={{ margin: "0 0 16px" }}>{s.addressTitle}</h3>
          <address className="wn-body" style={{ fontStyle: "normal", lineHeight: 1.75, marginBottom: "20px" }}>
            {addressLines.map(function (line, i) {
              return <span key={i}>{i > 0 ? <br /> : null}{line}</span>;
            })}
          </address>
          <div style={{ display: "grid", gap: "10px", marginBottom: "20px" }}>
            <a className="wn-body" href={"tel:" + phones.office} style={{ color: "var(--ink)", textDecoration: "none" }}>☎ {phones.display.office}</a>
            <a className="wn-body" href="mailto:info@watthainorway.com" style={{ color: "var(--ink)", textDecoration: "none" }}>✉ info@watthainorway.com</a>
            <a className="wn-body" href={c.facebook || "https://www.facebook.com/watthainorway"} target="_blank" rel="noopener noreferrer" style={{ color: "var(--nordic)", textDecoration: "none" }}>Facebook · Wat Thai Norway</a>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
            <BtnPrimary href={c.maps} external>{s.directionsCta}</BtnPrimary>
            <BtnSecondary onClick={function () { setPage("contact"); }}>{s.contactCta}</BtnSecondary>
          </div>
        </HomeCard>
        <div style={{ display: "grid", gap: "14px" }}>
          {s.tips.map(function (tip, i) {
            return (
              <HomeCard key={i} style={{ background: i === 0 ? "var(--nordic-soft)" : "var(--bg)" }}>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent-deep)", marginBottom: "8px" }}>{tip.label}</div>
                <p className="wn-body" style={{ margin: 0, color: "var(--ink)" }}>{tip.body}</p>
              </HomeCard>
            );
          })}
        </div>
      </div>
    </HomeSectionShell>
  );
}

window.HomeAbout = HomeAbout;
window.HomePractice = HomePractice;
window.HomeCommunity = HomeCommunity;
window.HomeSupport = HomeSupport;
window.HomeContactVisit = HomeContactVisit;