/* eslint-disable */
const TWEAK_DEFAULTS = (() => {
  try { return JSON.parse(document.getElementById('tweak-defaults').textContent.replace(/\/\*EDITMODE-BEGIN\*\//,'').replace(/\/\*EDITMODE-END\*\//,'')); }
  catch { return { accent: "#18B0EC", ctaColor: "#FF7A1A", deviceFrame: true, gamified: true }; }
})();

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--cta', tweaks.ctaColor);
  }, [tweaks.accent, tweaks.ctaColor]);

  const appContent = (
    <div className="app">
      <TopBar />
      <LiveTicker />
      <Hero />
    </div>
  );

  // Detect mobile viewport to bypass frame
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth <= 520);
  React.useEffect(() => {
    const onR = () => setIsMobile(window.innerWidth <= 520);
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, []);

  if (isMobile || !tweaks.deviceFrame) {
    return (
      <>
        <div className="prod-wrap">
          <div className="prod-bg-orbits"></div>
          <div className="prod-app">{appContent}</div>
        </div>
        <TweaksPanelMount tweaks={tweaks} setTweak={setTweak} />
      </>
    );
  }

  return (
    <div className="stage">
      <div className="stage-meta">
        <div><strong>Abra Caixas</strong> · Landing mobile</div>
        <div style={{ marginTop: 4, color: "var(--dim)" }}>iPhone 15 · 402 × 874</div>
      </div>
      <div className="frame-wrap">
        <IOSDevice width={402} height={874} dark={true}>
          {appContent}
        </IOSDevice>
      </div>
      <TweaksPanelMount tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

function TweaksPanelMount({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Cores">
        <TweakColor
          label="Cor de destaque"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={["#18B0EC", "#B85CFF", "#16C784", "#FF3B6C"]}
        />
        <TweakColor
          label="Cor do CTA"
          value={tweaks.ctaColor}
          onChange={(v) => setTweak('ctaColor', v)}
          options={["#FF7A1A", "#16C784", "#18B0EC", "#FFB938"]}
        />
      </TweakSection>
      <TweakSection label="Layout">
        <TweakToggle
          label="Moldura de iPhone"
          value={tweaks.deviceFrame}
          onChange={(v) => setTweak('deviceFrame', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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