/* Tweaks panel + tweak state hook */

const HERO_COPY = {
  muscle: {
    eyebrow: "Dev shop for Main Street",
    h1a: "Small business,",
    h1b: "serious",
    h1c: "software.",
    lede: "We build custom webapps for the plumbers, salons, clinics and shops that run the real economy. One upfront fee. No subscriptions. Yours to keep.",
  },
  friendly: {
    eyebrow: "Custom apps, built by humans",
    h1a: "Your business",
    h1b: "deserves",
    h1c: "better tools.",
    lede: "Tired of duct-taping 14 SaaS subscriptions together? We build a single custom app that does exactly what you need — then hand you the keys.",
  },
  punchy: {
    eyebrow: "Flat fee. Fast. Yours.",
    h1a: "Stop renting",
    h1b: "your software.",
    h1c: "Own it.",
    lede: "Custom CRMs, booking tools, analytics dashboards — built specifically for your shop. One price. Two weeks. No monthly fees for life.",
  },
};

function TweaksPanel({ tweaks, setTweak, visible }) {
  if (!visible) return null;
  return (
    <div className="tweak-panel">
      <h4>
        Tweaks
        <span className="mono">LIVE</span>
      </h4>

      <div className="tweak-group">
        <div className="tweak-label">Accent color</div>
        <div className="tweak-row">
          <button className={`tweak-btn ${tweaks.accent === 'orange' ? 'active' : ''}`} onClick={() => setTweak('accent', 'orange')}>
            <span className="tweak-swatch" style={{background:'#F56600'}} />Orange
          </button>
          <button className={`tweak-btn ${tweaks.accent === 'blue' ? 'active' : ''}`} onClick={() => setTweak('accent', 'blue')}>
            <span className="tweak-swatch" style={{background:'#2D5CFF'}} />Blue
          </button>
          <button className={`tweak-btn ${tweaks.accent === 'mint' ? 'active' : ''}`} onClick={() => setTweak('accent', 'mint')}>
            <span className="tweak-swatch" style={{background:'#00B87A'}} />Mint
          </button>
        </div>
      </div>

      <div className="tweak-group">
        <div className="tweak-label">Hero copy</div>
        <div className="tweak-row">
          <button className={`tweak-btn ${tweaks.heroCopy === 'muscle' ? 'active' : ''}`} onClick={() => setTweak('heroCopy', 'muscle')}>Muscle</button>
          <button className={`tweak-btn ${tweaks.heroCopy === 'friendly' ? 'active' : ''}`} onClick={() => setTweak('heroCopy', 'friendly')}>Friendly</button>
          <button className={`tweak-btn ${tweaks.heroCopy === 'punchy' ? 'active' : ''}`} onClick={() => setTweak('heroCopy', 'punchy')}>Punchy</button>
        </div>
      </div>

      <div className="tweak-group">
        <div className="tweak-label">Appearance</div>
        <div className="tweak-row">
          <button className={`tweak-btn ${!tweaks.dark ? 'active' : ''}`} onClick={() => setTweak('dark', false)}>Light</button>
          <button className={`tweak-btn ${tweaks.dark ? 'active' : ''}`} onClick={() => setTweak('dark', true)}>Dark</button>
        </div>
      </div>
    </div>
  );
}

function useTweaks() {
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS || { accent: 'orange', heroCopy: 'muscle', dark: false });
  const [panelVisible, setPanelVisible] = React.useState(false);

  // apply to DOM
  React.useEffect(() => {
    document.documentElement.setAttribute('data-accent', tweaks.accent);
    document.documentElement.setAttribute('data-dark', tweaks.dark ? 'true' : 'false');
  }, [tweaks]);

  // Tweaks messaging protocol
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setPanelVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setPanelVisible(false);
    };
    window.addEventListener('message', handler);
    // Announce availability after listener is live
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const setTweak = (k, v) => {
    setTweaks(prev => {
      const next = { ...prev, [k]: v };
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
      return next;
    });
  };

  return { tweaks, setTweak, panelVisible };
}

Object.assign(window, { TweaksPanel, useTweaks, HERO_COPY });