// ====== TWEAKS PANEL ======
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#ffffff",
  "heroEyebrow": "Enterprise AI Infrastructuur",
  "heroTitlePre": "AI Agents Die Je ",
  "heroTitleAccent": "Volgende Hire",
  "heroTitlePost": " Overbodig Maken.",
  "heroSub": "Full-stack AI deployment. In containers. Beveiligd. Onderhouden. Geschaald. Wij bouwen de AI operations layer die jouw bedrijf mist — zodat je team stopt met verzuipen in handwerk en begint te opereren op machine-snelheid.",
  "heroVideoOpacity": 80,
  "heroOverlayDarkness": 10,
  "ctaLabel": "Bekijk Wat Mogelijk Is",
  "ctaHref": "https://www.instagram.com/187n/",
  "finalCtaHeadingPre": "Klaar om te ",
  "finalCtaHeadingAccent": "Deployen?",
  "showPricingGlow": true,
  "showInterlude1": true,
  "showInterlude2": true,
  "showTeam": true,
  "showFAQ": true
}/*EDITMODE-END*/;

const TweakCtx = React.createContext(TWEAK_DEFAULTS);
const useTweaks = () => React.useContext(TweakCtx);

const TweakProvider = ({ children }) => {
  const [vals, setVals] = React.useState(TWEAK_DEFAULTS);
  const [on, setOn] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setOn(true);
      else if (d.type === '__deactivate_edit_mode') setOn(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  const update = (k, v) => {
    setVals(prev => ({ ...prev, [k]: v }));
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch (e) {}
  };

  return (
    <TweakCtx.Provider value={vals}>
      {children}
      {on && <TweakPanel vals={vals} update={update} />}
    </TweakCtx.Provider>
  );
};

const TweakPanel = ({ vals, update }) => {
  const [tab, setTab] = React.useState('hero');
  const Row = ({ label, children }) => (
    <label className="block mb-3">
      <div className="text-[10px] uppercase tracking-[0.2em] text-white/50 mb-1.5 font-mono">{label}</div>
      {children}
    </label>
  );
  const TextInput = ({ k, multiline }) => multiline
    ? <textarea value={vals[k]} onChange={e => update(k, e.target.value)} className="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-xs text-white resize-none" rows={3} />
    : <input value={vals[k]} onChange={e => update(k, e.target.value)} className="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-xs text-white" />;
  const Toggle = ({ k }) => (
    <button onClick={() => update(k, !vals[k])} className={`w-10 h-5 rounded-full relative transition ${vals[k] ? 'bg-white' : 'bg-white/15'}`}>
      <span className={`absolute top-0.5 w-4 h-4 rounded-full bg-black transition ${vals[k] ? 'left-5' : 'left-0.5'}`} style={{ background: vals[k] ? '#000' : '#888' }}></span>
    </button>
  );
  const Slider = ({ k, min, max }) => (
    <div className="flex items-center gap-2">
      <input type="range" min={min} max={max} value={vals[k]} onChange={e => update(k, +e.target.value)} className="flex-1" />
      <span className="text-xs font-mono text-white/70 w-8 text-right">{vals[k]}</span>
    </div>
  );

  return (
    <div className="fixed bottom-4 right-4 w-80 max-h-[80vh] overflow-y-auto z-[1000] liquid-glass-strong rounded-xl p-4 text-white" style={{ background: 'rgba(15,15,15,0.95)' }}>
      <div className="flex items-center justify-between mb-3">
        <div className="text-xs font-mono tracking-[0.2em] uppercase">Tweaks</div>
        <div className="flex gap-1">
          {['hero', 'cta', 'toggle'].map(t =>
            <button key={t} onClick={() => setTab(t)} className={`text-[10px] font-mono uppercase px-2 py-1 rounded ${tab === t ? 'bg-white text-black' : 'bg-white/10'}`}>{t}</button>
          )}
        </div>
      </div>

      {tab === 'hero' && <>
        <Row label="Eyebrow"><TextInput k="heroEyebrow" /></Row>
        <Row label="Title pre"><TextInput k="heroTitlePre" /></Row>
        <Row label="Title accent (italic)"><TextInput k="heroTitleAccent" /></Row>
        <Row label="Title post"><TextInput k="heroTitlePost" /></Row>
        <Row label="Subtitle"><TextInput k="heroSub" multiline /></Row>
        <Row label="Accent color"><input type="color" value={vals.accentColor} onChange={e => update('accentColor', e.target.value)} className="w-full h-8 rounded bg-transparent" /></Row>
        <Row label="Video opacity"><Slider k="heroVideoOpacity" min={0} max={100} /></Row>
        <Row label="Overlay darkness"><Slider k="heroOverlayDarkness" min={0} max={80} /></Row>
      </>}

      {tab === 'cta' && <>
        <Row label="CTA label"><TextInput k="ctaLabel" /></Row>
        <Row label="CTA link"><TextInput k="ctaHref" /></Row>
        <Row label="Final heading pre"><TextInput k="finalCtaHeadingPre" /></Row>
        <Row label="Final heading accent"><TextInput k="finalCtaHeadingAccent" /></Row>
      </>}

      {tab === 'toggle' && <>
        <div className="flex items-center justify-between mb-3"><span className="text-xs">Pricing glow</span><Toggle k="showPricingGlow" /></div>
        <div className="flex items-center justify-between mb-3"><span className="text-xs">Interlude 1</span><Toggle k="showInterlude1" /></div>
        <div className="flex items-center justify-between mb-3"><span className="text-xs">Interlude 2</span><Toggle k="showInterlude2" /></div>
        <div className="flex items-center justify-between mb-3"><span className="text-xs">Team section</span><Toggle k="showTeam" /></div>
        <div className="flex items-center justify-between mb-3"><span className="text-xs">FAQ section</span><Toggle k="showFAQ" /></div>
      </>}
    </div>
  );
};

Object.assign(window, { TweakProvider, useTweaks, TWEAK_DEFAULTS });