/* global React, ReactDOM */
/* global Nav, Hero, Marquee, ValueProp, Pain, Solution, Benefits, Proof, Menu, Location, Delivery, About, FAQ, Final, Footer, MeanderSvg, WAIcon */
/* global TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor, TweakText */
const { useState, useEffect } = React;

const WA_NUMBER_PLACEHOLDER = "5585999999999";
const WA_MSG = "Oi%2C+Greek%27s!+Quero+saber+mais+sobre+o+card%C3%A1pio+de+hoje.";
const WA_LINK = `https://wa.me/${WA_NUMBER_PLACEHOLDER}?text=${WA_MSG}`;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A",
  "showFloat": true,
  "showMarquee": true,
  "accent": "#F26522"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  // Apply accent color tweak
  useEffect(() => {
    document.documentElement.style.setProperty("--orange", t.accent);
    // derive hot variant
    document.documentElement.style.setProperty("--orange-hot", t.accent);
  }, [t.accent]);

  const onWA = (where) => {
    window.open(WA_LINK, "_blank");
  };

  return (
    <>
      <Nav onWA={onWA} />
      <Hero headline={t.headline} onWA={onWA} />
      {t.showMarquee && <Marquee />}
      <ValueProp />
      <MeanderSvg height={36} />
      <Pain />
      <Solution />
      <MeanderSvg height={36} flip />
      <Benefits />
      <Proof />
      <Menu onWA={onWA} />
      <MeanderSvg height={36} />
      <Location onWA={onWA} />
      <Delivery onWA={onWA} />
      <MeanderSvg height={36} flip />
      <About />
      <FAQ />
      <Final onWA={onWA} />
      <Footer />

      {t.showFloat && (
        <a className="float-wa" href="#" onClick={(e) => { e.preventDefault(); onWA("float"); }} aria-label="WhatsApp">
          <WAIcon size={28} />
        </a>
      )}

      <TweaksPanel title="Tweaks · Greek's">
        <TweakSection label="Headline" />
        <TweakRadio
          label="Variação"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
            { value: "A", label: "Deuses" },
            { value: "B", label: "Cidade" },
            { value: "C", label: "Sotaque" },
          ]}
        />
        <TweakSection label="Visual" />
        <TweakColor
          label="Destaque"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#F26522", "#E63946", "#FFB703", "#8AC926"]}
        />
        <TweakSection label="Elementos" />
        <TweakToggle
          label="Marquee"
          value={t.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
        <TweakToggle
          label="Botão flutuante"
          value={t.showFloat}
          onChange={(v) => setTweak("showFloat", v)}
        />
      </TweaksPanel>
    </>
  );
}

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