const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "slate",
  "fontScale": "normal",
  "showImagery": true,
  "showWhatsappBubble": true
}/*EDITMODE-END*/;

const App = () => {
  const [open, setOpen] = React.useState(false);
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply theme + scale via root attributes
  React.useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    const scaleMap = { small: 0.92, normal: 1, large: 1.1, xlarge: 1.22 };
    document.documentElement.style.setProperty("--scale", scaleMap[tweaks.fontScale] || 1);
  }, [tweaks.theme, tweaks.fontScale]);

  const openForm = () => setOpen(true);

  return (
    <>
      <Header onRequest={openForm} />
      <main>
        <Hero onRequest={openForm} showImagery={tweaks.showImagery} />
        <Services onRequest={openForm} />
        <Vehicle showImagery={tweaks.showImagery} />
        <How onRequest={openForm} />
        <Trust />
        <Education />
        <FAQ />
        <CallToAction onRequest={openForm} />
      </main>
      <Footer />

      <RequestForm open={open} onClose={() => setOpen(false)} />

      {tweaks.showWhatsappBubble && <WhatsAppBubble />}

      <MobileCTABar onRequest={openForm} />

      <CookieConsent />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label={t("tweaks.visual")}>
          <window.TweakRadio
            label={t("tweaks.theme")}
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "slate", label: t("tweaks.themeSlate") },
              { value: "mint", label: t("tweaks.themeMint") },
              { value: "slate-dark", label: t("tweaks.themeDark") },
            ]}
          />
          <window.TweakToggle
            label={t("tweaks.imagery")}
            value={tweaks.showImagery}
            onChange={(v) => setTweak("showImagery", v)}
          />
        </window.TweakSection>

        <window.TweakSection label={t("tweaks.a11y")}>
          <window.TweakSelect
            label={t("tweaks.fontSize")}
            value={tweaks.fontScale}
            onChange={(v) => setTweak("fontScale", v)}
            options={[
              { value: "small",  label: t("tweaks.fsSmall")  },
              { value: "normal", label: t("tweaks.fsNormal") },
              { value: "large",  label: t("tweaks.fsLarge")   },
              { value: "xlarge", label: t("tweaks.fsXlarge") },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label={t("tweaks.contact")}>
          <window.TweakToggle
            label={t("tweaks.whatsapp")}
            value={tweaks.showWhatsappBubble}
            onChange={(v) => setTweak("showWhatsappBubble", v)}
          />
          <window.TweakButton label={t("tweaks.openForm")} onClick={openForm} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
};

const CallToAction = ({ onRequest }) => (
  <section style={{ paddingTop: 24 }}>
    <div className="wrap">
      <div style={{
        background: "var(--ink)",
        color: "#fff", borderRadius: 28, padding: "64px 56px",
        display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "center",
        boxShadow: "var(--shadow-lg)", position: "relative", overflow: "hidden",
      }} className="cta-grid">
        <div aria-hidden style={{
          position: "absolute", right: -40, top: -40, opacity: .06,
        }}>
          <CraneMark size={320} color="#fff" accent="#fff"/>
        </div>
        <div style={{ position: "relative" }}>
          <h2 style={{ color: "#fff", fontSize: "clamp(32px, 4.2vw, 52px)", fontWeight: 800, lineHeight: 1.0, marginBottom: 16, letterSpacing: "-0.035em" }}>
            {t("cta.title1")}<br/>{t("cta.title2")}
          </h2>
          <p style={{ color: "rgba(255,255,255,.78)", fontSize: "calc(18px * var(--scale))", lineHeight: 1.5 }}>
            {t("cta.body")}
          </p>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "flex-end", position: "relative" }} className="cta-actions">
          <button className="btn btn-large btn-mint" onClick={onRequest}>
            {t("common.requestRide")} <Icon.arrow size={20}/>
          </button>
          <a href="tel:+4961511234567" className="btn btn-large" style={{ background: "rgba(255,255,255,.12)", color: "#fff", border: "1.5px solid rgba(255,255,255,.24)" }}>
            <Icon.phone size={20}/> {t("common.call")}
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .cta-grid { grid-template-columns: 1fr !important; padding: 40px 32px !important; }
          .cta-actions { justify-content: flex-start !important; }
        }
      `}</style>
    </div>
  </section>
);

const WhatsAppBubble = () => (
  <a href="https://wa.me/4961511234567" aria-label="WhatsApp" className="wa-bubble">
    <Icon.whatsapp size={28}/>
  </a>
);

const MobileCTABar = ({ onRequest }) => (
  <div className="mobile-cta-bar">
    <button className="btn btn-mint btn-large" onClick={onRequest}>
      {t("common.requestRide")} <Icon.arrow size={18}/>
    </button>
    <a href="https://wa.me/4961511234567" target="_blank" rel="noopener" aria-label="WhatsApp" className="wa-btn">
      <Icon.whatsapp size={26}/>
    </a>
  </div>
);

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