const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#1A56DB",
  "accent": "#1A56DB",
  "price": "47€",
  "headlineVariant": "trust"
}/*EDITMODE-END*/;

const HEADLINE_VARIANTS = {
  trust: {
    label: "Question",
    h1: <>Ton app est en ligne.<br /><span className="grad">Et maintenant ?</span></>,
    sub: (price) => <>Beaucoup de créateurs pensent que publier leur app suffit à attirer des utilisateurs. En réalité, c'est souvent là que le vrai lancement commence. Après Lancement t'aide à faire découvrir ton app aux premières bonnes personnes, obtenir des retours concrets, et comprendre quoi faire ensuite.</>
  },
  direct: {
    label: "Direct",
    h1: <>L'étape <span className="grad">qu'on oublie</span><br />après avoir publié son app.</>,
    sub: (price) => <>Tu as publié ton app. Personne ne sait encore qu'elle existe. On t'accompagne pour la faire découvrir aux premières bonnes personnes, simplement, sans jargon. Paiement unique de <span className="price">{price}</span>.</>
  },
  silence: {
    label: "Silence",
    h1: <>Ton app vient de sortir.<br /><span className="grad">Et c'est le silence.</span></>,
    sub: (price) => <>Ce n'est pas que ton app est mauvaise. C'est qu'elle n'a pas encore été montrée aux bonnes personnes. On t'aide à franchir cette étape, calmement, avec une méthode claire.</>
  }
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [formOpen, setFormOpen] = useS(false);
  const [initialDesc, setInitialDesc] = useS("");

  useE(() => {
    const root = document.documentElement;
    root.style.setProperty("--primary", t.primary);
    root.style.setProperty("--primary-2", t.primary);
    root.style.setProperty("--primary-deep", t.primary);
    root.style.setProperty("--primary-soft", t.primary + "14");
    root.style.setProperty("--accent", t.primary);
    root.style.setProperty("--accent-deep", t.primary);
  }, [t.primary]);

  const open = () => { setInitialDesc(""); setFormOpen(true); };
  const openWithDesc = (d) => { setInitialDesc(d); setFormOpen(true); };
  const close = () => setFormOpen(false);

  const variant = HEADLINE_VARIANTS[t.headlineVariant] || HEADLINE_VARIANTS.trust;

  return (
    <>
      <Nav onCTA={open} price={t.price} />
      <Hero onCTA={open} onSubmitDesc={openWithDesc} price={t.price} variant={variant} />
      <LiveStats onCTA={open} />
      <HowItWorks onCTA={open} />
      <Compare onCTA={open} />
      <Testimonials onCTA={open} />
      <Founder onCTA={open} />
      <Press />
      <Offer onCTA={open} price={t.price} />
      <FAQ onCTA={open} />
      <FinalCTA onCTA={open} price={t.price} />
      <Footer />

      {formOpen && <InteractiveForm onClose={close} price={t.price} initialDesc={initialDesc} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Identité visuelle" />
        <TweakColor
          label="Bleu primaire"
          value={t.primary}
          options={["#1A56DB", "#0A2540", "#2563EB", "#0F3FAB"]}
          onChange={(v) => setTweak("primary", v)}
        />
        <TweakSection label="Offre" />
        <TweakRadio
          label="Prix"
          value={t.price}
          options={["27€", "47€", "97€"]}
          onChange={(v) => setTweak("price", v)}
        />
        <TweakSection label="Headline" />
        <TweakSelect
          label="Variante"
          value={t.headlineVariant}
          options={Object.keys(HEADLINE_VARIANTS).map(k => ({ value: k, label: HEADLINE_VARIANTS[k].label }))}
          onChange={(v) => setTweak("headlineVariant", v)}
        />
        <TweakSection label="Démo" />
        <TweakButton label="Ouvrir le formulaire IA" onClick={open} />
      </TweaksPanel>
    </>
  );
}

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