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

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

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

const HEADLINES = {
  "ventes": ["Explose tes ventes grâce à des ", "créas qui performent", "", "", ""],
  "agence": ["", "30 nouvelles créas Meta", " pour ta marque skincare. Livrées en ", "7 jours", "."],
  "convertissent": ["", "15 vidéos IA + 15 statiques", " livrées en 7 jours pour des publicités Meta qui ", "convertissent"],
  "equipe": ["Un seul sprint, ", "1489 EUR", ", pour tester de nouveaux angles sur ", "Meta"],
};

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 && t.headline !== "ventes") {
      const p = HEADLINES[t.headline] || HEADLINES["agence"];
      const marker = t.headline === "agence";
      const mid = marker
        ? `<span class="hl-marker">${p[1]}</span>`
        : `<em>${p[1]}</em>`;
      const last = !p[3] ? "" : marker
        ? `<span class="hl-marker">${p[3]}</span>`
        : `<span class="u"><em>${p[3]}</em></span>`;
      h1.innerHTML = `${p[0]}${mid}${p[2]}${last}${p[4] || ""}`;
    } else if (h1) {
      h1.innerHTML = `Obtiens des pubs IA<br>pour scaler ta marque<br><em><span style="font-size:clamp(30px,4.6vw,76px);letter-spacing:-.035em">skincare <span style="color:var(--ink)">sur Meta</span> en 60 jours</span></em>`;
    }
  }, [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: "ventes", label: "Obtiens des créatives IA calibrées…" },
          { value: "agence", label: "30 nouvelles créas Meta, livrées en 7 jours…" },
          { value: "convertissent", label: "15 vidéos IA + 15 statiques…" },
          { value: "equipe", label: "Un seul sprint, 1489 EUR…" },
        ]}
        onChange={(v) => setTweak("headline", v)}
      />
    </TweaksPanel>
  );
}

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