// components.jsx — shared site primitives & chrome
const { useState, useEffect, useRef } = React;

function Icon({ name, size = 18, color, style }) {
  return <span style={{ fontSize: size, color, display: "inline-flex", lineHeight: 0, ...style }}><i data-lucide={name}></i></span>;
}
function refreshIcons() { if (window.lucide) window.lucide.createIcons({ attrs: { "stroke-width": 1.6 } }); }
function useIcons(dep) { useEffect(() => { refreshIcons(); }); }

function Container({ children, width = 1200, style, className }) {
  return <div className={"bzt-container" + (className ? " " + className : "")} style={{ maxWidth: width, margin: "0 auto", padding: "0 40px", boxSizing: "border-box", width: "100%", ...style }}>{children}</div>;
}

function Eyebrow({ children, light, style }) {
  return (
    <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: light ? "var(--gold-300)" : "var(--gold-700)", display: "inline-flex", alignItems: "center", gap: 12, ...style }}>
      <span style={{ width: 30, height: 1, background: "var(--gold-500)" }}></span>{children}
    </span>
  );
}

function GoldRule({ style }) { return <div style={{ height: 1, background: "var(--gold-hairline)", ...style }}></div>; }

function Button({ children, variant = "primary", size = "md", href, onClick, icon, iconLeft, target, download, style }) {
  const [hover, setHover] = useState(false);
  const base = {
    fontFamily: "var(--font-sans)", fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase",
    fontSize: size === "sm" ? 11 : 13, padding: size === "sm" ? "10px 18px" : "15px 28px",
    borderRadius: "var(--radius-md)", border: 0, cursor: "pointer", transition: "all var(--dur-base) var(--ease-out)",
    display: "inline-flex", alignItems: "center", gap: 9, whiteSpace: "nowrap", textDecoration: "none",
  };
  const variants = {
    primary: { background: "var(--gold-metallic)", color: "var(--ink-900)", boxShadow: "var(--shadow-gold)" },
    dark: { background: "var(--ink-900)", color: "var(--gold-300)" },
    outline: { background: "transparent", color: "var(--ink-800)", border: "1.5px solid var(--ink-700)" },
    outlineLight: { background: "transparent", color: "var(--gold-200)", border: "1.5px solid var(--gold-500)" },
    ghost: { background: "transparent", color: "var(--ink-800)", padding: size === "sm" ? "10px 6px" : "15px 6px" },
  };
  const hov = hover ? (
    variant === "primary" ? { transform: "translateY(-1px)", boxShadow: "0 10px 30px rgba(255,208,48,0.45)", filter: "brightness(1.04)" } :
    variant === "outline" ? { background: "var(--ink-900)", color: "var(--gold-300)", borderColor: "var(--ink-900)" } :
    variant === "outlineLight" ? { background: "rgba(255,208,48,0.12)" } :
    variant === "dark" ? { filter: "brightness(1.15)" } : { color: "var(--gold-700)" }
  ) : {};
  const Tag = href ? "a" : "button";
  return (
    <Tag href={href} target={target} download={download} rel={target === "_blank" ? "noopener noreferrer" : undefined} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ ...base, ...variants[variant], ...hov, ...style }}>
      {iconLeft && <Icon name={iconLeft} size={size === "sm" ? 14 : 16} />}
      {children}
      {icon && <Icon name={icon} size={size === "sm" ? 14 : 16} />}
    </Tag>
  );
}

function SectionHead({ eyebrow, title, lead, light, align = "left", maxTitle = 720 }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 800 : maxTitle, marginInline: align === "center" ? "auto" : 0 }}>
      {eyebrow && <Eyebrow light={light} style={{ justifyContent: align === "center" ? "center" : "flex-start" }}>{eyebrow}</Eyebrow>}
      <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(30px, 4vw, 48px)", lineHeight: 1.1, color: light ? "var(--fg-on-dark)" : "var(--fg)", margin: "18px 0 0" }}>{title}</h2>
      {lead && <p style={{ fontFamily: "var(--font-sans)", fontSize: 18, lineHeight: 1.65, color: light ? "var(--fg-on-dark-muted)" : "var(--fg-muted)", margin: "18px 0 0", maxWidth: 640, marginInline: align === "center" ? "auto" : 0 }}>{lead}</p>}
    </div>
  );
}

