/* Quote Connect — app shell, router, tweaks */

const NAV = [
  { key: "home", label: "Home" },
  { key: "browse", label: "Categories" },
  { key: "coverage", label: "Coverage" },
  { key: "buyer", label: "My Quotes" },
  { key: "supplier", label: "Supplier Portal" },
];

const PAL = { "#FE4805": "", "#0186DA": "pal-blue", "#14336B": "pal-navy" };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FE4805",
  "headline": "expanded",
  "hlWeight": 800,
  "density": "regular",
  "icons": "photo"
}/*EDITMODE-END*/;

function Footer({ nav }) {
  return (
    <footer className="qc-foot">
      <div className="qc-wrap qc-foot-in">
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <Logo onClick={() => nav.go("home")} />
          <span className="qc-foot-tag">One request. Multiple quotes.</span>
        </div>
        <div style={{ display: "flex", gap: 26, flexWrap: "wrap", alignItems: "center" }}>
          {NAV.map((n) => (
            <button key={n.key} className="qc-nav-link" style={{ padding: "4px 0" }} onClick={() => nav.go(n.key)}>{n.label}</button>
          ))}
          <a className="qc-foot-link" href="assets/QuoteConnect_Terms_and_Conditions.pdf" target="_blank" rel="noopener">Terms &amp; Conditions</a>
        </div>
        <small>© 2026 Quote Connect · ABN-verified Australian suppliers · Prototype</small>
      </div>
    </footer>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState("home");
  const [catId, setCatId] = React.useState("vehicle");
  const [menu, setMenu] = React.useState(false);

  const nav = React.useMemo(() => ({
    go: (s) => { setScreen(s); setMenu(false); window.scrollTo({ top: 0 }); },
    startQuote: (id) => { setCatId(id); setScreen("quote"); setMenu(false); window.scrollTo({ top: 0 }); },
  }), []);

  React.useEffect(() => { window.scrollTo({ top: 0 }); }, [screen, catId]);

  const tt = t;
  const classes = ["qc-app", PAL[t.accent] || "", `hl-${t.headline}`, t.density === "compact" ? "density-compact" : ""].filter(Boolean).join(" ");

  return (
    <div className={classes} style={{ "--hl-weight": t.hlWeight }}>
      <nav className="qc-nav">
        <Logo onClick={() => nav.go("home")} />
        <div className="qc-nav-links">
          {NAV.map((n) => (
            <button key={n.key} className={"qc-nav-link" + (screen === n.key ? " active" : "")} onClick={() => nav.go(n.key)}>{n.label}</button>
          ))}
        </div>
        <div className="qc-nav-right">
          <span className="desktop-only"><Btn variant="primary" onClick={() => nav.go("browse")}>Get quotes <Icon name="arrow-right" size={16} /></Btn></span>
          <button className="qc-nav-burger" onClick={() => setMenu(true)} aria-label="Menu"><Icon name="menu" size={20} /></button>
        </div>
      </nav>

      <div className={"qc-drawer" + (menu ? " open" : "")}>
        <div className="qc-drawer-scrim" onClick={() => setMenu(false)} />
        <div className="qc-drawer-panel">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
            <Logo onClick={() => nav.go("home")} />
            <button className="qc-nav-burger" onClick={() => setMenu(false)}><Icon name="x" size={20} /></button>
          </div>
          {NAV.map((n) => (
            <button key={n.key} className={"qc-nav-link" + (screen === n.key ? " active" : "")} onClick={() => nav.go(n.key)}>{n.label}</button>
          ))}
          <div style={{ marginTop: 14 }}><Btn variant="primary" full onClick={() => nav.go("browse")}>Get quotes <Icon name="arrow-right" size={16} /></Btn></div>
        </div>
      </div>

      <main className="qc-main">
        {screen === "home" && <HomeScreen nav={nav} t={tt} />}
        {screen === "browse" && <BrowseScreen nav={nav} t={tt} />}
        {screen === "coverage" && <CoverageScreen nav={nav} t={tt} />}
        {screen === "quote" && <QuoteScreen nav={nav} t={tt} catId={catId} />}
        {screen === "buyer" && <BuyerScreen nav={nav} t={tt} />}
        {screen === "supplier" && <SupplierScreen nav={nav} t={tt} />}
      </main>

      <Footer nav={nav} />

      <TweaksPanel>
        <TweakSection label="Brand colour" />
        <TweakColor label="Accent" value={t.accent} options={["#FE4805", "#0186DA", "#14336B"]} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Typography" />
        <TweakRadio label="Headline" value={t.headline} options={["expanded", "condensed", "slab"]} onChange={(v) => setTweak("headline", v)} />
        <TweakSlider label="Headline weight" value={t.hlWeight} min={500} max={900} step={100} onChange={(v) => setTweak("hlWeight", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Card density" value={t.density} options={["regular", "compact"]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Category icons" />
        <TweakRadio label="Icon style" value={t.icons} options={["photo", "minimal", "mono"]} onChange={(v) => setTweak("icons", v)} />
      </TweaksPanel>
    </div>
  );
}

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