/* === App shell + Router === */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm",
  "typo": "classic",
  "heroRecruitVariant": "callout-band",
  "employerVariant": "dual-match",
  "employerLeadVariant": "emphasis-em",
  "theme": "light"
}/*EDITMODE-END*/;

const BRAND_LOGO_SRC = "images/physiokur-logo-clean.png";

const NAV = [
  { href: "#/", label: "Start" },
  { href: "#/leistungen", label: "Leistungen" },
  { href: "#/team", label: "Über uns" },
  { href: "#/patienten", label: "Für Patienten" },
  { href: "/app-reiter/", label: "Trainings-App" },
  { href: "#/karriere", label: "Karriere" },
  { href: "#/kontakt", label: "Kontakt" },
];

function useHashRoute() {
  const [hash, setHash] = useStateApp(window.location.hash || "#/");
  useEffectApp(() => {
    const onHash = () => {
      setHash(window.location.hash || "#/");
      window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return hash;
}

const THEME_ICONS = {
  sun: (
    <svg className="nav__theme-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="3.25" stroke="currentColor" strokeWidth="1.3"/>
      <path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.3 3.3l1.4 1.4M11.3 11.3l1.4 1.4M3.3 12.7l1.4-1.4M11.3 4.7l1.4-1.4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
    </svg>
  ),
  moon: (
    <svg className="nav__theme-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M11.2 9.4a4.4 4.4 0 0 1-5.6-5.6A4.6 4.6 0 1 0 11.2 9.4Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
    </svg>
  ),
};

function Nav({ route, theme, onToggleTheme }) {
  const [open, setOpen] = useStateApp(false);
  const isDark = theme === "dark";
  return (
    <nav className="nav">
      <div className="container nav__row">
        <a href="#/" className="brand">
          <img className="brand__logo" src={BRAND_LOGO_SRC} alt="PhysioKur Logo" />
        </a>
        <div className="nav__links">
          {NAV.map((n) => (
            <a key={n.href} href={n.href} className={`nav__link ${route === n.href || (route === "#/" && n.href === "#/") ? (route === n.href ? "is-active" : "") : ""}`}>
              {n.label}
            </a>
          ))}
        </div>
        <button
          type="button"
          className="nav__theme-btn"
          onClick={onToggleTheme}
          aria-label={isDark ? "Helles Design aktivieren" : "Dunkles Design aktivieren"}
          aria-pressed={isDark}
        >
          {isDark ? THEME_ICONS.sun : THEME_ICONS.moon}
          <span className="nav__theme-label">{isDark ? "Hell" : "Dunkel"}</span>
        </button>
        <a href="#/kontakt" className="nav__cta">Termin anfragen</a>
        <button className="nav__menu-btn" onClick={() => setOpen(!open)}>
          {open ? "Schließen" : "Menü"}
        </button>
      </div>
      {open && (
        <div style={{ borderTop: "1px solid var(--line)", padding: "16px 0", background: "var(--bg)" }}>
          <div className="container" style={{ display: "grid", gap: 4 }}>
            {NAV.map((n) => (
              <a key={n.href} href={n.href} onClick={() => setOpen(false)}
                className="nav__link" style={{ padding: "12px 14px" }}>{n.label}</a>
            ))}
            <button
              type="button"
              className="nav__theme-btn"
              onClick={() => { onToggleTheme(); setOpen(false); }}
              aria-label={isDark ? "Helles Design aktivieren" : "Dunkles Design aktivieren"}
              aria-pressed={isDark}
              style={{ justifySelf: "flex-start", marginTop: 8 }}
            >
              {isDark ? THEME_ICONS.sun : THEME_ICONS.moon}
              <span className="nav__theme-label">{isDark ? "Hell" : "Dunkel"}</span>
            </button>
            <a href="#/kontakt" onClick={() => setOpen(false)} className="nav__cta" style={{ marginLeft: 0, marginTop: 8, justifySelf: "flex-start" }}>Termin anfragen</a>
          </div>
        </div>
      )}
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <div className="footer__brand">
              <img className="footer__brand-logo" src={BRAND_LOGO_SRC} alt="PhysioKur Logo" />
            </div>
            <p style={{ marginTop: 18, maxWidth: "38ch", lineHeight: 1.6, fontSize: 14, color: "color-mix(in srgb, var(--bg) 75%, transparent)" }}>
              Evidenzbasierte, ganzheitliche Physiotherapie. Privatpraxis im selben Gebäude wie die Orthopädie Dr. Sharma.
            </p>
          </div>
          <div>
            <h4>Praxis</h4>
            <ul>
              <li><a href="#/leistungen">Leistungen</a></li>
              <li><a href="#/team">Über uns</a></li>
              <li><a href="#/patienten">Für Patienten</a></li>
            </ul>
          </div>
          <div>
            <h4>Karriere</h4>
            <ul>
              <li><a href="#/karriere">Offene Stellen</a></li>
              <li><a href="#/karriere">Was wir bieten</a></li>
              <li><a href="#/kontakt">Kennenlerngespräch</a></li>
            </ul>
          </div>
          <div>
            <h4>Kontakt</h4>
            <ul>
              <li>030 · 1234 5678</li>
              <li>praxis@physio-zentrum.de</li>
              <li>Beispielstr. 12, Berlin</li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 PhysioKur</span>
          <span>Impressum · Datenschutz</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const route = useHashRoute();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => {
    document.documentElement.dataset.palette = t.palette;
    document.documentElement.dataset.typo = t.typo;
    document.documentElement.dataset.theme = t.theme;
  }, [t.palette, t.typo, t.theme]);

  let Page;
  switch (route) {
    case "#/leistungen": Page = <LeistungenPage/>; break;
    case "#/team":       Page = <TeamPage/>; break;
    case "#/patienten":  Page = <PatientenPage/>; break;
    case "#/karriere":   Page = <KarrierePage/>; break;
    case "#/kontakt":    Page = <KontaktPage/>; break;
    default:             Page = <HomePage heroRecruitVariant={t.heroRecruitVariant} employerVariant={t.employerVariant} employerLeadVariant={t.employerLeadVariant}/>;
  }

  return (
    <>
      <Nav
        route={route}
        theme={t.theme}
        onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")}
      />
      <main>{Page}</main>
      <Footer/>
      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakColor t={t} setTweak={setTweak} k="palette"
            options={[
              { value: "anthracite-editorial", label: "1) Anthrazit Editorial", colors: ["#f5f5f3", "#2f3338", "#d59033"] },
              { value: "cool-gray-clinic",     label: "2) Cool Gray Clinic",    colors: ["#f3f5f7", "#2c3948", "#ce8a34"] },
              { value: "warm-stone-minimal",   label: "3) Warm Stone Minimal",  colors: ["#f4f2ee", "#3a3937", "#cb8740"] },
              { value: "monochrome-pro",       label: "4) Monochrome Pro",      colors: ["#f7f7f6", "#191c20", "#d7882f"] },
              { value: "dark-slate-premium",   label: "5) Dark Slate Premium",  colors: ["#252a30", "#f1f2f4", "#de9440"] },
              { value: "warm",      label: "Warm Sage",   colors: ["#f5f1ea", "#1f322c", "#c47a52"] },
              { value: "editorial", label: "Editorial",   colors: ["#fafaf8", "#0a0a0a", "#b64a2e"] },
              { value: "clinic",    label: "Klinisch",    colors: ["#f3f5f7", "#0a3d62", "#c4612a"] },
              { value: "terra",     label: "Terra",       colors: ["#f1ebe1", "#3a2817", "#a85f3d"] },
            ].map(o => ({ value: o.value, label: o.label, palette: o.colors }))} />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakRadio t={t} setTweak={setTweak} k="theme"
            options={[{ value: "light", label: "Hell" }, { value: "dark", label: "Dunkel" }]} />
        </TweakSection>
        <TweakSection title="Typografie">
          <TweakRadio t={t} setTweak={setTweak} k="typo"
            options={[{ value: "classic", label: "Serif + Sans" }, { value: "modern", label: "Sans only" }]} />
        </TweakSection>
        <TweakSection title="Abschnitt 01 · Hero">
          <TweakHeroRecruit t={t} setTweak={setTweak} k="heroRecruitVariant"
            options={[
              { value: "direct-button", label: "1) Direkt + Button", layout: "direct-button" },
              { value: "search-tag", label: "2) Such-Tag", layout: "search-tag" },
              { value: "split-cta", label: "3) Split mit CTA", layout: "split-cta" },
              { value: "callout-band", label: "4) Callout-Karte", layout: "callout-band" },
              { value: "emphasis-em", label: "5) Hervorhebung", layout: "emphasis-em" },
            ]} />
        </TweakSection>
        <TweakSection title="Abschnitt 06 · Karriere">
          <TweakEmployerLayout t={t} setTweak={setTweak} k="employerVariant"
            options={[
              { value: "benefits-grid", label: "1) Vorteilsraster", layout: "benefits-grid" },
              { value: "editorial-split", label: "2) Editorial-Split", layout: "editorial-split" },
              { value: "ink-band", label: "3) Dunkler Band", layout: "ink-band" },
              { value: "culture-steps", label: "4) Kultur in Schritten", layout: "culture-steps" },
              { value: "dual-match", label: "5) Zwei-Spalten-Match", layout: "dual-match" },
            ]} />
          <TweakEmployerLead t={t} setTweak={setTweak} k="employerLeadVariant"
            options={[
              { value: "direct-button", label: "1) Direkt + Button", layout: "direct-button" },
              { value: "search-tag", label: "2) Such-Tag", layout: "search-tag" },
              { value: "split-cta", label: "3) Split mit CTA", layout: "split-cta" },
              { value: "callout-band", label: "4) Callout-Karte", layout: "callout-band" },
              { value: "emphasis-em", label: "5) Hervorhebung", layout: "emphasis-em" },
            ]} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* TweakColor with palette swatch options array support */
function TweakColor({ t, setTweak, k, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
      {options.map((o) => {
        const active = t[k] === o.value;
        return (
          <button key={o.value} onClick={() => setTweak(k, o.value)}
            style={{
              border: "1px solid " + (active ? "var(--ink)" : "rgba(0,0,0,.1)"),
              borderRadius: 10, padding: 10, background: "transparent",
              textAlign: "left", display: "grid", gap: 8,
            }}>
            <div style={{ display: "flex", gap: 4 }}>
              {o.palette.map((c, i) => (
                <div key={i} style={{ width: i === 0 ? 28 : 14, height: 28, borderRadius: 4, background: c, border: "1px solid rgba(0,0,0,.08)" }}/>
              ))}
            </div>
            <div style={{ fontSize: 12, fontWeight: 500 }}>{o.label}</div>
          </button>
        );
      })}
    </div>
  );
}

function EmployerLayoutPreview({ layout }) {
  const frame = {
    border: "1px solid rgba(0,0,0,.1)",
    borderRadius: 6,
    overflow: "hidden",
    height: 52,
    background: "#ede7dc",
    padding: 6,
    display: "grid",
    gap: 4,
  };
  const line = { height: 4, borderRadius: 999, background: "rgba(31,50,44,.18)" };
  const block = { borderRadius: 4, background: "rgba(31,50,44,.12)" };
  const ink = { background: "#1f322c" };
  const sage = { background: "#5e7a6b" };

  if (layout === "benefits-grid") {
    return (
      <div style={{ ...frame, gridTemplateRows: "8px 1fr" }}>
        <div style={{ ...line, width: "42%" }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 4 }}>
          {[0, 1, 2].map((i) => <div key={i} style={{ ...block, background: i === 1 ? "rgba(94,122,107,.35)" : "rgba(31,50,44,.1)" }} />)}
        </div>
      </div>
    );
  }
  if (layout === "editorial-split") {
    return (
      <div style={{ ...frame, gridTemplateColumns: "1.1fr 1fr", gap: 6 }}>
        <div style={{ display: "grid", gap: 4, alignContent: "start" }}>
          <div style={{ ...line, width: "70%" }} />
          <div style={{ ...block, height: 16 }} />
        </div>
        <div style={{ display: "grid", gap: 3, alignContent: "center" }}>
          {[0, 1, 2].map((i) => (
            <div key={i} style={{ display: "flex", gap: 3, alignItems: "center" }}>
              <div style={{ width: 5, height: 5, borderRadius: "50%", ...sage }} />
              <div style={{ ...block, height: 4, flex: 1 }} />
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (layout === "ink-band") {
    return (
      <div style={{ ...frame, ...ink, gridTemplateRows: "8px 1fr", borderColor: "rgba(255,255,255,.12)" }}>
        <div style={{ height: 4, width: "36%", borderRadius: 999, background: "rgba(245,241,234,.35)" }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 4 }}>
          {[0, 1, 2].map((i) => <div key={i} style={{ borderRadius: 4, background: "rgba(245,241,234,.18)", height: "100%" }} />)}
        </div>
      </div>
    );
  }
  if (layout === "culture-steps") {
    return (
      <div style={{ ...frame, gridTemplateRows: "8px 1fr" }}>
        <div style={{ ...line, width: "48%" }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 4 }}>
          {[0, 1, 2].map((i) => (
            <div key={i} style={{ display: "grid", gap: 3, alignContent: "start" }}>
              <div style={{ width: 10, height: 10, borderRadius: "50%", ...sage }} />
              <div style={{ ...block, height: 6 }} />
              <div style={{ ...block, height: 4, opacity: .7 }} />
            </div>
          ))}
        </div>
      </div>
    );
  }
  return (
    <div style={{ ...frame, gridTemplateColumns: "1fr 1fr", gap: 6 }}>
      <div style={{ display: "grid", gap: 4 }}>
        <div style={{ ...block, height: 8 }} />
        <div style={{ ...block, height: 5, width: "72%" }} />
        <div style={{ display: "flex", gap: 3 }}>
          {[0, 1].map((i) => <div key={i} style={{ width: 14, height: 5, borderRadius: 999, background: i ? "rgba(94,122,107,.45)" : "rgba(31,50,44,.12)" }} />)}
        </div>
      </div>
      <div style={{ display: "grid", gap: 4 }}>
        <div style={{ ...block, height: 8 }} />
        <div style={{ ...block, height: 5, width: "72%" }} />
        <div style={{ display: "flex", gap: 3 }}>
          {[0, 1].map((i) => <div key={i} style={{ width: 14, height: 5, borderRadius: 999, background: i ? "rgba(94,122,107,.45)" : "rgba(31,50,44,.12)" }} />)}
        </div>
      </div>
    </div>
  );
}

function TweakEmployerLayout({ t, setTweak, k, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
      {options.map((o) => {
        const active = t[k] === o.value;
        return (
          <button key={o.value} onClick={() => setTweak(k, o.value)}
            style={{
              border: "1px solid " + (active ? "var(--ink)" : "rgba(0,0,0,.1)"),
              borderRadius: 10, padding: 10, background: "transparent",
              textAlign: "left", display: "grid", gap: 8,
            }}>
            <EmployerLayoutPreview layout={o.layout} />
            <div style={{ fontSize: 12, fontWeight: 500 }}>{o.label}</div>
          </button>
        );
      })}
    </div>
  );
}

function EmployerLeadPreview({ layout }) {
  const frame = {
    border: "1px solid rgba(0,0,0,.1)",
    borderRadius: 6,
    overflow: "hidden",
    height: 52,
    background: "#ede7dc",
    padding: 6,
    display: "grid",
    gap: 4,
  };
  const line = { height: 4, borderRadius: 999, background: "rgba(31,50,44,.18)" };
  const block = { borderRadius: 4, background: "rgba(31,50,44,.12)" };
  const pill = { width: 28, height: 8, borderRadius: 999, background: "#1f322c" };
  const pillGhost = { width: 22, height: 8, borderRadius: 999, background: "rgba(31,50,44,.16)" };
  const tag = { width: 34, height: 7, borderRadius: 999, background: "rgba(94,122,107,.35)" };

  if (layout === "search-tag") {
    return (
      <div style={{ ...frame, gridTemplateRows: "7px 8px 1fr" }}>
        <div style={tag} />
        <div style={{ ...line, width: "72%" }} />
        <div style={pill} />
      </div>
    );
  }
  if (layout === "split-cta") {
    return (
      <div style={{ ...frame, gridTemplateColumns: "1.2fr 1fr", gap: 6 }}>
        <div style={{ display: "grid", gap: 4, alignContent: "start" }}>
          <div style={{ ...line, width: "78%" }} />
          <div style={{ ...block, height: 10 }} />
        </div>
        <div style={{ display: "grid", gap: 4, alignContent: "center", justifyItems: "end" }}>
          <div style={pill} />
          <div style={pillGhost} />
        </div>
      </div>
    );
  }
  if (layout === "callout-band") {
    return (
      <div style={{ ...frame, gridTemplateRows: "8px 1fr" }}>
        <div style={{ ...line, width: "56%" }} />
        <div style={{ ...block, height: "100%", background: "rgba(31,50,44,.08)", display: "grid", gap: 4, padding: 4 }}>
          <div style={{ ...line, width: "88%" }} />
          <div style={pill} />
        </div>
      </div>
    );
  }
  if (layout === "emphasis-em") {
    return (
      <div style={{ ...frame, gridTemplateRows: "8px 8px 8px" }}>
        <div style={{ ...line, width: "82%" }} />
        <div style={{ ...line, width: "58%", background: "rgba(94,122,107,.35)" }} />
        <div style={{ display: "flex", gap: 4 }}>
          <div style={pill} />
          <div style={pillGhost} />
        </div>
      </div>
    );
  }
  return (
    <div style={{ ...frame, gridTemplateRows: "8px 8px 8px" }}>
      <div style={{ ...line, width: "76%" }} />
      <div style={{ ...block, height: 6 }} />
      <div style={{ display: "flex", gap: 4 }}>
        <div style={pill} />
        <div style={pillGhost} />
      </div>
    </div>
  );
}

function TweakHeroRecruit({ t, setTweak, k, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
      {options.map((o) => {
        const active = t[k] === o.value;
        return (
          <button key={o.value} onClick={() => setTweak(k, o.value)}
            style={{
              border: "1px solid " + (active ? "var(--ink)" : "rgba(0,0,0,.1)"),
              borderRadius: 10, padding: 10, background: "transparent",
              textAlign: "left", display: "grid", gap: 8,
            }}>
            <EmployerLeadPreview layout={o.layout} />
            <div style={{ fontSize: 12, fontWeight: 500 }}>{o.label}</div>
          </button>
        );
      })}
    </div>
  );
}

function TweakEmployerLead({ t, setTweak, k, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 8 }}>
      {options.map((o) => {
        const active = t[k] === o.value;
        return (
          <button key={o.value} onClick={() => setTweak(k, o.value)}
            style={{
              border: "1px solid " + (active ? "var(--ink)" : "rgba(0,0,0,.1)"),
              borderRadius: 10, padding: 10, background: "transparent",
              textAlign: "left", display: "grid", gap: 8,
            }}>
            <EmployerLeadPreview layout={o.layout} />
            <div style={{ fontSize: 12, fontWeight: 500 }}>{o.label}</div>
          </button>
        );
      })}
    </div>
  );
}

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