// Image placeholder — styled, with caption. (Real images get dropped in later.)
function Placeholder({ label, ratio = "4 / 3", dark, icon = "image", style }) {
  return (
    <div style={{ aspectRatio: ratio, width: "100%", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, border: "1px dashed " + (dark ? "rgba(255,255,255,0.16)" : "var(--line-strong)"), background: dark ? "var(--surface-dark)" : "var(--ink-100)", color: dark ? "var(--fg-on-dark-muted)" : "var(--fg-subtle)", ...style }}>
      <Icon name={icon} size={26} color="var(--gold-500)" />
      {label && <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.06em", textAlign: "center", padding: "0 16px" }}>{label}</span>}
    </div>
  );
}

// Privacy-friendly click-to-load (Option A / DSGVO): renders a branded placeholder;
// the third-party iframe (YouTube, Google Calendar, OSM map) is injected ONLY after
// the visitor explicitly clicks — so no data (and no external preview image) reaches
// the provider before consent.
function ClickToLoad({ src, title, ratio, height, label, note, icon = "play", dark = true, allow, autoplayParam }) {
  const [loaded, setLoaded] = useState(false);
  const box = { position: "relative", width: "100%", ...(ratio ? { aspectRatio: ratio } : (height ? { height } : { height: "100%" })), background: dark ? "#000" : "var(--ink-100)" };
  if (loaded) {
    const finalSrc = autoplayParam ? src + (src.includes("?") ? "&" : "?") + autoplayParam : src;
    return (
      <div style={box}>
        <iframe src={finalSrc} title={title} style={{ width: "100%", height: "100%", border: 0, display: "block" }} allow={allow} allowFullScreen loading="lazy"></iframe>
      </div>
    );
  }
  return (
    <button type="button" onClick={() => setLoaded(true)} aria-label={label}
      style={{ ...box, cursor: "pointer", border: 0, padding: "24px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, background: dark ? "var(--surface-dark)" : "var(--ink-100)", textAlign: "center" }}>
      <span style={{ width: 70, height: 70, borderRadius: "50%", background: "var(--gold-metallic)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-gold)", flexShrink: 0 }}>
        <Icon name={icon} size={28} color="var(--ink-900)" />
      </span>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 700, letterSpacing: "0.02em", color: dark ? "var(--fg-on-dark)" : "var(--fg)" }}>{label}</span>
      {note && <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, lineHeight: 1.55, color: dark ? "var(--fg-on-dark-muted)" : "var(--fg-muted)", maxWidth: 380 }}>{note}</span>}
    </button>
  );
}

const NAV_LINKS = [
  ["start", "index.html"], ["leistungen", "leistungen.html"], ["kooperation", "kooperation.html"],
  ["onboarding", "onboarding.html"], ["fortbildungen", "fortbildungen.html"], ["ueber", "ueber-uns.html"], ["kontakt", "kontakt.html"],
];

function LangToggle({ light }) {
  const cur = window.getLang();
  const c = light ? "var(--fg-on-dark-muted)" : "var(--fg-muted)";
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 2, fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700, letterSpacing: "0.06em" }}>
      {["de", "en"].map((l, i) => (
        <React.Fragment key={l}>
          {i === 1 && <span style={{ color: c, opacity: 0.5 }}>/</span>}
          <button onClick={() => window.setLang(l)} style={{ background: "none", border: 0, cursor: "pointer", padding: "2px 4px", textTransform: "uppercase", color: cur === l ? "var(--gold-400)" : c }}>{l}</button>
        </React.Fragment>
      ))}
    </div>
  );
}

