// blocks.jsx — reusable content sections built on i18n data
function TrustBar() {
  const items = [["a", "aL"], ["b", "bL"], ["c", "cL"], ["d", "dL"]];
  return (
    <section style={{ background: "var(--surface-dark)", borderTop: "1px solid var(--line-on-dark)", borderBottom: "1px solid var(--line-on-dark)" }}>
      <Container style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 1, background: "var(--line-on-dark)" }}>
        {items.map(([n, l], i) => (
          <div key={i} style={{ background: "var(--surface-dark)", padding: "28px 24px", textAlign: "center" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px,2.2vw,28px)", fontWeight: 600, color: "var(--gold-300)", letterSpacing: "0.02em" }}>{t("trust." + n)}</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-on-dark-muted)", marginTop: 8 }}>{t("trust." + l)}</div>
          </div>
        ))}
      </Container>
    </section>
  );
}

function PromiseBand() {
  return (
    <section style={{ background: "var(--ink-900)", padding: "100px 0", position: "relative" }}>
      <Container style={{ textAlign: "center", maxWidth: 980 }}>
        <Eyebrow light style={{ justifyContent: "center" }}>{t("home.promiseEyebrow")}</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(30px,4.4vw,54px)", lineHeight: 1.18, color: "var(--fg-on-dark)", margin: "24px 0 0", textWrap: "balance" }}>
          {t("home.promiseTitle")}
        </h2>
        <GoldRule style={{ width: 120, margin: "32px auto" }} />
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 18, lineHeight: 1.7, color: "var(--fg-on-dark-muted)", margin: 0, maxWidth: 660, marginInline: "auto" }}>{t("home.promiseText")}</p>
      </Container>
    </section>
  );
}

function ServiceCard({ s, dark }) {
  return (
    <div style={{ background: dark ? "var(--surface-dark)" : "var(--white)", borderRadius: "var(--radius-lg)", borderTop: "3px solid var(--gold-500)", padding: "30px 28px 32px", boxShadow: dark ? "none" : "var(--shadow-sm)", border: dark ? "1px solid var(--line-on-dark)" : "none", height: "100%", boxSizing: "border-box" }}>
      <Icon name={s.icon} size={28} color="var(--gold-600)" />
      <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 23, fontWeight: 600, margin: "16px 0 10px", color: dark ? "var(--fg-on-dark)" : "var(--fg)" }}>{s.title}</h3>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.65, color: dark ? "var(--fg-on-dark-muted)" : "var(--fg-muted)", margin: 0 }}>{s.desc}</p>
      {s.bullets && (
        <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
          {s.bullets.map((b, i) => (
            <li key={i} style={{ display: "flex", alignItems: "center", gap: 9, fontFamily: "var(--font-sans)", fontSize: 13.5, color: dark ? "var(--fg-on-dark-muted)" : "var(--fg-muted)" }}>
              <Icon name="check" size={14} color="var(--gold-600)" />{b}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function ServiceGrid({ dark, bullets }) {
  const services = t("services");
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
      {services.map((s, i) => <ServiceCard key={i} s={bullets ? s : { ...s, bullets: null }} dark={dark} />)}
    </div>
  );
}

function AudienceCard({ a }) {
  return (
    <div style={{ background: "var(--white)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: "28px 26px", height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column" }}>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--gold-700)" }}>{a.title}</div>
      <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 21, fontWeight: 600, lineHeight: 1.25, margin: "14px 0 12px", color: "var(--fg)" }}>{a.hook}</h3>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.65, color: "var(--fg-muted)", margin: 0 }}>{a.msg}</p>
    </div>
  );
}

function AudienceGrid() {
  const aud = t("audiences");
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
      {aud.map((a, i) => <AudienceCard key={i} a={a} />)}
    </div>
  );
}

function CoopSteps() {
  const steps = t("coopSteps");
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
      {steps.map((s, i) => (
        <div key={i} style={{ padding: "0 26px", borderLeft: "1px solid var(--line-on-dark)", position: "relative" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, letterSpacing: "0.1em", color: "var(--gold-400)" }}>{s.n}</div>
          <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 21, fontWeight: 600, margin: "14px 0 10px", color: "var(--fg-on-dark)" }}>{s.t}</h3>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-on-dark-muted)", margin: 0 }}>{s.d}</p>
        </div>
      ))}
    </div>
  );
}

function FinalCTA() {
  const phone = t("contactData.phone");
  return (
    <section style={{ background: "var(--gold-metallic)", padding: "84px 0" }}>
      <Container style={{ textAlign: "center", maxWidth: 820 }}>
        <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(28px,3.8vw,46px)", lineHeight: 1.14, color: "var(--ink-900)", margin: 0, textWrap: "balance" }}>{t("home.finalTitle")}</h2>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "rgba(10,10,10,0.72)", margin: "18px auto 32px", maxWidth: 520 }}>{t("home.finalText")}</p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <Button variant="dark" href={"tel:" + phone.replace(/\s/g, "")} iconLeft="phone">{phone}</Button>
          <Button variant="dark" href="kontakt.html" icon="arrow-right" style={{ background: "transparent", color: "var(--ink-900)", border: "1.5px solid var(--ink-900)", boxShadow: "none" }}>{t("cta.erstgespraech")}</Button>
        </div>
      </Container>
    </section>
  );
}

function Testimonials({ dark }) {
  const items = t("testimonials");
  return (
    <section style={{ background: dark ? "var(--ink-900)" : "var(--ink-50)", padding: "100px 0" }}>
      <Container>
        <SectionHead light={dark} align="center" eyebrow={t("testi.eyebrow")} title={t("testi.title")} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24, marginTop: 56 }}>
          {items.map((q, i) => (
            <figure key={i} style={{ margin: 0, background: dark ? "var(--surface-dark)" : "var(--white)", border: dark ? "1px solid var(--line-on-dark)" : "1px solid var(--line)", borderTop: "3px solid var(--gold-500)", borderRadius: "var(--radius-lg)", padding: "30px 28px 26px", display: "flex", flexDirection: "column", boxShadow: dark ? "none" : "var(--shadow-sm)" }}>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 52, lineHeight: 0.5, color: "var(--gold-500)", height: 26 }}>“</div>
              <blockquote style={{ margin: 0, flex: 1, fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 17, lineHeight: 1.5, color: dark ? "var(--fg-on-dark)" : "var(--fg)" }}>{q.quote}</blockquote>
              <figcaption style={{ marginTop: 22, paddingTop: 18, borderTop: dark ? "1px solid var(--line-on-dark)" : "1px solid var(--line)" }}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 700, color: dark ? "var(--fg-on-dark)" : "var(--fg)" }}>{q.name}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, letterSpacing: "0.04em", color: "var(--gold-700)", marginTop: 3 }}>{q.role}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { TrustBar, PromiseBand, ServiceCard, ServiceGrid, AudienceCard, AudienceGrid, CoopSteps, FinalCTA, Testimonials });
