/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakText, TweakToggle, TweakSelect, TweakRadio */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Plumbing you don't have to <em>think about.</em>",
  "subhead": "This is a demo website showcasing AI-powered booking and chat for trade businesses. Built by Aleks Automation to show plumbers what's possible — from site to chatbot, done in hours.",
  "phone": "+61 402 175 865",
  "navy": "#0E2A3A",
  "copper": "#C97333",
  "background": "#FAFAF7",
  "showHeroOverlay": true,
  "heroAlignment": "left",
  "mobileHeroLayout": "overlay"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--navy', tweaks.navy);
    r.style.setProperty('--copper', tweaks.copper);
    r.style.setProperty('--bg', tweaks.background);
  }, [tweaks.navy, tweaks.copper, tweaks.background]);

  return (
    <>
      <Nav phone={tweaks.phone} />
      <Hero phone={tweaks.phone} headline={tweaks.headline} sub={tweaks.subhead} mobileLayout={tweaks.mobileHeroLayout} />
      <TrustBar />
      <Services />
      <HowItWorks />
      <Pricing />
      <Areas />
      <Team />
      <Reviews />
      <Guarantee />
      <Booking phone={tweaks.phone} />
      <Footer phone={tweaks.phone} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero copy">
          <TweakText label="Headline (use <em>...</em> for italic accent)" value={tweaks.headline} onChange={(v) => setTweak('headline', v)} />
          <TweakText label="Subhead" value={tweaks.subhead} onChange={(v) => setTweak('subhead', v)} multiline />
          <TweakText label="Phone number" value={tweaks.phone} onChange={(v) => setTweak('phone', v)} />
        </TweakSection>
        <TweakSection title="Palette">
          <TweakColor label="Navy (primary)" value={tweaks.navy} onChange={(v) => setTweak('navy', v)} />
          <TweakColor label="Copper (accent)" value={tweaks.copper} onChange={(v) => setTweak('copper', v)} />
          <TweakColor label="Background" value={tweaks.background} onChange={(v) => setTweak('background', v)} />
        </TweakSection>
        <TweakSection title="Mobile hero layout">
          <TweakRadio
            label="Below 720px"
            value={tweaks.mobileHeroLayout}
            onChange={(v) => setTweak('mobileHeroLayout', v)}
            options={[
              { value: 'overlay', label: 'Overlay' },
              { value: 'stacked', label: 'Image card' },
              { value: 'compact', label: 'Compact' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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