/* ============================================================
   IconFlow — Tweaks (direction Dynamique)
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  "accent": "#12C95E",
  "tilt": true,
  "headline": "agence"
}/*EDITMODE-END*/;

const ACCENTS = ["#12C95E", "#B6F03A", "#E3FB4F", "#FF6B4A", "#54B9FF"];

const HEADLINES = {
  "agence": ["L'agence créative ", "vidéo", " des marques skincare qui ", "scalent sur Meta"],
  "convertissent": ["Passe de ", "30K à 100K€", "/mois en 90 jours avec des créatives Meta qui ", "convertissent"],
  "equipe": ["Une équipe dédiée prend ", "100% de ton acquisition", " et te mène vers ", "100K€/mois"],
};

function ink(hex) {
  const c = hex.replace("#", "");
  const r = parseInt(c.substr(0, 2), 16), g = parseInt(c.substr(2, 2), 16), b = parseInt(c.substr(4, 2), 16);
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return lum > 0.45 ? "#06140B" : "#ffffff";
}

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

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-ink", ink(t.accent));

    document.querySelectorAll(".ticker").forEach((el, i) => {
      if (!t.tilt) { el.style.transform = "rotate(0deg) scale(1)"; }
      else { el.style.transform = ""; }
    });

    const h1 = document.getElementById("hero-h1");
    if (h1) {
      const p = HEADLINES[t.headline] || HEADLINES["agence"];
      h1.innerHTML = `${p[0]}<em>${p[1]}</em>${p[2]}<span class="u"><em>${p[3]}</em></span>`;
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Couleur" />
      <TweakColor label="Accent" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Énergie" />
      <TweakToggle label="Bandeaux inclinés" value={t.tilt} onChange={(v) => setTweak("tilt", v)} />
      <TweakSection label="Accroche" />
      <TweakSelect
        label="Titre du hero"
        value={t.headline}
        options={[
          { value: "agence", label: "L'agence créative vidéo…" },
          { value: "convertissent", label: "Passe de 30K à 100K€…" },
          { value: "equipe", label: "Une équipe dédiée…" },
        ]}
        onChange={(v) => setTweak("headline", v)}
      />
    </TweaksPanel>
  );
}

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