/* global React, ReactDOM, AzorSections, AzorDemo, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakColor, TweakSelect */
// AZOR — main page composition with Tweaks support.

const { useState: useStateA, useEffect: useEffectA } = React;
const { TopNav, Hero, HowItWorks, ReportSections, Audiences, Trust, FinalCta, Footer } = window.AzorSections;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentMode": "copper",
  "heroDirection": "split",
  "density": "comfortable",
  "showTexture": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent mode by swapping --copper-600 etc. on root
  useEffectA(() => {
    const root = document.documentElement;
    const map = {
      copper: { primary: "#b04e15", primary500: "#c95f1f", primary300: "#e89866", primary100: "#f5dcc6", primary50: "#fbeee2", primary700: "#8a3f0f" },
      navy:   { primary: "#1c3d63", primary500: "#2a527e", primary300: "#8fa9c4", primary100: "#dde6ef", primary50: "#eef3f8", primary700: "#0f2440" },
      olive:  { primary: "#5d722a", primary500: "#708a36", primary300: "#a4b56a", primary100: "#dee5c4", primary50: "#eef2dc", primary700: "#4a5b1f" },
    };
    const c = map[tweaks.accentMode] || map.copper;
    root.style.setProperty("--copper-600",  c.primary);
    root.style.setProperty("--copper-500",  c.primary500);
    root.style.setProperty("--copper-300",  c.primary300);
    root.style.setProperty("--copper-100",  c.primary100);
    root.style.setProperty("--copper-50",   c.primary50);
    root.style.setProperty("--copper-700",  c.primary700);
  }, [tweaks.accentMode]);

  return (
    <div style={{
      fontFamily: "var(--font-sans)",
      ["--density-mult"]: tweaks.density === "compact" ? 0.85 : 1,
    }}>
      <TopNav />
      <Hero direction={tweaks.heroDirection} />
      <HowItWorks />
      <ReportSections />
      <SampleOutputSection />
      <Audiences />
      <Trust />
      <FinalCta />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Akcent kolorystyczny">
          <TweakRadio label="Kolor primary" value={tweaks.accentMode} options={[
            { value: "copper", label: "Miedź" },
            { value: "navy",   label: "Granat" },
            { value: "olive",  label: "Oliwka" },
          ]} onChange={(v) => setTweak("accentMode", v)} />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio label="Kierunek hero" value={tweaks.heroDirection} options={[
            { value: "split", label: "Split (text + demo)" },
            { value: "center", label: "Text-first" },
          ]} onChange={(v) => setTweak("heroDirection", v)} />
          <TweakRadio label="Gęstość" value={tweaks.density} options={[
            { value: "comfortable", label: "Komfortowa" },
            { value: "compact",     label: "Kompaktowa" },
          ]} onChange={(v) => setTweak("density", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// Sample output section (separate so we can show it standalone if hero is text-first)
function SampleOutputSection() {
  return (
    <section id="sample" style={{ padding: "96px 32px", background: "var(--paper)", borderBottom: "1px solid var(--rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center", marginBottom: 40 }} className="sample-head">
          <div>
            <div className="eyebrow">&gt; PRZYKŁADOWY WYNIK</div>
            <h2 className="display-serif" style={{ fontSize: "clamp(28px, 3.4vw, 42px)", color: "var(--navy-950)", marginTop: 8, lineHeight: 1.05 }}>
              Trzy decyzje, ten sam<br/>format raportu
            </h2>
          </div>
          <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, margin: 0 }}>
            Przełączaj się między trzema rzeczywistymi typami przetargów na rynku polskim.
            Każdy wynik to jedna decyzja, lista kluczowych ryzyk i widoczne braki danych — to,
            czego nie udało się ustalić publicznie.
          </p>
        </div>
        <AzorDemo />
      </div>
      <style>{`@media (max-width: 880px) { .sample-head { grid-template-columns: 1fr !important; gap: 16px !important; } }`}</style>
    </section>
  );
}

window.AzorApp = App;

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