const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "#f0b84d",
  "defaultRole": "shipper",
  "grain": true
} /*EDITMODE-END*/;

// Map hex → matching dark ink for text-on-accent
const ACCENT_INK = {
  "#f0b84d": "oklch(0.22 0.05 78)", // amber
  "#7cd8b4": "oklch(0.20 0.04 165)", // mint
  "#7aa9f7": "oklch(0.18 0.05 245)", // blue
  "#f08e7c": "oklch(0.20 0.05 28)" // coral
};

function App() {
  const [t, setTweak] = window.useTweaks(DEFAULT_TWEAKS);
  const auctionRef = React.useRef(null);
  const waitlistRef = React.useRef(null);

  // apply accent
  React.useEffect(() => {
    const accent = t.accent || "#f0b84d";
    const ink = ACCENT_INK[accent] || "oklch(0.18 0.04 60)";
    document.documentElement.style.setProperty("--accent", accent);
    document.documentElement.style.setProperty("--accent-ink", ink);
  }, [t.accent]);

  function scrollTo(id) {
    const ref = id === "auction" ? auctionRef : waitlistRef;
    if (!ref.current) return;
    const top = ref.current.getBoundingClientRect().top + window.pageYOffset - 40;
    window.scrollTo({ top, behavior: "smooth" });
  }

  return (
    <React.Fragment>
      {t.grain && <div className="grain" />}
      <div className="shell">
        <header className="topbar">
          <div className="brand-mark">
            <span className="dot" />
            <span>Truckee · KSA</span>
          </div>
          <div className="top-status">
            <span className="live-pulse" />
            <span>Pre-launch · waitlist open</span>
          </div>
        </header>

        <Hero scrollTo={scrollTo} />
        <LiveAuction sectionRef={auctionRef} />
        <Steps />
        <Stats />
        <Roadmap />
        <Waitlist defaultRole={t.defaultRole} sectionRef={waitlistRef} />

        <footer className="foot">
          <div>© 2026 Truckee — bid, book, deliver.</div>
          <div className="links">
            <a href="mailto:hello@truckee.sa">HELLOB24TEAM@GMAIL.COM</a>
            <a href="https://truckee.sa">TRUCKEE</a>
            <a href="#waitlist" onClick={(e) => {e.preventDefault();scrollTo("waitlist");}}>Join waitlist</a>
          </div>
        </footer>
      </div>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Accent">
          <window.TweakColor
            label="Accent color"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#f0b84d", "#7cd8b4", "#7aa9f7", "#f08e7c"]} />
        </window.TweakSection>
        <window.TweakSection label="Waitlist">
          <window.TweakRadio
            label="Default role"
            value={t.defaultRole}
            onChange={(v) => setTweak("defaultRole", v)}
            options={["shipper", "driver"]} />
        </window.TweakSection>
        <window.TweakSection label="Texture">
          <window.TweakToggle
            label="Film grain overlay"
            value={t.grain}
            onChange={(v) => setTweak("grain", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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