/* global React, PFScrollCubes, PFHeader, PFHero, PFStatsMarquee, PFRefs, PFProducts, PFComparison, PFProofs, PFBenefits, PFContact, PFFooter, PF_CONTENT */
// Pixel Floors — Tweaks panel
// Defaults are persisted to the file via EDITMODE markers.
const PF_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "mystic",
  "aura": "signature",
  "headline_cs": "Step\ninto the\nlight.",
  "headline_en": "Step\ninto the\nlight.",
  "show_proofs_marquee": true,
  "show_references": true,
  "show_products": true,
  "show_comparison": true,
  "show_proofs": true,
  "show_benefits": true,
  "type_scale": 1.0,
  "dark_proofs": true
}/*EDITMODE-END*/;

const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakSlider, TweakToggle, TweakText } = window;

function PFTweaks({ tweaks, setTweak, lang }) {
  // CSS-injected headline text won't break lines on \n cleanly through TweakText;
  // we use a single line and split visually on " · ", but here we accept newline
  // by treating "/" as line-break in the headline.
  return (
    <TweaksPanel title="Pixel Floors">
      <TweakSection label="Brand">
        <TweakRadio
          label="Accent color"
          value={tweaks.accent}
          options={[
            { value: "mystic",  label: "Mystic" },
            { value: "magma",   label: "Magma" },
            { value: "biolume", label: "Bio" },
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Aura intensity"
          value={tweaks.aura}
          options={[
            { value: "subtle",    label: "Subtle" },
            { value: "signature", label: "House" },
            { value: "loud",      label: "Loud" },
          ]}
          onChange={(v) => setTweak("aura", v)}
        />
        <TweakSlider
          label="Type scale"
          min={0.85} max={1.15} step={0.01}
          value={tweaks.type_scale}
          unit="×"
          onChange={(v) => setTweak("type_scale", v)}
        />
      </TweakSection>
      <TweakSection label="Hero headline">
        <TweakText
          label="CZ (use / for line break)"
          value={(tweaks.headline_cs || "").replace(/\n/g, " / ")}
          onChange={(v) => setTweak("headline_cs", v.replace(/\s*\/\s*/g, "\n"))}
        />
        <TweakText
          label="EN (use / for line break)"
          value={(tweaks.headline_en || "").replace(/\n/g, " / ")}
          onChange={(v) => setTweak("headline_en", v.replace(/\s*\/\s*/g, "\n"))}
        />
      </TweakSection>
      <TweakSection label="Sections">
        <TweakToggle label="Stats marquee"    value={tweaks.show_proofs_marquee} onChange={(v) => setTweak("show_proofs_marquee", v)} />
        <TweakToggle label="References"       value={tweaks.show_references}     onChange={(v) => setTweak("show_references", v)} />
        <TweakToggle label="Products"         value={tweaks.show_products}       onChange={(v) => setTweak("show_products", v)} />
        <TweakToggle label="MINI vs FULL"     value={tweaks.show_comparison}     onChange={(v) => setTweak("show_comparison", v)} />
        <TweakToggle label="Proofs hero"      value={tweaks.show_proofs}         onChange={(v) => setTweak("show_proofs", v)} />
        <TweakToggle label="Why Pixel Floors" value={tweaks.show_benefits}       onChange={(v) => setTweak("show_benefits", v)} />
        <TweakToggle label="Dark proofs card" value={tweaks.dark_proofs}         onChange={(v) => setTweak("dark_proofs", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// ---------- ROOT APP ----------
function App() {
  const [lang, setLang] = React.useState("cs");
  const [tweaks, setTweak] = useTweaks(PF_DEFAULTS);

  const c = (window.PF_CONTENT[lang]) || window.PF_CONTENT.cs;

  // Override hero headline from tweaks — supports any number of lines
  const headlineRaw = lang === "cs" ? tweaks.headline_cs : tweaks.headline_en;
  const heroContent = {
    ...c.hero,
    h1: headlineRaw.split("\n"),
  };

  // Apply accent + aura via body data attrs
  React.useEffect(() => {
    document.body.dataset.accent = tweaks.accent;
    document.body.dataset.aura = tweaks.aura;
    document.documentElement.style.setProperty(
      "--font-base-constant",
      `${104.71696 * tweaks.type_scale}px`
    );
  }, [tweaks.accent, tweaks.aura, tweaks.type_scale]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // Dark proofs override
  React.useEffect(() => {
    const el = document.getElementById("proofs");
    if (!el) return;
    if (tweaks.dark_proofs) el.classList.remove("light-proofs");
    else el.classList.add("light-proofs");
  }, [tweaks.dark_proofs, tweaks.show_proofs]);

  return (
    <React.Fragment>
      <PFScrollCubes />
      <PFHeader
        lang={lang} setLang={setLang}
        content={c}
        onCta={() => scrollTo("contact")}
      />
      <div className="pf-shell">
        <PFHero
          content={heroContent}
          onPrimary={() => scrollTo("contact")}
          onSecondary={() => scrollTo("products")}
        />
      </div>

      {tweaks.show_proofs_marquee && <PFStatsMarquee content={c.stats} />}
      {tweaks.show_references     && <PFRefs        content={c.refs} />}
      {tweaks.show_products       && <PFProducts    content={c.productsHead} products={c.products} lang={lang} />}
      {tweaks.show_comparison     && <PFComparison  content={c.comparison} />}
      {tweaks.show_proofs         && <PFProofs      content={c.proofs} />}
      {tweaks.show_benefits       && <PFBenefits    content={c.benefits} />}
      <PFContact content={c.contact} />

      <div className="pf-shell">
        <PFFooter content={c.footer} lang={lang} setLang={setLang} />
      </div>

      <PFTweaks tweaks={tweaks} setTweak={setTweak} lang={lang} />
    </React.Fragment>
  );
}

window.PFApp = App;