/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle */
const { useEffect } = React;

/* Hero copy variants, Aden's locked positioning is Variant D (professional services).
   The other two are quick alternates from the copy doc, useful to A/B sense-check. */
const HERO_VARIANTS = {
  "D-pro-services": {
    label: "Pro services (locked)",
    headline: ["Hire bookkeepers, EAs, and back-office staff for", "30% of US cost."],
    sub: "Pre-vetted talent for accounting firms, healthcare practices, and growing SMBs. Shortlist in 7 days. Replacement guaranteed.",
  },
  "D-sharper": {
    label: "Sharper hook",
    headline: ["Stop paying $65K for a bookkeeper.", "Hire one for $22K."],
    sub: "Pre-vetted South African bookkeepers, accountants, and EAs. 7-day shortlist. 30-day replacement guarantee.",
  },
  "D-pain-led": {
    label: "Pain-led",
    headline: ["Your billable hours are getting eaten by admin.", "We can fix that."],
    sub: "Hire pre-vetted back-office staff in 14 days. 70% less than a US hire. Full Employer of Record handled.",
  },
};

/* Accent palettes, minimal swap of the three core purple tokens. */
const ACCENT_PALETTES = {
  purple: { bright: "#A78BFA", base: "#8B5CF6", deep: "#6D28D9" },
  indigo: { bright: "#818CF8", base: "#6366F1", deep: "#4338CA" },
  violet: { bright: "#C084FC", base: "#A855F7", deep: "#7E22CE" },
  blue:   { bright: "#60A5FA", base: "#3B82F6", deep: "#1D4ED8" },
};

function applyHeroVariant(key) {
  const v = HERO_VARIANTS[key] || HERO_VARIANTS["D-pro-services"];
  const headlineEl = document.querySelector("[data-hero-headline]");
  const subEl = document.querySelector("[data-hero-sub]");
  if (headlineEl) {
    headlineEl.innerHTML =
      v.headline[0] +
      ' <span class="text-gradient">' + v.headline[1] + "</span>";
  }
  if (subEl) subEl.textContent = v.sub;
}

function applyAccent(key) {
  const p = ACCENT_PALETTES[key] || ACCENT_PALETTES.purple;
  const root = document.documentElement;
  root.style.setProperty("--purple", p.base);
  root.style.setProperty("--purple-bright", p.bright);
  root.style.setProperty("--purple-deep", p.deep);
  // Derived alphas
  const hex = p.base.replace("#", "");
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  root.style.setProperty("--purple-soft", `rgba(${r}, ${g}, ${b}, 0.12)`);
  root.style.setProperty("--shadow-purple", `0 10px 40px rgba(${r}, ${g}, ${b}, 0.35)`);
}

function applyShortlist(show) {
  const card = document.querySelector(".shortlist-card");
  const orb = document.querySelector(".hero-orb");
  if (card) card.style.display = show ? "" : "none";
  if (orb) orb.style.opacity = show ? "" : "0.55";
}

function applyMotion(on) {
  document.querySelectorAll("[data-reveal]").forEach((el) => {
    if (!on) {
      el.classList.add("is-visible");
      el.style.transition = "none";
    } else {
      el.style.transition = "";
    }
  });
}

function VHTweaks() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  useEffect(() => { applyHeroVariant(tweaks.heroVariant); }, [tweaks.heroVariant]);
  useEffect(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);
  useEffect(() => { applyShortlist(tweaks.showShortlistCard); }, [tweaks.showShortlistCard]);
  useEffect(() => { applyMotion(tweaks.motionEnabled); }, [tweaks.motionEnabled]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero">
        <TweakRadio
          label="Headline variant"
          value={tweaks.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={Object.entries(HERO_VARIANTS).map(([k, v]) => ({ value: k, label: v.label }))}
        />
        <TweakToggle
          label="Show shortlist card"
          value={tweaks.showShortlistCard}
          onChange={(v) => setTweak("showShortlistCard", v)}
        />
      </TweakSection>

      <TweakSection title="Accent">
        <TweakRadio
          label="Palette"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "purple", label: "Purple" },
            { value: "indigo", label: "Indigo" },
            { value: "violet", label: "Violet" },
            { value: "blue",   label: "Blue"   },
          ]}
        />
      </TweakSection>

      <TweakSection title="Motion">
        <TweakToggle
          label="Scroll reveal"
          value={tweaks.motionEnabled}
          onChange={(v) => setTweak("motionEnabled", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement("div");
tweaksRoot.id = "vh-tweaks-root";
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<VHTweaks />);