function Nav({ active }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 30);
    f(); window.addEventListener("scroll", f); return () => window.removeEventListener("scroll", f);
  }, []);
  const phone = t("contactData.phone");
  const tel = "tel:" + phone.replace(/\s/g, "");
  return (
    <header style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 60, transition: "all var(--dur-base) var(--ease-out)", background: scrolled || open ? "rgba(10,10,10,0.96)" : "rgba(10,10,10,0.4)", backdropFilter: "blur(12px)", borderBottom: "1px solid " + (scrolled || open ? "var(--line-on-dark)" : "transparent") }}>
      <style>{`
        .bzt-navlinks{display:flex;align-items:center;gap:22px}
        .bzt-link{position:relative;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0.04em;white-space:nowrap;color:var(--fg-on-dark-muted);text-decoration:none;padding:4px 0;transition:color var(--dur-fast)}
        .bzt-link:hover,.bzt-link.active{color:var(--gold-300)}
        .bzt-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--gold-400);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
        .bzt-link:hover::after,.bzt-link.active::after{transform:scaleX(1)}
        .bzt-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:13.5px;font-weight:700;letter-spacing:0.01em;color:var(--gold-300);text-decoration:none;white-space:nowrap;transition:color var(--dur-fast)}
        .bzt-phone:hover{color:var(--gold-200)}
        .bzt-divider{width:1px;height:22px;background:var(--line-on-dark)}
        .bzt-burger{display:none;align-items:center;background:none;border:0;cursor:pointer;color:var(--fg-on-dark);padding:6px}
        .bzt-mobile{display:none}
        @media (max-width:1180px){
          .bzt-navlinks{display:none}
          .bzt-burger{display:inline-flex}
          .bzt-mobile.open{display:block}
        }
      `}</style>
      <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 74, gap: 24 }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 13, textDecoration: "none", flexShrink: 0 }}>
          <img src="assets/monogram-b-tight.png" alt="Bade Zahntechnik" style={{ height: 38, width: "auto" }} />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--silver)", fontSize: 15 }}>Bade&nbsp;Zahntechnik</span>
        </a>
        <nav className="bzt-navlinks">
          {NAV_LINKS.map(([key, href]) => (
            <a key={key} href={href} className={"bzt-link" + (active === key ? " active" : "")}>{t("nav." + key)}</a>
          ))}
          <span className="bzt-divider"></span>
          <LangToggle light />
          <a href={tel} className="bzt-phone"><Icon name="phone" size={15} />{phone}</a>
        </nav>
        <button className="bzt-burger" onClick={() => setOpen(!open)} aria-label="Menu">
          <Icon name={open ? "x" : "menu"} size={26} />
        </button>
      </Container>
      <div className={"bzt-mobile" + (open ? " open" : "")}>
        <Container style={{ display: "flex", flexDirection: "column", gap: 4, padding: "12px 40px 24px" }}>
          {NAV_LINKS.concat([["fotostatus", "fotostatus.html"]]).map(([key, href]) => (
            <a key={key} href={href} style={{ fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 600, color: active === key ? "var(--gold-300)" : "var(--fg-on-dark)", textDecoration: "none", padding: "12px 0", borderBottom: "1px solid var(--line-on-dark)" }}>{t("nav." + key)}</a>
          ))}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 16 }}>
            <LangToggle light />
            <Button href={tel} size="sm" iconLeft="phone">{t("cta.anrufen")}</Button>
          </div>
        </Container>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--ink-900)", borderTop: "1px solid var(--line-on-dark)", paddingTop: 64 }}>
      <Container style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
            <img src="assets/monogram-b-tight.png" alt="" style={{ height: 40, width: "auto" }} />
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--silver)", fontSize: 15 }}>Bade&nbsp;Zahntechnik</span>
          </div>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-on-dark-muted)", margin: "18px 0 0", maxWidth: 280 }}>{t("footer.tag")}</p>
          <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
            {[t("badge.dgaez"), t("badge.fit")].map((b, i) => (
              <span key={i} style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--gold-300)", border: "1px solid var(--line-gold)", borderRadius: "var(--radius-pill)", padding: "5px 11px" }}>{b}</span>
            ))}
          </div>
        </div>
        <FooterCol title={t("footer.nav")} items={NAV_LINKS.map(([k, h]) => [t("nav." + k), h]).concat([[t("nav.fotostatus"), "fotostatus.html"], [t("footer.karriere"), "karriere.html"]])} />
        <div>
          <h4 style={fcTitle}>{t("footer.kontaktTitle")}</h4>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <span style={{ ...fcItem, color: "var(--silver)", fontWeight: 600 }}>{t("contactData.company")}</span>
            <span style={fcItem}>{t("contactData.addr1")}</span>
            <span style={fcItem}>{t("contactData.addr2")}</span>
            <a href={"tel:" + t("contactData.phone").replace(/\s/g, "")} style={{ ...fcItem, color: "var(--gold-300)" }}>{t("contactData.phone")}</a>
            <a href={bztMailto()} style={fcItem}>{bztEmail()}</a>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
            <a href={t("contactData.linkedin")} target="_blank" rel="noopener" aria-label="LinkedIn" style={socialBtn}><Icon name="linkedin" size={17} /></a>
            <a href={t("contactData.instagram")} target="_blank" rel="noopener" aria-label="Instagram" style={socialBtn}><Icon name="instagram" size={17} /></a>
          </div>
        </div>
        <FooterCol title={t("footer.rechtTitle")} items={[[t("footer.impressum"), "impressum.html"], [t("footer.datenschutz"), "datenschutz.html"]]} />
      </Container>
      <Container style={{ marginTop: 48, paddingTop: 22, paddingBottom: 28, borderTop: "1px solid var(--line-on-dark)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--fg-on-dark-muted)" }}>© 2026 {t("footer.rights")}</span>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--fg-on-dark-muted)", display: "flex", gap: 22 }}>
          <a href="impressum.html" style={{ color: "inherit", textDecoration: "none" }}>{t("footer.impressum")}</a>
          <a href="datenschutz.html" style={{ color: "inherit", textDecoration: "none" }}>{t("footer.datenschutz")}</a>
        </span>
      </Container>
    </footer>
  );
}
const fcTitle = { fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-600)", margin: "0 0 16px" };
const fcItem = { fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--fg-on-dark-muted)", textDecoration: "none" };
const socialBtn = { width: 38, height: 38, borderRadius: "50%", border: "1px solid var(--line-on-dark)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--gold-300)", textDecoration: "none" };
function FooterCol({ title, items }) {
  return (
    <div>
      <h4 style={fcTitle}>{title}</h4>
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        {items.map(([label, href], i) => <a key={i} href={href} style={fcItem}>{label}</a>)}
      </div>
    </div>
  );
}

function PageHeader({ eyebrow, title, lead }) {
  return (
    <section style={{ background: "var(--ink-900)", paddingTop: 74 }}>
      <Container style={{ padding: "84px 40px 72px" }}>
        <SectionHead light eyebrow={eyebrow} title={title} lead={lead} maxTitle={820} />
      </Container>
    </section>
  );
}

function Page({ active, children }) {
  useIcons();
  return (
    <div style={{ background: "var(--ink-900)", minHeight: "100vh" }}>
      <Nav active={active} />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

Object.assign(window, { Icon, refreshIcons, useIcons, Container, Eyebrow, GoldRule, Button, SectionHead, Placeholder, ClickToLoad, Nav, Footer, Page, PageHeader, LangToggle });