// home.jsx — Start page
function Hero() {
  const phone = t("contactData.phone");
  return (
    <section style={{ background: "var(--ink-900)", position: "relative", paddingTop: 74 }}>
      <Container style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center", padding: "76px 40px 88px" }}>
        <div>
          <Eyebrow light>{t("home.heroEyebrow")}</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(44px,5.6vw,76px)", lineHeight: 1.04, color: "var(--fg-on-dark)", margin: "22px 0 0", textWrap: "balance" }}>
            {t("home.heroTitle1")} <span style={{ color: "var(--gold-300)" }}>{t("home.heroTitleAccent")}</span>
          </h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(16px,1.5vw,19px)", lineHeight: 1.7, color: "var(--fg-on-dark-muted)", margin: "26px 0 0", maxWidth: 500 }}>{t("home.heroLead")}</p>
          <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
            <Button href="kontakt.html" icon="arrow-right">{t("cta.erstgespraech")}</Button>
            <Button variant="outlineLight" href={"tel:" + phone.replace(/\s/g, "")} iconLeft="phone">{t("cta.anrufen")}</Button>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 32, flexWrap: "wrap" }}>
            {[t("badge.dgaez"), t("badge.fit")].map((b, i) => (
              <span key={i} style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--gold-300)", border: "1px solid var(--line-gold)", borderRadius: "var(--radius-pill)", padding: "7px 14px" }}>{b}</span>
            ))}
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--line-gold)", boxShadow: "var(--shadow-lg)" }}>
            <img src="assets/team-bade.jpg" alt="Team Bade Zahntechnik" style={{ width: "100%", height: 520, objectFit: "cover", display: "block" }} />
          </div>
        </div>
      </Container>
    </section>
  );
}

function TeaserSection({ id, bg, children }) {
  return <section style={{ background: bg, padding: "100px 0" }}>{children}</section>;
}

// Case progression carousel — cross-fades through the uploaded case photos in
// order, with a step badge, caption and thumbnail navigation. Gentle autoplay,
// pauses on hover.
function CaseCarousel() {
  const slides = t("casesSlides");
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const n = slides.length;
  const go = (i) => setIdx((i + n) % n);
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIdx((p) => (p + 1) % n), 5500);
    return () => clearInterval(id);
  }, [paused, n]);

  return (
    <div style={{ maxWidth: 900, margin: "48px auto 0" }} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div style={{ position: "relative", aspectRatio: "3 / 2", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--line-strong)", boxShadow: "var(--shadow-lg)", background: "var(--ink-900)" }}>
        {slides.map((s, i) => (
          <img key={s.img} src={"assets/cases/" + s.img + ".jpg"} alt={s.step} loading={i === 0 ? "eager" : "lazy"}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", opacity: i === idx ? 1 : 0, transition: "opacity 600ms var(--ease-out)" }} />
        ))}
        {/* Step badge */}
        <span style={{ position: "absolute", top: 16, left: 16, zIndex: 3, display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 700, letterSpacing: "0.06em", color: "var(--ink-900)", background: "var(--gold-metallic)", borderRadius: "var(--radius-pill)", padding: "7px 15px", boxShadow: "var(--shadow-sm)" }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 600 }}>{slides[idx].n}</span>
          <span style={{ width: 1, height: 13, background: "rgba(10,10,10,0.35)" }}></span>
          {slides[idx].step}
        </span>
        {/* Arrows */}
        {["left", "right"].map((dir) => (
          <button key={dir} onClick={() => go(dir === "left" ? idx - 1 : idx + 1)} aria-label={dir === "left" ? "Zurück" : "Weiter"}
            style={{ position: "absolute", top: "50%", [dir === "left" ? "left" : "right"]: 14, transform: "translateY(-50%)", zIndex: 3, width: 46, height: 46, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.4)", background: "rgba(10,10,10,0.45)", backdropFilter: "blur(4px)", color: "var(--white)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", transition: "background var(--dur-fast)" }}>
            <Icon name={dir === "left" ? "chevron-left" : "chevron-right"} size={22} color="var(--white)" />
          </button>
        ))}
      </div>
      {/* Caption */}
      <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.6, color: "var(--fg-muted)", textAlign: "center", margin: "22px auto 0", maxWidth: 600, minHeight: 50 }}>{slides[idx].caption}</p>
      {/* Thumbnails */}
      <div style={{ display: "flex", justifyContent: "center", gap: 14, marginTop: 22 }}>
        {slides.map((s, i) => (
          <button key={s.img} onClick={() => go(i)} aria-label={s.step}
            style={{ position: "relative", width: 96, height: 64, padding: 0, borderRadius: "var(--radius-sm)", overflow: "hidden", cursor: "pointer", border: "2px solid " + (i === idx ? "var(--gold-500)" : "transparent"), boxShadow: i === idx ? "var(--shadow-sm)" : "none", opacity: i === idx ? 1 : 0.6, transition: "opacity var(--dur-fast), border-color var(--dur-fast)", background: "var(--ink-100)" }}>
            <img src={"assets/cases/" + s.img + ".jpg"} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </button>
        ))}
      </div>
    </div>
  );
}

