// 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>
      )}
      {s.icon === "anchor" && s.bullets && (
        <div style={{ marginTop: 18 }}><ImplantPlanningTrigger /></div>
      )}
    </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>
  );
}

// CodixLightbox — kleines Karussell für die coDiagnostiX-Planungsbilder.
// Backdrop-Klick / Esc schließt, Pfeiltasten blättern.
function CodixLightbox({ onClose }) {
  const shots = t("codiagnostix.shots");
  const n = shots.length;
  const [idx, setIdx] = React.useState(0);
  const go = React.useCallback((d) => setIdx((i) => (i + d + n) % n), [n]);
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowRight") go(1);
      else if (e.key === "ArrowLeft") go(-1);
    };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [go, onClose]);
  const navBtn = { width: 46, height: 46, borderRadius: "50%", border: "1px solid var(--line-gold)", background: "rgba(10,10,10,0.55)", color: "var(--gold-300)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0 };
  const shot = shots[idx];
  const stop = (e) => e.stopPropagation();
  return (
    <div onClick={onClose} role="dialog" aria-modal="true" style={{ position: "fixed", inset: 0, zIndex: 12000, background: "rgba(8,8,8,0.93)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)", display: "flex", flexDirection: "column", padding: "clamp(16px,3vw,40px)" }}>
      <div onClick={stop} style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 18 }}>
        <div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--gold-300)" }}>{t("codiagnostix.title")}</div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--silver)", marginTop: 5 }}>{t("codiagnostix.note")}</div>
        </div>
        <button onClick={onClose} aria-label="Schlie\u00dfen" style={navBtn}><Icon name="x" size={20} /></button>
      </div>
      <div onClick={stop} style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "clamp(8px,2vw,22px)", minHeight: 0 }}>
        <button onClick={() => go(-1)} aria-label="Zur\u00fcck" style={navBtn}><Icon name="chevron-left" size={22} /></button>
        <figure style={{ margin: 0, display: "flex", flexDirection: "column", alignItems: "center", gap: 16, minHeight: 0, maxWidth: "min(1200px, 86vw)" }}>
          <img src={shot.src} alt={shot.cap} style={{ maxWidth: "100%", maxHeight: "68vh", objectFit: "contain", borderRadius: "var(--radius-md)", border: "1px solid var(--line-gold)", boxShadow: "var(--shadow-lg)", background: "#000" }} />
          <figcaption style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.55, color: "var(--fg-on-dark-muted)", textAlign: "center", maxWidth: 760 }}>{shot.cap}</figcaption>
        </figure>
        <button onClick={() => go(1)} aria-label="Weiter" style={navBtn}><Icon name="chevron-right" size={22} /></button>
      </div>
      <div onClick={stop} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, marginTop: 18 }}>
        {shots.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} aria-label={"Bild " + (i + 1)} style={{ width: i === idx ? 26 : 9, height: 9, borderRadius: 99, border: 0, padding: 0, cursor: "pointer", background: i === idx ? "var(--gold-metallic)" : "rgba(255,255,255,0.28)", transition: "all var(--dur-base) var(--ease-out)" }}></button>
        ))}
      </div>
    </div>
  );
}

// Trigger-Link in der Implantologie-Kachel — öffnet das Planungs-Karussell.
function ImplantPlanningTrigger() {
  const [open, setOpen] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  return (
    <React.Fragment>
      <button onClick={() => setOpen(true)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ marginTop: 18, alignSelf: "flex-start", maxWidth: "100%", textAlign: "left", display: "inline", background: "transparent", border: 0, padding: 0, cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 700, letterSpacing: "0.05em", textTransform: "uppercase", lineHeight: 1.6, color: hover ? "var(--gold-600)" : "var(--gold-700)" }}>
        <span style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}>{t("codiagnostix.link")}</span>
        <span style={{ display: "inline-flex", verticalAlign: "middle", marginLeft: 8, transform: hover ? "translateX(3px)" : "none", transition: "transform var(--dur-base) var(--ease-out)" }}><Icon name="arrow-right" size={15} /></span>
      </button>
      {open && <CodixLightbox onClose={() => setOpen(false)} />}
    </React.Fragment>
  );
}

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>
      {a.key === "implantologie" && <ImplantPlanningTrigger />}
    </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, CodixLightbox, ImplantPlanningTrigger });