// MLS Conseil — landing page main app
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9A961",
  "primaryHero": "v1",
  "showVariants": false,
  "density": "comfortable"
}/*EDITMODE-END*/;

// Cal.com — username vit sur cal.eu mais l'API embed reste app.cal.com.
// Le widget va chercher les dispos en live à chaque ouverture : aucun créneau
// figé côté code, la date du jour est toujours celle du visiteur.
const CAL_LINK = "mohamed-loones-aqzxwy/30-min-premier-rdv";

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

  const accent = tweaks.accent;
  const openBooking = () => {
    if (typeof window.Cal === "function") {
      window.Cal.ns.mls("modal", {
        calLink: CAL_LINK,
        config: { layout: "month_view" }
      });
    } else {
      // Fallback : si le script Cal n'a pas chargé, on ouvre la page directement.
      window.open(`https://cal.com/${CAL_LINK}`, "_blank", "noopener,noreferrer");
    }
  };

  // Pick the primary hero (the first one shown / canonical)
  const primary = tweaks.primaryHero;

  return (
    <div data-screen-label="MLS Conseil — Landing">
      <Nav onCTA={openBooking}/>

      {/* Hero variants — stacked, each clearly tagged */}
      {tweaks.showVariants && primary !== 'v1' && (
        <VariantTag n={1} title="Référence finance — dashboard flottant, ivoire/or"/>
      )}
      {(primary === 'v1' || tweaks.showVariants) && (
        <div data-screen-label="Hero — Variante 1: Sereinement">
          <HeroV1 accent={accent} onCTA={openBooking}/>
        </div>
      )}

      {tweaks.showVariants && (
        <>
          <VariantTag n={2} title="Centré éditorial — KPI grid sous le titre"/>
          <div data-screen-label="Hero — Variante 2: Contrôle">
            <HeroV2 accent={accent} onCTA={openBooking}/>
          </div>

          <VariantTag n={3} title="Asymétrique sombre — portrait + stat overlay"/>
          <div data-screen-label="Hero — Variante 3: Clarté">
            <HeroV3 accent={accent} onCTA={openBooking}/>
          </div>

          {/* Divider before the rest of the landing */}
          <div style={{maxWidth: 1240, margin:'0 auto', padding:'80px 32px 0'}}>
            <div style={{
              display:'flex', alignItems:'center', gap: 18,
              padding: 22,
              background:'#FBF7EE', border:'1px dashed #1B2A4E33',
              borderRadius: 18,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius:'50%',
                background:'#14223D', color:'#C9A961',
                display:'grid', placeItems:'center', fontFamily:'Geist Mono, monospace',
                fontSize: 12, fontWeight: 600
              }}>↓</div>
              <div style={{flex: 1}}>
                <div style={{fontSize: 14, fontWeight: 600, color:'#14223D'}}>Suite de la landing — corps de page commun aux 3 variantes</div>
                <div style={{fontSize: 12.5, color:'#4A5878', marginTop: 2}}>Services, conformité, bénéfices, témoignages, formulaire de contact.</div>
              </div>
            </div>
          </div>
        </>
      )}

      <Services accent={accent}/>
      <Conformite accent={accent}/>
      <Benefices accent={accent}/>
      <Stats accent={accent}/>
      <Pourquoi accent={accent}/>
      <Temoignages accent={accent}/>
      <FormCTA accent={accent} onCTA={openBooking}/>
      <Footer accent={accent}/>

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakColor
            label="Couleur d'accent"
            value={tweaks.accent}
            onChange={v=>setTweak('accent', v)}
            options={['#C9A961', '#A8884A', '#2F6B4F', '#1B3A5C', '#C46A5C']}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakToggle
            label="Afficher les 3 variantes"
            value={tweaks.showVariants}
            onChange={v=>setTweak('showVariants', v)}
            help="Désactivez pour ne montrer qu'une variante choisie comme hero principal."
          />
          {!tweaks.showVariants && (
            <TweakRadio
              label="Variante principale"
              value={tweaks.primaryHero}
              onChange={v=>setTweak('primaryHero', v)}
              options={[
                {value:'v1', label:'Sereinement'},
                {value:'v2', label:'Contrôle'},
                {value:'v3', label:'Clarté'},
              ]}
            />
          )}
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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