// tweaks.jsx — Ellavate site tweaks
// Lets the user swap palette, accent, tagline, and a few stylistic toggles.

const TWEAKS = /*EDITMODE-BEGIN*/{
  "palette":   ["#ece8e0", "#ddd7c8", "#16191c"],
  "accent":    "#1d4d52",
  "tagline":   "Talent strategy for inflection points.",
  "wordmark":  "rise",
  "altimeter": true,
  "altimeterUnit": "ft"
}/*EDITMODE-END*/;

const PALETTES = [
  // [paper, paper-deep, ink]
  ["#ece8e0", "#ddd7c8", "#16191c"], // Stone & ink (default)
  ["#efe9da", "#e2d9c1", "#1a1715"], // Cream & oak
  ["#eef0ea", "#dde0d4", "#161a17"], // Sage paper
  ["#f1ebdd", "#e8e0cd", "#1c1a16"], // Bone & ink (original)
  ["#e8e6e2", "#d4d0c9", "#1a1d22"], // Cool linen
  ["#f7f3eb", "#ebe5d4", "#0f1217"], // Pure ivory
  ["#e3ddd0", "#d2c9b6", "#211d18"], // Mushroom
  ["#e6e8eb", "#d3d7dd", "#13161a"], // Mist
  ["#ede2d4", "#decab5", "#1f1a15"], // Warm sand
  ["#1a1c1f", "#23262a", "#ece6d6"], // Midnight (dark)
];

const ACCENTS = [
  "#1d4d52", // Deep teal (default)
  "#2d5a3a", // Forest
  "#1f3a5c", // Navy
  "#6b2942", // Plum
  "#9a4a2a", // Clay (original)
  "#b8853a", // Brass
  "#7a2030", // Burgundy
  "#5a6a2a", // Olive
  "#3d5273", // Slate blue
  "#c25840", // Coral
];

const TAGLINES = [
  "Talent strategy for inflection points.",
  "The talent partner for what comes next.",
  "Executive search & coaching, built for the climb.",
  "Where leaders rise — and stay risen.",
  "Boutique HR. For companies in motion.",
];

const WORDMARKS = ["rise", "level", "stack"];

function applyTweaks(t) {
  const r = document.documentElement;
  const [bone, boneDeep, ink] = t.palette;
  r.style.setProperty("--bone", bone);
  r.style.setProperty("--bone-deep", boneDeep);
  r.style.setProperty("--ink", ink);
  r.style.setProperty("--accent", t.accent);

  // Derive softer ink shades from --ink via color-mix at runtime
  // (we just set the three "ink-N" tokens to good blends)
  const isDark = isColorDark(bone);
  if (isDark) {
    r.style.setProperty("--bone-soft", boneDeep);
    r.style.setProperty("--ink-2", mix(ink, bone, 0.18));
    r.style.setProperty("--ink-3", mix(ink, bone, 0.38));
    r.style.setProperty("--ink-4", mix(ink, bone, 0.58));
    r.style.setProperty("--rule", "rgba(240,233,216,0.18)");
    r.style.setProperty("--rule-soft", "rgba(240,233,216,0.08)");
  } else {
    r.style.setProperty("--bone-soft", lighten(bone, 0.04));
    r.style.setProperty("--ink-2", mix(ink, bone, 0.18));
    r.style.setProperty("--ink-3", mix(ink, bone, 0.42));
    r.style.setProperty("--ink-4", mix(ink, bone, 0.62));
    r.style.setProperty("--rule", `rgba(${hexRgb(ink)}, 0.16)`);
    r.style.setProperty("--rule-soft", `rgba(${hexRgb(ink)}, 0.08)`);
  }

  // Tagline — replace the hero h1
  const h1 = document.querySelector(".hero h1");
  if (h1) {
    const lines = formatTagline(t.tagline);
    h1.innerHTML = lines
      .map((line, i) => {
        const ind = i === 0 ? `<span class="ind">01</span>` : "";
        return `<span class="line">${ind}${line}</span>`;
      })
      .join("");
  }

  // Wordmark style
  document.querySelectorAll(".mark").forEach((el) => {
    el.setAttribute("data-style", t.wordmark);
  });
  applyWordmarkStyle(t.wordmark);

  // Altimeter
  const alt = document.getElementById("altimeter");
  if (alt) {
    alt.style.display = t.altimeter ? "" : "none";
    alt.setAttribute("data-unit", t.altimeterUnit);
    const unitEl = document.getElementById("elev-unit");
    if (unitEl) unitEl.textContent = t.altimeterUnit.toUpperCase();
    // Re-trigger scroll handler to refresh the number
    window.dispatchEvent(new Event("scroll"));
  }
}

