// App composition + tweaks panel + lang provider

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm",
  "theme": "light",
  "heroLayout": "split",
  "showGrain": true
}/*EDITMODE-END*/;

const PALETTE_SWATCHES = {
  warm:       ['#13141a', '#f4a93a', '#faf7f1'],
  cool:       ['#0e1320', '#5a8fc7', '#f4f6f9'],
  terracotta: ['#1c1610', '#d76b3b', '#f7f0e6'],
};

function FloatCTA({ onClick, theme }) {
  const { t } = useLang();
  return (
    <button className="float-cta" onClick={onClick} aria-label={t.nav.cta}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      </svg>
      <span>{t.nav.cta}</span>
      <style>{`
        .float-cta {
          position: fixed;
          bottom: 24px; right: 24px;
          padding: 14px 18px 14px 16px;
          background: var(--ink);
          color: var(--bg);
          border-radius: 999px;
          border: 0;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-size: 14px;
          font-weight: 500;
          z-index: 40;
          box-shadow: 0 10px 30px rgba(20,20,28,0.25), 0 2px 6px rgba(20,20,28,0.15);
          animation: cta-in .5s cubic-bezier(.2,.8,.2,1);
        }
        @keyframes cta-in { from { transform: translateY(100px); opacity: 0; } }
        .float-cta:hover { background: #000; }
        .float-cta::before {
          content: "";
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--sun);
          box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 30%, transparent);
        }
        [data-theme="dark"] .float-cta { background: var(--sun); color: #15110a; }
        [data-theme="dark"] .float-cta::before { background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 30%, transparent); }
        @media (max-width: 880px) {
          .float-cta span { display: none; }
          .float-cta { padding: 14px; }
          .float-cta::before { display: none; }
        }
      `}</style>
    </button>
  );
}

function AppInner() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [chatOpen, setChatOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.palette, t.theme]);

  const openChat = () => setChatOpen(true);

  return (
    <>
      {t.showGrain && <div className="grain" aria-hidden="true" />}
      <TopNav onBookClick={openChat} />
      <main>
        <Hero onBookClick={openChat} layout={t.heroLayout} />
        <HowItWorks />
        <Benefits />
        <Gallery />
        <Pricing />
        <Outside />
        <Trust />
        <About />
        <FinalCTA onBookClick={openChat} />
      </main>
      <Footer />

      <ChatWidget open={chatOpen} onClose={() => setChatOpen(false)} />
      {!chatOpen && <FloatCTA onClick={openChat} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Palette"
          value={PALETTE_SWATCHES[t.palette]}
          options={[PALETTE_SWATCHES.warm, PALETTE_SWATCHES.cool, PALETTE_SWATCHES.terracotta]}
          onChange={(v) => {
            const key = Object.keys(PALETTE_SWATCHES).find(k => PALETTE_SWATCHES[k] === v) ||
              (v === PALETTE_SWATCHES.cool ? 'cool' : v === PALETTE_SWATCHES.terracotta ? 'terracotta' : 'warm');
            setTweak('palette', key);
          }}
        />
        <TweakSection label="Mode" />
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={['light', 'dark']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Layout"
          value={t.heroLayout}
          options={['split', 'centered']}
          onChange={(v) => setTweak('heroLayout', v)}
        />
        <TweakToggle
          label="Grain texture"
          value={t.showGrain}
          onChange={(v) => setTweak('showGrain', v)}
        />
      </TweaksPanel>
    </>
  );
}

function App() {
  return (
    <LangProvider>
      <AppInner />
    </LangProvider>
  );
}

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