/* App root + Tweaks */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0ac775",
  "dark": false,
  "headline": "WhatsApp-first growth for local businesses — done for you.",
  "subline": "Websites, chatbots, Meta ads, CRM — we run the digital side of your shop so you can run your shop."
}/*EDITMODE-END*/;

const HEADLINE_OPTIONS = [
  "WhatsApp-first growth for local businesses — done for you.",
  "Chats that sell. Ads that work. Sites that convert.",
  "Your whole business, running on — WhatsApp.",
  "We build the digital side of your shop — end to end.",
];

const ACCENT_OPTIONS = [
  { label: "Mint", v: "#0ac775" },
  { label: "Sunset", v: "#ff6b3d" },
  { label: "Cobalt", v: "#3b6bff" },
  { label: "Amber", v: "#f5a524" },
  { label: "Magenta", v: "#e23a8b" },
];

function App() {
  const [tw, setTweak] = useTweaks(DEFAULTS);
  const setTw = (obj) => {
    Object.entries(obj).forEach(([k, v]) => setTweak(k, v));
  };

  useEffectApp(() => {
    document.documentElement.style.setProperty('--accent', tw.accent);
    // derive accent-soft + ink from accent
    document.documentElement.style.setProperty('--accent-soft', hexToSoft(tw.accent, tw.dark ? 0.18 : 0.15));
    document.documentElement.style.setProperty('--accent-ink', darkenHex(tw.accent, 0.78));
    document.documentElement.classList.toggle('dark', !!tw.dark);
  }, [tw.accent, tw.dark]);

  // Reveal on scroll
  useEffectApp(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('inview');
      });
    }, { threshold: 0.1 });
    document.querySelectorAll('.fade-in-up').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero headline={tw.headline} sub={tw.subline} />
      <Services />
      <Process />
      <ChatDemo />
      <FeaturedCase />
      <Cases />
      <Pricing />
      <FAQ />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand accent">
          <div style={{display: 'flex', gap: 8, flexWrap: 'wrap'}}>
            {ACCENT_OPTIONS.map(o => (
              <button key={o.v}
                onClick={() => setTw({ accent: o.v })}
                style={{
                  width: 30, height: 30, borderRadius: '50%', background: o.v,
                  border: tw.accent === o.v ? '2px solid var(--ink)' : '2px solid transparent',
                  outline: '1px solid var(--line)', cursor: 'pointer'
                }}
                title={o.label}
              />
            ))}
          </div>
        </TweakSection>

        <TweakToggle
          label="Dark mode"
          value={!!tw.dark}
          onChange={(v) => setTw({ dark: v })}
        />

        <TweakSection label="Headline">
          {HEADLINE_OPTIONS.map(h => (
            <button key={h}
              onClick={() => setTw({ headline: h })}
              style={{
                display: 'block', width: '100%', textAlign: 'left',
                padding: '10px 12px', marginBottom: 6,
                background: tw.headline === h ? 'var(--accent-soft)' : 'var(--paper-2)',
                border: tw.headline === h ? '1px solid var(--accent)' : '1px solid var(--line)',
                borderRadius: 8, color: 'var(--ink)', fontSize: 12, cursor: 'pointer', lineHeight: 1.35,
              }}
            >
              {h}
            </button>
          ))}
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function hexToSoft(hex, a) {
  const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
  return `rgba(${r},${g},${b},${a})`;
}
function darkenHex(hex, amt) {
  const r = Math.max(0, Math.round(parseInt(hex.slice(1,3),16) * (1 - amt)));
  const g = Math.max(0, Math.round(parseInt(hex.slice(3,5),16) * (1 - amt)));
  const b = Math.max(0, Math.round(parseInt(hex.slice(5,7),16) * (1 - amt)));
  return `rgb(${r},${g},${b})`;
}

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