const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "questionsMode": "Inline",
  "sectionNav": true,
  "maxQuestions": 4,
  "aiDraftQuote": true
}/*EDITMODE-END*/;
function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [role, setRole] = useState("customer");
  return <div>
    <div style={{position:"fixed", top:10, right:10, zIndex:30, display:"flex", background:"var(--bg-1)", border:"1px solid var(--border-strong)", borderRadius:"var(--r-pill)", padding:3, boxShadow:"var(--shadow-2)"}} aria-label="Prototype view switcher">
      {[["customer","Customer"],["contractor","Contractor"]].map(([id,label])=>
        <button key={id} onClick={()=>setRole(id)} className="btn btn-sm" style={{border:"none", background:role===id?"var(--ink-900)":"transparent", color:role===id?"#fff":"var(--fg-2)", padding:"6px 13px"}}>{label}</button>)}
    </div>
    {role==="customer" ? <CustomerApp key={"cust-"+t.questionsMode+"-"+t.maxQuestions} tweaks={t}></CustomerApp> : <ContractorApp key="con" tweaks={t}></ContractorApp>}
    <TweaksPanel>
      <TweakSection label="Customer intake"></TweakSection>
      <TweakRadio label="AI questions" value={t.questionsMode} options={["Inline","End chat"]} onChange={v=>setTweak("questionsMode", v)}></TweakRadio>
      <TweakToggle label="Section navigation" value={t.sectionNav} onChange={v=>setTweak("sectionNav", v)}></TweakToggle>
      <TweakSlider label="Max AI questions" value={t.maxQuestions} min={2} max={6} step={1} onChange={v=>setTweak("maxQuestions", v)}></TweakSlider>
      <TweakSection label="Contractor"></TweakSection>
      <TweakToggle label="AI-drafted quote lines" value={t.aiDraftQuote} onChange={v=>setTweak("aiDraftQuote", v)}></TweakToggle>
    </TweaksPanel>
  </div>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App></App>);