function App() {
  return (
    <Page active="start">
      <Hero />
      <TrustBar />

      <PromiseBand />

      <TeaserSection bg="var(--ink-50)">
        <Container>
          <SectionHead align="center" eyebrow={t("home.audiencesEyebrow")} title={t("home.audiencesTitle")} lead={t("home.audiencesLead")} />
          <div style={{ marginTop: 56 }}><AudienceGrid /></div>
          <div style={{ textAlign: "center", marginTop: 40 }}>
            <Button variant="outline" href="kooperation.html" icon="arrow-right">{t("cta.kooperation")}</Button>
          </div>
        </Container>
      </TeaserSection>

      <TeaserSection bg="var(--paper)">
        <Container>
          <SectionHead eyebrow={t("home.servicesEyebrow")} title={t("home.servicesTitle")} />
          <div style={{ marginTop: 48 }}><ServiceGrid /></div>
          <div style={{ marginTop: 40 }}>
            <Button variant="outline" href="leistungen.html" icon="arrow-right">{t("cta.alle")}</Button>
          </div>
        </Container>
      </TeaserSection>

      {/* Cooperation USP */}
      <section style={{ background: "var(--ink-900)", padding: "100px 0" }}>
        <Container style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <SectionHead light eyebrow={t("home.coopEyebrow")} title={t("home.coopTitle")} />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.7, color: "var(--fg-on-dark-muted)", margin: "22px 0 32px", maxWidth: 480 }}>{t("home.coopText")}</p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Button variant="outlineLight" href="kooperation.html" icon="arrow-right">{t("cta.kooperation")}</Button>
              <Button variant="ghost" href="fotostatus.html" style={{ color: "var(--gold-300)" }} icon="camera">{t("cta.fotostatus")}</Button>
            </div>
          </div>
          <img src="assets/logo-keyprotokoll.webp" alt="KeyProtokoll" style={{ display: "none" }} />
          <div style={{ display: "grid", gap: 16 }}>
            {t("coopSteps").map((s, i) => (
              <div key={i} style={{ display: "flex", gap: 18, alignItems: "flex-start", padding: "18px 22px", background: "var(--surface-dark)", border: "1px solid var(--line-on-dark)", borderRadius: "var(--radius-md)" }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: "var(--gold-400)", flexShrink: 0 }}>{s.n}</span>
                <div>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: 18, fontWeight: 600, color: "var(--fg-on-dark)" }}>{s.t}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55, color: "var(--fg-on-dark-muted)", marginTop: 4 }}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <TeaserSection bg="var(--paper)">
        <Container>
          <SectionHead eyebrow={t("home.casesEyebrow")} title={t("home.casesTitle")} lead={t("home.casesLead")} />
          <CaseCarousel />
        </Container>
      </TeaserSection>

      <Testimonials />

      {/* Team teaser */}
      <section style={{ background: "var(--ink-900)", padding: "100px 0" }}>
        <Container style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "center" }}>
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--line-gold)", boxShadow: "var(--shadow-lg)" }}>
            <img src="assets/team-bade.jpg" alt="Team" style={{ width: "100%", height: 420, objectFit: "cover", display: "block" }} />
          </div>
          <div>
            <SectionHead light eyebrow={t("home.teamEyebrow")} title={t("home.teamTitle")} />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.7, color: "var(--fg-on-dark-muted)", margin: "22px 0 30px", maxWidth: 460 }}>{t("home.teamText")}</p>
            <Button variant="outlineLight" href="ueber-uns.html" icon="arrow-right">{t("nav.ueber")}</Button>
          </div>
        </Container>
      </section>

      <FinalCTA />
    </Page>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
