// Tweaks panel + app shell for v3

const V3TweaksPanel = ({ state, setState, onClose }) => {
  const set = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  return (
    <div className="v3-tweaks">
      <h4>
        Tweaks
        <span className="x" onClick={onClose}>×</span>
      </h4>
      <div className="v3-tweak-group">
        <div className="v3-tweak-label">Hero word</div>
        <div className="v3-tweak-options">
          {[
            { k: "snap", label: "Pop / Snap" },
            { k: "verbs", label: "Verbs" },
            { k: "vibes", label: "Vibes" },
          ].map(o => (
            <button key={o.k}
              className={`v3-tweak-chip ${state.heroWords === o.k ? "active" : ""}`}
              onClick={() => set("heroWords", o.k)}>
              {o.label}
            </button>
          ))}
        </div>
      </div>
      <div className="v3-tweak-group">
        <div className="v3-tweak-label">Stickers</div>
        <div className="v3-tweak-options">
          <button className={`v3-tweak-chip ${state.stickers ? "active" : ""}`} onClick={() => set("stickers", true)}>On</button>
          <button className={`v3-tweak-chip ${!state.stickers ? "active" : ""}`} onClick={() => set("stickers", false)}>Off</button>
        </div>
      </div>
      <div className="v3-tweak-group">
        <div className="v3-tweak-label">Marquee energy</div>
        <div className="v3-tweak-options">
          {[
            { k: "calm", label: "Calm" },
            { k: "loud", label: "Loud" },
            { k: "wild", label: "Wild" },
          ].map(o => (
            <button key={o.k}
              className={`v3-tweak-chip ${state.marquee === o.k ? "active" : ""}`}
              onClick={() => set("marquee", o.k)}>
              {o.label}
            </button>
          ))}
        </div>
      </div>
      <div className="v3-tweak-group">
        <div className="v3-tweak-label">Sticky stacks</div>
        <div className="v3-tweak-options">
          <button className={`v3-tweak-chip ${state.sticky ? "active" : ""}`} onClick={() => set("sticky", true)}>Sticky</button>
          <button className={`v3-tweak-chip ${!state.sticky ? "active" : ""}`} onClick={() => set("sticky", false)}>Static</button>
        </div>
      </div>
      <div className="v3-tweak-group">
        <div className="v3-tweak-label">Motion</div>
        <div className="v3-tweak-options">
          <button className={`v3-tweak-chip ${state.motion ? "active" : ""}`} onClick={() => set("motion", true)}>On</button>
          <button className={`v3-tweak-chip ${!state.motion ? "active" : ""}`} onClick={() => set("motion", false)}>Reduced</button>
        </div>
      </div>
    </div>
  );
};

const HERO_WORD_SETS = {
  snap:  ["pop.", "snap.", "melt.", "crunch."],
  verbs: ["pop.", "snap.", "freeze.", "share."],
  vibes: ["slap.", "rule.", "sell.", "stick."],
};

const V3App = () => {
  const [state, setState] = React.useState(window.TWEAKS_V3 || {
    heroWords: "snap", stickers: true, marquee: "loud", sticky: true, motion: true,
  });
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const onClose = () => {
    setTweaksOpen(false);
    window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
  };

  // Apply motion class
  React.useEffect(() => {
    document.body.classList.toggle("no-motion", !state.motion);
  }, [state.motion]);

  // Apply sticky toggle
  React.useEffect(() => {
    const cards = document.querySelectorAll(".v3-stack-card");
    cards.forEach(c => {
      if (state.sticky) {
        c.style.position = "";
        c.style.top = "";
        c.style.height = "";
      } else {
        c.style.position = "relative";
        c.style.top = "auto";
        c.style.height = "auto";
      }
    });
  }, [state.sticky]);

  const heroWords = HERO_WORD_SETS[state.heroWords] || HERO_WORD_SETS.snap;
  const marqueeFast = state.marquee === "wild";
  const marqueeReverse = state.marquee !== "calm";

  return (
    <div className="page">
      <V3Nav/>
      <V3Hero words={heroWords} showStickers={state.stickers}/>
      <V3MarqueeBig variant="purple"/>
      <V3Manifesto/>
      <V3MarqueeText variant="coral" reverse={marqueeReverse} fast={marqueeFast}/>
      <V3Stacks/>
      <V3ProductMarquee/>
      <V3Why/>
      <V3Stats/>
      <V3Founder/>
      <V3Markets/>
      <V3RetailStrip/>
      <V3MarqueeText variant="ink" reverse={!marqueeReverse} fast={marqueeFast}/>
      <V3Partners/>
      <V3Contact/>
      <V3CTA/>
      <V3Footer/>
      {tweaksOpen && <V3TweaksPanel state={state} setState={setState} onClose={onClose}/>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<V3App/>);