// Criminal Defense — main app

const CDApp = () => {
  const [city, setCity] = React.useState("abq");
  const [t, setTweak] = useTweaks(window.CD_TWEAK_DEFAULTS || {});
  return (
    <>
      <CDNav/>
      <CitySwitcher city={city} setCity={setCity}/>
      <main id="main">
        <CDHero city={city}/>
        <LowriderBand
          headline={t.headline}
          locations={t.locations}
          reachLine={t.reachLine}
          flatFeeLabel={t.flatFeeLabel}
          paymentPlansLabel={t.paymentPlansLabel}
          feesBlurb={t.feesBlurb}
        />
        <ProsecutorEdge city={city}/>
        <LocalLandscape city={city}/>
        <PracticeAreas/>
        <ProcessTimeline city={city}/>
        <MoreOnSite/>
        <FeesSection/>
        <CDFAQs/>
        <CDCta city={city}/>
      </main>
      <CDFooter/>

      <TweaksPanel>
        <TweakSection label="Coverage band"/>
        <TweakText label="Headline" value={t.headline} onChange={v => setTweak('headline', v)}/>
        <TweakText label="Locations" value={t.locations} onChange={v => setTweak('locations', v)} placeholder="Offices in Albuquerque and Las Cruces..."/>
        <TweakText label="Reach line" value={t.reachLine} onChange={v => setTweak('reachLine', v)} placeholder="And every county..."/>
        <TweakSection label="Fee pills"/>
        <TweakText label="Pill 1" value={t.flatFeeLabel} onChange={v => setTweak('flatFeeLabel', v)}/>
        <TweakText label="Pill 2" value={t.paymentPlansLabel} onChange={v => setTweak('paymentPlansLabel', v)}/>
        <TweakText label="Fees blurb" value={t.feesBlurb} onChange={v => setTweak('feesBlurb', v)}/>
      </TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<CDApp/>);