// Tweaks panel + app root

function TweaksPanel({ open, onClose, tweaks, setTweaks }) {
  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try { localStorage.setItem('dfv-tweaks', JSON.stringify(next)); } catch {}
    try { window.parent.postMessage({ type:'__edit_mode_set_keys', edits:{ [k]: v }}, '*'); } catch {}
  };

  const accents = [
    { id:'cyan',   c:'#00B4FF' },
    { id:'amber',  c:'#F59E0B' },
    { id:'violet', c:'#9B6CFF' },
    { id:'green',  c:'#00E5A0' },
  ];

  return (
    <div className={`tweaks-panel ${open ? 'open' : ''}`}>
      <div className="title">
        <strong>Tweaks</strong>
        <button className="close" onClick={onClose} aria-label="Close">✕</button>
      </div>

      <div className="group">
        <h4>Accent</h4>
        <div className="swatch-row">
          {accents.map(a => (
            <div key={a.id}
              className={`swatch ${tweaks.accent === a.id ? 'active' : ''}`}
              style={{ background:a.c, boxShadow:`0 0 14px ${a.c}55` }}
              onClick={()=>set('accent', a.id)}
            />
          ))}
        </div>
      </div>

      <div className="group">
        <h4>Type</h4>
        <div className="segment" style={{ gridTemplateColumns:'1fr' }}>
          {[
            { id:'noto-manrope',     label:'Noto Serif · Manrope' },
            { id:'fraunces-space',   label:'Fraunces · Space Grotesk' },
            { id:'instrument-inter', label:'Instrument · Inter' },
          ].map(f => (
            <button key={f.id} className={tweaks.fonts === f.id ? 'active' : ''} onClick={()=>set('fonts', f.id)}>
              {f.label}
            </button>
          ))}
        </div>
      </div>

      <div className="group">
        <h4>Density</h4>
        <div className="segment">
          {['compact','comfortable','spacious'].map(d => (
            <button key={d} className={tweaks.density === d ? 'active' : ''} onClick={()=>set('density', d)}>
              {d[0].toUpperCase() + d.slice(1)}
            </button>
          ))}
        </div>
      </div>

      <div className="group">
        <h4>Darkness</h4>
        <div className="segment">
          {['deep','standard','lifted'].map(d => (
            <button key={d} className={tweaks.darkness === d ? 'active' : ''} onClick={()=>set('darkness', d)}>
              {d[0].toUpperCase() + d.slice(1)}
            </button>
          ))}
        </div>
      </div>

      <div className="group">
        <h4>Glow · {tweaks.glow.toFixed(1)}×</h4>
        <input
          type="range" min={0} max={2} step={0.1}
          value={tweaks.glow}
          onChange={e => set('glow', parseFloat(e.target.value))}
        />
      </div>

      <div className="group">
        <h4>Motion</h4>
        <div className="segment">
          {[['true','On'],['false','Off']].map(([v,l]) => (
            <button key={v} className={String(tweaks.motion) === v ? 'active' : ''} onClick={()=>set('motion', v === 'true')}>
              {l}
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginTop:14, paddingTop:12, borderTop:'1px solid var(--border)' }}>
        <button
          onClick={() => {
            const defaults = { accent:'cyan', glow:1, fonts:'noto-manrope', density:'comfortable', darkness:'standard', motion:true };
            setTweaks(defaults);
            try { localStorage.setItem('dfv-tweaks', JSON.stringify(defaults)); } catch {}
          }}
          style={{
            width:'100%', padding:'8px 10px',
            background:'transparent', border:'1px solid var(--border)',
            color:'var(--muted)', borderRadius:8, cursor:'pointer',
            fontSize:11, fontFamily:'var(--font-mono)', letterSpacing:'0.08em',
          }}
        >
          $ reset_defaults
        </button>
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweaks] = useState(window.__TWEAKS__ || {
    accent:'cyan', glow:1, fonts:'noto-manrope', density:'comfortable', darkness:'standard', motion:true,
  });
  const [panelOpen, setPanelOpen] = useState(false);

  // Apply tweaks to <html>
  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-accent', tweaks.accent);
    root.setAttribute('data-fonts', tweaks.fonts);
    root.setAttribute('data-density', tweaks.density);
    root.setAttribute('data-darkness', tweaks.darkness);
    root.setAttribute('data-motion', String(tweaks.motion));
    root.style.setProperty('--glow', tweaks.glow);
  }, [tweaks]);

  // Host integration
  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setPanelOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setPanelOpen(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type:'__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', handler);
  }, []);

  return (
    <>
      <NavBar />
      <main>
        <HeroSection />
        <GravitySection />
        <StatsBar />
        <PillarsSection />
        <ShowcaseSection />
        <CaseStudiesSection />
        <VideoProofSection />
        <WebDesignShowcase />
        <WorkflowSection />
        <StackSection />
        <AboutSection />
        <ContactSection />
      </main>
      <Footer />

      {/* Floating Tweaks button */}
      <button
        onClick={() => setPanelOpen(p => !p)}
        aria-label="Toggle tweaks"
        style={{
          position:'fixed', right:20, bottom: panelOpen ? 'auto' : 20,
          top: panelOpen ? 20 : 'auto',
          zIndex: 10001,
          width:46, height:46, borderRadius:'50%',
          background:'rgba(6,20,34,0.9)', border:'1px solid var(--border-strong)',
          color:'var(--accent)', cursor:'pointer',
          backdropFilter:'blur(16px)',
          boxShadow:'0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(var(--accent-rgb),0.2)',
          display:'flex', alignItems:'center', justifyContent:'center',
          fontSize:18,
          transition:'transform .2s, box-shadow .2s',
        }}
        onMouseEnter={e=>{ e.currentTarget.style.transform='scale(1.08)'; }}
        onMouseLeave={e=>{ e.currentTarget.style.transform='scale(1)'; }}
      >
        {panelOpen ? '✕' : '⚙'}
      </button>

      <TweaksPanel open={panelOpen} onClose={()=>setPanelOpen(false)} tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);