// Main app: variant + lang + router + Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "balanced",
  "lang": "zh",
  "particleDensity": 1.1,
  "showAirflow": true,
  "showSkyOrnament": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState("home");
  const [scrolled, setScrolled] = React.useState(false);
  const lang = t.lang;
  const variant = t.variant;
  const setLang = (l) => setTweak("lang", l);
  const dict = I18N[lang];

  React.useEffect(() => {
    document.body.dataset.variant = variant;
  }, [variant]);

  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [page]);

  const PageComponent = {
    home: HomePage,
    consulting: ConsultingPage,
    pm: PmPage,
    consumer: ConsumerPage,
    collab: CollabPage,
    about: AboutPage,
  }[page] || HomePage;

  return (
    <React.Fragment>
      <NavBar page={page} setPage={setPage} lang={lang} setLang={setLang} t={dict} scrolled={scrolled} />

      <main key={page}>
        <PageComponent t={dict} lang={lang} variant={variant} setPage={setPage} />
      </main>

      <SiteFooter t={dict} lang={lang} setPage={setPage} />

      <TweaksPanel>
        <TweakSection label="Style variation" />
        <TweakRadio
          label="Variant"
          value={t.variant}
          options={[
            { label: "Conservative", value: "conservative" },
            { label: "Balanced", value: "balanced" },
            { label: "Bold (dark)", value: "bold" },
          ]}
          onChange={(v) => setTweak("variant", v)}
        />

        <TweakSection label="Language" />
        <TweakRadio
          label="Lang"
          value={t.lang}
          options={[
            { label: "繁中", value: "zh" },
            { label: "EN", value: "en" },
          ]}
          onChange={(v) => setTweak("lang", v)}
        />

        <TweakSection label="Airflow animation" />
        <TweakToggle label="Show particles" value={t.showAirflow}
                     onChange={(v) => setTweak("showAirflow", v)} />
        <TweakSlider label="Particle density" value={t.particleDensity}
                     min={0.3} max={2.4} step={0.1}
                     onChange={(v) => setTweak("particleDensity", v)} />

        <TweakSection label="Quick jumps" />
        <TweakButton label="→ Home" onClick={() => setPage("home")} />
        <TweakButton label="→ Consulting" onClick={() => setPage("consulting")} />
        <TweakButton label="→ Project Mgmt" onClick={() => setPage("pm")} />
        <TweakButton label="→ Consumer" onClick={() => setPage("consumer")} />
        <TweakButton label="→ Partners" onClick={() => setPage("collab")} />
        <TweakButton label="→ About" onClick={() => setPage("about")} />
      </TweaksPanel>
    </React.Fragment>
  );
}

// Shared site footer (rendered on every page, contains real contact info)
function SiteFooter({ t, lang, setPage }) {
  const navItems = [
    ["consulting", t.nav.consulting],
    ["pm", t.nav.pm],
    ["consumer", t.nav.consumer],
    ["collab", t.nav.collab],
    ["about", t.nav.about],
  ];
  return (
    <footer style={{ padding: "100px 0 56px", borderTop: "1px solid var(--c-line)", background: "var(--c-mist)" }}>
      <div className="shell" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1.4fr", gap: 64, alignItems: "start" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
            <BrandMark />
            <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
              <span style={{ fontFamily: "var(--f-serif)", fontSize: 22, color: "var(--c-ink)" }}>{t.brand}</span>
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: "0.22em",
                             color: "var(--c-aqua)", textTransform: "uppercase", marginTop: 4 }}>
                {t.brandSub}
              </span>
            </div>
          </div>
          <p style={{ fontSize: 14, color: "var(--c-muted)", lineHeight: 1.65, maxWidth: 420, margin: 0 }}>
            {t.heroBody}
          </p>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            {lang === "zh" ? "服務" : "Services"}
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
            {navItems.map(([key, label]) => (
              <li key={key}>
                <button onClick={() => setPage(key)}
                        style={{ background: "transparent", border: "none", padding: 0,
                                 fontSize: 14, color: "var(--c-ink)", cursor: "pointer", fontFamily: "inherit" }}>
                  {label}
                </button>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            {lang === "zh" ? "聯絡方式" : "Contact"}
          </div>
          <div style={{ borderTop: "1px solid var(--c-line)" }}>
            {t.contactInfo.map((row, i) => (
              <div key={i} style={{ padding: "14px 0", borderBottom: "1px solid var(--c-line)" }}>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10.5, letterSpacing: "0.15em",
                              textTransform: "uppercase", color: "var(--c-muted)", marginBottom: 4 }}>
                  {row.k}
                </div>
                <div style={{ fontSize: 14, color: "var(--c-ink)" }}>{row.v}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
            <a href="tel:+886228087301" className="btn btn-ghost" style={{ fontSize: 12, padding: "10px 14px" }}>
              {t.contactCtas.callLabel}
            </a>
            <a href="mailto:qiao.shui.org@gmail.com" className="btn btn-primary" style={{ fontSize: 12, padding: "10px 14px", textDecoration: "none" }}>
              {t.contactCtas.mailLabel}
            </a>
          </div>
        </div>
      </div>
      <div className="shell" style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--c-line)",
                                       fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--c-muted)",
                                       display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <span>{t.footer}</span>
        <span>{lang === "zh" ? "MADE IN TAIWAN · 台灣製造" : "MADE IN TAIWAN"}</span>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;

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