function formatTagline(s) {
  // Break the tagline into editorial lines — emphasize one word with <em>
  // Try to find a natural emphasis word.
  const emphasis = ["inflection", "climb", "rise", "next", "motion", "risen"];
  const words = s.split(" ");
  const idx = words.findIndex((w) => emphasis.some((e) => w.toLowerCase().includes(e)));
  if (idx >= 0) words[idx] = `<em>${words[idx]}</em>`;
  // Wrap to 3 lines max, balanced
  const n = words.length;
  if (n <= 3) return [words.join(" ")];
  if (n <= 6) {
    const a = Math.ceil(n / 2);
    return [words.slice(0, a).join(" "), words.slice(a).join(" ")];
  }
  const a = Math.ceil(n / 3);
  const b = Math.ceil((n - a) / 2) + a;
  return [
    words.slice(0, a).join(" "),
    words.slice(a, b).join(" "),
    words.slice(b).join(" "),
  ];
}

function applyWordmarkStyle(style) {
  // 'rise' = default (double-l ascending), 'level' = both same height accent,
  // 'stack' = double-l as stacked bars
  let css = "";
  if (style === "rise") {
    css = `
      .mark .ll i { transform: translateY(-0.18em) scaleY(1.18); }
      .mark .ll i:last-child { transform: translateY(-0.28em) scaleY(1.32); }
    `;
  } else if (style === "level") {
    css = `
      .mark .ll i, .mark .ll i:last-child {
        transform: translateY(-0.22em) scaleY(1.24);
        color: var(--accent);
      }
    `;
  } else if (style === "stack") {
    css = `
      .mark .ll { letter-spacing: -0.04em; }
      .mark .ll i { transform: translateY(-0.12em) scaleY(1.10); color: var(--ink); }
      .mark .ll i:last-child { transform: translateY(-0.30em) scaleY(1.10); color: var(--accent); }
    `;
  }
  let tag = document.getElementById("__mark-style");
  if (!tag) {
    tag = document.createElement("style");
    tag.id = "__mark-style";
    document.head.appendChild(tag);
  }
  tag.textContent = css;
}

// — color utils —
function hexRgb(hex) {
  const m = hex.replace("#", "");
  const r = parseInt(m.slice(0, 2), 16);
  const g = parseInt(m.slice(2, 4), 16);
  const b = parseInt(m.slice(4, 6), 16);
  return `${r}, ${g}, ${b}`;
}
function isColorDark(hex) {
  const [r, g, b] = hexRgb(hex).split(", ").map(Number);
  const l = 0.299 * r + 0.587 * g + 0.114 * b;
  return l < 128;
}
function mix(a, b, t) {
  const ar = hexRgb(a).split(", ").map(Number);
  const br = hexRgb(b).split(", ").map(Number);
  const out = ar.map((v, i) => Math.round(v + (br[i] - v) * t));
  return `rgb(${out.join(", ")})`;
}
function lighten(hex, amt) {
  const [r, g, b] = hexRgb(hex).split(", ").map(Number);
  const f = (v) => Math.min(255, Math.round(v + (255 - v) * amt));
  return `rgb(${f(r)}, ${f(g)}, ${f(b)})`;
}

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

  React.useEffect(() => {
    applyTweaks(t);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakColor
        label="Paper & ink"
        value={t.palette}
        options={PALETTES}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)}
      />

      <TweakSection label="Identity" />
      <TweakRadio
        label="Wordmark"
        value={t.wordmark}
        options={WORDMARKS}
        onChange={(v) => setTweak("wordmark", v)}
      />
      <TweakSelect
        label="Tagline"
        value={t.tagline}
        options={TAGLINES}
        onChange={(v) => setTweak("tagline", v)}
      />

      <TweakSection label="Details" />
      <TweakToggle
        label="Altimeter"
        value={t.altimeter}
        onChange={(v) => setTweak("altimeter", v)}
      />
      <TweakRadio
        label="Altimeter unit"
        value={t.altimeterUnit}
        options={["ft", "m", "%"]}
        onChange={(v) => setTweak("altimeterUnit", v)}
      />
    </TweaksPanel>
  );
}

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