const { useState: useSA, useEffect: useEA } = React;

// ---------- Tweaks panel ----------
const Tweaks = ({state, setState, visible, onClose}) => {
  if (!visible) return null;
  const row = (label, children) => (
    <div style={{display:'flex', flexDirection:'column', gap:6, marginBottom:14}}>
      <div style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight:500}}>{label}</div>
      {children}
    </div>
  );
  return (
    <div style={{
      position:'fixed', right:20, bottom:20, width:280,
      background:'var(--paper)', border:'1px solid var(--rule-2)', borderRadius:14,
      boxShadow:'0 20px 50px -20px rgba(0,0,0,0.3)', zIndex:100, padding:16,
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
        <div style={{fontWeight:600, fontSize:14, letterSpacing:'-0.01em'}}>Tweaks</div>
        <button onClick={onClose} style={{fontSize:18, color:'var(--ink-3)', padding:'0 4px'}}>×</button>
      </div>
      {row('Accent color', (
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:6}}>
          {Object.entries(ACCENTS).map(([k,a])=>(
            <button key={k} onClick={()=>setState({...state, accent:k})} style={{
              padding:'8px 4px', borderRadius:8, border:'1px solid '+(state.accent===k?'var(--ink)':'var(--rule-2)'),
              background:'var(--paper)', display:'flex', flexDirection:'column', alignItems:'center', gap:4,
            }}>
              <span style={{width:16, height:16, borderRadius:99, background:a.v}}/>
              <span style={{fontSize:10, color:'var(--ink-2)'}}>{a.name}</span>
            </button>
          ))}
        </div>
      ))}
      {row('Hero right column', (
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          {[['ticker','Live ticker'],['code','Code sample']].map(([k,l])=>(
            <button key={k} onClick={()=>setState({...state, heroVariant:k})} style={{
              padding:'8px 6px', fontSize:12, borderRadius:8, border:'1px solid '+(state.heroVariant===k?'var(--ink)':'var(--rule-2)'),
              background: state.heroVariant===k?'var(--paper-2)':'var(--paper)', color:'var(--ink)', fontWeight:500,
            }}>{l}</button>
          ))}
        </div>
      ))}
      {row('Density', (
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          {[['cozy','Cozy'],['compact','Compact']].map(([k,l])=>(
            <button key={k} onClick={()=>setState({...state, density:k})} style={{
              padding:'8px 6px', fontSize:12, borderRadius:8, border:'1px solid '+(state.density===k?'var(--ink)':'var(--rule-2)'),
              background: state.density===k?'var(--paper-2)':'var(--paper)', color:'var(--ink)', fontWeight:500,
            }}>{l}</button>
          ))}
        </div>
      ))}
      <div style={{fontSize:11, color:'var(--ink-3)', paddingTop:8, borderTop:'1px dashed var(--rule-2)'}}>
        Use the toolbar toggle to hide this panel.
      </div>
    </div>
  );
};

// Hero code variant (alternative to ticker)
const HeroCode = () => (
  <div style={{position:'relative', height:540, borderRadius:16, border:'1px solid var(--ink)', background:'var(--ink)', overflow:'hidden'}}>
    <div style={{padding:'12px 16px', color:'var(--paper)', display:'flex', justifyContent:'space-between', borderBottom:'1px solid oklch(0.28 0.01 250)'}}>
      <div style={{display:'flex', gap:6}}>
        <span style={{width:10, height:10, borderRadius:99, background:'oklch(0.68 0.18 30)'}}/>
        <span style={{width:10, height:10, borderRadius:99, background:'oklch(0.80 0.15 85)'}}/>
        <span style={{width:10, height:10, borderRadius:99, background:'oklch(0.70 0.14 150)'}}/>
      </div>
      <span className="mono" style={{fontSize:11, opacity:0.7}}>api.reviora.com · v4</span>
    </div>
    <pre className="mono" style={{margin:0, padding:24, fontSize:13, lineHeight:1.7, color:'oklch(0.85 0.02 250)'}}>
{`$ curl https://api.reviora.com/v4/reviews \\
    -H "Authorization: Bearer sk_live_..." \\
    -d "location_id=loc_9fR2"

← 200 OK · 138ms

{
  "data": [
    {
      "id": "rvw_01HZ...",
      "source": "google",
      "rating": 5,
      "author": "Danielle R.",
      "text": "Fixed my leaky sink in under 20 minutes...",
      "sentiment": { "score": 0.91, "topics": ["speed"] },
      "replied": false
    }
  ],
  "next_cursor": "eyJpZCI6..."
}`}
    </pre>
  </div>
);

const App = () => {
  const [active, setActive] = useSA('home');
  const [tweaksVis, setTweaksVis] = useSA(false);
  const [state, setStateRaw] = useSA(TWEAK_DEFAULTS);

  const setState = (next) => {
    setStateRaw(next);
    try {
      window.parent.postMessage({type:'__edit_mode_set_keys', edits: next}, '*');
    } catch(e){}
  };

  useEA(()=>{
    applyAccent(state.accent);
  }, [state.accent]);

  useEA(()=>{
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode')   setTweaksVis(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksVis(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({type:'__edit_mode_available'}, '*'); } catch(e){}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  return (
    <>
      <Nav onNav={setActive} active={active}/>
      <main>
        <Hero variant={state.heroVariant}/>
        <Platforms/>
        <Endpoint/>
        <Pillars/>
        <BuildVsBuy/>
        <ReviewSites/>
        <Stats/>
        <CTA/>
      </main>
      <Footer/>
      <Tweaks state={state} setState={setState} visible={tweaksVis} onClose={()=>setTweaksVis(false)}/>
    </>
  );
};

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