// ALFARAWI — Tweaks app (drives CSS variables on the live page)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gold": "classic",
  "headingFont": "El Messiri",
  "heroImage": "assets/work-6.jpg",
  "heroDarkness": 58,
  "showStrip": true
}/*EDITMODE-END*/;

const GOLD_SETS = {
  classic:    { name: "ذهبي كلاسيكي", c: ["#E6CF95", "#C9A45C", "#9A7233"] },
  champagne:  { name: "شامبانيا وردي", c: ["#EAD3BC", "#CBA07A", "#A06B3F"] },
  copper:     { name: "نحاسي دافئ",    c: ["#E3B47E", "#C07C3C", "#8A5523"] },
  platinum:   { name: "بلاتيني فضي",   c: ["#DCDEE2", "#AEB3BA", "#7E848C"] }
};
const GOLD_KEYS = Object.keys(GOLD_SETS);

const HERO_IMAGES = [
  { v: "assets/work-6.jpg", label: "فيلا فاخرة" },
  { v: "assets/work-4.jpg", label: "إضاءة دافئة" },
  { v: "assets/work-5.jpg", label: "أبيض وأسود" },
  { v: "assets/work-2.jpg", label: "حجرية" },
  { v: "assets/work-3.jpg", label: "مدخل شامخ" }
];

const FONT_OPTIONS = ["El Messiri", "Reem Kufi", "Cairo", "Tajawal"];

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

  // gold palette
  React.useEffect(() => {
    const set = GOLD_SETS[t.gold] || GOLD_SETS.classic;
    const [c1, c2, c3] = set.c;
    const r = document.documentElement.style;
    r.setProperty("--gold-1", c1);
    r.setProperty("--gold-2", c2);
    r.setProperty("--gold-3", c3);
    r.setProperty("--gold-grad", `linear-gradient(135deg, ${c1} 0%, ${c2} 45%, ${c3} 100%)`);
  }, [t.gold]);

  // heading font
  React.useEffect(() => {
    document.documentElement.style.setProperty("--font-display", `'${t.headingFont}', 'Tajawal', serif`);
  }, [t.headingFont]);

  // hero image + darkness
  React.useEffect(() => {
    const img = document.querySelector(".hero-bg img");
    if (img) img.src = t.heroImage;
  }, [t.heroImage]);

  React.useEffect(() => {
    const img = document.querySelector(".hero-bg img");
    if (img) img.style.opacity = (1 - t.heroDarkness / 100).toFixed(2);
  }, [t.heroDarkness]);

  // marquee strip visibility
  React.useEffect(() => {
    const strip = document.querySelector(".strip");
    if (strip) strip.style.display = t.showStrip ? "" : "none";
  }, [t.showStrip]);

  return (
    <TweaksPanel title="تعديلات">
      <TweakSection label="الهوية الذهبية" />
      <TweakColor
        label="درجة الذهبي"
        value={(GOLD_SETS[t.gold] || GOLD_SETS.classic).c}
        options={GOLD_KEYS.map((k) => GOLD_SETS[k].c)}
        onChange={(v) => {
          const key = GOLD_KEYS.find((k) => GOLD_SETS[k].c.join() === v.join()) || "classic";
          setTweak("gold", key);
        }}
      />
      <TweakSection label="الخطوط" />
      <TweakSelect
        label="خط العناوين"
        value={t.headingFont}
        options={FONT_OPTIONS}
        onChange={(v) => setTweak("headingFont", v)}
      />
      <TweakSection label="الواجهة الرئيسية" />
      <TweakSelect
        label="صورة الواجهة"
        value={t.heroImage}
        options={HERO_IMAGES.map((h) => ({ value: h.v, label: h.label }))}
        onChange={(v) => setTweak("heroImage", v)}
      />
      <TweakSlider
        label="تعتيم الخلفية"
        value={t.heroDarkness}
        min={30}
        max={85}
        unit="%"
        onChange={(v) => setTweak("heroDarkness", v)}
      />
      <TweakSection label="عناصر" />
      <TweakToggle
        label="شريط الخدمات المتحرك"
        value={t.showStrip}
        onChange={(v) => setTweak("showStrip", v)}
      />
    </TweaksPanel>
  );
}

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